Merge branch 'edited-login'

package.json

@@ -4,6 +4,10 @@
   "private": true,
   "dependencies": {
     "@adobe/react-spectrum": "^3.37.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/GoogleSSO.tsx

@@ -1,24 +1,37 @@
 // src/GoogleSignIn.tsx
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { signInWithPopup } from 'firebase/auth';
 import { auth, googleProvider } from '../firebaseconfig';
+import { Button, Box } from '@mui/material';
+import { GoogleIcon } from './customicons';
 
-// Justin
+// Justin & Syed
 const GoogleSSO: React.FC = () => {
+  const navigate = useNavigate();
+
   const handleGoogleSignIn = async () => {
     try {
       await signInWithPopup(auth, googleProvider);
       alert('Google Sign-In Successful');
+      navigate('/'); // Redirect to homepage
     } catch (error) {
       console.error("Error with Google Sign-In:", error);
       alert((error as Error).message);
     }
   };
 
   return (
-    <button onClick={handleGoogleSignIn}>
-      Sign in with Google
-    </button>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Button
+        fullWidth
+        variant="outlined"
+        onClick={handleGoogleSignIn}
+        startIcon={<GoogleIcon />}
+      >
+        Sign in with Google
+      </Button>
+    </Box>
   );
 };
 

src/components/Login.tsx

@@ -1,42 +1,62 @@
 // src/Login.tsx
-import React, { useState } from 'react';
-import { signInWithEmailAndPassword } from 'firebase/auth';
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { signInWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth';
 import { auth } from '../firebaseconfig';
+import { Button, Container, Stack, TextField, Typography } from '@mui/material';
 
-// Justin
+// Justin & Syed
 const Login: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Redirect if user is already logged in
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        navigate('/'); // Redirect to homepage if authenticated
+      }
+    });
+    return () => unsubscribe(); // Cleanup listener on component unmount
+  }, [navigate]);
 
   const handleLogin = async () => {
     try {
       await signInWithEmailAndPassword(auth, email, password);
       alert('Login Successful');
+      // The navigation will happen due to onAuthStateChanged listener
     } 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>
+    <Container maxWidth="xs" sx={{ mt: 4 }}>
+      <Stack spacing={2} alignItems="center">
+        <Typography variant="h5">Login</Typography>
+        <TextField
+          label="Email"
+          variant="outlined"
+          fullWidth
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <TextField
+          label="Password"
+          type="password"
+          variant="outlined"
+          fullWidth
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button variant="contained" color="primary" onClick={handleLogin} fullWidth>
+          Login
+        </Button>
+      </Stack>
+    </Container>
   );
 };
 
 export default Login;
-export {};

src/components/Register.tsx

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
 import { auth } from '../firebaseconfig';
 import { useNavigate } from 'react-router-dom';
+import { Button, Container, Stack, TextField, Typography } from '@mui/material';
 
-// Justin
+// Justin & Syed
 const Register: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
@@ -21,22 +22,29 @@ const Register: React.FC = () => {
   };
 
   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>
+    <Container maxWidth="xs" sx={{ mt: 4 }}>
+      <Stack spacing={2} alignItems="center">
+        <Typography variant="h5">Register</Typography>
+        <TextField
+          label="Email"
+          variant="outlined"
+          fullWidth
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <TextField
+          label="Password"
+          type="password"
+          variant="outlined"
+          fullWidth
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button variant="contained" color="primary" onClick={handleRegister} fullWidth>
+          Register
+        </Button>
+      </Stack>
+    </Container>
   );
 };
 

src/components/TopNavBar.tsx

@@ -1,23 +1,56 @@
-import React from 'react';
-import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
+import React, { useEffect, useState } from 'react';
+import { Flex, Heading, MenuTrigger, ActionButton, Menu, Item } from '@adobe/react-spectrum';
+import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
+import { Key } from 'react';
 
-// Nishil
+// Nishil & Syed
 // Implements the top navigation bar
 const TopNavBar: React.FC = () => {
-    return (
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const auth = getAuth();
+
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, (user) => {
+            setIsLoggedIn(!!user); 
+        });
+        return () => unsubscribe(); 
+    }, [auth]);
+
+    const handleSignOut = async () => {
+        try {
+            await signOut(auth);
+            setIsLoggedIn(false); 
+        } catch (error) {
+            console.error("Sign out failed", error);
+        }
+    };
 
