add login

3 files changed, 60 insertions, 7 deletions

diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index 8b87634..8f834ef 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,4 +1,5 @@
 import { Outlet } from "react-router-dom";
+import { useState } from "react";
 import { IconButton, Button, ButtonGroup } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 import { FaUser } from "react-icons/fa6";
@@ -6,19 +7,28 @@ import { FaGamepad } from "react-icons/fa";
 import { GiCowboyHolster } from "react-icons/gi";
 import { GrAdd } from "react-icons/gr";
 
-export default function Layout()
+export type userData = { 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)
 {
+	const loginLink = () => {
+		window.open(`https://github.com/login/oauth/authorize?client_id=${import.meta.env.VITE_GITHUB_CLIENTID}`);
+	};
+
+
+	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>;
+
 	return(
 		<>
 			<div className="w-screen h-screen flex border-none">
 				<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">
-						{/*<IconButton appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>*/}
-						<ButtonGroup className="flex">
-							<Button appearance="ghost" style={{width:"100%"}}>Account</Button>
-							<Button appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button>
-						</ButtonGroup>
+						{ 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/pages/CloseWindow.tsx b/react-frontend/src/pages/CloseWindow.tsx
new file mode 100644
index 0000000..b92d77e
--- /dev/null
+++ b/react-frontend/src/pages/CloseWindow.tsx
@@ -0,0 +1,19 @@
+
+export default function CloseWindow () {
+
+	// trigger localStorage listener in other tabs.
+	// this forces react rerender where required.
+	localStorage.setItem("logged in trigger", String(Math.random()));
+	// close window once done
+	window.close();
+
+	// window can only be closed if it was opened by javascript.
+	// if the window was opened by a user then just redirect to
+	// the home page instead.
+	window.location.replace("/");
+
+	return(
+		<>
+		</>
+	);
+}
diff --git a/react-frontend/src/routes/index.tsx b/react-frontend/src/routes/index.tsx
index 5fcae2b..e22bcc4 100644
--- a/react-frontend/src/routes/index.tsx
+++ b/react-frontend/src/routes/index.tsx
@@ -1,14 +1,38 @@
+import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "../pages/Home";
 import Layout from "../components/Layout";
+import CloseWindow from "../pages/CloseWindow";
 
 export default function Index()
 {
+
+	const [userData, setUserData] = useState({ name: '' });
+	useEffect(() => {
+		const update_login_status = () => {
+			//localStorage.removeItem("logged in trigger");
+			const url = `${import.meta.env.VITE_API_TITLE}/api/v1/auth/data`;
+			try { fetch(url, {
+				credentials: "include"
+			}).then((response) => {
+				if(response.ok) {
+					return response.json();
+				}
+				//throw new Error("Network response was not ok.");
+			}).then((response) => response && setUserData(response.user_data)).catch((err) => { console.log(err); });}
+			catch(err) { console.log(err); }
+		};
+		window.addEventListener('storage', update_login_status );
+		update_login_status();
+		return () => { window.removeEventListener('storage', update_login_status); };
+	}, []);
+
 	return (<>
 				<Router>
 					<Routes>
-						<Route path="/" element = {<Layout/>}>
+						<Route path="/" element = {<Layout userData={userData}/>}>
 							<Route index element={<Home />} />
+							<Route path="/closewindow" element={<CloseWindow />} />
 						</Route>
 					</Routes>
 				</Router>