Basic Auth implementation

package.json

@@ -11,8 +11,10 @@
     "@types/node": "^16.18.115",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "firebase": "^11.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from "./pages/RegisterPage";
+import AboutPage from "./pages/AboutPage";
+import HomePage from './pages/HomePage';
+
+// Nishil
+const App: React.FC = () => {
+
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/login" element={<LoginPage/>} />
+                <Route path="/register" element={<RegisterPage />} />
+                <Route path="/about" element={<AboutPage />} />
+            </Routes>
+        </Router>
+    );
+};
+
+
+
+export default App;

src/Components/GoogleSSO.tsx

@@ -0,0 +1,25 @@
+// src/GoogleSignIn.tsx
+import React from 'react';
+import { signInWithPopup } from 'firebase/auth';
+import { auth, googleProvider } from '../firebaseconfig';
+
+// Justin
+const GoogleSSO: React.FC = () => {
+  const handleGoogleSignIn = async () => {
+    try {
+      await signInWithPopup(auth, googleProvider);
+      alert('Google Sign-In Successful');
+    } catch (error) {
+      console.error("Error with Google Sign-In:", error);
+      alert((error as Error).message);
+    }
+  };
+
+  return (
+    <button onClick={handleGoogleSignIn}>
+      Sign in with Google
+    </button>
+  );
+};
+
+export default GoogleSSO;

src/Components/TopNavBar.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
 
+// Nishil
+// Implements the top navigation bar
 const TopNavBar: React.FC = () => {
     return (
-        <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
-            <Heading level={1}>Metroll</Heading>
-            <MenuTrigger>
-                <ActionButton>☰</ActionButton>
-                <Menu onAction={(key) => alert(key)}>
-                    <Item key="auth">Login/Sign In</Item>
-                    <Item key="home">Home</Item>
-                    <Item key="about">About</Item>
-                </Menu>
-            </MenuTrigger>
-        </Flex>
+
+            <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+                <Heading level={1}>Metroll</Heading>
+                <MenuTrigger>
+                    <ActionButton>☰</ActionButton>
+                    <Menu /*onAction={(key) => alert(key)}*/>
+                        <Item href="/login" key="login" >Login/Sign In</Item>
+                        <Item href="/" key="">Home</Item>
+                        <Item href="/about" key="about">About</Item>
+                    </Menu>
+                </MenuTrigger>
+            </Flex>
     );
 }
 

src/Components/TransitBar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item, ActionGroup} from '@adobe/react-spectrum';
+import {Flex, Item, ActionGroup} from '@adobe/react-spectrum';
 
+// Nishil
+// Implements the three transit use case buttons
 const TransitBar: React.FC = () => {
     return (
         <Flex margin="auto" alignItems="center" justifyContent="center" height="100%">
@@ -9,7 +11,6 @@ const TransitBar: React.FC = () => {
                 <Item key="planner">Trip Planner</Item>
                 <Item key="routes">Routes</Item>
             </ActionGroup>
-
         </Flex>
     );
 }

src/components/Login.tsx

@@ -0,0 +1,42 @@
+// src/Login.tsx
+import React, { useState } from 'react';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../firebaseconfig';
+
+// Justin
+const Login: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  const handleLogin = async () => {
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      alert('Login Successful');
+    } catch (error) {
+      console.error("Error logging in:", error);
+      alert((error as Error).message);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Login</h2>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <button onClick={handleLogin}>Login</button>
+    </div>
+  );
+};
+
+export default Login;
+export {};

src/components/Register.tsx

@@ -0,0 +1,44 @@
+// src/Register.tsx
+import React, { useState } from 'react';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../firebaseconfig';
+import { useNavigate } from 'react-router-dom';
+
+// Justin
+const Register: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const navigate = useNavigate();
+  const handleRegister = async () => {
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      alert('Registration Successful');
+      navigate('/login');
+    } catch (error) {
+      console.error("Error registering:", error);
+      alert((error as Error).message);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Register</h2>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <button onClick={handleRegister}>Register</button>
+    </div>
+  );
+};
+
+export default Register;
+export {};

