Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

logout prompt added

Browse source
This commit is contained in:
Hollgy 2024-03-18 15:42:07 +01:00
parent ac527a4b71
commit b1f6c21b6f
1 changed files with 41 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
client-solid/src/Components/LoginButton.tsx
View file

@ -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 { LoginContext, ModalContext } from "../Context/GlobalState";
import { UserCircle } from "../Util/Icons"; import { UserCircle } from "../Util/Icons";
@ -6,18 +6,50 @@ import { UserCircle } from "../Util/Icons";
export function LoginButton(): JSXElement { export function LoginButton(): JSXElement {
const modal_ctx = useContext(ModalContext)!; const modal_ctx = useContext(ModalContext)!;
const login_ctx = useContext(LoginContext)!; const login_ctx = useContext(LoginContext)!;
const [showLogoutModal, setShowLogoutModal] = createSignal(false);
const clickHandler = (): void => { const clickHandler = (): void => {
if (login_ctx.loggedIn()) login_ctx.logOut(); if (login_ctx.loggedIn()) {
else modal_ctx.setOpen(true); setShowLogoutModal(true);
} else {
modal_ctx.setOpen(true);
}
};
const confirmLogout = (): void => {
login_ctx.logOut();
setShowLogoutModal(false);
};
const cancelLogout = (): void => {
setShowLogoutModal(false);
}; };
return ( return (
<div class="btn btn-ghost text-sm capitalize" onClick={clickHandler}> <>
<Show when={login_ctx.loggedIn()} fallback="Login"> <div class="btn btn-ghost text-sm capitalize" onClick={clickHandler}>
{login_ctx.username()} <Show when={login_ctx.loggedIn()} fallback="Login">
</Show> {login_ctx.username()}
<UserCircle /> </Show>
</div> </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>
)}
</>
); );
} }