From b84fe9a9c4c18a3f4e957f76ead34403c4316f76 Mon Sep 17 00:00:00 2001 From: omagdy7 Date: Wed, 20 Dec 2023 19:40:11 +0200 Subject: Added a simple Login and SignUp page for the web driver app --- driver/src/App.css | 1 + driver/src/App.tsx | 11 +++++ driver/src/assets/react.svg | 1 + driver/src/firebase/firebase_config.ts | 19 ++++++++ driver/src/index.css | 3 ++ driver/src/main.tsx | 10 ++++ driver/src/pages/Login.tsx | 66 ++++++++++++++++++++++++++ driver/src/pages/SignUp.tsx | 84 ++++++++++++++++++++++++++++++++++ driver/src/vite-env.d.ts | 1 + 9 files changed, 196 insertions(+) create mode 100644 driver/src/App.css create mode 100644 driver/src/App.tsx create mode 100644 driver/src/assets/react.svg create mode 100644 driver/src/firebase/firebase_config.ts create mode 100644 driver/src/index.css create mode 100644 driver/src/main.tsx create mode 100644 driver/src/pages/Login.tsx create mode 100644 driver/src/pages/SignUp.tsx create mode 100644 driver/src/vite-env.d.ts (limited to 'driver/src') diff --git a/driver/src/App.css b/driver/src/App.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/driver/src/App.css @@ -0,0 +1 @@ + diff --git a/driver/src/App.tsx b/driver/src/App.tsx new file mode 100644 index 0000000..4970091 --- /dev/null +++ b/driver/src/App.tsx @@ -0,0 +1,11 @@ +import Login from "./pages/Login" +import SignUp from "./pages/SignUp" + +function App() { + return ( + // + + ) +} + +export default App diff --git a/driver/src/assets/react.svg b/driver/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/driver/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/driver/src/firebase/firebase_config.ts b/driver/src/firebase/firebase_config.ts new file mode 100644 index 0000000..43a458c --- /dev/null +++ b/driver/src/firebase/firebase_config.ts @@ -0,0 +1,19 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAuth } from "firebase/auth"; + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyCofH1i8LAIgU05wne6tajXtEAaRaUFWdE", + authDomain: "carpool-3cd5c.firebaseapp.com", + projectId: "carpool-3cd5c", + storageBucket: "carpool-3cd5c.appspot.com", + messagingSenderId: "824587935735", + appId: "1:824587935735:web:2ee510b499aadd605298f2", + measurementId: "G-9SBDWH6CLR" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +export const auth = getAuth(app) diff --git a/driver/src/index.css b/driver/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/driver/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/driver/src/main.tsx b/driver/src/main.tsx new file mode 100644 index 0000000..3d7150d --- /dev/null +++ b/driver/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.tsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) 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 ( +
+
+

Login

+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ +
+
+
+
+ ); +}; + +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 ( +
+
+

Sign Up

+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ +
+
+
+
+ ); +}; + +export default SignUp; diff --git a/driver/src/vite-env.d.ts b/driver/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/driver/src/vite-env.d.ts @@ -0,0 +1 @@ +/// -- cgit v1.2.3