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

actions/auth-actions.ts

@@ -1,7 +1,8 @@
 "use server";
 
 import { signUpFormSchema } from "@/lib/schemas";
-import { checkIdOrPhone } from "@/queries/authentication";
+import { backendRegister, checkIdOrPhone } from "@/queries/authentication";
+import { tryCatch } from "@/utils/tryCatch";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 const formSchema = z.object({
@@ -117,22 +118,28 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 			db_error: "phone_number",
 		};
 	}
-
+	const [signupError, signupResponse] = await tryCatch(
-	// const newUser = await prisma.user.create({
+		backendRegister({
-	// 	data: {
+			payload: {
-	// 		name: parsedData.data.name,
+				firstname: parsedData.data.name,
-	// 		islandId: parsedData.data.island_id,
+				lastname: parsedData.data.name,
-	// 		atollId: parsedData.data.atoll_id,
+				username: parsedData.data.phone_number,
-	// 		address: parsedData.data.address,
+				address: parsedData.data.address,
-	// 		id_card: parsedData.data.id_card,
+				id_card: parsedData.data.id_card,
-	// 		dob: new Date(parsedData.data.dob),
+				dob: new Date(parsedData.data.dob).toISOString().split("T")[0],
-	// 		role: "USER",
+				mobile: parsedData.data.phone_number,
-	// 		accNo: parsedData.data.accNo,
+				island: Number.parseInt(parsedData.data.island_id),
-	// 		phoneNumber: parsedData.data.phone_number,
+				atoll: Number.parseInt(parsedData.data.atoll_id),
-	// 	},
+				acc_no: parsedData.data.accNo,
-	// });
+				terms_accepted: parsedData.data.terms,
-	// const isValidPerson = await VerifyUserDetails({ user: newUser });
+				policy_accepted: parsedData.data.policy,
-
+			},
+		}),
+	);
+	if (signupError) {
+		throw new Error(signupError.message);
+	}
+	console.log("SIGNUP RESPONSE", signupResponse);
 	// 	if (!isValidPerson) {
 	// 		await SendUserRejectionDetailSMS({
 	// 			details: `
@@ -162,9 +169,9 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 	// 		phoneNumber: newUser.phoneNumber,
 	// 	});
 	// }
-	// redirect(
+	redirect(
-	// 	`/verify-otp?phone_number=${encodeURIComponent(newUser.phoneNumber)}`,
+		`/auth/verify-otp-registration?phone_number=${encodeURIComponent(signupResponse.t_username)}`,
-	// );
+	);
 	return { message: "User created successfully" };
 }
 

app/(auth)/auth/verify-otp-registration/page.tsx

@@ -0,0 +1,34 @@
+import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
+import Image from "next/image";
+import { redirect } from "next/navigation";
+import React from "react";
+
+export default async function VerifyRegistrationOTP({
+	searchParams,
+}: {
+	searchParams: Promise<{ phone_number: string }>;
+}) {
+	const phone_number = (await searchParams).phone_number;
+	if (!phone_number) {
+		return redirect("/login");
+	}
+	console.log(
+		"phone number from server page params (verify otp page)",
+		phone_number,
+	);
+
+	return (
+		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
+			<div className="flex flex-col items-center justify-center w-full h-full ">
+				<Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
+				<div className="mt-4 flex flex-col items-center justify-center">
+					<h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4>
+					<p className="text-gray-500">
+						Pay for your devices and track your bills.
+					</p>
+				</div>
+				<VerifyRegistrationOTPForm phone_number={phone_number} />
+			</div>
+		</div>
+	);
+}

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

queries/authentication.ts

@@ -1,6 +1,7 @@
 "use server";
-import type { TAuthUser } from "@/lib/types/user";
+import type { TAuthUser, User } from "@/lib/types/user";
 import axiosInstance from "@/utils/axiosInstance";
+import { handleApiResponse } from "@/utils/tryCatch";
 
 export async function login({
 	password,
@@ -51,7 +52,6 @@ export async function checkIdOrPhone({
 	id_card,
 	phone_number,
 }: { id_card?: string; phone_number?: string }) {
-	console.log("id_card and phone_number", { id_card, phone_number });
 	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/filter/?id_card=${id_card}&mobile=${phone_number}`,
 		{
@@ -64,3 +64,31 @@ export async function checkIdOrPhone({
 	const data = await response.json();
 	return data;
 }
+
+type TSignupUser = Pick<
+	User,
+	"username" | "address" | "mobile" | "id_card" | "dob"
+> & {
+	firstname: string;
+	lastname: string;
+	atoll: number;
+	island: number;
+	acc_no: string;
+	terms_accepted: boolean;
+	policy_accepted: boolean;
+};
+export async function backendRegister({ payload }: { payload: TSignupUser }) {
+	console.log("backendRegister payload", payload);
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/register/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(payload),
+		},
+	);
+	console.log("backendRegister response", response);
+	return handleApiResponse<{ t_username: string }>(response, "backendRegister");
+}