feat: update signup and OTP verification forms to enhance error handling and state management

actions/auth-actions.ts

@@ -77,9 +77,25 @@ export async function signin(previousState: ActionState, formData: FormData) {
 }
 
 export type ActionState = {
-	message: string;
+	status?: string;
-	status: string;
 	payload?: FormData;
+	errors?: z.typeToFlattenedError<
+		{
+			id_card: string;
+			phone_number: string;
+			name: string;
+			atoll_id: string;
+			island_id: string;
+			address: string;
+			dob: Date;
+			terms: string;
+			policy: string;
+			accNo: string;
+		},
+		string
+	>;
+	db_error?: string;
+	error?: string;
 };
 
 export async function signup(_actionState: ActionState, formData: FormData) {
@@ -119,11 +135,12 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 			db_error: "phone_number",
 		};
 	}
+
 	const [signupError, signupResponse] = await tryCatch(
 		backendRegister({
 			payload: {
-				firstname: parsedData.data.name,
+				firstname: parsedData.data.name.split(" ")[0],
-				lastname: parsedData.data.name,
+				lastname: parsedData.data.name.split(" ")[1],
 				username: parsedData.data.phone_number,
 				address: parsedData.data.address,
 				id_card: parsedData.data.id_card,
@@ -141,39 +158,11 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 		throw new Error(signupError.message);
 	}
 	console.log("SIGNUP RESPONSE", signupResponse);
-	// 	if (!isValidPerson) {
-	// 		await SendUserRejectionDetailSMS({
-	// 			details: `
-	// 			A new user has requested for verification. \n
-	// USER DETAILS:
-	// Name: ${parsedData.data.name}
-	// Address: ${parsedData.data.address}
-	// ID Card: ${parsedData.data.id_card}
-	// DOB: ${parsedData.data.dob.toLocaleDateString("en-US", {
-	// 				month: "short",
-	// 				day: "2-digit",
-	// 				year: "numeric",
-	// 			})}
-	// ACC No: ${parsedData.data.accNo}\n\nVerify the user with the following link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
-	// 			`,
-	// 			phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
-	// 		});
-	// return {
-	// 	message:
-	// 		"Your account has been requested for verification. Please wait for a response from admin.",
-	// 	payload: formData,
-	// 	db_error: "invalidPersonValidation",
-	// };
 
-	// if (isValidPerson) {
-	// 	await authClient.phoneNumber.sendOtp({
-	// 		phoneNumber: newUser.phoneNumber,
-	// 	});
-	// }
 	redirect(
 		`/auth/verify-otp-registration?phone_number=${encodeURIComponent(signupResponse.t_username)}`,
 	);
-	return { message: "User created successfully" };
+	return { message: "User created successfully", error: "success" };
 }
 
 export const sendOtp = async (phoneNumber: string, code: string) => {

components/auth/signup-form.tsx

@@ -34,6 +34,9 @@ export default function SignUpForm() {
 
 	const [actionState, action, isPending] = React.useActionState(signup, {
 		message: "",
+		db_error: "",
+		errors: undefined,
+		payload: new FormData(),
 	});
 
 	React.useEffect(() => {

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

@@ -4,11 +4,9 @@ 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 { redirect, useRouter, useSearchParams } from "next/navigation";
+import { redirect, useSearchParams } from "next/navigation";
 import { useActionState } from "react";
 
 export default function VerifyRegistrationOTPForm({
@@ -42,7 +40,6 @@ export default function VerifyRegistrationOTPForm({
 						type="number"
 						name="mobile"
 						defaultValue={phone_number}
-						value={phone_number}
 						hidden
 					/>
 					<Input