sarlink-portal/components/auth/verify-otp-form.tsx

"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>
	);
}