diff options
Diffstat (limited to 'react-frontend/src/components/Layout.tsx')
| -rw-r--r-- | react-frontend/src/components/Layout.tsx | 25 |
1 files changed, 18 insertions, 7 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> |