diff options
Diffstat (limited to 'driver/src/pages/Login.tsx')
| -rw-r--r-- | driver/src/pages/Login.tsx | 92 |
1 files changed, 50 insertions, 42 deletions
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> + ) ); }; |