68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import * as AlertDialog from '@radix-ui/react-alert-dialog';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import { LogoutIcon } from '@shared/icons';
|
|
|
|
import { useStronghold } from '@stores/stronghold';
|
|
|
|
export function Logout() {
|
|
const { db } = useStorage();
|
|
|
|
const navigate = useNavigate();
|
|
const clearPrivkey = useStronghold((state) => state.clearPrivkey);
|
|
|
|
const logout = async () => {
|
|
// remove account
|
|
db.accountLogout();
|
|
// clear privkey in session storage
|
|
clearPrivkey();
|
|
// redirect to welcome screen
|
|
navigate('/auth/welcome');
|
|
};
|
|
|
|
return (
|
|
<AlertDialog.Root>
|
|
<AlertDialog.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
|
|
>
|
|
<LogoutIcon className="h-4 w-4 text-white" />
|
|
</button>
|
|
</AlertDialog.Trigger>
|
|
<AlertDialog.Portal>
|
|
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
|
|
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
|
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
|
|
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
|
|
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
|
|
Are you sure!
|
|
</AlertDialog.Title>
|
|
<AlertDialog.Description className="text-sm leading-tight text-white/50">
|
|
You can always log back in at any time. If you just want to switch
|
|
accounts, you can do that by adding an existing account.
|
|
</AlertDialog.Description>
|
|
</div>
|
|
<div className="flex justify-end gap-2 px-5 py-3">
|
|
<AlertDialog.Cancel asChild>
|
|
<button className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium leading-none text-white outline-none hover:bg-white/10 hover:backdrop-blur-xl">
|
|
Cancel
|
|
</button>
|
|
</AlertDialog.Cancel>
|
|
<button
|
|
type="button"
|
|
onClick={() => logout()}
|
|
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Portal>
|
|
</AlertDialog.Root>
|
|
);
|
|
}
|