From 46130a3e8f068a9049f3c535d9528cd5548eb4c6 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sun, 4 Aug 2024 13:20:16 +1000
Subject: [PATCH 01/10] Feature: Added frotnend authentication test.

---
 frontend/.env                              | 6 +++---
 frontend/src/components/_shared/NavBar.jsx | 4 +---
 frontend/src/main.jsx                      | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/.env b/frontend/.env
index 4f78afae..97eddefd 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,3 +1,3 @@
-VITE_REACT_APP_AUTH="DEV"
-VITE_REACT_AUTH_DOMAIN=""
-VITE_REACT_APP_AUTH_CLIENT_ID=""
+VITE_REACT_APP_AUTH="TEST"
+VITE_REACT_AUTH_DOMAIN="balancedev.au.auth0.com"
+VITE_REACT_APP_AUTH_CLIENT_ID="dT92M5EBX8hoE1XmYPe8VuEK9ltmUf1e"
diff --git a/frontend/src/components/_shared/NavBar.jsx b/frontend/src/components/_shared/NavBar.jsx
index 8a740e06..de62969f 100644
--- a/frontend/src/components/_shared/NavBar.jsx
+++ b/frontend/src/components/_shared/NavBar.jsx
@@ -75,11 +75,9 @@ const NavBar = ({ authenticated }) => {
         {authenticated ? (
               <Button onClick={logout} height="8vh" width="14vh" maxHeight="2.6em" minHeight="1.8em" maxWidth="6.5em" minWidth="4.3em" boxShadow="lg">Logout</Button>
         ) : (
-          <Link as={RouterLink} to="/login" ml="8">
-            <Button>
+            <Button onClick={()=> loginWithRedirect()}>
               Login
             </Button>
-          </Link>
         )}
       </Flex>
     </Flex>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 5c4a879f..1ff62c39 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -15,7 +15,7 @@ root.render(
         clientId={import.meta.env.VITE_REACT_APP_AUTH_CLIENT_ID}
         authorizationParams={{
           redirect_uri: window.location.origin,
-          audience: 'balance-api-endpoint',
+          audience: 'https://balancedev.au.auth0.com/api/v2/',
           scope: 'openid profile email',
         }}
       >

From cb6483f27460a077a96825fe470361de6e45f829 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Thu, 3 Oct 2024 20:23:56 +1000
Subject: [PATCH 02/10] added frontend authentication

---
 frontend/src/App.jsx                       |  5 +++++
 frontend/src/components/_shared/NavBar.jsx |  5 +++++
 frontend/src/pages/UserDashboard.jsx       | 22 ++++++++++++++++++++++
 3 files changed, 32 insertions(+)
 create mode 100644 frontend/src/pages/UserDashboard.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 613b0113..2eb526c1 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -29,6 +29,7 @@ import GroupAnalytics from './pages/GroupAnalytics';
 import Import from './pages/Import';
 import RegistrationPage from "./components/loginPage/RegistrationPage.jsx";
 import FAQ from './pages/FAQ';
+import UserDashboard from './pages/UserDashboard.jsx';
 
 const theme = extendTheme({
   colors: {
@@ -93,6 +94,10 @@ function App() {
                 path="/login"
                 element={<LoginPage />}
               />
+              <Route
+                path="/userInfo"
+                element={<UserDashboard />}
+              />
             </Routes>
           )}
           {!isAuthenticated && (
diff --git a/frontend/src/components/_shared/NavBar.jsx b/frontend/src/components/_shared/NavBar.jsx
index de62969f..ad3c08df 100644
--- a/frontend/src/components/_shared/NavBar.jsx
+++ b/frontend/src/components/_shared/NavBar.jsx
@@ -59,6 +59,11 @@ const NavBar = ({ authenticated }) => {
             <b>Tutorial</b>
           </Button>
         </Link>
+        <Link as={RouterLink} to="/userInfo" ml="8">
+          <Button colorScheme="white" variant="solid" color="black" fontSize="1.4em" fontWeight="light" size="lg" height="63" px="6">
+            <b>User</b>
+          </Button>
+        </Link>
         <Link as={RouterLink} to="/FAQ" ml="8">
           <Button colorScheme="white" variant="solid" color="black" fontSize="1.4em" fontWeight="light" size="lg" height="63" px="6">
             <b>FAQ</b>
diff --git a/frontend/src/pages/UserDashboard.jsx b/frontend/src/pages/UserDashboard.jsx
new file mode 100644
index 00000000..8d4d11f4
--- /dev/null
+++ b/frontend/src/pages/UserDashboard.jsx
@@ -0,0 +1,22 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+const UserDashboard = () => {
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  if (isLoading) {
+    return <div>Loading ...</div>;
+  }
+
+  return (
+    isAuthenticated && (
+      <div>
+        <img src={user.picture} alt={user.name} />
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+      </div>
+    )
+  );
+};
+
+export default UserDashboard;
\ No newline at end of file

From 253fc596a4bafc9b714e521c850b1eb522e7a613 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Thu, 3 Oct 2024 20:52:52 +1000
Subject: [PATCH 03/10] added authentication to backend

---
 backend/config/databaseConfig.js      | 10 +++++-----
 backend/middleware/auth0Middleware.js |  8 ++++----
 backend/server.js                     | 23 +++++++++++++++++++++++
 frontend/src/main.jsx                 |  2 +-
 frontend/vite.config.js               |  2 +-
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/backend/config/databaseConfig.js b/backend/config/databaseConfig.js
index b5d5a7c1..c26b84d3 100644
--- a/backend/config/databaseConfig.js
+++ b/backend/config/databaseConfig.js
@@ -11,11 +11,11 @@ const mysql = require('mysql2');
 require('dotenv').config();
 
 const connection = mysql.createConnection({
-    host: process.env.DOCKER_USE_MYSQL_HOST ? "database" : process.env.DB_HOST,  // docker compose service name which resolves to internal IP (by docker)
-    user: process.env.DB_USER,
-    password: process.env.MYSQL_ROOT_PASSWORD,
-    database: process.env.DB,
-    port: process.env.MYSQL_TCP_PORT,
+    host: process.env.MYSQLHOST,  // docker compose service name which resolves to internal IP (by docker)
+    user: process.env.MYSQLUSER,
+    password: process.env.MYSQLPASSWORD,
+    database: process.env.MYSQL_DATABASE,
+    port: process.env.MYSQLPORT,
 });
 
 // const connection = mysql.createPool({
diff --git a/backend/middleware/auth0Middleware.js b/backend/middleware/auth0Middleware.js
index ea16d855..f3a8ccce 100644
--- a/backend/middleware/auth0Middleware.js
+++ b/backend/middleware/auth0Middleware.js
@@ -21,13 +21,13 @@ async function delay(time) {
 
 
 const auth0Middleware = (app) => {
-    const verifyJwt = auth({
-        audience: 'balance-api-endpoint',
-        issuerBaseURL: process.env.AUTH_DOMAIN,
+    const jwtCheck = auth({
+        audience: 'https://balance-api-endpoint',
+        issuerBaseURL: 'https://balancedev.au.auth0.com/',
         tokenSigningAlg: 'RS256'
       });
     
-    app.use(verifyJwt);
+    app.use(jwtCheck);
 
     app.use(async (req, res, next) => {
         try {
diff --git a/backend/server.js b/backend/server.js
index 6e46e325..718ac526 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -29,6 +29,7 @@ app.use((req, res, next) => {
 });
 
 if (process.env.AUTH == "TEST") { auth0Middleware(app); }
+
 if (process.env.AUTH == "DEV" || process.env.AUTH == null) { mockAuthMiddleware(app); }
 
 app.use(async (req, res, next) => {
@@ -42,6 +43,28 @@ app.use(async (req, res, next) => {
     next();
 })
 
+
+app.use(async (req, res, next) => {
+    try {
+        if (req.user && req.user.email) {
+            const results = await db_connection.promise().query(
+                `SELECT * FROM staff WHERE email_address='${req.user.email}';`
+            );
+
+            if (results[0].length === 0) {
+                await db_connection.promise().query(
+                    `INSERT INTO staff (preferred_name, last_name, email_address)
+                     VALUES ('${req.user.nickname}', '${req.user.nickname}', '${req.user.email}');`
+                );
+            }
+        }
+        next();
+    } catch (error) {
+        console.error('Error updating staff info:', error);
+        res.status(500).send('Server error');
+    }
+});
+
 app.use('/api/units/', unitRoutes);
 app.use('/api/groups/', groupRoutes);
 app.use('/api/students/', studentRoutes);
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 1ff62c39..b25c822a 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -15,7 +15,7 @@ root.render(
         clientId={import.meta.env.VITE_REACT_APP_AUTH_CLIENT_ID}
         authorizationParams={{
           redirect_uri: window.location.origin,
-          audience: 'https://balancedev.au.auth0.com/api/v2/',
+          audience: 'https://balance-api-endpoint',
           scope: 'openid profile email',
         }}
       >
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index ed57ba7a..5bd998c3 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -9,7 +9,7 @@ export default defineConfig({
         port: 3000,
         proxy: {
             "/api": {
-                target: "http://backend:8080",
+                target: "http://localhost:8080",
                 changeOrigin: true
             }
         }

From 250fb0955725d86d57175c91cdc7409c013ec07c Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Mon, 7 Oct 2024 23:44:47 +1100
Subject: [PATCH 04/10] DEBUG: fixed getUserDetails function

---
 backend/middleware/auth0Middleware.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/backend/middleware/auth0Middleware.js b/backend/middleware/auth0Middleware.js
index f3a8ccce..83593d49 100644
--- a/backend/middleware/auth0Middleware.js
+++ b/backend/middleware/auth0Middleware.js
@@ -4,13 +4,12 @@ const axios = require('axios');
 
 async function getUserDetails(req) {
     const accessToken = req.auth.token;
-        const userResponse = await axios.get(process.env.AUTH_DOMAIN+ 'userinfo',
+        const userResponse = await axios.get(process.env.AUTH_DOMAIN+ '/userinfo',
         {
             headers: {
                 authorization: `Bearer ${accessToken}`
             }
         })
-
         return userResponse.data;
 }
 
@@ -27,8 +26,10 @@ const auth0Middleware = (app) => {
         tokenSigningAlg: 'RS256'
       });
     
-    app.use(jwtCheck);
-
+    app.use(jwtCheck, (req, res, next) => {
+        next();
+    });
+    
     app.use(async (req, res, next) => {
         try {
             req.user = await getUserDetails(req);
@@ -45,6 +46,10 @@ const auth0Middleware = (app) => {
             }
         }
     })
+    app.use((req, res, next) => {
+        console.log('User info after authentication:',req.user);
+        next();
+    });
 }
 
 module.exports = {

From 4f77b2c5421a246d938792cbfc3965ac43eefe02 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Tue, 8 Oct 2024 00:02:11 +1100
Subject: [PATCH 05/10] DEBUG: Added auth parameter to request

---
 backend/middleware/auth0Middleware.js |  4 ----
 backend/server.js                     | 14 ++++++++++----
 frontend/src/pages/Students.jsx       |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/backend/middleware/auth0Middleware.js b/backend/middleware/auth0Middleware.js
index 83593d49..9cbbd079 100644
--- a/backend/middleware/auth0Middleware.js
+++ b/backend/middleware/auth0Middleware.js
@@ -46,10 +46,6 @@ const auth0Middleware = (app) => {
             }
         }
     })
-    app.use((req, res, next) => {
-        console.log('User info after authentication:',req.user);
-        next();
-    });
 }
 
 module.exports = {
diff --git a/backend/server.js b/backend/server.js
index 718ac526..5b2801c8 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -23,10 +23,7 @@ const app = express();
 // required to attach reqs with a body to the req object for req handling
 app.use(express.json());
 app.use(cors(corsOptions));
-app.use((req, res, next) => {
-    console.log(req.path, req.method);
-    next();
-});
+
 
 if (process.env.AUTH == "TEST") { auth0Middleware(app); }
 
@@ -64,6 +61,15 @@ app.use(async (req, res, next) => {
         res.status(500).send('Server error');
     }
 });
+app.use((req, res, next) => {
+    console.log(req.path, req.method);
+    if (req.user) {
+        console.log('Authenticated user');
+    } else {
+        console.log('Unauthenticated request');
+    }
+    next();
+});
 
 app.use('/api/units/', unitRoutes);
 app.use('/api/groups/', groupRoutes);
diff --git a/frontend/src/pages/Students.jsx b/frontend/src/pages/Students.jsx
index 1b330b8d..cf65be56 100644
--- a/frontend/src/pages/Students.jsx
+++ b/frontend/src/pages/Students.jsx
@@ -58,7 +58,7 @@ function Students() {
       {
         method: 'POST',
         headers: new Headers({
-          Authorization: `Bearer 0000`,
+          Authorization: `Bearer ${token}`,
           Accept: 'application/json',
           'Content-Type': 'application/json',
         })

From 533323f4499f05d9e2421da3650caefe15ad2fd0 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sat, 12 Oct 2024 13:11:53 +1100
Subject: [PATCH 06/10] changes to get and add unit methods to utilise staff
 id.

---
 backend/routeHandlers/unitRouteHandler.js | 45 +++++++++++++++++------
 backend/server.js                         | 10 -----
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/backend/routeHandlers/unitRouteHandler.js b/backend/routeHandlers/unitRouteHandler.js
index 64a81865..37f9638a 100644
--- a/backend/routeHandlers/unitRouteHandler.js
+++ b/backend/routeHandlers/unitRouteHandler.js
@@ -10,8 +10,19 @@ const getAllUnits = async (req, res) => {
     /**
      * Gets all units registered under a user
      */
+    const email = req.user.email;
     try {
-        const units = await promiseBasedQuery("SELECT * FROM unit_offering;");
+        const [staff] = await promiseBasedQuery(
+            "SELECT staff_unique_id FROM staff WHERE email_address = ?;",
+            [email]
+        );
+
+        if (!staff) {
+            return res.status(404).send('Staff not found');
+        }
+        staff_id= staff.staff_unique_id
+        console.log('getreq: ',staff_id)
+        const units = await promiseBasedQuery("SELECT * FROM unit_offering where staff_unique_id=?",[staff_id]);
         res.status(200).json(units);
     } catch (e) {
         console.log(e);
@@ -19,9 +30,6 @@ const getAllUnits = async (req, res) => {
 };
 
 const addUnit = async (req, res) => {
-    /**
-     * Adds a new unit under a users account
-     */
     const {
         unitCode,
         unitName,
@@ -30,13 +38,27 @@ const addUnit = async (req, res) => {
         color
     } = req.body;
 
+    const email = req.user.email; // Assuming email is available from the decoded token
+
     try {
-        // note: unique id has auto_increment enabled thus not provided
+        // First, retrieve staff_id from the staff table
+        const [staff] = await promiseBasedQuery(
+            "SELECT staff_unique_id FROM staff WHERE email_address = ?;",
+            [email]
+        );
+
+        if (!staff) {
+            return res.status(404).send('Staff not found');
+        }
+        staff_id= staff.staff_unique_id
+        console.log(staff_id)
+
+        // Now, insert the unit offering
         await promiseBasedQuery(
             "INSERT INTO unit_offering " +
-            "(unit_code, unit_name, unit_off_year, unit_off_period, enrolment_count, unit_color) " +
-            "VALUES (?, ?, ?, ?, ?, ?);",
-            [unitCode, unitName, Number(year), period, 0, color]
+            "(unit_code, unit_name, unit_off_year, unit_off_period, staff_unique_id, enrolment_count, unit_color) " +
+            "VALUES (?, ?, ?, ?, ?, ?, ?);",
+            [unitCode, unitName, Number(year), period, staff_id, 0, color]
         );
 
         res.status(200).send();
@@ -45,18 +67,17 @@ const addUnit = async (req, res) => {
         let errorMsg;
         switch (error.code) {
             case "ER_DUP_ENTRY":
-                errorMsg = `the unit offering ${unitCode}, ${year}, ${period} already exists`;
+                errorMsg = `The unit offering ${unitCode}, ${year}, ${period} already exists`;
                 break;
             case "ER_BAD_FIELD_ERROR":
-                errorMsg = `year ${year} is not a number`;
+                errorMsg = `Year ${year} is not a number`;
                 break;
             default:
-                errorMsg = "something went wrong :(";
+                errorMsg = "Something went wrong :(";
         }
         res.status(400).send(errorMsg);
     }
 };
-
 const deleteUnit = async function (req, res) {
     /**
      * Deletes a unit registered under a user by going through related foreign key constraints
diff --git a/backend/server.js b/backend/server.js
index 5b2801c8..e17374a9 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -29,16 +29,6 @@ if (process.env.AUTH == "TEST") { auth0Middleware(app); }
 
 if (process.env.AUTH == "DEV" || process.env.AUTH == null) { mockAuthMiddleware(app); }
 
-app.use(async (req, res, next) => {
-    results = await db_connection.promise().query(`SELECT * FROM staff WHERE email_address='${req.user.email}';`);
-    if (results[0].length === 0) {
-        await db_connection.promise().query(
-            `INSERT INTO staff (preferred_name, last_name, email_address)
-            VALUES ('${req.user.nickname}', '${req.user.nickname}', '${req.user.email}');`
-        )
-    }
-    next();
-})
 
 
 app.use(async (req, res, next) => {

From 198eab5746e473f4a397bb0b8c5fecf61c34d59e Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sat, 12 Oct 2024 19:12:30 +1100
Subject: [PATCH 07/10] DEBUG: removing a massive console.log

---
 backend/helpers/formsHelpers.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/helpers/formsHelpers.js b/backend/helpers/formsHelpers.js
index baad9895..f146e66e 100644
--- a/backend/helpers/formsHelpers.js
+++ b/backend/helpers/formsHelpers.js
@@ -5,7 +5,6 @@ const { v4: uuidv4 } = require('uuid');
 const { MAX_ACCESS_BOUNDARY_RULES_COUNT } = require('google-auth-library/build/src/auth/downscopedclient');
 require('dotenv').config();``
 
-console.log(process.env)
 const SERVICE_ACCOUNT_JSON = JSON.parse(process.env.GOOGLE_SERVICE_ACCOUNT_TOKEN )
 const SCOPES = ['https://www.googleapis.com/auth/forms', 'https://www.googleapis.com/auth/drive'];
 const auth = new GoogleAuth({

From 0ea8add3c1e511a2dd80f74b8cb69bc4cd1b75ba Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sat, 12 Oct 2024 19:39:49 +1100
Subject: [PATCH 08/10] Added a loading spinner so processes between
 authentication look more smooth

---
 .../src/components/_shared/LoadingSpinner.jsx    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 frontend/src/components/_shared/LoadingSpinner.jsx

diff --git a/frontend/src/components/_shared/LoadingSpinner.jsx b/frontend/src/components/_shared/LoadingSpinner.jsx
new file mode 100644
index 00000000..cb30e9b6
--- /dev/null
+++ b/frontend/src/components/_shared/LoadingSpinner.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Spinner, Flex } from '@chakra-ui/react';
+
+const LoadingSpinner = () => (
+  <Flex justify="center" align="center" height="100vh">
+    <Spinner
+      thickness="4px"
+      speed="0.65s"
+      emptyColor="gray.200"
+      color="blue.500"
+      size="xl"
+    />
+  </Flex>
+);
+
+export default LoadingSpinner;
\ No newline at end of file

From c81920d597d7f9973f34080e135516429f11708a Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sat, 12 Oct 2024 19:40:06 +1100
Subject: [PATCH 09/10] Moved login page to use authentication.

---
 frontend/src/App.jsx               | 24 +----------------------
 frontend/src/pages/LandingPage.jsx | 31 ++++++++++++++++++++----------
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2eb526c1..b0c20f18 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -101,29 +101,7 @@ function App() {
             </Routes>
           )}
           {!isAuthenticated && (
-            <Container centerContent>
-              <Routes>
-                <Route
-                  path="/login"
-                  element={<LoginPage />}
-                />
-                <Route
-                  path="signup"
-                  element={<RegistrationPage />}
-                />
-              </Routes>
-              <Box height="100px"></Box>
-              <Heading as="h3" size="xl">
-                <Link as={RouterLink} to="login" ml="8">
-                  <button>
-                    <Heading as="h2" size="xl" variant="underline">
-                      Login
-                    </Heading>
-                  </button>{' '}
-                </Link>
-                to Create Groups!
-              </Heading>
-            </Container>
+            <LandingPage/>
           )}
         </div>
       </BrowserRouter>
diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index 7fa60d78..9eec7723 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -10,9 +10,20 @@ import {
     Link
 } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
-
+import { useAuth0 } from '@auth0/auth0-react';
+import { MockAuth } from '../helpers/mockAuth';
 import logo from '../assets/logo.png';
+import LoadingSpinner from '../components/_shared/LoadingSpinner';
 function LandingPage() {
+    let authService = {
+        DEV: MockAuth,
+        TEST: useAuth0,
+      };
+    
+    const { isAuthenticated,isLoading, loginWithRedirect, logout } = authService[import.meta.env.VITE_REACT_APP_AUTH]();
+    if(isLoading){
+        return (<LoadingSpinner/>)
+    }
     return (
         <Container maxW={'7xl'}>
             <Stack
@@ -71,15 +82,15 @@ function LandingPage() {
                                 Get Started
                             </Button>
                         </Link>
-                        <Link as={RouterLink} to="/login" ml="8">
-                            <Button
-                                rounded={'full'}
-                                size={'lg'}
-                                fontWeight={'normal'}
-                                px={6}>
-                                Log In
-                            </Button>
-                        </Link>
+                        <Flex>
+                            {isAuthenticated ? (
+                                <Button onClick={logout} height="8vh" width="14vh" maxHeight="2.6em" minHeight="1.8em" maxWidth="6.5em" minWidth="4.3em" boxShadow="lg">Logout</Button>
+                            ) : (
+                                <Button onClick={()=> loginWithRedirect()}>
+                                Login
+                                </Button>
+                            )}
+                        </Flex>
                     </Stack>
                 </Stack>
                 <Flex

From 37adb7256c097a034d5bd5ee0c918a9d37287996 Mon Sep 17 00:00:00 2001
From: Alucardigan <thejas.t.vinod@gmail.com>
Date: Sat, 12 Oct 2024 21:12:00 +1100
Subject: [PATCH 10/10] Feature: Added a better user dashboard

---
 frontend/src/components/_shared/NavBar.jsx | 44 +++++++++++-----------
 frontend/src/pages/UserDashboard.jsx       | 36 +++++++++++++++---
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/_shared/NavBar.jsx b/frontend/src/components/_shared/NavBar.jsx
index ad3c08df..15b88a10 100644
--- a/frontend/src/components/_shared/NavBar.jsx
+++ b/frontend/src/components/_shared/NavBar.jsx
@@ -1,10 +1,10 @@
 import { useAuth0 } from '@auth0/auth0-react';
-import { Image, Flex, Button, Link } from '@chakra-ui/react';
+import { Image, Flex, Button, Link,Menu,MenuButton,MenuList,MenuItem,Avatar, IconButton } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
-
+import { ChevronDownIcon } from '@chakra-ui/icons';
 import { MockAuth } from '../../helpers/mockAuth';
 import logo from '../../assets/logo_separated.png';
-import { useNavigate } from 'react-router-dom';
+
 
 const NavBar = ({ authenticated }) => {
   let authService = {
@@ -14,12 +14,6 @@ const NavBar = ({ authenticated }) => {
 
   const { loginWithRedirect, logout } =
     authService[import.meta.env.VITE_REACT_APP_AUTH]();
-  const navigate = useNavigate();
-
-  const navigateToPage = () =>{
-    console.log("Going to contributors page")
-    navigate("/ContributorPage")
-  }
 
   return (
     <Flex as="header"
@@ -59,11 +53,6 @@ const NavBar = ({ authenticated }) => {
             <b>Tutorial</b>
           </Button>
         </Link>
-        <Link as={RouterLink} to="/userInfo" ml="8">
-          <Button colorScheme="white" variant="solid" color="black" fontSize="1.4em" fontWeight="light" size="lg" height="63" px="6">
-            <b>User</b>
-          </Button>
-        </Link>
         <Link as={RouterLink} to="/FAQ" ml="8">
           <Button colorScheme="white" variant="solid" color="black" fontSize="1.4em" fontWeight="light" size="lg" height="63" px="6">
             <b>FAQ</b>
@@ -76,15 +65,24 @@ const NavBar = ({ authenticated }) => {
         </Link>
 
       </Flex>
-      <Flex>
-        {authenticated ? (
-              <Button onClick={logout} height="8vh" width="14vh" maxHeight="2.6em" minHeight="1.8em" maxWidth="6.5em" minWidth="4.3em" boxShadow="lg">Logout</Button>
-        ) : (
-            <Button onClick={()=> loginWithRedirect()}>
-              Login
-            </Button>
-        )}
-      </Flex>
+      <Menu>
+        <MenuButton
+          as={IconButton}
+          icon={<Avatar size="sm"/>}
+          boxShadow="lg"
+        >
+        </MenuButton>
+        <MenuList>
+          {authenticated ? (
+            <>
+              <MenuItem as={RouterLink} to="/userInfo">View Profile</MenuItem>
+              <MenuItem onClick={logout}>Logout</MenuItem>
+            </>
+          ) : (
+            <MenuItem onClick={loginWithRedirect}>Login</MenuItem>
+          )}
+        </MenuList>
+      </Menu>
     </Flex>
   );
 };
diff --git a/frontend/src/pages/UserDashboard.jsx b/frontend/src/pages/UserDashboard.jsx
index 8d4d11f4..b320cad7 100644
--- a/frontend/src/pages/UserDashboard.jsx
+++ b/frontend/src/pages/UserDashboard.jsx
@@ -1,4 +1,6 @@
 import { useAuth0 } from "@auth0/auth0-react";
+import { EmailIcon } from "@chakra-ui/icons";
+import { Badge, Box, Container, HStack, Heading, Image, VStack,Text } from "@chakra-ui/react";
 import React from "react";
 
 const UserDashboard = () => {
@@ -10,11 +12,35 @@ const UserDashboard = () => {
 
   return (
     isAuthenticated && (
-      <div>
-        <img src={user.picture} alt={user.name} />
-        <h2>{user.name}</h2>
-        <p>{user.email}</p>
-      </div>
+      <Container maxW="container.md" py={10}>
+      <Box bg={"white"} p={6} borderRadius="lg" boxShadow="md">
+        <VStack spacing={6} align="center">
+          <Image
+            borderRadius="full"
+            boxSize="150px"
+            src={user.picture}
+            alt={user.name}
+            border="4px solid"
+            borderColor="blue.400"
+          />
+          <VStack spacing={2} textAlign="center">
+            <Heading as="h2" size="xl" color={"black"}>
+              {user.name}
+            </Heading>
+            <Badge colorScheme="blue" fontSize="md">
+              {user.nickname || "User"}
+            </Badge>
+          </VStack>
+          <HStack>
+            <EmailIcon color="blue.500" />
+            <Text color={"black"}>{user.email}</Text>
+          </HStack>
+          {user.email_verified && (
+            <Badge colorScheme="green">Email Verified</Badge>
+          )}
+        </VStack>
+      </Box>
+    </Container>
     )
   );
 };