feat: logout button (#45)

canonical · Jul 26, 2024 · 6e04dc1 · 6e04dc1
1 parent c755064
commit 6e04dc1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/ui/src/app/login.tsx b/ui/src/app/login.tsx
@@ -1,18 +1,28 @@
+import { useState } from "react";
 import { useAuth } from "./auth/authContext";
+import { useCookies } from "react-cookie";
 
 export function AccountTab() {
+    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    const [menuOpen, setMenuOpen] = useState<boolean>(false)
     const authDetails = useAuth()
     return (
         <>
             {
                 authDetails.user ?
-                    <div className="p-side-navigation__link" aria-current="false" style={{ cursor: "pointer" }}>
+                    <div className="p-side-navigation__link p-contextual-menu__toggle" onClick={() => setMenuOpen(!menuOpen)} aria-current={menuOpen} style={{ cursor: "pointer" }}>
                         <i className="p-icon--user is-light p-side-navigation__icon"></i>
                         <span className="p-side-navigation__label">
                             <span className="p-side-navigation__label">{authDetails.user.username}</span>
                         </span>
                         <div className="p-side-navigation__status">
                             <i className="p-icon--menu"></i>
+                            <span className="p-contextual-menu__dropdown" id="menu-3" aria-hidden={!menuOpen} style={{ bottom: "40px" }}>
+                                <span className="p-contextual-menu__group">
+                                    <button className="p-contextual-menu__link">Change Password</button>
+                                    <button className="p-contextual-menu__link" onMouseDown={() => removeCookie("user_token")}>Log Out</button>
+                                </span>
+                            </span>
                         </div>
                     </div>
                     :

diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
@@ -24,7 +24,7 @@ export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { act
                             <nav aria-label="Main">
                                 <ul className="p-side-navigation__list">
                                     <li className="p-side-navigation__item">
-                                        <a className="p-side-navigation__link" href="/certificate_requests" aria-current={activePath.startsWith("/certificate_requests") ? "page" : "false"}  style={{ cursor: "pointer" }}>
+                                        <a className="p-side-navigation__link" href="/certificate_requests" aria-current={activePath.startsWith("/certificate_requests") ? "page" : "false"} style={{ cursor: "pointer" }}>
                                             <i className="p-icon--security is-light p-side-navigation__icon"></i>
                                             <span className="p-side-navigation__label">
                                                 <span className="p-side-navigation__label">Certificate Requests</span>