From e97dbb11b30d0fe51b2ca1660e9f0d27a99a73e3 Mon Sep 17 00:00:00 2001
From: omagdy7 <omar.professional8777@gmail.com>
Date: Fri, 22 Dec 2023 18:59:16 +0200
Subject: Added most of the logic on the driver side

---
 driver/src/pages/Login.tsx | 92 +++++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 42 deletions(-)

(limited to 'driver/src/pages/Login.tsx')

diff --git a/driver/src/pages/Login.tsx b/driver/src/pages/Login.tsx
index 0605dc8..1841d03 100644
--- a/driver/src/pages/Login.tsx
+++ b/driver/src/pages/Login.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { auth } from '../firebase/firebase_config';
 import { signInWithEmailAndPassword } from 'firebase/auth';
+import { Navigate, redirect } from "react-router-dom";
 
 const Login = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -10,7 +12,8 @@ const Login = () => {
     try {
       const userCredential = await signInWithEmailAndPassword(auth, email, password);
       console.log('User logged in:', userCredential.user);
-      // TODO: redirect the user to another page or perform some other action
+      setIsLoggedIn(true)
+
     } catch (error) {
       console.error('Error logging in:', error);
       // TODO: Handle error messages or display them to the user.
@@ -18,48 +21,53 @@ const Login = () => {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-200">
-      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 className="text-2xl font-bold mb-4">Login</h2>
-        <form>
-          <div className="mb-4">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
-              Email
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="email"
-              type="email"
-              placeholder="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-          <div className="mb-6">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
-              Password
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="password"
-              type="password"
-              placeholder="********"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-              type="button"
-              onClick={handleLogin}
-            >
-              Login
-            </button>
+    isLoggedIn ? (
+      <Navigate to="/home" />
+    ) :
+      (
+        <div className="flex justify-center items-center h-screen bg-black">
+          <div className="bg-slate-900 shadow-md rounded px-8 pt-6 w-1/3 pb-8 mb-4">
+            <h2 className="text-2xl font-bold mb-4">Login</h2>
+            <form>
+              <div className="mb-4">
+                <label className="block text-white text-sm font-bold mb-2" htmlFor="email">
+                  Email
+                </label>
+                <input
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline placeholder-gray-800"
+                  id="email"
+                  type="email"
+                  placeholder="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div className="mb-6">
+                <label className="block text-white text-sm font-bold mb-2" htmlFor="password">
+                  Password
+                </label>
+                <input
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline placeholder-gray-800"
+                  id="password"
+                  type="password"
+                  placeholder="********"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <button
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                  type="button"
+                  onClick={handleLogin}
+                >
+                  Login
+                </button>
+              </div>
+            </form>
           </div>
-        </form>
-      </div>
-    </div>
+        </div>
+      )
   );
 };
 
-- 
cgit v1.2.3