fix home/header login button

frontend/public/locales/en/translation.json

@@ -7,7 +7,8 @@
     "home": "Home",
     "tag": "en",
     "homepage": "Homepage",
-    "projectUploadForm": "Project upload form"
+    "projectUploadForm": "Project upload form",
+    "logout": "Logout"
   },
   "home": {
     "home": "Home",

frontend/public/locales/nl/translation.json

@@ -6,7 +6,8 @@
     "home": "Home",
     "tag": "nl",
     "homepage": "Homepage",
-    "projectUploadForm": "Project uploaden"
+    "projectUploadForm": "Project uploaden",
+    "logout": "Afmelden"
   },
   "home": {
     "home": "Home",

frontend/src/App.tsx

@@ -8,13 +8,14 @@ import ProjectView from "./pages/project/projectView/ProjectView";
 import { ErrorBoundary } from "./pages/error/ErrorBoundary.tsx";
 import ProjectCreateHome from "./pages/create_project/ProjectCreateHome.tsx";
 import SubmissionsOverview from "./pages/submission_overview/SubmissionsOverview.tsx";
-import {fetchProjectPage} from "./pages/project/FetchProjects.tsx";
+import {fetchProjectPage} from "./utils/fetches/FetchProjects.tsx";
 import HomePages from "./pages/home/HomePages.tsx";
 import ProjectOverView from "./pages/project/projectOverview.tsx";
+import {fetchMe} from "./utils/fetches/FetchMe.ts";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
+    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />} loader={fetchMe}>
       <Route index element={<HomePages />} loader={fetchProjectPage}/>
       <Route path=":lang" element={<LanguagePath/>}>
         <Route path="home" element={<HomePages />} loader={fetchProjectPage} />

frontend/src/components/Header/Header.tsx

@@ -12,19 +12,24 @@ import {
   ListItemButton,
   ListItemText
 } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
 import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from "react";
+import MenuIcon from "@mui/icons-material/Menu";
+import React,{useState } from "react";
 import LanguageIcon from "@mui/icons-material/Language";
-import { Link } from "react-router-dom";
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import {Link} from "react-router-dom";
 import { TitlePortal } from "./TitlePortal";
-import {LoginButton} from "./Login";
+import {Me} from "../../types/me.ts";
 
+interface HeaderProps{
+  me:Me
+}
 /**
  * The header component for the application that will be rendered at the top of the page.
  * @returns - The header component
  */
