feat: implement user registration and OTP verification flow with backend integration

components/auth/login-form.tsx

@@ -33,15 +33,9 @@ export default function LoginForm() {
 						<p className="text-red-500 text-sm">{state.message}</p>
 					)}
 					<Button className="" disabled={isPending} type="submit">
-						{isPending ? <Loader2 className="animate-spin" /> : "Request OTP"}
+						{isPending ? <Loader2 className="animate-spin" /> : "Login"}
 					</Button>
 				</div>
-				{/* <div className="mt-2 text-center text-sm">
-					Don&apos;t have an account?{" "}
-					<Link href="signup" className="underline">
-						Sign up
-					</Link>
-				</div> */}
 			</div>
 		</form>
 	);

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

@@ -0,0 +1,97 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+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.",
+	}),
+});
+
+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);
+			}
+		});
+	};
+
+	return (
+		<form
+			onSubmit={handleSubmit(onSubmit)}
+			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">
+				<div className="flex flex-col gap-4">
+					<p className="bg-green-100 dark:bg-sarLinkOrange/50 border border-green-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm">
+						Please enter the OTP sent to your mobile number [{phone_number}] to
+						verify and complete your registration
+					</p>
+					<Label htmlFor="otp-number" className="sr-only text-gray-500">
+						Enter the OTP
+					</Label>
+					<Input
+						disabled={isPending}
+						id="otp-number"
+						{...register("pin")}
+						type="text"
+						placeholder="Enter OTP"
+						className="bg-white text-black"
+					/>
+					{errors.pin && (
+						<p className="text-red-500 text-sm">{errors.pin.message}</p>
+					)}
+				</div>
+				<Button className="w-full" disabled={isPending} type="submit">
+					{isPending ? (
+						<Loader2 className="animate-spin" />
+					) : (
+						"Request verification"
+					)}
+				</Button>
+			</div>
+			<div className="mb-4 text-center text-sm">
+				Go back to{" "}
+				<Link href="signin" className="underline">
+					login
+				</Link>
+			</div>
+		</form>
+	);
+}