logout prompt added

client-solid/src/Components/LoginButton.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, Show, useContext } from "solid-js";
+import { JSXElement, Show, createSignal, useContext } from "solid-js";
 
 import { LoginContext, ModalContext } from "../Context/GlobalState";
 import { UserCircle } from "../Util/Icons";
@@ -6,18 +6,50 @@ import { UserCircle } from "../Util/Icons";
 export function LoginButton(): JSXElement {
   const modal_ctx = useContext(ModalContext)!;
   const login_ctx = useContext(LoginContext)!;
+  const [showLogoutModal, setShowLogoutModal] = createSignal(false);
 
   const clickHandler = (): void => {
-    if (login_ctx.loggedIn()) login_ctx.logOut();
-    else modal_ctx.setOpen(true);
+    if (login_ctx.loggedIn()) {
+      setShowLogoutModal(true);
+    } else {
+      modal_ctx.setOpen(true);
+    }
+  };
+
+  const confirmLogout = (): void => {
+    login_ctx.logOut();
+    setShowLogoutModal(false);
+  };
+
+  const cancelLogout = (): void => {
+    setShowLogoutModal(false);
   };
 
   return (
+    <>
       <div class="btn btn-ghost text-sm capitalize" onClick={clickHandler}>
         <Show when={login_ctx.loggedIn()} fallback="Login">
           {login_ctx.username()}
         </Show>
-      <UserCircle />
       </div>
+      {showLogoutModal() && (
+        <div role="alert" class="absolute top-10 z-10 flex bg-slate-500 rounded-md">
+          <div class="relative p-5">
+            <p>Do you wish to logout?</p>
+            <div
+              class="w-100' flex justify-between
+            "
+            >
+              <button class="btn btn-sm" onClick={confirmLogout}>
+                Yes
+              </button>
+              <button class="btn btn-sm" onClick={cancelLogout}>
+                No
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }