add logout button

2 files changed, 22 insertions, 9 deletions

diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index 979dacb..db31b55 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,25 +1,36 @@
-import { Outlet } from "react-router-dom";
+import { Dispatch } from 'react';
+import { Outlet, useNavigate } from "react-router-dom";
 import { IconButton, Button, ButtonGroup } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 import { FaUser } from "react-icons/fa6";
 import { FaGamepad } from "react-icons/fa";
 import { GiCowboyHolster } from "react-icons/gi";
 import { GrAdd } from "react-icons/gr";
+import { UserType } from "../routes/index";
 
-export type userData = { userData: { name: string } };
+export type userData = { name: string };
 
-						//{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="" onClick={loginLink} className="pb-2"> Login with Github </a> }
 
-
-export default function Layout({userData} : userData)
+export default function Layout(prop : { userData: userData, setUserData : Dispatch<UserType> })
 {
+	const navigate = useNavigate();
+
 	const loginLink = () => {
 		window.open(`https://github.com/login/oauth/authorize?client_id=${import.meta.env.VITE_GITHUB_CLIENTID}`);
 	};
 
+	const logoutLink = () => {
+		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/auth/logout`, { credentials: "include" }).then(function() {
+			prop.setUserData({name: ""})
+			navigate('/');
+		});
+	};
+
 
 	const loggedout_element = <IconButton onClick={loginLink} appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>;
-	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" style={{width:"100%"}}>{userData.name}</Button><Button appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
+	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" style={{width:"100%"}}>{prop.userData.name}</Button><Button onClick={logoutLink} appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
+
+	console.log(prop);
 
 	return(
 		<>
@@ -27,7 +38,7 @@ export default function Layout({userData} : userData)
 				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 bg-stone-100">
 					<div className="flex flex-col bg-stone-800">
 					<div className="m-4 mb-0 flex flex-col flex-grow">
-						{ userData.name ? loggedin_element : loggedout_element }
+						{ prop.userData.name ? loggedin_element : loggedout_element }
 					</div>
 					</div>
 					<div className="border-green-500 p-2 mb-2 text-red-700 bg-stone-800 rounded-b-xl"><Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/></div>
diff --git a/react-frontend/src/routes/index.tsx b/react-frontend/src/routes/index.tsx
index e22bcc4..6876ce5 100644
--- a/react-frontend/src/routes/index.tsx
+++ b/react-frontend/src/routes/index.tsx
@@ -4,10 +4,12 @@ import Home from "../pages/Home";
 import Layout from "../components/Layout";
 import CloseWindow from "../pages/CloseWindow";
 
+export type UserType = { name: string };
+
 export default function Index()
 {
 
-	const [userData, setUserData] = useState({ name: '' });
+	const [userData, setUserData] = useState<UserType>({ name: '' });
 	useEffect(() => {
 		const update_login_status = () => {
 			//localStorage.removeItem("logged in trigger");
@@ -30,7 +32,7 @@ export default function Index()
 	return (<>
 				<Router>
 					<Routes>
-						<Route path="/" element = {<Layout userData={userData}/>}>
+						<Route path="/" element = {<Layout userData={userData} setUserData={setUserData}/>}>
 							<Route index element={<Home />} />
 							<Route path="/closewindow" element={<CloseWindow />} />
 						</Route>