Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved email verification experience wording

Browse Source
This commit is contained in:
jackiettran
2025-12-25 23:09:10 -05:00
parent 4f85243815
commit 36cf5b65fa
3 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/VerificationCodeModal.tsx
View File

@@ -42,14 +42,6 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
}
}, [show]);
// Clear resend success message after 3 seconds
useEffect(() => {
if (resendSuccess) {
const timer = setTimeout(() => setResendSuccess(false), 3000);
return () => clearTimeout(timer);
}
}, [resendSuccess]);
const handleInputChange = (index: number, value: string) => {
// Only allow digits
if (value && !/^\d$/.test(value)) return;
@@ -58,6 +50,7 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
newCode[index] = value;
setCode(newCode);
setError("");
setResendSuccess(false);
// Auto-advance to next input
if (value && index < 5) {
@@ -92,6 +85,7 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
const handleVerify = async (verificationCode: string) => {
setLoading(true);
setError("");
setResendSuccess(false);
try {
await authAPI.verifyEmail(verificationCode);
@@ -101,11 +95,13 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
} catch (err: any) {
const errorData = err.response?.data;
if (errorData?.code === "TOO_MANY_ATTEMPTS") {
setError("Too many attempts. Please request a new code.");
setError("Too many attempts. Please request a new code below.");
} else if (errorData?.code === "VERIFICATION_EXPIRED") {
setError("Code expired. Please request a new one.");
setError("Code expired. Please request a new code below.");
} else if (errorData?.code === "VERIFICATION_INVALID") {
setError("Invalid code. Please check and try again.");
setError(
"That code didn't match. Please try again or request a new code below."
);
} else {
setError(errorData?.error || "Verification failed. Please try again.");
}
@@ -187,7 +183,9 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
{code.map((digit, index) => (
<input
key={index}
ref={(el) => { inputRefs.current[index] = el; }}
ref={(el) => {
inputRefs.current[index] = el;
}}
type="text"
inputMode="numeric"
maxLength={1}
@@ -229,10 +227,10 @@ const VerificationCodeModal: React.FC<VerificationCodeModalProps> = ({
disabled={resending || resendCooldown > 0}
>
{resendCooldown > 0
? `Resend in ${resendCooldown}s`
? `Send in ${resendCooldown}s`
: resending
? "Sending..."
: "Resend Code"}
: "Send Code"}
</button>
</div>

29
frontend/src/pages/VerifyEmail.tsx
View File

@@ -100,26 +100,34 @@ const VerifyEmail: React.FC = () => {
switch (code) {
case "VERIFICATION_EXPIRED":
setError("Your verification code has expired. Please request a new one.");
setError(
"Your verification code has expired. Please request a new code below."
);
setShowManualEntry(true);
break;
case "VERIFICATION_INVALID":
setError("Invalid verification code. Please check and try again.");
setError(
"That code didn't match. Please try again or request a new code below."
);
setShowManualEntry(true);
break;
case "TOO_MANY_ATTEMPTS":
setError("Too many attempts. Please request a new code.");
setError("Too many attempts. Please request a new code below.");
setShowManualEntry(true);
break;
case "ALREADY_VERIFIED":
setError("Your email is already verified.");
break;
case "NO_CODE":
setError("No verification code found. Please request a new one.");
setError(
"No verification code found. Please request a new code below."
);
setShowManualEntry(true);
break;
default:
setError(errorData?.error || "Failed to verify email. Please try again.");
setError(
errorData?.error || "Failed to verify email. Please try again."
);
setShowManualEntry(true);
}
};
@@ -294,7 +302,9 @@ const VerifyEmail: React.FC = () => {
{code.map((digit, index) => (
<input
key={index}
ref={(el) => { inputRefs.current[index] = el; }}
ref={(el) => {
inputRefs.current[index] = el;
}}
type="text"
inputMode="numeric"
maxLength={1}
@@ -343,7 +353,7 @@ const VerifyEmail: React.FC = () => {
? `Resend in ${resendCooldown}s`
: resending
? "Sending..."
: "Resend Code"}
: "Send Code"}
</button>
</div>
@@ -351,10 +361,7 @@ const VerifyEmail: React.FC = () => {
Check your spam folder if you don't see the email.
</p>
<Link
to="/"
className="btn btn-outline-secondary mt-3"
>
<Link to="/" className="btn btn-outline-secondary mt-3">
Return to Home
</Link>
</>