feat: implement AuthLayout component and streamline OTP verification forms with enhanced messaging

app/(auth)/auth/layout.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+export default function AuthLayout({
+	children,
+}: { children: React.ReactNode }) {
+	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-sarLinkOrange dark:text-gray-400">
+						SAR Link Portal
+					</h4>
+					<p className="text-gray-400">
+						Pay for your devices and track your bills.
+					</p>
+				</div>
+				{children}
+			</div>
+		</div>
+	);
+}

app/(auth)/auth/signin/page.tsx

@@ -2,18 +2,5 @@ import LoginForm from "@/components/auth/login-form";
 import Image from "next/image";
 
 export default async function LoginPage() {
-	return (
+	return <LoginForm />;
-		<div className="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>
-				<LoginForm />
-			</div>
-		</div>
-	);
 }

app/(auth)/auth/signup/page.tsx

@@ -13,25 +13,5 @@ export default async function SignupPage({
 		return redirect("/auth/login");
 	}
 
-	return (
+	return <SignUpForm />;
-		<div className="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
-					priority
-					alt="Sar Link Logo"
-					src="/logo.png"
-					width={100}
-					height={100}
-					style={{ width: "auto", height: "auto" }}
-				/>
-				<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>
-				<SignUpForm />
-			</div>
-		</div>
-	);
 }

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

@@ -26,18 +26,5 @@ export default async function VerifyRegistrationOTP({
 		return <ClientErrorMessage message={error.message} />;
 	}
 	if (response.otp_verified) redirect("/auth/signin");
-	return (
+	return <VerifyRegistrationOTPForm phone_number={phone_number} />;
-		<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>
-	);
 }

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

@@ -17,18 +17,5 @@ export default async function VerifyOTP({
 		phone_number,
 	);
 
-	return (
+	return <VerifyOTPForm phone_number={phone_number} />;
-		<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>
-				<VerifyOTPForm phone_number={phone_number} />
-			</div>
-		</div>
-	);
 }

components/auth/verify-otp-form.tsx

@@ -61,6 +61,9 @@ export default function VerifyOTPForm({
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
 				<div className="flex flex-col gap-4">
+					<p className="text-center text-sm text-sarLinkOrange">
+						Login OTP Sent to {phone_number}
+					</p>
 					<Label htmlFor="otp-number" className="sr-only text-gray-500">
 						Enter the OTP
 					</Label>
@@ -70,7 +73,7 @@ export default function VerifyOTPForm({
 						{...register("pin")}
 						type="text"
 						placeholder="Enter OTP"
-						className="bg-white dark:bg-sarLinkOrange/10"
+						className="bg-white dark:bg-black"
 					/>
 					{errors.pin && (
 						<p className="text-red-500 text-sm">{errors.pin.message}</p>
@@ -81,9 +84,9 @@ export default function VerifyOTPForm({
 				</Button>
 			</div>
 			<div className="mb-4 text-center text-sm">
-				Go back to{" "}
+				Change{" "}
 				<Link href="signin" className="underline">
-					login
+					phone number
 				</Link>
 			</div>
 		</form>

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

@@ -36,8 +36,7 @@ export default function VerifyRegistrationOTPForm({
 						</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">
-							Please enter the OTP sent to your mobile number [{phone_number}]
+							Account verification OTP sent to [{phone_number}]
-							to verify and complete your registration.
 						</p>
 					)}
 
@@ -84,12 +83,14 @@ export default function VerifyRegistrationOTPForm({
 					)}
 				</Button>
 			</div>
-			<div className="mb-4 text-center text-sm">
+			{state.status === "verify_success" && (
-				Go back to{" "}
+				<div className="mb-4 text-center text-sm">
-				<Link href="signin" className="underline">
+					Go to{" "}
-					login
+					<Link href="signin" className="underline">
-				</Link>
+						login
-			</div>
+					</Link>
+				</div>
+			)}
 		</form>
 	);
 }

queries/authentication.ts

@@ -199,7 +199,9 @@ export async function VerifyRegistrationOTP(
 		// }
 	}
 	return {
-		message: "Your account could not be verified. Please contact support.",
+		message:
+			data.message ||
+			"Your account could not be verified. Please contact support.",
 		status: "verify_error",
 	};
 }