From 36cf5b65faa155aaf7bafaa3d94e6ba50971a3eb Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Thu, 25 Dec 2025 23:09:10 -0500
Subject: [PATCH] improved email verification experience wording

---
 .../emails/emailVerificationToUser.html       |  2 +-
 .../src/components/VerificationCodeModal.tsx  | 26 ++++++++---------
 frontend/src/pages/VerifyEmail.tsx            | 29 ++++++++++++-------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/backend/templates/emails/emailVerificationToUser.html b/backend/templates/emails/emailVerificationToUser.html
index bdc21df..46b9327 100644
--- a/backend/templates/emails/emailVerificationToUser.html
+++ b/backend/templates/emails/emailVerificationToUser.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Verify Your Email - Village Share</title>
+    <title>Verify Your Email</title>
     <style>
       /* Reset styles */
       body,
diff --git a/frontend/src/components/VerificationCodeModal.tsx b/frontend/src/components/VerificationCodeModal.tsx
index be401c0..9b0f0f9 100644
--- a/frontend/src/components/VerificationCodeModal.tsx
+++ b/frontend/src/components/VerificationCodeModal.tsx
@@ -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>
 
diff --git a/frontend/src/pages/VerifyEmail.tsx b/frontend/src/pages/VerifyEmail.tsx
index 1ce78b0..baf4ea6 100644
--- a/frontend/src/pages/VerifyEmail.tsx
+++ b/frontend/src/pages/VerifyEmail.tsx
@@ -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>
                 </>