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

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