wip

Author: Urbanmisfit90

src/components/Auth/FormField.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Eye, EyeOff } from 'lucide-react'; // Assuming lucide-react for icons
+
+const FormField = ({
+  id,
+  name,
+  type,
+  value,
+  onChange,
+  placeholder,
+  error,
+  // icon: IconComponent, // Removed as Mail icon was removed from SignUp
+  isPasswordToggle = false,
+  showPassword = false,
+  togglePasswordVisibility,
+  inputClassName, // Class for the <input> element itself
+  containerClassName, // Class for the outer <div> container
+  ...rest // For other props like 'required'
+}) => {
+  // Determine the actual input type (text/password) based on toggle state
+  const inputType = isPasswordToggle ? (showPassword ? "text" : "password") : type;
+
+  return (
+    // Use containerClassName if provided, otherwise a generic one or empty string
+    <div className={containerClassName || (isPasswordToggle ? "password-input-container" : "")}>
+      <input
+        id={id}
+        name={name}
+        type={inputType}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={inputClassName}
+        {...rest}
+      />
+      {/* Icon for password toggle */}
+      {isPasswordToggle && (
+        <button
+          type="button" // Important: Prevents button from submitting the form
+          onClick={togglePasswordVisibility}
+          className="password-toggle-icon-button"
+          aria-label={showPassword ? `Hide ${name} password` : `Show ${name} password`}
+          data-testid={`${name}-toggle`} // Good for testing
+        >
+          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </button>
+      )}
+      {/* Error message */}
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default FormField;

src/components/Auth/PasswordRequirementsList.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const PasswordRequirementsList = ({ requirements }) => {
+  return (
+    <div className="password-composition-list mt-2">
+      <p className={`text-sm flex items-center ${requirements.minLength ? "text-green-600" : "text-red-600"}`}>
+        {requirements.minLength ? '✓' : '✗'}{" "}8 Characters
+      </p>
+      <p className={`text-sm flex items-center ${requirements.hasUppercase ? "text-green-600" : "text-red-600"}`}>
+        {requirements.hasUppercase ? '✓' : '✗'}{" "}1 Uppercase Letter
+      </p>
+      <p className={`text-sm flex items-center ${requirements.hasLowercase ? "text-green-600" : "text-red-600"}`}>
+        {requirements.hasLowercase ? '✓' : '✗'}{" "}1 Lowercase Letter
+      </p>
+      <p className={`text-sm flex items-center ${requirements.hasNumber ? "text-green-600" : "text-red-600"}`}>
+        {requirements.hasNumber ? '✓' : '✗'}{" "}1 Number
+      </p>
+      <p className={`text-sm flex items-center ${requirements.hasSymbol ? "text-green-600" : "text-red-600"}`}>
+        {requirements.hasSymbol ? '✓' : '✗'}{" "}1 Symbol
+      </p>
+    </div>
+  );
+};
+
+export default PasswordRequirementsList;

src/components/Auth/SignIn.js

@@ -1,16 +1,21 @@
 import React, { useState } from "react";
-import { Eye, EyeOff, Mail } from "lucide-react";
-import InputField from "./shared/InputField";
-import { useNavigate } from 'react-router-dom'; // <-- Import useNavigate
+import { FaEye, FaEyeSlash } from "react-icons/fa";
+import { Mail } from "lucide-react";
+import { useNavigate } from 'react-router-dom';
+import "../../styles/auth.css";
+
+const isStrongPassword = (password) => {
+  // At least one lowercase, uppercase, digit, symbol, min 8 char
+  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
+  return regex.test(password);
+};
 
-// Remove onSwitchToSignUp from props
 const SignIn = ({ onAuthSuccess }) => {
   const [formData, setFormData] = useState({ email: "", password: "" });
   const [showPassword, setShowPassword] = useState(false);
   const [errors, setErrors] = useState({});
   const [isLoading, setIsLoading] = useState(false);
-
-  const navigate = useNavigate(); // <-- Initialize useNavigate
+  const navigate = useNavigate();
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
@@ -20,12 +25,19 @@ const SignIn = ({ onAuthSuccess }) => {
     }
   };
 
+  const validateEmail = (email) =>
+    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
   const handleSubmit = async () => {
     const newErrors = {};
     if (!formData.email) newErrors.email = 'Email is required';
-    else if (!formData.email.includes('@')) newErrors.email = 'Invalid email';
+    else if (!validateEmail(formData.email)) newErrors.email = 'Invalid email';
 
     if (!formData.password) newErrors.password = 'Password is required';
+    else if (!isStrongPassword(formData.password)) {
+      newErrors.password = 
+        'Password must be at least 8 characters, include uppercase, lowercase, number, and symbol.';
+    }
 
     setErrors(newErrors);
 
@@ -34,100 +46,103 @@ const SignIn = ({ onAuthSuccess }) => {
       setTimeout(() => {
         setIsLoading(false);
         alert('Sign in successful!');
-        onAuthSuccess();
-        // The App.js's handleAuthSuccess now calls navigate('/')
-        // So you don't need navigate here unless you want to override it.
-        // For clarity, keep the navigation in App.js.
+        onAuthSuccess && onAuthSuccess();
       }, 1500);
     }
   };
 
   return (
-    <div className="auth-wrapper min-h-screen bg-white flex items-center justify-center p-4">
-      <div className="auth-card bg-white rounded-xl shadow-2xl p-8 max-w-md w-full">
+    <div className="auth-wrapper">
+      <div className="auth-card">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome Back
-          </h1>
-          <p className="text-gray-600">Sign in to your account</p>
+          <h1>Welcome Back</h1>
+          <p>Please enter your email and password to Login</p>
         </div>
 
         <form
+          className="auth-form"
           onSubmit={(e) => {
             e.preventDefault();
             handleSubmit();
           }}
         >
           <div className="space-y-6">
-            {/* Email Input */}
-            <InputField
-              icon={Mail}
-              id="signin-email"
-              name="email"
-              type="email"
-              value={formData.email}
-              onChange={handleInputChange}
-              error={errors.email}
-              placeholder="Email Address"
-            />
-
-            {/* Password Field with Toggle Button */}
-            <div>
-              <label
-                htmlFor="signin-password"
-                className="block text-sm font-medium text-gray-700 mb-2"
-              >
-                Password
-              </label>
-              <div className="flex items-center">
-                <input
-                  id="signin-password"
-                  name="password"
-                  type={showPassword ? "text" : "password"}
-                  value={formData.password}
-                  onChange={handleInputChange}
-                  placeholder="Enter your password"
-                  className="flex-1 h-12 px-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="w-10 h-10 px-2 bg-green-700 text-white rounded-md ml-2 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center justify-center"
-                  aria-label={showPassword ? "Hide password" : "Show password"}
-                >
-                  {showPassword ? (
-                    <EyeOff className="h-4 w-4" />
-                  ) : (
-                    <Eye className="h-4 w-4" />
-                  )}
-                </button>
-              </div>
 
+            {/* EMAIL INPUT */}
+            <div className="email-input-container">
+              <input
+                id="signin-email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                placeholder="Email"
+                className="login-email"
+                required
+              />
+              <Mail className="email-icon-right" />
+              {errors.email && (
+                <p className="mt-1 text-sm text-red-600">{errors.email}</p>
+              )}
+            </div>
+
+            {/* PASSWORD INPUT */}
+            <div className="password-input-container">
+              <input
+                id="signin-password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                value={formData.password}
+                onChange={handleInputChange}
+                placeholder="Password"
+                className="login-password"
+                required
+              />
+              <span
+                className="password-icon"
+                onClick={() => setShowPassword(!showPassword)}
+                role="button"
+                aria-label="Toggle password visibility"
+                tabIndex={0}
+                onKeyDown={(e) =>
+                  e.key === 'Enter' && setShowPassword(!showPassword)
+                }
+                data-testid="password-toggle"
+              >
+                {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+              </span>
               {errors.password && (
                 <p className="mt-1 text-sm text-red-600">{errors.password}</p>
               )}
             </div>
 
-            {/* Submit Button */}
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full bg-green-700 text-white py-3 px-4 rounded-lg hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+              className="auth-submit-button"
             >
-              {isLoading ? "Signing in..." : "Sign In"}
+              {isLoading ? "Signing in..." : "Login"}
             </button>
           </div>
         </form>
 
         <div className="mt-8 text-center">
+          <button
+            type="button"
+            onClick={() => navigate('/forgotpassword')}
+            className="forgot-password"
+          >
+            Forgot password?
+          </button>
+
           <p className="text-sm text-gray-600">
-            Don&#39;t have an account?{" "}
+            Don&#39;t have an account?{' '}
             <button
               type="button"
-              onClick={() => navigate('/signup')} // <-- Use navigate
-              className="text-green-700 hover:text-green-600 font-medium focus:outline-none"
+              onClick={() => navigate('/signup')}
+              className="link-button"
             >
-              Sign up
+              Register
             </button>
           </p>
         </div>
@@ -136,4 +151,4 @@ const SignIn = ({ onAuthSuccess }) => {
   );
 };
 
-export default SignIn;
+export default SignIn;