fix: resolve conflicts, add ThemeContext, fix validation and accessibility

Author: Deepakchwdhry

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,218 +27,150 @@ 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";
       } 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.trim())) {
         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>
   );