mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-23 09:42:19 +00:00
i701
0322bee567
- Updated login and signup pages to include session checks and redirection based on user authentication status. - Introduced QueryProvider for managing server state in the application. - Enhanced user experience by integrating session management in the devices and payments dashboard. - Added new user management features with role-based access control in the sidebar. - Created new components for user devices and payments, improving the overall structure and maintainability of the dashboard. - Implemented a table component for better data presentation in user-related views.
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { authClient } from "@/lib/auth-client";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Loader } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTransition } from "react";
|
|
import { type SubmitHandler, useForm } from "react-hook-form";
|
|
import { toast } from "sonner";
|
|
import { z } from "zod";
|
|
const OTPSchema = z.object({
|
|
pin: z.string().min(6, {
|
|
message: "Your one-time password must be 6 characters.",
|
|
}),
|
|
});
|
|
|
|
export default function VerifyOTPForm({
|
|
phone_number,
|
|
}: { phone_number: string }) {
|
|
const [isPending, startTransition] = useTransition();
|
|
const router = useRouter();
|
|
console.log("verification in OTP form", phone_number);
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<z.infer<typeof OTPSchema>>({
|
|
defaultValues: {
|
|
pin: "",
|
|
},
|
|
resolver: zodResolver(OTPSchema),
|
|
});
|
|
|
|
const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
|
|
startTransition(async () => {
|
|
const isVerified = await authClient.phoneNumber.verify({
|
|
phoneNumber: phone_number,
|
|
code: data.pin,
|
|
});
|
|
console.log({ isVerified });
|
|
if (!isVerified.error) {
|
|
router.push("/devices");
|
|
} else {
|
|
toast.error(isVerified.error.message);
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="bg-white dark:bg-gray-900 w-full max-w-xs rounded-lg shadow my-4"
|
|
>
|
|
<div className="grid pb-4 pt-4 gap-4 px-4">
|
|
<div className="">
|
|
<Label htmlFor="otp-number" className="text-gray-500">
|
|
Enter the OTP
|
|
</Label>
|
|
<Input
|
|
disabled={isPending}
|
|
id="otp-number"
|
|
{...register("pin")}
|
|
type="text"
|
|
/>
|
|
{errors.pin && (
|
|
<p className="text-red-500 text-sm">{errors.pin.message}</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
className="dark:bg-gray-800 w-full dark:text-white"
|
|
disabled={isPending}
|
|
type="submit"
|
|
>
|
|
{isPending ? <Loader className="animate-spin" /> : "Login"}
|
|
</Button>
|
|
</div>
|
|
<div className="mb-4 text-center text-sm">
|
|
Go back to{" "}
|
|
<Link href="login" className="underline">
|
|
login
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|