rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add logout feature in dashboard

Browse source
This commit is contained in:
swve 2023-12-26 22:41:38 +01:00
parent 6aa849b305
commit 259007afa5
2 changed files with 44 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

32
apps/web/components/Dashboard/UI/LeftMenu.tsx
View file

@ -3,16 +3,19 @@ import { useOrg } from '@components/Contexts/OrgContext';
import { useSession } from '@components/Contexts/SessionContext';
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import LearnHouseDashboardLogo from '@public/dashLogo.png';
import { logout } from '@services/auth/auth';
import Avvvatars from 'avvvatars-react';
import { ArrowLeft, Book, BookCopy, Home, School, Settings } from 'lucide-react'
import { ArrowLeft, Book, BookCopy, Home, LogOut, School, Settings } from 'lucide-react'
import Image from 'next/image';
import Link from 'next/link'
import { useRouter } from 'next/navigation';
import React, { use, useEffect } from 'react'
function LeftMenu() {
const org = useOrg() as any;
const session = useSession() as any;
const [loading, setLoading] = React.useState(true);
const route = useRouter();
function waitForEverythingToLoad() {
if (org && session) {
@ -21,6 +24,14 @@ function LeftMenu() {
return false;
}
async function logOutUI() {
const res = await logout();
if (res) {
route.push('/login');
}
}
useEffect(() => {
if (waitForEverythingToLoad()) {
setLoading(false);
@ -59,20 +70,23 @@ function LeftMenu() {
</ToolTip>
</div>
<div className='flex flex-col mx-auto pb-7 space-y-2'>
<ToolTip content={session.user.username + "'s Settings"} slateBlack sideOffset={8} side='right' >
<Link href={'/dash/user/settings/general'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
</ToolTip>
<div className="flex items-center flex-col space-y-4">
<div className="flex items-center flex-col space-y-2">
<ToolTip content={session.user.username} slateBlack sideOffset={8} side='right' >
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
</div>
</ToolTip>
<ToolTip content={'Learnhouse Version'} slateBlack sideOffset={8} side='right' >
<div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
<div className='flex items-center flex-col space-y-1'>
<ToolTip content={session.user.username + "'s Settings"} slateBlack sideOffset={8} side='right' >
<Link href={'/dash/user/settings/general'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
</ToolTip>
<ToolTip content={'Logout'} slateBlack sideOffset={8} side='right' >
<LogOut onClick={() => logOutUI()} className='mx-auto text-neutral-400 cursor-pointer' size={14} />
</ToolTip>
</div>
</div>
</div>

20
apps/web/services/auth/auth.ts
View file

@ -29,6 +29,26 @@ export async function loginAndGetToken(username: string, password: string): Prom
return response;
}
export async function logout(): Promise<any> {
// Request Config
// get origin
const HeadersConfig = new Headers({ "Content-Type": "application/x-www-form-urlencoded" });
const urlencoded = new URLSearchParams();
const requestOptions: any = {
method: "DELETE",
headers: HeadersConfig,
body: urlencoded,
redirect: "follow",
credentials: "include",
};
// fetch using await and async
const response = await fetch(`${getAPIUrl()}auth/logout`, requestOptions);
return response;
}
export async function getUserInfo(token: string): Promise<any> {
const origin = window.location.origin;
const HeadersConfig = new Headers({ Authorization: `Bearer ${token}`, Origin: origin });