From b84fe9a9c4c18a3f4e957f76ead34403c4316f76 Mon Sep 17 00:00:00 2001
From: omagdy7 <omar.professional8777@gmail.com>
Date: Wed, 20 Dec 2023 19:40:11 +0200
Subject: Added a simple Login and SignUp page for the web driver app

---
 driver/src/pages/Login.tsx  | 66 +++++++++++++++++++++++++++++++++++
 driver/src/pages/SignUp.tsx | 84 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 driver/src/pages/Login.tsx
 create mode 100644 driver/src/pages/SignUp.tsx

(limited to 'driver/src/pages')

diff --git a/driver/src/pages/Login.tsx b/driver/src/pages/Login.tsx
new file mode 100644
index 0000000..0605dc8
--- /dev/null
+++ b/driver/src/pages/Login.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { auth } from '../firebase/firebase_config';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async () => {
+    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
+    } catch (error) {
+      console.error('Error logging in:', error);
+      // TODO: Handle error messages or display them to the user.
+    }
+  };
+
+  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>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/driver/src/pages/SignUp.tsx b/driver/src/pages/SignUp.tsx
new file mode 100644
index 0000000..3ee09dc
--- /dev/null
+++ b/driver/src/pages/SignUp.tsx
@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import { auth } from '../firebase/firebase_config';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+
+
+const SignUp = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        // User is signed in.
+        console.log('User is signed in:', user);
+        // TODO: redirect the user to another page or perform some other action
+      } else {
+        // No user is signed in.
+        console.log('No user is signed in');
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const handleSignUp = async () => {
+    try {
+      // The onAuthStateChanged listener will handle the signed-in user state.
+      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+      console.log('User signed up:', userCredential.user);
+    } catch (error) {
+      // TODO: Handle error messages or display them to the user.
+      console.error('Error signing up:', error);
+    }
+  };
+
+  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">Sign Up</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={handleSignUp}
+            >
+              Sign Up
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;
-- 
cgit v1.2.3