From 2e05eee9e7b36ba6d15bbaccba81832dbe85f41e Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 4 Dec 2024 10:10:41 -0800
Subject: [PATCH] Add eject flow

---
 src/app/commands.ts                     |  15 ++++
 src/app/components/LogInPassword.svelte |   2 +-
 src/app/components/LogOut.svelte        |  12 ++-
 src/app/components/ProfileEject.svelte  | 103 +++++++++++++++++++++++-
 4 files changed, 123 insertions(+), 9 deletions(-)

diff --git a/src/app/commands.ts b/src/app/commands.ts
index 928f92f..7a168ab 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -46,6 +46,8 @@ import {
   loadRelay,
   addSession,
   subscribe,
+  clearStorage,
+  dropSession,
 } from "@welshman/app"
 import {
   COMMENT,
@@ -149,6 +151,19 @@ export const loginWithNip46 = async ({
   return true
 }
 
+// Log out
+
+export const logout = async () => {
+  const $pubkey = pubkey.get()
+
+  if ($pubkey) {
+    dropSession($pubkey)
+  }
+
+  await clearStorage()
+  localStorage.clear()
+}
+
 // Loaders
 
 export const loadUserData = (
diff --git a/src/app/components/LogInPassword.svelte b/src/app/components/LogInPassword.svelte
index b2842b4..f654dc2 100644
--- a/src/app/components/LogInPassword.svelte
+++ b/src/app/components/LogInPassword.svelte
@@ -25,7 +25,7 @@
 
   const abortController = new AbortController()
 
-  const relays = BURROW_URL.startsWith('http://')
+  const relays = BURROW_URL.startsWith("http://")
     ? [normalizeRelayUrl("ws://" + stripProtocol(BURROW_URL))]
     : [normalizeRelayUrl(BURROW_URL)]
 
diff --git a/src/app/components/LogOut.svelte b/src/app/components/LogOut.svelte
index 9222b96..abf210c 100644
--- a/src/app/components/LogOut.svelte
+++ b/src/app/components/LogOut.svelte
@@ -1,30 +1,28 @@
 <script lang="ts">
-  import {clearStorage} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {logout} from "@app/commands"
 
   const back = () => history.back()
 
-  const logout = async () => {
+  const doLogout = async () => {
     loading = true
 
     try {
-      await clearStorage()
-      localStorage.clear()
+      await logout()
+      window.location.href = "/"
     } catch (e) {
       loading = false
     }
-
-    window.location.reload()
   }
 
   let loading = false
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={logout}>
+<form class="column gap-4" on:submit|preventDefault={doLogout}>
   <ModalHeader>
     <div slot="title">Are you sure you want<br />to log out?</div>
   </ModalHeader>
diff --git a/src/app/components/ProfileEject.svelte b/src/app/components/ProfileEject.svelte
index 45b983b..dff2adb 100644
--- a/src/app/components/ProfileEject.svelte
+++ b/src/app/components/ProfileEject.svelte
@@ -1 +1,102 @@
-hi
+<script lang="ts">
+  import {postJson} from "@welshman/lib"
+  import {session} from "@welshman/app"
+  import {slideAndFade} from "@lib/transition"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {PLATFORM_NAME, BURROW_URL} from "@app/state"
+  import {pushToast} from "@app/toast"
+  import {logout} from "@app/commands"
+
+  const email = $session?.email
+
+  const back = () => history.back()
+
+  const confirm = async () => {
+    loading = true
+
+    try {
+      const payload = {email, password, eject: true}
+      const res = await postJson(BURROW_URL + "/user", payload, {method: "delete"})
+
+      if (res.error) {
+        return pushToast({message: res.error, theme: "error"})
+      }
+
+      success = true
+      pushToast({message: "Success! Please check your inbox and continue when you're ready."})
+
+      await logout()
+    } finally {
+      loading = false
+    }
+  }
+
+  const reload = () => {
+    loading = true
+    window.location.href = "/"
+  }
+
+  let password = ""
+  let success = false
+  let loading = false
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    <div slot="title">Export your keys</div>
+  </ModalHeader>
+  <p>Here's what the process looks like:</p>
+  <ul class="flex list-inside list-decimal flex-col gap-4">
+    <li>When you're ready, enter your account password below to continue.</li>
+    <li>
+      {PLATFORM_NAME} will send an email to "{email}" with your encrypted private key in it.
+    </li>
+    <li>
+      Store your "ncryptsec" in a password manager like
+      <Link class="link" external href="https://bitwarden.com/">Bitwarden</Link>. This is the key to
+      your social identity; keep it safe and secret.
+    </li>
+    <li>
+      Choose a <Link class="link" href="https://nostrapps.com/#signers">signer app</Link> and import
+      your private key into it. Don't forget your account password; you'll need it to decrypt your key.
+    </li>
+  </ul>
+  <p>
+    Once you export your key, you'll be <strong>logged out</strong> and won't be able to log in using
+    your email and password any more. Going forward, you'll need to use your signer app instead.
+  </p>
+  {#if !success}
+    <div out:slideAndFade>
+      <Field>
+        <p slot="label">To confirm, please enter your password below:</p>
+        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+          <Icon icon="key" />
+          <input type="password" disabled={loading} bind:value={password} class="grow" />
+        </label>
+      </Field>
+    </div>
+  {/if}
+  <ModalFooter>
+    <Button class="btn btn-link" disabled={loading || success} on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    {#if success}
+      <Button class="btn btn-primary" disabled={loading} on:click={reload}>
+        <Icon icon="check-circle" />
+        <Spinner {loading}>Refresh the page</Spinner>
+      </Button>
+    {:else}
+      <Button class="btn btn-error" disabled={loading} on:click={confirm}>
+        <Icon icon="check-circle" />
+        <Spinner {loading}>I understand, send me my private key</Spinner>
+      </Button>
+    {/if}
+  </ModalFooter>
+</div>