Add logout button

ShokoAnime · Jan 6, 2024 · 1e857f5 · 1e857f5
1 parent c7857a3
commit 1e857f5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/components/Input/ButtonDropdown.tsx b/src/components/Input/ButtonDropdown.tsx
@@ -9,11 +9,11 @@ type Props = {
   buttonTypes?: 'primary' | 'secondary' | 'danger';
   className?: string;
   children: React.ReactNode;
+  content: React.ReactNode | string;
   disabled?: boolean;
   loading?: boolean;
   loadingSize?: number;
   tooltip?: string;
-  text: string;
 };
 
 const buttonTypeClasses = {
@@ -30,10 +30,10 @@ const ButtonDropdown = (props: Props) => {
     buttonTypes,
     children,
     className,
+    content,
     disabled,
     loading,
     loadingSize,
-    text,
     tooltip,
   } = props;
 
@@ -50,37 +50,35 @@ const ButtonDropdown = (props: Props) => {
         title={tooltip}
         className={cx([
           `${className} button rounded font-semibold transition ease-in-out focus:shadow-none focus:outline-none min-w-full`,
-          `${buttonTypeClasses[buttonTypes ?? 'secondary']} border border-panel-border`,
+          buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes ?? 'secondary']} border border-panel-border`,
           loading && 'cursor-default',
           disabled && 'cursor-default opacity-50',
         ])}
         onClick={onClick}
         disabled={disabled}
       >
         {loading && (
-          <div className="flex justify-center">
+          <div className="flex items-center justify-center">
             <Icon path={mdiLoading} spin size={loadingSize ?? 1} />
           </div>
         )}
 
         {!loading && (
-          <div className="flex flex-row justify-between">
-            <span>{text}</span>
+          <div className="flex flex-row items-center justify-between">
+            <span>{content}</span>
             <Icon path={mdiChevronDown} size={1} />
           </div>
         )}
       </button>
       <div
         className={cx([
-          'flex-col fixed z-10 origin-top-right text-right overflow-hidden',
+          'flex-col fixed z-10 origin-top-right text-right overflow-hidden justify-center w-full',
           open ? 'flex' : 'hidden',
-          buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes ?? 'secondary']} border border-panel-border`,
+          buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes]} border border-panel-border`,
         ])}
         style={{ maxWidth: `${bounds.width}px` }}
       >
-        <div className="py-1" role="none">
-          {children}
-        </div>
+        {children}
       </div>
     </div>
   );

diff --git a/src/components/Layout/TopNav.tsx b/src/components/Layout/TopNav.tsx
@@ -15,6 +15,7 @@ import {
   mdiInformationOutline,
   mdiLayersTripleOutline,
   mdiLoading,
+  mdiLogout,
   mdiServer,
   mdiTabletDashboard,
   mdiTextBoxOutline,
@@ -36,6 +37,7 @@ import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { useCurrentUserQuery } from '@/core/react-query/user/queries';
 import { useUpdateWebuiMutation } from '@/core/react-query/webui/mutations';
 import { useWebuiUpdateCheckQuery } from '@/core/react-query/webui/queries';
+import { unsetDetails } from '@/core/slices/apiSession';
 import { setQueueModalOpen } from '@/core/slices/mainpage';
 import { NetworkAvailability } from '@/core/types/signalr';
 
@@ -144,6 +146,11 @@ function TopNav() {
     dispatch(setQueueModalOpen(false));
   };
 
+  const handleLogout = useEventCallback(() => {
+    dispatch(unsetDetails());
+    navigate('/webui/login');
+  });
+
   const handleWebUiUpdate = () => {
     const renderToast = () => (
       <div className="flex flex-col gap-y-3">
@@ -220,6 +227,9 @@ function TopNav() {
             >
               <Icon path={mdiCogOutline} size={0.8333} />
             </NavLink>
+            <Button onClick={handleLogout} tooltip="Log out">
+              <Icon path={mdiLogout} size={0.8333} />
+            </Button>
           </div>
         </div>
         <div className="bg-topnav-background text-topnav-text">

diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
@@ -297,8 +297,8 @@ function UnrecognizedTab() {
               />
               <TransitionDiv show={selectedRows.length !== 0} className="flex h-[50px] gap-x-3">
                 <ButtonDropdown
-                  text="Options"
                   className="px-4 py-2.5"
+                  content="Options"
                 >
                   <Button
                     buttonType="primary"