clean up

2023-12-04 12:47:29 +07:00
parent b19637bdb7
commit 4093821fd0
7 changed files with 1 additions and 42 deletions
--- a/src/shared/accounts/logout.tsx
+++ b/src/shared/accounts/logout.tsx
@@ -0,0 +1,84 @@
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+export function Logout() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const logout = async () => {
+    try {
+      ndk.signer = null;
+
+      // remove private key
+      await db.secureRemove(db.account.pubkey);
+      await db.secureRemove(db.account.pubkey + '-nsecbunker');
+
+      // logout
+      await db.accountLogout();
+
+      // clear cache
+      queryClient.clear();
+
+      // redirect to welcome screen
+      navigate('/auth/welcome');
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
+        >
+          Logout
+        </button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
+        <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-neutral-100 dark:bg-neutral-900">
+            <div className="flex flex-col gap-1 border-b border-white/5 px-5 py-4">
+              <AlertDialog.Title className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+                Are you sure!
+              </AlertDialog.Title>
+              <AlertDialog.Description className="text-sm leading-tight text-neutral-600 dark:text-neutral-400">
+                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
+                  type="button"
+                  className="inline-flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-neutral-900 outline-none hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                >
+                  Cancel
+                </button>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <button
+                  type="button"
+                  onClick={() => logout()}
+                  className="inline-flex h-9 items-center justify-center rounded-lg bg-red-500 px-4 text-sm font-medium text-white outline-none hover:bg-red-600"
+                >
+                  Logout
+                </button>
+              </AlertDialog.Action>
+            </div>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}