-export function Header(): JSX.Element {
+export function Header({me}:HeaderProps): JSX.Element {
+  const API_URL = import.meta.env.VITE_APP_API_HOST
   const { t, i18n } = useTranslation('translation', { keyPrefix: 'header' });
   const [languageMenuAnchor, setLanguageMenuAnchor] =
     useState<null | HTMLElement>(null);
@@ -47,19 +52,25 @@ export function Header(): JSX.Element {
     { link: "/", text: t("homepage") }
   ]);
 
-  useEffect(() => {
+  const [anchorEl, setAnchorEl] = React.useState<null| HTMLButtonElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  React.useEffect(() => {
     const baseItems = [{ link: "/", text: t("homepage") }];
     const additionalItems = [
       { link: "/projects", text: t("myProjects") },
       { link: "/courses", text: t("myCourses") }
     ];
-    if (isLoggedIn()) {
+    if (me.role !== "UNKNOWN") {
       setListItems([...baseItems, ...additionalItems]);
     }
     else {
       setListItems(baseItems);
     }
-  }, [t]);
+  }, [me, t]);
 
   return (
     <Box sx={{ flexGrow: 1 }}>
@@ -69,7 +80,26 @@ export function Header(): JSX.Element {
             <MenuIcon style={{fontSize:"2rem"}} />
           </IconButton>
           <TitlePortal/>
-          <LoginButton></LoginButton>
+          {me.role !== "UNKNOWN" && (
+            <>
+              <IconButton edge="end" onClick={handleClick} sx={{ color: "inherit", marginRight: "0.3rem"}}>
+                <AccountCircleIcon />
+                <Typography variant="body1"  sx={{ paddingLeft: "0.3rem" }}>
+                  {me.display_name}
+                </Typography>
+              </IconButton>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={() => setAnchorEl(null)}
+              >
+                <Typography sx={{ padding: '6px 16px', color: 'black'}}>
+                  {me.display_name}
+                </Typography> 
+                <MenuItem onClick={() => window.location.href = `${API_URL}/logout`}>{t("logout")}</MenuItem>
+              </Menu>
+            </>
+          )}
           <div>
             <IconButton onClick={handleLanguageMenu} color="inherit">
               <LanguageIcon />
@@ -96,12 +126,6 @@ export function Header(): JSX.Element {
     </Box>
   );
 }
-/**
- * @returns Whether a user is logged in or not.
- */
-function isLoggedIn() {
-  return true;
-}
 
 /**
  * Renders the drawer menu component.

frontend/src/components/Header/Layout.tsx

@@ -1,14 +1,17 @@
-import { Outlet } from "react-router-dom";
+import {Outlet, useLoaderData} from "react-router-dom";
 import { Header } from "./Header.tsx";
+import {Me} from "../../types/me.ts"
 
 /**
  * Basic layout component that will be used on all routes.
  * @returns The Layout component
  */
 export default function Layout(): JSX.Element {
+  const meData:Me = useLoaderData() as Me
+
   return (
     <>
-      <Header />
+      <Header me={meData} />
       <Outlet />
     </>
   );

frontend/src/components/Header/Login.tsx

@@ -1,5 +1,6 @@
 import {Button} from "@mui/material";
 import { Link } from 'react-router-dom';
+import {useTranslation} from "react-i18next";
 
 const CLIENT_ID = import.meta.env.VITE_APP_CLIENT_ID;
 const REDIRECT_URI = encodeURI(import.meta.env.VITE_APP_API_HOST + "/auth");
@@ -11,6 +12,7 @@ const TENANT_ID = import.meta.env.VITE_APP_TENANT_ID;
  */
 export function LoginButton(): JSX.Element {
   const link = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/authorize?prompt=select_account&response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=.default`;
+  const { t } = useTranslation('translation', { keyPrefix: 'home' });
 
-  return <Button variant="contained" component={Link} to={link}>Login</Button>
+  return <Button variant="contained" component={Link} to={link}> {t('login', 'Login')}</Button>
 }

frontend/src/pages/home/Home.tsx

@@ -1,14 +1,13 @@
 import { useTranslation } from "react-i18next";
-import { Button, Container, Typography, Box } from "@mui/material";
-import {Link } from "react-router-dom";
+import { Container, Typography, Box } from "@mui/material";
+import {LoginButton} from "../../components/Header/Login.tsx";
 
 /**
  * This component is the home page component that will be rendered when on the index route.
  * @returns - The home page component
  */
 export default function Home() {
   const { t } = useTranslation('translation', { keyPrefix: 'home' });
-  const login_redirect:string =import.meta.env.VITE_LOGIN_LINK
   return (
     <Container maxWidth="sm">
       <Box
@@ -42,9 +41,7 @@ export default function Home() {
         <Typography variant="h6" component="p" >
           {t('welcomeDescription', 'Welcome to Peristeronas.')}
         </Typography>
-        <Button variant="contained" color="primary" size="large" component={Link} to={login_redirect}>
-          {t('login', 'Login')}
-        </Button>
+        <LoginButton/>
       </Box>
     </Container>  );
 }

frontend/src/pages/home/HomePage.tsx

@@ -9,6 +9,7 @@ import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
 import {ProjectDeadlineCard} from "../project/projectDeadline/ProjectDeadlineCard.tsx";
 import {ProjectDeadline} from "../project/projectDeadline/ProjectDeadline.tsx";
 import {useLoaderData} from "react-router-dom";
+import {Me} from "../../types/me.ts";
 
 interface DeadlineInfoProps {
   selectedDay: Dayjs;
@@ -104,7 +105,7 @@ export default function HomePage() {
   const [selectedDay, setSelectedDay] = useState<Dayjs>(dayjs(Date.now()));
   const loader = useLoaderData() as {
     projects: ProjectDeadline[],
-    me: string
+    me: Me
   }
   const projects = loader.projects
 

frontend/src/pages/home/HomePages.tsx

@@ -2,6 +2,7 @@ import HomePage from './HomePage.tsx';
 import Home from "./Home.tsx";
 import {useLoaderData} from "react-router-dom";
 import {ProjectDeadline} from "../project/projectDeadline/ProjectDeadline.tsx";
+import {Me} from "../../types/me.ts"
 
 /**
  * Gives the requested home page based on the login status
@@ -10,9 +11,9 @@ import {ProjectDeadline} from "../project/projectDeadline/ProjectDeadline.tsx";
 export default function HomePages() {
   const loader = useLoaderData() as {
     projects: ProjectDeadline[],
-    me: string
+    me: Me
   }
-  const me = loader.me
+  const me = loader.me.role
   if (me === 'UNKNOWN') {
     return <Home />;
   } else {

frontend/src/types/me.ts

@@ -0,0 +1,6 @@
+export interface Me {
+  role:string,
+  display_name:string,
+  uid:string
+
+}

frontend/src/utils/fetches/FetchMe.ts

@@ -0,0 +1,17 @@
+
+export const fetchMe = async () => {
+  const API_URL = import.meta.env.VITE_APP_API_HOST
+  try {
+    const response = await fetch(`${API_URL}/me`, {
+      credentials: 'include'
+    })
+    if(response.status == 200){
+      const data  = await response.json()
+      return data.data
+    }else {
+      return {role:"UNKNOWN"}
+    }
+  } catch (e){
+    return {role:"UNKNOWN"}
+  }
+}

frontend/src/pages/project/FetchProjects.tsx → frontend/src/utils/fetches/FetchProjects.tsx

@@ -1,4 +1,5 @@
-import {Project, ProjectDeadline, ShortSubmission} from "./projectDeadline/ProjectDeadline.tsx";
+import { fetchMe } from "./FetchMe.ts";
+import {Project, ProjectDeadline, ShortSubmission} from "../../pages/project/projectDeadline/ProjectDeadline.tsx";
 const API_URL = import.meta.env.VITE_APP_API_HOST
 
 export const fetchProjectPage = async () => {
@@ -7,22 +8,6 @@ export const fetchProjectPage = async () => {
   return {projects, me}
 }
 
-export const fetchMe = async () => {
-  try {
-    const response = await fetch(`${API_URL}/me`, {
-      credentials: 'include'
-    })
-    if(response.status == 200){
-      const data  = await response.json()
-      return data.role
-    }else {
-      return "UNKNOWN"
-    }
-  } catch (e){
-    return "UNKNOWN"
-  }
-
-}
 export const fetchProjects = async () => {
 
   try{