progress on accounts

3 files changed, 62 insertions, 12 deletions

diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index ee29d2c3..0eb16072 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -18,7 +18,7 @@
 
   let { user } = data;
 
-  let confirm, password;
+  let confirm, password, revealPassword, revealConfirm;
 
   onMount(() => {
     if (!$mnemonic) goto("/account/savings");
@@ -65,13 +65,66 @@
     class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5"
   >
     <p class="text-secondary mb-1">
-      Please add a password to the account. It should be different than your
-      login password. <b class="text-red-700">We won't be able to reset it.</b> You'll
-      need it to make withdrawals.
+      Careful! If you lose this password you won't be able to use the account.
+      We can't recover it for you.
     </p>
 
-    <input use:focus type="text" placeholder="Password" bind:value={password} />
-    <input type="text" placeholder="Confirm password" bind:value={confirm} />
+    <div class="relative">
+      {#if revealPassword}
+        <input
+          name="password"
+          type="text"
+          required
+          bind:value={password}
+          autocapitalize="none"
+        />
+      {:else}
+        <input
+          use:focus
+          name="password"
+          type="password"
+          required
+          bind:value={password}
+          autocapitalize="none"
+        />
+      {/if}
+      <button
+        type="button"
+        on:click={() => (revealPassword = !revealPassword)}
+        class="absolute right-5 -translate-y-1/2 top-1/2"
+      >
+        <Icon icon={revealPassword ? "eye" : "eye-off"} />
+      </button>
+    </div>
+
+    <div class="relative">
+      {#if revealConfirm}
+        <input
+          name="password"
+          type="text"
+          placeholder="Confirm password"
+          required
+          bind:value={confirm}
+          autocapitalize="none"
+        />
+      {:else}
+        <input
+          name="password"
+          type="password"
+          placeholder="Confirm password"
+          required
+          bind:value={confirm}
+          autocapitalize="none"
+        />
+      {/if}
+      <button
+        type="button"
+        on:click={() => (revealConfirm = !revealConfirm)}
+        class="absolute right-5 -translate-y-1/2 top-1/2"
+      >
+        <Icon icon={revealConfirm ? "eye" : "eye-off"} />
+      </button>
+    </div>
 
     <button
       class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 9c19e820..e922d6be 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -17,9 +17,6 @@
   });
 
   let generate = async () => {
-    $mnemonic = "- - - - - - - - - - - -";
-    await tick();
-    await new Promise((r) => setTimeout(r, 250));
     $mnemonic = await generateMnemonic(wordlist);
   };
 </script>
@@ -30,7 +27,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     {#if $mnemonic}
       <div
-        class="text-2xl border p-4 rounded-2xl text-secondary grid grid-rows-6 grid-flow-col gap-2 justify-center gap-x-40"
+        class="text-lg border p-4 rounded-2xl text-secondary grid grid-cols-3 gap-2 justify-center"
       >
         {#each $mnemonic.split(" ") as w, i}
           <div>
diff --git a/src/routes/(app)/account/setup/+page.svelte b/src/routes/(app)/account/setup/+page.svelte
index 8304c5ed..f5a5ac09 100644
--- a/src/routes/(app)/account/setup/+page.svelte
+++ b/src/routes/(app)/account/setup/+page.svelte
@@ -8,7 +8,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     <a href="/account/cash" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/cash.png" class="w-20" />
+        <img src="/images/cash.png" class="w-20 my-auto" />
         <div>
           <div class="text-xl">Cash</div>
           <div class="text-secondary">
@@ -20,7 +20,7 @@
     </a>
     <a href="/account/savings" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/keys.png" class="w-20" />
+        <img src="/images/keys.png" class="w-20 my-auto" />
         <div>
           <div class="text-xl">Savings</div>
           <div class="text-secondary">