login and displays user

package.json

@@ -20,7 +20,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.0",
     "react-tiles-dnd": "^0.1.2",
     "recharts": "^2.12.5",
     "sass": "^1.72.0"

src/assets/css/Header.css

@@ -1,61 +1,97 @@
-*{
+* {
     box-sizing: border-box;
 }
 
-body{
+body {
     margin: 0;
 }
 
-.site-title{
+.site-title {
     font-size: 4rem;
-
 }
 
-.header-nav{
-    border-left: #E4F2E7;
+.header-nav {
+    border-left: #e4f2e7;
     border-left-style: solid;
     margin: 4rem;
+    width: calc(100% - 15rem); /* adjust the width of the header-nav element to make room for the logout button */
 }
-.header{
-    background-color: #2D3E40;
-    color: #E4F2E7;
+
+.header {
+    background-color: #2d3e40;
+    color: #e4f2e7;
     display: flex;
     gap: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
+    position: relative; /* add this */
 }
 
-
-.site-title:hover{
-    color: #E4F2E7;
+.site-title:hover {
+    color: #e4f2e7;
 }
 
-.header a{
-    color: #E4F2E7;
+.header a {
+    color: #e4f2e7;
     text-decoration: none;
-
     height: 100%;
     display: flex;
     align-items: center;
-    padding: .25rem;
+    padding: 0.25rem;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
 }
 
-.header-item:hover{
-    color: #2D3E40;
-    background-color: #E4F2E7;
+.header-item:hover {
+    color: #2d3e40;
+    background-color: #e4f2e7;
 }
 
-.header ul{
+.header ul {
     padding-left: 1rem;
     margin: 0;
     list-style: none;
     display: flex;
     gap: 1rem;
 }
 
-.header li:active{
-    background-color: #E4F2E7;
-    color: #2D3E40;
+.header li:active {
+    background-color: #e4f2e7;
+    color: #2d3e40;
+}
+
+.logout-btn {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    padding: 0.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    color: #e4f2e7;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.logout-btn:hover {
+    color: #2d3e40;
+    background-color: #e4f2e7;
+    height: 100%;
 }
+
+.username {
+    position: absolute;
+    right: 100px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    padding: 0.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    color: #e4f2e7;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}

src/components/Header.tsx

@@ -1,35 +1,44 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
 import "../assets/css/Header.css"
 import {Link} from "react-router-dom";
+import {auth} from "../utils/firebase.ts";
 
 interface Props {
-    user?: string
+    user?: string;
+    children?: React.ReactNode;
 }
 
-export function Header({user} : Props) {
-    const {width, height} = useWindowDimensions();
-    const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height);
+export function Header({ user }: Props) {
+    const { width, height } = useWindowDimensions();
+    const aspect_ratio = (width == 0? 1 : width) / (height == 0? 1 : height);
     const use_narrow = aspect_ratio < 0.7;
 
-    return <header className="header">
-
-                {/*App Name reloads home page*/}
-                    <a href="/" className="site-title">
-                        <h3>{use_narrow ? "B-19" : "Budget-19"}</h3>
-                    </a>
-
-                {/*Pages*/}
-        <ul className="header-nav">
-
-            {/*Links to dashboard with tiles*/}
-            <li><Link to="/dash" className="header-item">Dashboard</Link></li>
-
-            {/*Links to transactions page with table of expenses*/}
-            <li><Link to="/transactions" className="header-item">Transactions</Link></li>
-
-            <li><Link to="/test" className="header-item">Firestore Test</Link></li>
-
-            <li>{user}</li>
-        </ul>
-    </header>;
+    const currentUser = auth.currentUser?.displayName?? "";
+
+    return (
+        <header className="header">
+            {/* App Name reloads home page */}
+            <a href="/" className="site-title">
+                <h3>{use_narrow? "B-19" : "Budget-19"}</h3>
+            </a>
+
+            {/* Pages */}
+            <ul className="header-nav">
+                {/* Links to dashboard with tiles */}
+                <li><Link to="/dash" className="header-item">Dashboard</Link></li>
+
+                {/* Links to transactions page with table of expenses */}
+                <li><Link to="/transactions" className="header-item">Transactions</Link></li>
+
+                <li><Link to="/test" className="header-item">Firestore Test</Link></li>
+
+                {user && (
+                    <li>
+                        <span className="username">{currentUser}</span>
+                        <button type="button" className="logout-btn">Logout</button>
+                    </li>
+                )}
+            </ul>
+        </header>
+    );
 }

src/pages/index/IndexPage.tsx

@@ -2,17 +2,31 @@ import {Header} from "../../components/Header.tsx";
 import {Footer} from "../../components/Footer.tsx";
 
 import "./IndexPage.scss"
-import {Link} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import { signInWithGoogle } from '../../utils/authentication';
+import { useState } from "react";
 
-interface Props {
-    user?: string
+interface IndexPageProps {
+    user?: string;
 }
 
-function IndexPage({ user }: Props) {
+function IndexPage({ user }: IndexPageProps) {
+    const [currentUser, setCurrentUser] = useState<string | undefined>(user);
+    const navigate = useNavigate();
+
+    const handleSignIn = async () => {
+        const user = await signInWithGoogle();
+        setCurrentUser(user);
+        navigate('/dash', { replace: true }); // Redirect to /dash after signing in
+    };
+
     return (<>
         <div className="d-flex vh-100 flex-column">
-            <Header user={user}/>
+            {currentUser? (
+                <Header user={currentUser} />
+            ) : (
+                <Header user="" /> // or some other default value
+            )}
             <div className="row vw-100" style={{flexGrow: 1, maxWidth: "99vw"}}>
                 <div className="col-6 p-0 d-flex justify-content-center align-items-center">
                     <div className="text-center">
@@ -34,7 +48,7 @@ function IndexPage({ user }: Props) {
                         <h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
                         <div className="row">
                             <div className="col p-2">
-                                <button type="button" className="login-with-google-btn" onClick={signInWithGoogle}>
+                                <button type="button" className="login-with-google-btn" onClick={handleSignIn}>
                                     Sign in with Google
                                 </button>
                             </div>
@@ -54,4 +68,4 @@ function IndexPage({ user }: Props) {
     </>);
 }
 
-export default IndexPage
+export default IndexPage;

src/router.tsx

@@ -49,7 +49,7 @@ const tileset_many: Array<{ text: string; rows: number; cols: number }> = [
     { text: "Tile 13", cols: 2, rows: 2 },
     { text: "Tile 14", cols: 2, rows: 2 },
     { text: "Tile 15", cols: 1, rows: 1 },
-    { text: "Tile 16", cols: 1, rows: 1 },
+    {text: "Tile 16", cols: 1, rows:1 },
     { text: "Tile 17", cols: 1, rows: 1 },
     { text: "Tile 18", cols: 1, rows: 1 },
     { text: "Tile 19", cols: 2, rows: 1 },
@@ -97,7 +97,7 @@ const tileset_weird: Array<{ text: string; rows: number; cols: number }> = [
 export const router = createBrowserRouter([
     {
         path: "/",
-        element: <IndexPage/>,
+        element: <IndexPage />, // Remove the user={undefined} prop
         errorElement: <_404Page/>
     },
     {
@@ -114,7 +114,7 @@ export const router = createBrowserRouter([
     {
         path: "/user-test",
         element: <IndexPage user={"testUserName"}/>,
-        errorElement: <_404Page/>
+        errorElement:<_404Page/>
     },
     {
         path: "/graphs",

src/utils/authentication.ts

@@ -6,13 +6,16 @@ import { signInWithPopup } from "firebase/auth";
 const googleProvider = new GoogleAuthProvider();
 
 // Function to sign in with Google
-export const signInWithGoogle = async () => {
+export const signInWithGoogle = async (): Promise<any> => {
     try {
         const result = await signInWithPopup(auth, googleProvider);
         const user = result.user;
         console.log(user);
-        // Do something with the user object (e.g. save to state)
+        // Return the entire user object
+        return user;
     } catch (error) {
         console.error(error);
+        // Return null if there was an error
+        return null;
     }
-};
+};