From 0a52df1c748680c1a1209dd4ff38b020aa206f8d Mon Sep 17 00:00:00 2001
From: NishilJ <78994772+NishilJ@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:24:49 -0600
Subject: [PATCH] user display name parameter

---
 src/components/GoogleSSO.tsx | 10 ++----
 src/components/Login.tsx     | 20 +++++------
 src/components/Register.tsx  | 67 ++++++++++++++++++++----------------
 src/components/TopNavBar.tsx | 53 ++++++++++++++++++----------
 4 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/components/GoogleSSO.tsx b/src/components/GoogleSSO.tsx
index 6eca5e0..3fb3da6 100644
--- a/src/components/GoogleSSO.tsx
+++ b/src/components/GoogleSSO.tsx
@@ -15,7 +15,8 @@ const GoogleSSO: React.FC = () => {
       await signInWithPopup(auth, googleProvider);
       alert('Google Sign-In Successful');
       navigate('/'); // Redirect to homepage
-    } catch (error) {
+    } 
+    catch (error) {
       console.error("Error with Google Sign-In:", error);
       alert((error as Error).message);
     }
@@ -23,12 +24,7 @@ const GoogleSSO: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Button
-        fullWidth
-        variant="outlined"
-        onClick={handleGoogleSignIn}
-        startIcon={<GoogleIcon />}
-      >
+      <Button fullWidth variant="outlined" onClick={handleGoogleSignIn} startIcon={<GoogleIcon />}>
         Sign in with Google
       </Button>
     </Box>
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 6e97ca0..f93be93 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -13,13 +13,16 @@ const Login: React.FC = () => {
 
   useEffect(() => {
     // Redirect if user is already logged in
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
+    const isLoggedIn = onAuthStateChanged(auth, (user) => {
       if (user) {
         navigate('/'); // Redirect to homepage if authenticated
       }
     });
-    return () => unsubscribe(); // Cleanup listener on component unmount
-  }, [navigate]);
+
+    return () => isLoggedIn(); // Cleanup listener on component unmount
+    }, 
+      [navigate] 
+  );
 
   const handleLogin = async () => {
     try {
@@ -36,18 +39,11 @@ const Login: React.FC = () => {
     <Container maxWidth="xs" sx={{ mt: 4 }}>
       <Stack spacing={2} alignItems="center">
         <Typography variant="h5">Login</Typography>
-        <TextField
-          label="Email"
-          variant="outlined"
-          fullWidth
+        <TextField label="Email" variant="outlined" fullWidth
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
-        <TextField
-          label="Password"
-          type="password"
-          variant="outlined"
-          fullWidth
+        <TextField label="Password" type="password" variant="outlined" fullWidth
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
diff --git a/src/components/Register.tsx b/src/components/Register.tsx
index 3697247..5652882 100644
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@@ -1,52 +1,59 @@
-// src/Register.tsx
 import React, { useState } from 'react';
-import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
 import { auth } from '../firebaseconfig';
 import { useNavigate } from 'react-router-dom';
 import { Button, Container, Stack, TextField, Typography } from '@mui/material';
 
 // Justin & Syed
 const Register: React.FC = () => {
+  const [name, setName] = useState<string>('');
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>('');
   const navigate = useNavigate();
+
   const handleRegister = async () => {
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
     try {
-      await createUserWithEmailAndPassword(auth, email, password);
+      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+      await updateProfile(userCredential.user, { displayName: name });
       alert('Registration Successful');
       navigate('/login');
-    } catch (error) {
+    } 
+    catch (error) {
       console.error("Error registering:", error);
       alert((error as Error).message);
     }
   };
 
-  return (
-    <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>
-  );
+    return (
+      <Container maxWidth="xs" sx={{ mt: 4 }}>
+        <Stack spacing={2} alignItems="center">
+          <Typography variant="h5">Register</Typography>
+          <TextField label="Name" variant="outlined" fullWidth value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <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)}
+          />
+          <TextField label="Confirm Password" type="password" variant="outlined" fullWidth
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+          />
+          <Button variant="contained" color="primary" onClick={handleRegister} fullWidth>
+            Register
+          </Button>
+        </Stack>
+      </Container>
+    );
 };
 
 export default Register;
-export {};
diff --git a/src/components/TopNavBar.tsx b/src/components/TopNavBar.tsx
index 123f7a8..39c70e7 100644
--- a/src/components/TopNavBar.tsx
+++ b/src/components/TopNavBar.tsx
@@ -1,54 +1,69 @@
 import React, { useEffect, useState } from 'react';
-import { Flex, Heading, MenuTrigger, ActionButton, Menu, Item } from '@adobe/react-spectrum';
+import { Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
 import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
 import { Key } from 'react';
 
 // Nishil & Syed
 // Implements the top navigation bar
 const TopNavBar: React.FC = () => {
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
-    const auth = getAuth();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userName, setUserName] = useState<string | null>(null);
+  const auth = getAuth();
 
     useEffect(() => {
-        const unsubscribe = onAuthStateChanged(auth, (user) => {
-            setIsLoggedIn(!!user); 
+        const isLoggedIn = onAuthStateChanged(auth, (user) => {
+        if (user) {
+            setIsLoggedIn(true);
+            setUserName(user.displayName); // Set display name from Firebase
+        } else {
+            setIsLoggedIn(false);
+            setUserName(null);
+        }
         });
-        return () => unsubscribe(); 
-    }, [auth]);
+
+        return () => isLoggedIn();
+        }, 
+            [auth]
+    );
 
     const handleSignOut = async () => {
         try {
-            await signOut(auth);
-            setIsLoggedIn(false); 
-        } catch (error) {
-            console.error("Sign out failed", error);
+        await signOut(auth);
+        setIsLoggedIn(false);
+        setUserName(null);
+        } 
+        catch (error) {
+        console.error("Sign out failed", error);
         }
     };
 
     const handleMenuOptions = (key: Key) => {
         if (key === 'signout') {
-            handleSignOut();
+        handleSignOut();
         }
     };
 
     return (
         <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
             <Heading level={1}>Metroll</Heading>
-            <MenuTrigger>
+            <Flex alignItems="center" gap="size-200">
+                {isLoggedIn && userName && <Heading level={4}>Welcome, {userName}</Heading>}
+                <MenuTrigger>
                 <ActionButton>☰</ActionButton>
                 <Menu onAction={handleMenuOptions}>
                     {!isLoggedIn ? (
-                        <Item href="/login" key="login">Login/Sign In</Item>
+                    <Item href="/login" key="login">Login/Sign In</Item>
                     ) : (
-                        <>
-                            <Item href="/account" key="account">Account</Item>
-                            <Item key="signout">Sign Out</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>
+                </MenuTrigger>
+            </Flex>
         </Flex>
     );
 };