[feat] implented confirm password

app/(auth)/login/page.tsx

@@ -30,6 +30,7 @@ export default function Login() {
         value={email}
         placeholder="Email"
       />
+      {/* Email input*/}
       <input
         type="password"
         name="password"
@@ -39,7 +40,8 @@ export default function Login() {
       />
       <button type="button" onClick={handleLogin}>
         Sign in
-      </button>
+      </button>{' '}
+      {/* Sign in button */}
     </>
   );
 }

app/(auth)/signup/page.tsx

@@ -1,24 +1,73 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuth } from '../../../utils/AuthProvider';
+import PasswordComplexity from '@/components/PasswordComplexity';
+import PasswordInput from '@/components/PasswordInput';
+import { useAuth } from '@/utils/AuthProvider';
 
 export default function SignUp() {
   const { signUp } = useAuth();
   const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const router = useRouter();
+  const [password, setPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [passwordError, setPasswordError] = useState('');
+  const [passwordComplexityError, setPasswordComplexityError] = useState<
+    string | null
+  >(null);
+  const [passwordComplexity, setPasswordComplexity] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  // Handles input to password
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newPassword = e.target.value;
+    setPassword(newPassword);
+    validatePasswords(newPassword, confirmPassword);
+    validatePasswordComplexity(newPassword);
+  };
+
+  // Handles input to confirm password
+  const handleConfirmPasswordChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newConfirmPassword = e.target.value;
+    setConfirmPassword(newConfirmPassword);
+    validatePasswords(password, newConfirmPassword);
+  };
+
+  // Checks if passwords match and sets error
+  const validatePasswords = (
+    password: string | null,
+    confirmPassword: string | null,
+  ) => {
+    if (password !== confirmPassword) {
+      setPasswordError('Passwords do not match.');
+    } else {
+      setPasswordError(''); // Clear error when passwords match
+    }
+  };
+
+  // Set password complexity error if requirements are not met
+  const validatePasswordComplexity = (password: string | null) => {
+    const hasLowerCase = /[a-z]/.test(password || '');
+    const hasNumber = /\d/.test(password || '');
+    const longEnough = (password || '').length >= 8;
+
+    if (password && hasLowerCase && hasNumber && longEnough) {
+      setPasswordComplexity(true);
+      setPasswordComplexityError(null); // Clear error if all conditions are met
+    } else if (password) {
+      setPasswordComplexity(false);
+      setPasswordComplexityError('Password must meet complexity requirements');
+    } else {
+      setPasswordComplexity(false);
+      setPasswordComplexityError(null); // Clear error if password is empty
+    }
+  };
 
   const handleSignUp = async () => {
-    // Define handleSignUp
-    try {
+    if (password) {
       await signUp(email, password);
-      router.push('/');
-    } catch (error) {
-      if (error instanceof Error) {
-        console.error(error.message);
-      }
     }
   };
 
@@ -30,24 +79,45 @@ export default function SignUp() {
         value={email}
         placeholder="Email"
       />
-      <input
-        type="password"
-        name="password"
-        onChange={e => setPassword(e.target.value)}
+      {/* Email input*/}
+      <PasswordInput
         value={password}
+        onChange={handlePasswordChange}
         placeholder="Password"
+        isVisible={showPassword}
+        toggleVisibility={() => setShowPassword(!showPassword)}
+        name="password"
       />
-      <input
-        type="password"
-        name="Confirm Password"
-        onChange={e => setPassword(e.target.value)}
-        value={password}
+      {/* Password input with toggle visibility */}
+      <PasswordInput
+        value={confirmPassword}
+        onChange={handleConfirmPasswordChange}
         placeholder="Confirm Password"
+        isVisible={showConfirmPassword}
+        toggleVisibility={() => setShowConfirmPassword(!showConfirmPassword)}
+        name="confirmPassword"
       />
-      <button type="button" onClick={handleSignUp}>
+      {/* Confirm password input with toggle visibility */}
+      <button
+        type="button"
+        onClick={handleSignUp}
+        disabled={!email || !!passwordError || !!passwordComplexityError}
+      >
         Sign up
       </button>{' '}
       {/* Sign up button */}
+      {confirmPassword && passwordError && (
+        <p style={{ color: 'red' }}>{passwordError}</p>
+      )}
+      {/* Conditional password validation error message */}
+      <PasswordComplexity
+        password={password || ''} // Set default value if password is null
+      />
+      {/* Password complexity requirements */}
+      {password && !passwordComplexity && passwordComplexityError && (
+        <p style={{ color: 'red' }}>{passwordComplexityError}</p>
+      )}
+      {/* Password complexity error message */}
     </>
   );
 }

components/PasswordComplexity.tsx

@@ -0,0 +1,26 @@
+export default function PasswordComplexity({ password }: { password: string }) {
+  // Display requirements if there is input
+  if (password.length > 0) {
+    return (
+      <div>
+        <Requirement
+          met={/[a-z]/.test(password)}
+          text="At least 1 lowercase character"
+        />
+        <Requirement met={/\d/.test(password)} text="At least 1 number" />
+        <Requirement met={password.length >= 8} text="At least 8 characters" />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+// Helper component to display each requirement with conditional styling
+function Requirement({ met, text }: { met: boolean; text: string }) {
+  return (
+    <p style={{ color: met ? 'green' : 'red' }}>
+      {met ? '✓' : '✗'} {text}
+    </p>
+  );
+}

components/PasswordInput.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface PasswordInputProps {
+  value: string | null;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  isVisible: boolean;
+  toggleVisibility: () => void;
+  name: string;
+}
+
+const PasswordInput: React.FC<PasswordInputProps> = ({
+  value,
+  onChange,
+  placeholder,
+  isVisible,
+  toggleVisibility,
+  name,
+}) => {
+  return (
+    <div style={{ position: 'relative' }}>
+      <input
+        type={isVisible ? 'text' : 'password'}
+        name={name}
+        onChange={onChange}
+        value={value || ''}
+        placeholder={placeholder}
+      />
+      <button type="button" onClick={toggleVisibility}>
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+    </div>
+  );
+};
+
+export default PasswordInput;