registration verification WIP

components/auth/verify-registration-otp-form.tsx

@@ -3,58 +3,30 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { VerifyRegistrationOTP } from "@/queries/authentication";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
-import { useRouter, useSearchParams } 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: "OTP is required.",
-	}),
-});
+import { redirect, useRouter, useSearchParams } from "next/navigation";
+import { useActionState } from "react";
 
 export default function VerifyRegistrationOTPForm({
 	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 searchParams = useSearchParams();
-	const callbackUrl = searchParams.get("callbackUrl") || "/dashboard";
 
-	const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
-		startTransition(async () => {
-			const nextAuth = await signIn("credentials", {
-				pin: data.pin,
-				callbackUrl,
-				redirect: false,
-			});
-			if (!nextAuth?.error) {
-				router.push("/devices");
-			} else {
-				toast.error(JSON.parse(nextAuth?.error ?? "").message);
-			}
-		});
-	};
+	const searchParams = useSearchParams();
+	const mobile = searchParams.get("phone_number");
+	if (!mobile) redirect("/auth/login");
+	const [state, formAction, isPending] = useActionState(VerifyRegistrationOTP, {
+		message: "",
+		status: "",
+	});
 
 	return (
 		<form
-			onSubmit={handleSubmit(onSubmit)}
+			action={formAction}
 			className="w-full max-w-xs bg-white dark:bg-sarLinkOrange/10 title-bg border rounded-lg shadow my-4"
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
@@ -66,16 +38,24 @@ export default function VerifyRegistrationOTPForm({
 					<Label htmlFor="otp-number" className="sr-only text-gray-500">
 						Enter the OTP
 					</Label>
+					<input
+						type="number"
+						name="mobile"
+						defaultValue={phone_number}
+						value={phone_number}
+						hidden
+					/>
 					<Input
 						disabled={isPending}
 						id="otp-number"
-						{...register("pin")}
-						type="text"
+						name="otp"
+						maxLength={6}
+						type="number"
 						placeholder="Enter OTP"
 						className="bg-white text-black"
 					/>
-					{errors.pin && (
-						<p className="text-red-500 text-sm">{errors.pin.message}</p>
+					{state?.status === "error" && (
+						<p className="text-red-500 text-sm">{state.message}</p>
 					)}
 				</div>
 				<Button className="w-full" disabled={isPending} type="submit">