move routes

2 files changed, 116 insertions, 0 deletions

diff --git a/src/routes/(app)/account/setup/+page.svelte b/src/routes/(app)/account/setup/+page.svelte
new file mode 100644
index 00000000..5a15316a
--- /dev/null
+++ b/src/routes/(app)/account/setup/+page.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { copy } from "$lib/utils";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  import { mnemonic } from "$lib/store";
+  import { generateMnemonic } from "@scure/bip39";
+  import { wordlist } from "@scure/bip39/wordlists/english";
+
+  export let data;
+  let { user } = data;
+
+  let reveal;
+
+  let toggleSeed = async () => {
+    try {
+      $mnemonic = await generateMnemonic(wordlist);
+      reveal = !reveal;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+</script>
+
+<div class="space-y-5">
+  <h1 class="text-center text-3xl font-semibold">Account setup</h1>
+  <h2 class="text-center text-2xl text-secondary">Step 1</h2>
+
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+    <p class="text-secondary mb-1">
+      The keys to your savings account are derived from a seed phrase. When
+      you're ready, write it down and keep it safe.
+    </p>
+
+    <p class="text-secondary mb-1">
+      Whoever knows these words in the correct order can withdraw funds from the account. We can't
+      recover them if you lose them.
+    </p>
+
+    {#if reveal}
+      <div class="text-2xl border p-4 text-center rounded-2xl">
+        {$mnemonic}
+      </div>
+
+      <div>
+        <a href={`/account/setup/step2`} class="contents">
+          <button
+            type="button"
+            class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
+            on:click={toggleSeed}
+          >
+            I've written down my seed phrase
+          </button>
+        </a>
+      </div>
+    {:else}
+      <div class="flex justify-center">
+        <button type="button" class="primary" on:click={toggleSeed}>
+          <Icon icon="warning" style="mr-2 w-6 my-auto" />
+          {$t("user.settings.revealSeed")}
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/(app)/account/setup/step2/+page.svelte b/src/routes/(app)/account/setup/step2/+page.svelte
new file mode 100644
index 00000000..8169ce06
--- /dev/null
+++ b/src/routes/(app)/account/setup/step2/+page.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { focus } from "$lib/utils";
+  import { t } from "$lib/translations";
+  import { mnemonic } from "$lib/store";
+  import Icon from "$comp/Icon.svelte";
+  import { encrypt, decrypt } from "nostr-tools/nip49";
+  import { mnemonicToEntropy, entropyToMnemonic } from "@scure/bip39";
+  import { wordlist } from "@scure/bip39/wordlists/english";
+  import { fail, post } from "$lib/utils";
+  import { goto } from "$app/navigation";
+
+  export let data;
+  let { user } = data;
+
+  let password;
+
+  let submit = async () => {
+    let seed = await encrypt(mnemonicToEntropy($mnemonic, wordlist), password);
+    try {
+      await post("/api/accounts", { seed });
+      goto(`/${user.username}`);
+    } catch (e) {
+      console.log(e);
+      fail("Something went wrong");
+    }
+  };
+</script>
+
+<div class="space-y-5">
+  <div>
+    <h1 class="text-center text-3xl font-semibold">Account setup</h1>
+    <h2 class="text-center text-2xl text-secondary">Step 2</h2>
+  </div>
+
+  <form
+    on:submit|preventDefault={submit}
+    class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5"
+  >
+    <p class="text-secondary mb-1">
+      Add an additional password to your seed phrase. It should be different
+      than your login password. We can't reset it if you lose it.
+    </p>
+
+      <input use:focus type="text" placeholder="Password" bind:value={password} />
+
+    <button
+      class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
+    >
+      Submit
+    </button>
+  </form>
+</div>