From 348ea606a122094e426aa000571df1dd66399725 Mon Sep 17 00:00:00 2001
From: Tanish Solanki <solankitanish2007@gmail.com>
Date: Tue, 26 May 2026 08:40:11 +0530
Subject: [PATCH] fix: align frontend auth validation with backend

---
 backend/validators/authValidator.js |  6 +--
 src/pages/Signup/Signup.tsx         | 66 +++++++++++++----------------
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/backend/validators/authValidator.js b/backend/validators/authValidator.js
index ab4dac07..4fd9fac6 100644
--- a/backend/validators/authValidator.js
+++ b/backend/validators/authValidator.js
@@ -6,8 +6,8 @@ const signupSchema = z.object({
         .min(3, "Username must be at least 3 characters long")
         .max(30, "Username must be at most 30 characters long")
         .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores")
-        ,
-    
+    ,
+
     email: z.string()
         .trim()
         .toLowerCase()
@@ -18,7 +18,7 @@ const signupSchema = z.object({
         .min(8, "Password must be at least 8 characters long")
         .max(100, "Password must be at most 100 characters long")
         .regex(
-            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
+            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}+$/,
             'Password must contain uppercase, lowercase, number, and special character'
         ),
 });
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 2ac51dcc..d862756b 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -39,8 +39,8 @@ const SignUp: React.FC = () => {
     if (name === "username") {
       if (!value.trim()) {
         errorMessage = "Username is required";
-      } else if (!/^[A-Za-z\s]+$/.test(value)) {
-        errorMessage = "Only letters are allowed";
+      } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
+        errorMessage = "Username can contain only letters, numbers, and underscores";
       }
     }
     if (name === "email") {
@@ -65,18 +65,18 @@ const SignUp: React.FC = () => {
     const usernameError = !formData.username.trim()
       ? "Username is required"
       : !/^[A-Za-z\s]+$/.test(formData.username)
-      ? "Only letters are allowed"
-      : "";
+        ? "Only letters are allowed"
+        : "";
     const emailError = !formData.email.trim()
       ? "Email is required"
       : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())
-      ? "Enter a valid email"
-      : "";
+        ? "Enter a valid email"
+        : "";
     const passwordError = !formData.password.trim()
       ? "Password is required"
       : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)
-      ? "Password must be 8+ characters with letters and numbers"
-      : "";
+        ? "Password must be 8+ characters with letters and numbers"
+        : "";
     if (usernameError || emailError || passwordError) {
       setErrors({ username: usernameError, email: emailError, password: passwordError });
       return;
@@ -101,32 +101,27 @@ const SignUp: React.FC = () => {
 
   return (
     <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
-        mode === "dark"
-          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
-          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-      }`}
+      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${mode === "dark"
+        ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+        : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
+        }`}
     >
       <div className="absolute inset-0">
         <div
-          className={`absolute -top-40 -right-40 w-96 h-96 ${
-            mode === "dark" ? "bg-purple-500" : "bg-purple-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute -bottom-40 -left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-blue-500" : "bg-blue-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute top-40 left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-pink-500" : "bg-pink-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
-            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
-          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
+          className={`absolute top-1/2 right-1/4 w-64 h-64 ${mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
+            } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
         />
       </div>
 
@@ -148,17 +143,15 @@ const SignUp: React.FC = () => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
-          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${
-            mode === "dark"
-              ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
-              : "bg-white border-gray-200 text-black"
-          }`}
+          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark"
+            ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
+            : "bg-white border-gray-200 text-black"
+            }`}
         >
-          
+
           <h2
-            className={`text-2xl font-bold text-center mb-8 ${
-              mode === "dark" ? "text-white" : "text-gray-800"
-            }`}
+            className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"
+              }`}
           >
             Create Account
           </h2>
@@ -231,9 +224,8 @@ const SignUp: React.FC = () => {
       </div>
 
       <div
-        className={`${
-          mode === "dark" ? "from-slate-900" : "from-slate-100"
-        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
+        className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"
+          } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
       />
     </div>
   );