-            <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>
+    const handleMenuOptions = (key: Key) => {
+        if (key === 'signout') {
+            handleSignOut();
+        }
+    };
+
+    return (
+        <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+            <Heading level={1}>Metroll</Heading>
+            <MenuTrigger>
+                <ActionButton>☰</ActionButton>
+                <Menu onAction={handleMenuOptions}>
+                    {!isLoggedIn ? (
+                        <Item href="/login" key="login">Login/Sign In</Item>
+                    ) : (
+                        <>
+                            <Item href="/account" key="account">Account</Item>
+                            <Item key="signout">Sign Out</Item>
+                        </>
+                    )}
+                    <Item href="/" key="home">Home</Item>
+                    <Item href="/about" key="about">About</Item>
+                </Menu>
+            </MenuTrigger>
+        </Flex>
     );
-}
+};
 
 export default TopNavBar;

src/components/customicons.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+
+
+export function GoogleIcon() {
+  return (
+    <SvgIcon>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.68 8.18182C15.68 7.61455 15.6291 7.06909 15.5345 6.54545H8V9.64364H12.3055C12.1164 10.64 11.5491 11.4836 10.6982 12.0509V14.0655H13.2945C14.8073 12.6691 15.68 10.6182 15.68 8.18182Z"
+          fill="#4285F4"
+        />
+        <path
+          d="M8 16C10.16 16 11.9709 15.2873 13.2945 14.0655L10.6982 12.0509C9.98545 12.5309 9.07636 12.8218 8 12.8218C5.92 12.8218 4.15273 11.4182 3.52 9.52727H0.858182V11.5927C2.17455 14.2036 4.87273 16 8 16Z"
+          fill="#34A853"
+        />
+        <path
+          d="M3.52 9.52C3.36 9.04 3.26545 8.53091 3.26545 8C3.26545 7.46909 3.36 6.96 3.52 6.48V4.41455H0.858182C0.312727 5.49091 0 6.70545 0 8C0 9.29455 0.312727 10.5091 0.858182 11.5855L2.93091 9.97091L3.52 9.52Z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M8 3.18545C9.17818 3.18545 10.2255 3.59273 11.0618 4.37818L13.3527 2.08727C11.9636 0.792727 10.16 0 8 0C4.87273 0 2.17455 1.79636 0.858182 4.41455L3.52 6.48C4.15273 4.58909 5.92 3.18545 8 3.18545Z"
+          fill="#EA4335"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
+
+export {};

src/pages/LoginPage.tsx

@@ -3,18 +3,26 @@ import React from 'react';
 import Login from '../components/Login';
 import {useNavigate} from "react-router-dom";
 import GoogleSignIn from "../components/GoogleSSO";
-
+import { Button, Container, Stack } from '@mui/material';
 // 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>
+      <Container maxWidth="sm" style={{ marginTop: '2rem' }}>
+        <Stack spacing={2} alignItems="center">
+          <Button variant="contained" color="primary" onClick={() => navigate('/')}>
+            Home
+          </Button>
+
+          <Login />
+          <GoogleSignIn />
+
+          <Button variant="outlined" color="secondary" onClick={() => navigate('/register')}>
+            Go to Register
+          </Button>
+        </Stack>
+      </Container>
     );
 };
 

src/pages/RegisterPage.tsx

@@ -2,19 +2,21 @@
 import React from 'react';
 import Register from '../components/Register';
 import {useNavigate} from "react-router-dom";
-
+import { Button, Container, Stack } from '@mui/material';
 // 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>
+      <Container maxWidth="sm" sx={{ mt: 4 }}>
+        <Stack spacing={2} alignItems="center">
+          <Button variant="contained" onClick={() => navigate('/')}>Home</Button>
+          <Register />
+          <Button variant="outlined" onClick={() => navigate('/login')}>Go to Login</Button>
+        </Stack>
+      </Container>
     );
-};
+  };
 
 export default RegisterPage;