fix: enhance verification feedback in VerifyRegistrationOTP function and update UI messages
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m46s

This commit is contained in:
i701 2025-04-18 19:34:29 +05:00
parent e0e3de064a
commit 3703b3e8fc
Signed by: i701
GPG Key ID: 54A0DA1E26D8E587
2 changed files with 37 additions and 24 deletions

View File

@ -3,6 +3,7 @@
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";
@ -29,10 +30,17 @@ export default function VerifyRegistrationOTPForm({
>
<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>
{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">
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>
@ -49,7 +57,10 @@ export default function VerifyRegistrationOTPForm({
maxLength={6}
type="number"
placeholder="Enter OTP"
className="bg-white text-black"
className={cn(
"bg-white text-black",
state.status === "verify_success" && "hidden",
)}
/>
{state?.status === "error" && (
<p className="text-yellow-500 text-sm">{state.message}</p>
@ -59,7 +70,10 @@ export default function VerifyRegistrationOTPForm({
)}
</div>
<Button
className="w-full"
className={cn(
"w-full",
state.status === "verify_success" && "hidden",
)}
disabled={isPending || state.status === "verify_error"}
type="submit"
>

View File

@ -180,27 +180,26 @@ export async function VerifyRegistrationOTP(
};
}
if (userVerified.verified) {
const [mobileLoginError, mobileLoginResponse] = await tryCatch(
backendMobileLogin({ mobile: mobile as string }),
);
if (mobileLoginError) {
return {
message: "Login Failed. Please contact support.",
status: "login_error",
};
}
if (mobileLoginResponse) {
redirect(`/auth/verify-otp?phone_number=${mobile}`);
}
} else {
return {
message: "Your account could not be verified. Please contact support.",
status: "verify_error",
message:
"Your account has been successfully verified! You may login now.",
status: "verify_success",
};
// const [mobileLoginError, mobileLoginResponse] = await tryCatch(
// backendMobileLogin({ mobile: mobile as string }),
// );
// if (mobileLoginError) {
// return {
// message: "Login Failed. Please contact support.",
// status: "login_error",
// };
// }
// if (mobileLoginResponse) {
// redirect(`/auth/verify-otp?phone_number=${mobile}`);
// }
}
return {
message: data.message,
status: response.status === 200 ? "success" : "error",
message: "Your account could not be verified. Please contact support.",
status: "verify_error",
};
}