From 2a32470758b4c3fcc1296bfad8df85ca6f54b303 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Tue, 23 Dec 2025 23:08:22 -0500
Subject: [PATCH] text changes, error styling, navbar menu styling

---
 backend/middleware/validation.js              |  4 +-
 backend/routes/auth.js                        |  6 +--
 frontend/public/index.html                    |  2 +-
 frontend/src/components/AuthModal.tsx         | 38 ++++++++++++++++---
 .../src/components/ForgotPasswordModal.tsx    | 18 +++++++--
 5 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/backend/middleware/validation.js b/backend/middleware/validation.js
index 6e5530c..8235b6f 100644
--- a/backend/middleware/validation.js
+++ b/backend/middleware/validation.js
@@ -81,7 +81,7 @@ const validateRegistration = [
     .withMessage("Password must be between 8 and 128 characters")
     .matches(passwordStrengthRegex)
     .withMessage(
-      "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
+      "Password does not meet requirements"
     )
     .custom((value) => {
       if (commonPasswords.includes(value.toLowerCase())) {
@@ -275,7 +275,7 @@ const validateResetPassword = [
     .withMessage("Password must be between 8 and 128 characters")
     .matches(passwordStrengthRegex)
     .withMessage(
-      "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
+      "Password does not meet requirements"
     )
     .custom((value) => {
       if (commonPasswords.includes(value.toLowerCase())) {
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 974fc48..1077fab 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -206,8 +206,7 @@ router.post(
 
       if (!user) {
         return res.status(401).json({
-          error:
-            "Unable to log in. Please check your email and password, or create an account.",
+          error: "Please check your email and password, or create an account.",
         });
       }
 
@@ -226,8 +225,7 @@ router.post(
         // Increment login attempts
         await user.incLoginAttempts();
         return res.status(401).json({
-          error:
-            "Unable to log in. Please check your email and password, or create an account.",
+          error: "Please check your email and password, or create an account.",
         });
       }
 
diff --git a/frontend/public/index.html b/frontend/public/index.html
index e39260a..fe060ef 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -10,7 +10,7 @@
       content="Village Share - Life is too expensive. Rent or borrow from your neighbors"
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Village Share - Community Rental Marketplace</title>
+    <title>Village Share</title>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
       rel="stylesheet"
diff --git a/frontend/src/components/AuthModal.tsx b/frontend/src/components/AuthModal.tsx
index b88c6d7..a3c2550 100644
--- a/frontend/src/components/AuthModal.tsx
+++ b/frontend/src/components/AuthModal.tsx
@@ -112,9 +112,32 @@ const AuthModal: React.FC<AuthModalProps> = ({
 
   const handleEmailSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setLoading(true);
     setError("");
 
+    // Custom validation to match app's error styling
+    if (mode === "signup") {
+      if (!firstName.trim()) {
+        setError("Please enter your first name");
+        return;
+      }
+      if (!lastName.trim()) {
+        setError("Please enter your last name");
+        return;
+      }
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!email.trim()) {
+      setError("Please enter your email address");
+      return;
+    }
+    if (!emailRegex.test(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setLoading(true);
+
     try {
       if (mode === "login") {
         await login(email, password);
@@ -132,7 +155,10 @@ const AuthModal: React.FC<AuthModalProps> = ({
         // Don't call onHide() - keep modal context for verification
       }
     } catch (err: any) {
-      setError(err.response?.data?.error || "An error occurred");
+      // Show first specific validation error if available, otherwise generic error
+      const details = err.response?.data?.details;
+      const specificError = details?.[0]?.message;
+      setError(specificError || err.response?.data?.error || "An error occurred");
     } finally {
       setLoading(false);
     }
@@ -202,7 +228,6 @@ const AuthModal: React.FC<AuthModalProps> = ({
                           className="form-control"
                           value={firstName}
                           onChange={(e) => setFirstName(e.target.value)}
-                          required
                         />
                       </div>
                       <div className="col">
@@ -212,7 +237,6 @@ const AuthModal: React.FC<AuthModalProps> = ({
                           className="form-control"
                           value={lastName}
                           onChange={(e) => setLastName(e.target.value)}
-                          required
                         />
                       </div>
                     </div>
@@ -222,11 +246,12 @@ const AuthModal: React.FC<AuthModalProps> = ({
                 <div className="mb-3">
                   <label className="form-label">Email</label>
                   <input
-                    type="email"
+                    type="text"
                     className="form-control"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    required
+                    placeholder="name@example.com"
+                    autoComplete="email"
                   />
                 </div>
 
@@ -298,6 +323,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
                     className="text-primary text-decoration-none"
                     onClick={(e) => {
                       e.preventDefault();
+                      setError("");
                       setMode(mode === "login" ? "signup" : "login");
                     }}
                   >
diff --git a/frontend/src/components/ForgotPasswordModal.tsx b/frontend/src/components/ForgotPasswordModal.tsx
index 2936dfe..2b2aa19 100644
--- a/frontend/src/components/ForgotPasswordModal.tsx
+++ b/frontend/src/components/ForgotPasswordModal.tsx
@@ -25,9 +25,21 @@ const ForgotPasswordModal: React.FC<ForgotPasswordModalProps> = ({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setLoading(true);
     setError("");
 
+    // Custom email validation to match app's error styling
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!email.trim()) {
+      setError("Please enter your email address");
+      return;
+    }
+    if (!emailRegex.test(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setLoading(true);
+
     try {
       await authAPI.forgotPassword(email);
       setSuccess(true);
@@ -124,12 +136,12 @@ const ForgotPasswordModal: React.FC<ForgotPasswordModalProps> = ({
                     <div className="mb-3">
                       <label className="form-label">Email Address</label>
                       <input
-                        type="email"
+                        type="text"
                         className="form-control"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                         placeholder="your@email.com"
-                        required
+                        autoComplete="email"
                       />
                     </div>