src/components/TopNavBar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
+
+// Nishil
+// Implements the top navigation bar
+const TopNavBar: React.FC = () => {
+    return (
+
+            <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+                <Heading level={1}>Metroll</Heading>
+                <MenuTrigger>
+                    <ActionButton>☰</ActionButton>
+                    <Menu /*onAction={(key) => alert(key)}*/>
+                        <Item href="/login" key="login" >Login/Sign In</Item>
+                        <Item href="/" key="">Home</Item>
+                        <Item href="/about" key="about">About</Item>
+                    </Menu>
+                </MenuTrigger>
+            </Flex>
+    );
+}
+
+export default TopNavBar;

src/components/TransitBar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {Flex, Item, ActionGroup} from '@adobe/react-spectrum';
+
+// Nishil
+// Implements the three transit use case buttons
+const TransitBar: React.FC = () => {
+    return (
+        <Flex margin="auto" alignItems="center" justifyContent="center" height="100%">
+            <ActionGroup selectionMode="single" width="fit-content" defaultSelectedKeys={['planner']}>
+                <Item key="departures">Departures</Item>
+                <Item key="planner">Trip Planner</Item>
+                <Item key="routes">Routes</Item>
+            </ActionGroup>
+        </Flex>
+    );
+}
+
+export default TransitBar;

src/firebaseconfig.ts

@@ -0,0 +1,23 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth , GoogleAuthProvider} from 'firebase/auth';
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyBctlGjVBPDHhr34jLPiHuQtNvY0Thx-k0",
+  authDomain: "metroll-c924c.firebaseapp.com",
+  projectId: "metroll-c924c",
+  storageBucket: "metroll-c924c.appspot.com",
+  messagingSenderId: "1012554613311",
+  appId: "1:1012554613311:web:5b9deb9281b46d2edc6e8a",
+  measurementId: "G-Q6DHKKY7V5"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const googleProvider = new GoogleAuthProvider();

src/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import Home from './Home';
+import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <Home />
+    <App />
   </React.StrictMode> 
 );
 

src/pages/AboutPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {defaultTheme, Provider} from "@adobe/react-spectrum";
+import {useNavigate} from "react-router-dom";
+
+const AboutPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Provider theme={defaultTheme}>
+            <div>
+                <button onClick={() => navigate('/')}>Home</button>
+                <h2>About Page</h2>
+                <p>This is the about page</p>
+            </div>
+        </Provider>
+    );
+};
+
+export default AboutPage;
+export {};

src/Home.tsx → src/pages/HomePage.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import TopNavBar from './Components/TopNavBar';
+import TopNavBar from '../components/TopNavBar';
 import {Provider, defaultTheme, Grid, View} from "@adobe/react-spectrum";
-import TransitBar from "./Components/TransitBar";
+import TransitBar from "../components/TransitBar";
 
-function Home() {
+// Nishil
+// Arranges home page layout using react-spectrum and grid
+const HomePage: React.FC = () => {
     return (
         <Provider theme={defaultTheme}>
             <Grid
@@ -32,4 +34,4 @@ function Home() {
     );
 }
 
-export default Home;
+export default HomePage;

src/pages/LoginPage.tsx

@@ -0,0 +1,21 @@
+// src/LoginPage.tsx
+import React from 'react';
+import Login from '../components/Login';
+import {useNavigate} from "react-router-dom";
+import GoogleSignIn from "../components/GoogleSSO";
+
+// Nishil & Justin
+const LoginPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <button onClick={() => navigate('/')}>Home</button>
+            <Login />
+            <GoogleSignIn />
+            <button onClick={() => navigate('/register')}>Go to Register</button>
+        </div>
+    );
+};
+
+export default LoginPage;

src/pages/RegisterPage.tsx

@@ -0,0 +1,20 @@
+// src/RegisterPage.tsx
+import React from 'react';
+import Register from '../components/Register';
+import {useNavigate} from "react-router-dom";
+
+// Nishil & Justin
+const RegisterPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <button onClick={() => navigate('/')}>Home</button>
+            <Register />
+            <button onClick={() => navigate('/login')}>Go to Login</button>
+        </div>
+    );
+};
+
+export default RegisterPage;
+