From 8539d1e97ff9aac22e81881b37215bc148223157 Mon Sep 17 00:00:00 2001
From: DeepakGhenyar <deepak.2428cseai2445@kiet.edu>
Date: Fri, 15 May 2026 23:30:07 +0530
Subject: [PATCH 1/3] Enhance signup form validation and user feedback handling

---
 src/pages/Signup/Signup.tsx | 137 +++++++++++++++++++++++++-----------
 1 file changed, 95 insertions(+), 42 deletions(-)

diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index d03a921..c2583de 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import axios from "axios";
 import { useNavigate ,Link } from "react-router-dom";
-import { User, Mail, Lock } from "lucide-react";
+import { User, Mail, Lock,Eye,EyeOff } from "lucide-react";
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 interface SignUpFormData {
   username: string;
@@ -16,47 +16,74 @@ const SignUp: React.FC = () => {
     password: "" 
   });
   const [message, setMessage] = useState<string>("");
+  const [errors, setErrors] = useState({
+  username: "",
+  email: "",
+  password: "",
+});
+const [showPassword, setShowPassword] = useState(false);
 const navigate = useNavigate();
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const response = await axios.post(`${backendUrl}/api/auth/signup`,
-        formData // Include cookies for session
-      );
-      setMessage(response.data.message); // Show success message from backend
-
-      // Navigate to login page after successful signup
-      if (response.data.message === 'User created successfully') {
-        navigate("/login");}
-
-    
-    // // Simulate API call (replace with your actual backend integration)
-    // try {
-    //   // Mock successful signup
-    //   setMessage("Account created successfully! Redirecting to login...");
-      
-    //   // In your actual implementation, integrate with your backend here:
-    //   // const response = await fetch(`${backendUrl}/api/auth/signup`, {
-    //   //   method: 'POST',
-    //   //   headers: { 'Content-Type': 'application/json' },
-    //   //   body: JSON.stringify(formData)
-    //   // });
-      
-    //   setTimeout(() => {
-    //     // Navigate to login page in your actual implementation
-    //     console.log("Redirecting to login page...");
-    //   }, 2000);
-      
-    } catch (error) {
-      setMessage("Something went wrong. Please try again.");
+  const { name, value } = e.target;
+
+  setFormData({ ...formData, [name]: value });
+
+  let errorMessage = "";
+
+  if (name === "username") {
+    if (!value.trim()) {
+      errorMessage = "Username is required";
+    } else if (!/^[A-Za-z\s]+$/.test(value)) {
+      errorMessage = "Only letters are allowed";
+    }
+  }
+
+  if (name === "email") {
+    if (!value.trim()) {
+      errorMessage = "Email is required";
+    } else if (!/\S+@\S+\.\S+/.test(value)) {
+      errorMessage = "Enter a valid email";
     }
-  };
+  }
+
+  if (name === "password") {
+    if (!value.trim()) {
+      errorMessage = "Password is required";
+    } else if (
+      !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)
+    ) {
+      errorMessage =
+        "Password must be 8+ characters with letters and numbers";
+    }
+  }
+
+  setErrors((prev) => ({
+    ...prev,
+    [name]: errorMessage,
+  }));
+};
+    const handleSubmit = async (e: React.FormEvent) => {
+  e.preventDefault();
+
+  if (errors.username || errors.email || errors.password) {
+    return;
+  }
 
+  try {
+    const response = await axios.post(
+      `${backendUrl}/api/auth/signup`,
+      formData
+    );
+
+    setMessage(response.data.message);
+
+    if (response.data.message === "User created successfully") {
+      navigate("/login");
+    }
+  } catch (error) {
+    setMessage("Something went wrong. Please try again.");
+  }
+};
   return (
     <div className="relative h-screen w-screen bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 flex items-center justify-center px-4 overflow-hidden">
       {/* Background decorative elements */}
@@ -78,8 +105,8 @@ const navigate = useNavigate();
         {/* Sign Up Form */}
         <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 shadow-2xl">
           <h2 className="text-2xl font-semibold text-white text-center mb-8">Create Account</h2>
-          
           <div className="space-y-6">
+            <div>
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                 <User className="h-5 w-5 text-purple-300" />
@@ -93,8 +120,14 @@ const navigate = useNavigate();
                 required
                 className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
               />
+              </div>
+              {errors.username && (
+                <p className="text-red-300 text-sm mt-2">
+                  {errors.username}
+               </p>
+              )}
             </div>
-
+            <div>
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                 <Mail className="h-5 w-5 text-purple-300" />
@@ -108,14 +141,21 @@ const navigate = useNavigate();
                 required
                 className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
               />
+              </div>
+              {errors.email && (
+                <p className="text-red-300 text-sm mt-2">
+                  {errors.email}
+                </p>
+              )}
             </div>
-
+            
+            <div>
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                 <Lock className="h-5 w-5 text-purple-300" />
               </div>
               <input
-                type="password"
+                type={showPassword ? "text" : "password"}
                 name="password"
                 placeholder="Enter your password"
                 value={formData.password}
@@ -123,6 +163,19 @@ const navigate = useNavigate();
                 required
                 className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
               />
+              <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute inset-y-0 right-0 pr-4 flex items-center text-purple-300"
+              >
+                {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+              </button>
+              </div>
+              {errors.password && (
+                <p className="text-red-300 text-sm mt-2">
+                  {errors.password}
+                </p>
+              )}
             </div>
 
             <button

From aa21afb07e661b8e6696e9a667ca01fd3842acad Mon Sep 17 00:00:00 2001
From: DeepakGhenyar <deepak.2428cseai2445@kiet.edu>
Date: Sun, 17 May 2026 22:08:45 +0530
Subject: [PATCH 2/3] fix: update colors to black/white, fix accessibility and
 validation

---
 src/pages/Signup/Signup.tsx | 309 ++++++++++++++++++++----------------
 1 file changed, 169 insertions(+), 140 deletions(-)

diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index c2583de..8e83d09 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 import axios from "axios";
-import { useNavigate ,Link } from "react-router-dom";
-import { User, Mail, Lock,Eye,EyeOff } from "lucide-react";
+import { useNavigate, Link } from "react-router-dom";
+import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
+
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
 interface SignUpFormData {
   username: string;
   email: string;
@@ -10,197 +12,224 @@ interface SignUpFormData {
 }
 
 const SignUp: React.FC = () => {
-  const [formData, setFormData] = useState<SignUpFormData>({ 
-    username: "", 
-    email: "", 
-    password: "" 
+  const [formData, setFormData] = useState<SignUpFormData>({
+    username: "",
+    email: "",
+    password: "",
   });
   const [message, setMessage] = useState<string>("");
   const [errors, setErrors] = useState({
-  username: "",
-  email: "",
-  password: "",
-});
-const [showPassword, setShowPassword] = useState(false);
-const navigate = useNavigate();
+    username: "",
+    email: "",
+    password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  const { name, value } = e.target;
+    const { name, value } = e.target;
 
-  setFormData({ ...formData, [name]: value });
+    setFormData({ ...formData, [name]: value });
 
-  let errorMessage = "";
+    let errorMessage = "";
 
-  if (name === "username") {
-    if (!value.trim()) {
-      errorMessage = "Username is required";
-    } else if (!/^[A-Za-z\s]+$/.test(value)) {
-      errorMessage = "Only letters are allowed";
+    if (name === "username") {
+      if (!value.trim()) {
+        errorMessage = "Username is required";
+      } else if (!/^[A-Za-z\s]+$/.test(value)) {
+        errorMessage = "Only letters are allowed";
+      }
     }
-  }
 
-  if (name === "email") {
-    if (!value.trim()) {
-      errorMessage = "Email is required";
-    } else if (!/\S+@\S+\.\S+/.test(value)) {
-      errorMessage = "Enter a valid email";
-    }
-  }
-
-  if (name === "password") {
-    if (!value.trim()) {
-      errorMessage = "Password is required";
-    } else if (
-      !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)
-    ) {
-      errorMessage =
-        "Password must be 8+ characters with letters and numbers";
+    if (name === "email") {
+      if (!value.trim()) {
+        errorMessage = "Email is required";
+      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())) {
+        errorMessage = "Enter a valid email";
+      }
     }
-  }
 
-  setErrors((prev) => ({
-    ...prev,
-    [name]: errorMessage,
-  }));
-};
-    const handleSubmit = async (e: React.FormEvent) => {
-  e.preventDefault();
+    if (name === "password") {
+      if (!value.trim()) {
+        errorMessage = "Password is required";
+      } else if (
+        !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)
+      ) {
+        errorMessage = "Password must be 8+ characters with letters and numbers";
+      }
+    }
 
-  if (errors.username || errors.email || errors.password) {
-    return;
-  }
+    setErrors((prev) => ({
+      ...prev,
+      [name]: errorMessage,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const usernameError = !formData.username.trim()
+      ? "Username is required"
+      : !/^[A-Za-z\s]+$/.test(formData.username)
+      ? "Only letters are allowed"
+      : "";
+
+    const emailError = !formData.email.trim()
+      ? "Email is required"
+      : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())
+      ? "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"
+      : "";
+
+    if (usernameError || emailError || passwordError) {
+      setErrors({
+        username: usernameError,
+        email: emailError,
+        password: passwordError,
+      });
+      return;
+    }
 
-  try {
-    const response = await axios.post(
-      `${backendUrl}/api/auth/signup`,
-      formData
-    );
+    try {
+      const response = await axios.post(
+        `${backendUrl}/api/auth/signup`,
+        formData
+      );
 
-    setMessage(response.data.message);
+      setMessage(response.data.message);
 
-    if (response.data.message === "User created successfully") {
-      navigate("/login");
+      if (response.data.message === "User created successfully") {
+        navigate("/login");
+      }
+    } catch (error) {
+      setMessage("Something went wrong. Please try again.");
     }
-  } catch (error) {
-    setMessage("Something went wrong. Please try again.");
-  }
-};
-  return (
-    <div className="relative h-screen w-screen bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 flex items-center justify-center px-4 overflow-hidden">
-      {/* Background decorative elements */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-        <div className="absolute -bottom-40 -left-32 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-      </div>
+  };
 
+  return (
+    <div className="relative h-screen w-screen bg-white dark:bg-black flex items-center justify-center px-4 overflow-hidden">
       <div className="relative w-full max-w-md">
         {/* Logo and Title */}
         <div className="text-center mb-8">
-           <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-  <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
-</div>
-          <h1 className="text-4xl font-bold text-white mb-2">GitHubTracker</h1>
-          <p className="text-purple-200 text-lg">Join your GitHub journey</p>
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
+            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+          </div>
+          <h1 className="text-4xl font-bold text-black dark:text-white mb-2">GitHubTracker</h1>
+          <p className="text-gray-600 dark:text-gray-300 text-lg">Join your GitHub journey</p>
         </div>
 
         {/* Sign Up Form */}
-        <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 shadow-2xl">
-          <h2 className="text-2xl font-semibold text-white text-center mb-8">Create Account</h2>
+        <div className="bg-white dark:bg-gray-900 rounded-3xl p-8 border border-gray-200 dark:border-gray-700 shadow-2xl">
+          <h2 className="text-2xl font-semibold text-black dark:text-white text-center mb-8">
+            Create Account
+          </h2>
           <div className="space-y-6">
+
+            {/* Username */}
             <div>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <User className="h-5 w-5 text-purple-300" />
-              </div>
-              <input
-                type="text"
-                name="username"
-                placeholder="Enter your username"
-                value={formData.username}
-                onChange={handleChange}
-                required
-                className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
-              />
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <User className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="text"
+                  name="username"
+                  placeholder="Enter your username"
+                  value={formData.username}
+                  onChange={handleChange}
+                  required
+                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                />
               </div>
               {errors.username && (
-                <p className="text-red-300 text-sm mt-2">
-                  {errors.username}
-               </p>
+                <p className="text-red-500 text-sm mt-2">{errors.username}</p>
               )}
             </div>
+
+            {/* Email */}
             <div>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Mail className="h-5 w-5 text-purple-300" />
-              </div>
-              <input
-                type="email"
-                name="email"
-                placeholder="Enter your email"
-                value={formData.email}
-                onChange={handleChange}
-                required
-                className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
-              />
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="Enter your email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                />
               </div>
               {errors.email && (
-                <p className="text-red-300 text-sm mt-2">
-                  {errors.email}
-                </p>
+                <p className="text-red-500 text-sm mt-2">{errors.email}</p>
               )}
             </div>
-            
+
+            {/* Password */}
             <div>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Lock className="h-5 w-5 text-purple-300" />
-              </div>
-              <input
-                type={showPassword ? "text" : "password"}
-                name="password"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
-              />
-              <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute inset-y-0 right-0 pr-4 flex items-center text-purple-300"
-              >
-                {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-              </button>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type={showPassword ? "text" : "password"}
+                  name="password"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  required
+                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                  aria-pressed={showPassword}
+                  className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                >
+                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                </button>
               </div>
               {errors.password && (
-                <p className="text-red-300 text-sm mt-2">
-                  {errors.password}
-                </p>
+                <p className="text-red-500 text-sm mt-2">{errors.password}</p>
               )}
             </div>
 
+            {/* Submit Button */}
             <button
               onClick={handleSubmit}
-              className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold py-4 rounded-2xl hover:from-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transform hover:scale-105 transition-all duration-300 shadow-lg"
+              className="w-full bg-black dark:bg-white text-white dark:text-black font-semibold py-4 rounded-2xl hover:bg-gray-800 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all duration-300 shadow-lg"
             >
               Create Account
             </button>
           </div>
 
           {message && (
-            <div className={`text-center mt-6 p-3 rounded-xl ${
-              message.includes('successfully') 
-                ? 'text-green-300 bg-green-500/20' 
-                : 'text-red-300 bg-red-500/20'
-            }`}>
+            <div
+              className={`text-center mt-6 p-3 rounded-xl ${
+                message.includes("successfully")
+                  ? "text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/20"
+                  : "text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900/20"
+              }`}
+            >
               {message}
             </div>
           )}
 
           <div className="text-center mt-8">
-            <p className="text-purple-200">
-              Already have an account?{' '}
+            <p className="text-gray-600 dark:text-gray-300">
+              Already have an account?{" "}
               <Link to="/login" className="inline-flex items-center">
-                <button className="text-purple-300 hover:text-white font-medium transition-colors duration-300">
+                <button className="text-black dark:text-white hover:underline font-medium transition-colors duration-300">
                   Sign in here
                 </button>
               </Link>
@@ -212,4 +241,4 @@ const navigate = useNavigate();
   );
 };
 
-export default SignUp;
\ No newline at end of file
+export default SignUp;

From cdfd4adee0b2caba7c3865fdb15cc0bc4806aff7 Mon Sep 17 00:00:00 2001
From: DeepakGhenyar <deepak.2428cseai2445@kiet.edu>
Date: Sun, 17 May 2026 22:21:45 +0530
Subject: [PATCH 3/3] fix: resolve conflicts, add ThemeContext, fix validation
 and accessibility

---
 src/pages/Signup/Signup.tsx | 159 +++++++++++-------------------------
 1 file changed, 47 insertions(+), 112 deletions(-)

diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 8e83d09..41745db 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -1,7 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
+import { motion } from "framer-motion";
 import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
+import { ThemeContext } from "../../context/ThemeContext";
+import type { ThemeContextType } from "../../context/ThemeContext";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -24,15 +27,15 @@ const SignUp: React.FC = () => {
     password: "",
   });
   const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const { mode } = themeContext;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-
     setFormData({ ...formData, [name]: value });
-
     let errorMessage = "";
-
     if (name === "username") {
       if (!value.trim()) {
         errorMessage = "Username is required";
@@ -40,7 +43,6 @@ const SignUp: React.FC = () => {
         errorMessage = "Only letters are allowed";
       }
     }
-
     if (name === "email") {
       if (!value.trim()) {
         errorMessage = "Email is required";
@@ -48,194 +50,127 @@ const SignUp: React.FC = () => {
         errorMessage = "Enter a valid email";
       }
     }
-
     if (name === "password") {
       if (!value.trim()) {
         errorMessage = "Password is required";
-      } else if (
-        !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)
-      ) {
+      } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)) {
         errorMessage = "Password must be 8+ characters with letters and numbers";
       }
     }
-
-    setErrors((prev) => ({
-      ...prev,
-      [name]: errorMessage,
-    }));
+    setErrors((prev) => ({ ...prev, [name]: errorMessage }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-
     const usernameError = !formData.username.trim()
       ? "Username is required"
       : !/^[A-Za-z\s]+$/.test(formData.username)
       ? "Only letters are allowed"
       : "";
-
     const emailError = !formData.email.trim()
       ? "Email is required"
       : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())
       ? "Enter a valid email"
       : "";
-
     const passwordError = !formData.password.trim()
       ? "Password is required"
-      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(
-          formData.password
-        )
+      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)
       ? "Password must be 8+ characters with letters and numbers"
       : "";
-
     if (usernameError || emailError || passwordError) {
-      setErrors({
-        username: usernameError,
-        email: emailError,
-        password: passwordError,
-      });
+      setErrors({ username: usernameError, email: emailError, password: passwordError });
       return;
     }
-
+    setIsLoading(true);
     try {
-      const response = await axios.post(
-        `${backendUrl}/api/auth/signup`,
-        formData
-      );
-
+      const response = await axios.post(`${backendUrl}/api/auth/signup`, formData);
       setMessage(response.data.message);
-
       if (response.data.message === "User created successfully") {
         navigate("/login");
       }
-    } catch (error) {
-      setMessage("Something went wrong. Please try again.");
+    } catch (error: any) {
+      setMessage(error.response?.data?.message || "Something went wrong. Please try again.");
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <div className="relative h-screen w-screen bg-white dark:bg-black flex items-center justify-center px-4 overflow-hidden">
-      <div className="relative w-full max-w-md">
-        {/* Logo and Title */}
-        <div className="text-center mb-8">
+    <div className={`relative h-screen w-screen flex items-center justify-center px-4 overflow-hidden ${mode === "dark" ? "bg-black" : "bg-white"}`}>
+      <div className="relative w-full max-w-md px-6">
+        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="text-center mb-10">
           <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
             <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
           </div>
-          <h1 className="text-4xl font-bold text-black dark:text-white mb-2">GitHubTracker</h1>
-          <p className="text-gray-600 dark:text-gray-300 text-lg">Join your GitHub journey</p>
-        </div>
+          <h1 className={`text-4xl font-bold mb-2 ${mode === "dark" ? "text-white" : "text-black"}`}>GitHubTracker</h1>
+          <p className={`text-lg font-medium ${mode === "dark" ? "text-slate-300" : "text-gray-700"}`}>Join your GitHub journey</p>
+        </motion.div>
 
-        {/* Sign Up Form */}
-        <div className="bg-white dark:bg-gray-900 rounded-3xl p-8 border border-gray-200 dark:border-gray-700 shadow-2xl">
-          <h2 className="text-2xl font-semibold text-black dark:text-white text-center mb-8">
-            Create Account
-          </h2>
-          <div className="space-y-6">
+        <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }} className={`rounded-3xl 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"}`}>Create Account</h2>
 
-            {/* Username */}
+          <form onSubmit={handleSubmit} className="space-y-6">
             <div>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <User className="h-5 w-5 text-gray-400" />
                 </div>
-                <input
-                  type="text"
-                  name="username"
-                  placeholder="Enter your username"
-                  value={formData.username}
-                  onChange={handleChange}
-                  required
-                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                <input type="text" name="username" placeholder="Enter your username" value={formData.username} onChange={handleChange} required
+                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
               </div>
-              {errors.username && (
-                <p className="text-red-500 text-sm mt-2">{errors.username}</p>
-              )}
+              {errors.username && <p className="text-red-500 text-sm mt-2">{errors.username}</p>}
             </div>
 
-            {/* Email */}
             <div>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <Mail className="h-5 w-5 text-gray-400" />
                 </div>
-                <input
-                  type="email"
-                  name="email"
-                  placeholder="Enter your email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  required
-                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                <input type="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} required
+                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
               </div>
-              {errors.email && (
-                <p className="text-red-500 text-sm mt-2">{errors.email}</p>
-              )}
+              {errors.email && <p className="text-red-500 text-sm mt-2">{errors.email}</p>}
             </div>
 
-            {/* Password */}
             <div>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <Lock className="h-5 w-5 text-gray-400" />
                 </div>
-                <input
-                  type={showPassword ? "text" : "password"}
-                  name="password"
-                  placeholder="Enter your password"
-                  value={formData.password}
-                  onChange={handleChange}
-                  required
-                  className="w-full pl-12 pr-4 py-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-2xl text-black dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300"
+                <input type={showPassword ? "text" : "password"} name="password" placeholder="Enter your password" value={formData.password} onChange={handleChange} required
+                  className={`w-full pl-12 pr-12 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  aria-label={showPassword ? "Hide password" : "Show password"}
-                  aria-pressed={showPassword}
-                  className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
-                >
-                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                <button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword}
+                  className={`absolute inset-y-0 right-0 pr-4 flex items-center transition-colors duration-200 ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-500 hover:text-gray-800"}`}>
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                 </button>
               </div>
-              {errors.password && (
-                <p className="text-red-500 text-sm mt-2">{errors.password}</p>
-              )}
+              {errors.password && <p className="text-red-500 text-sm mt-2">{errors.password}</p>}
             </div>
 
-            {/* Submit Button */}
-            <button
-              onClick={handleSubmit}
-              className="w-full bg-black dark:bg-white text-white dark:text-black font-semibold py-4 rounded-2xl hover:bg-gray-800 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all duration-300 shadow-lg"
-            >
-              Create Account
+            <button type="submit" disabled={isLoading}
+              className={`w-full font-semibold py-4 rounded-2xl focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all duration-300 shadow-lg ${mode === "dark" ? "bg-white text-black hover:bg-gray-100" : "bg-black text-white hover:bg-gray-800"} ${isLoading ? "opacity-60 cursor-not-allowed" : ""}`}>
+              {isLoading ? "Creating Account..." : "Create Account"}
             </button>
-          </div>
+          </form>
 
           {message && (
-            <div
-              className={`text-center mt-6 p-3 rounded-xl ${
-                message.includes("successfully")
-                  ? "text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/20"
-                  : "text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900/20"
-              }`}
-            >
+            <div className={`text-center mt-6 p-3 rounded-xl ${message.includes("successfully") ? "text-green-600 bg-green-100" : "text-red-600 bg-red-100"}`}>
               {message}
             </div>
           )}
 
           <div className="text-center mt-8">
-            <p className="text-gray-600 dark:text-gray-300">
+            <p className={mode === "dark" ? "text-gray-300" : "text-gray-600"}>
               Already have an account?{" "}
-              <Link to="/login" className="inline-flex items-center">
-                <button className="text-black dark:text-white hover:underline font-medium transition-colors duration-300">
-                  Sign in here
-                </button>
+              <Link to="/login" className={`font-medium hover:underline transition-colors duration-300 ${mode === "dark" ? "text-white" : "text-black"}`}>
+                Sign in here
               </Link>
             </p>
           </div>
-        </div>
+        </motion.div>
       </div>
     </div>
   );