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

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { VerifyRegistrationOTP } from "@/queries/authentication";
import { Loader2 } from "lucide-react";
import Link from "next/link";
import { redirect, useSearchParams } from "next/navigation";
import { useActionState } from "react";

export default function VerifyRegistrationOTPForm({
	phone_number,
}: { phone_number: string }) {
	console.log("verification in OTP form", phone_number);

	const searchParams = useSearchParams();
	const mobile = searchParams.get("phone_number");
	if (!mobile) redirect("/auth/login");
	const [state, formAction, isPending] = useActionState(VerifyRegistrationOTP, {
		message: "",
		status: "",
	});

	return (
		<form
			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">
				<div className="flex flex-col gap-4">
					{state.status === "verify_success" ? (
						<p className="bg-green-100 dark:bg-dark-green-800 border border-green-900/50 text-green-700 rounded p-2 text-center text-sm">
							{state.message}
						</p>
					) : (
						<p className="bg-sarLinkOrange/50 border border-yellow-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm text-gray-900 dark:text-gray-300">
							Account verification OTP sent to [{phone_number}]
						</p>
					)}

					<Label htmlFor="otp-number" className="sr-only text-gray-500">
						Enter the OTP
					</Label>
					<input
						type="number"
						name="mobile"
						defaultValue={phone_number}
						hidden
					/>
					<Input
						disabled={isPending || state.status === "verify_error"}
						id="otp-number"
						name="otp"
						maxLength={6}
						type="number"
						placeholder="Enter OTP"
						className={cn(
							"bg-white text-black",
							state.status === "verify_success" && "hidden",
						)}
					/>
					{state?.status === "error" && (
						<p className="text-yellow-500 text-sm">{state.message}</p>
					)}
					{state.status === "verify_error" && (
						<p className="text-red-500 text-sm">{state.message}</p>
					)}
				</div>
				<Button
					className={cn(
						"w-full",
						state.status === "verify_success" && "hidden",
					)}
					disabled={isPending || state.status === "verify_error"}
					type="submit"
				>
					{isPending ? (
						<Loader2 className="animate-spin" />
					) : (
						"Request verification"
					)}
				</Button>
			</div>
			{state.status === "verify_success" && (
				<div className="mb-4 text-center text-sm">
					Go to{" "}
					<Link href="signin" className="underline">
						login
					</Link>
				</div>
			)}
		</form>
	);
}