From 259007afa5e513b17005780e95193dabfb9cd8ca Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 26 Dec 2023 22:41:38 +0100
Subject: [PATCH] feat: add logout feature in dashboard

---
 apps/web/components/Dashboard/UI/LeftMenu.tsx | 34 +++++++++++++------
 apps/web/services/auth/auth.ts                | 20 +++++++++++
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/Dashboard/UI/LeftMenu.tsx b/apps/web/components/Dashboard/UI/LeftMenu.tsx
index 06e50fa6..e55225f9 100644
--- a/apps/web/components/Dashboard/UI/LeftMenu.tsx
+++ b/apps/web/components/Dashboard/UI/LeftMenu.tsx
@@ -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>
-                        </ToolTip>
+                        <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>
diff --git a/apps/web/services/auth/auth.ts b/apps/web/services/auth/auth.ts
index e01e3951..623da877 100644
--- a/apps/web/services/auth/auth.ts
+++ b/apps/web/services/auth/auth.ts
@@ -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 });