1 files changed, 125 insertions, 0 deletions
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..35ed0aa
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,125 @@
+'use client';
+import { useState, useEffect, useContext } from 'react';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../../services/firebase';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { AuthContext } from '../components/AuthContext'
+
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isValidEmail, setIsValidEmail] = useState(false);
+  const [isValidPassword, setIsValidPassword] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(true);
+  const router = useRouter()
+  const user = useContext(AuthContext);
+
+  useEffect(() => {
+    // Check if user is authenticated
+    if (!user) {
+      // Redirect or perform any necessary action
+    } else {
+      // User is authenticated, continue with desired logic
+      router.push('/profiles');
+    }
+  }, [user]);
+
+  useEffect(() => {
+    debounce(emailValidation());
+  }, [email]);
+
+  useEffect(() => {
+    debounce(passwordValidation());
+  }, [password]);
+
+  const emailValidation = () => {
+    const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+    if (!email || emailRegex.test(email) === false) {
+      setIsValidEmail(false);
+      return false;
+    }
+    setIsValidEmail(true);
+    return true;
+  };
+
+  const passwordValidation = () => {
+    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/i;
+
+    if (!password || passwordRegex.test(password) === false) {
+      setIsValidPassword(false)
+      return false
+    }
+    setIsValidPassword(true)
+    return true
+  }
+
+  const debounce = fn => {
+    let id = null;
+
+    return (...args) => {
+      if (id) {
+        clearTimeout(id);
+      }
+      id = setTimeout(() => {
+        fn(...args);
+        id = null;
+      }, 300);
+    };
+  };
+
+  const loginUser = () => {
+    if (isValidEmail && isValidPassword) {
+      signInWithEmailAndPassword(auth, email, password)
+        .then(data => {console.log(data.user)
+        
+          console.log('User signed in successfully!');
+              router.push('/profiles');
+
+        }) 
+          // Navigate to the home screen or other desired screen
+        .catch(error => {
+          console.error(error);
+          // Display an error message to the user
+        });
+    }
+  };
+
+  return (
+    <div className='text-white flex flex-col items-center justify-center h-screen'>
+      <h1 className='text-2xl font-bold mb-6'>Login</h1>
+      <form className='w-64' onSubmit={e => {
+        e.preventDefault();
+        loginUser();
+      }}>
+        <div className='mb-4'>
+          <label htmlFor='email' className='block font-medium mb-1'>Email:</label>
+          <input type="email" id='email' className='text-black w-full px-3 py-2 border rounded' value={email} onChange={e => setEmail(e.target.value)} />
+        </div>
+        <div className='mb-4'>
+          <label htmlFor="password" className='block font-medium mb-1'>Password:</label>
+          <input type='password' id='password' className='text-black w-full px-3 py-2 border rounded' value={password} onChange={e => setPassword(e.target.value)} />
+        </div>
+            <button type="submit" className='w-full py-2 bg-red-600 text-white font-medium rounded'>
+              Login
+            </button>
+      </form>
+
+       <div className="mt-4">
+         Don't have an account?{' '}
+               <Link href='../register' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
+                 <p>Create account</p>
+               </Link>
+       </div>
+
+       <div className="mt-2">
+         Forgot your password?{' '}
+               <Link href='../password-recovery' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
+                 <p>Recover</p>
+               </Link>
+       </div>
+    </div>
+  );
+}
+export default Login;
+\ No newline at end of file