From b1f6c21b6f8fadd47433a8b0ce333af2e1e084fa Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Mon, 18 Mar 2024 15:42:07 +0100
Subject: [PATCH] logout prompt added

---
 client-solid/src/Components/LoginButton.tsx | 50 +++++++++++++++++----
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/client-solid/src/Components/LoginButton.tsx b/client-solid/src/Components/LoginButton.tsx
index a04bac5..14d1bc3 100644
--- a/client-solid/src/Components/LoginButton.tsx
+++ b/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>
+    <>
+      <div class="btn btn-ghost text-sm capitalize" onClick={clickHandler}>
+        <Show when={login_ctx.loggedIn()} fallback="Login">
+          {login_ctx.username()}
+        </Show>
+      </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>
+      )}
+    </>
   );
 }