use cookies for pin memory

8 files changed, 56 insertions, 43 deletions

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 98a04ef6..06a5adc9 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -15,7 +15,7 @@
 <div class="space-y-2">
   {#if user.haspin && !$pin}
     <button
-      class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
+      class="text-xl rounded-2xl border py-5 px-6 hover:opacity-80 min-w-[72px] bg-black text-white font-bold"
       on:click={() => (show = true)}>{$t("user.showBalance")}</button
     >
   {:else}
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 9938f9a1..df545014 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,14 +1,13 @@
 <script>
   import { t } from "$lib/translations";
-  import { post, success, fail, focus } from "$lib/utils";
+  import { post, success, fail, focus, setCookie } from "$lib/utils";
   import Pinpad from "$comp/Pinpad.svelte";
-  import { pin } from "$lib/store";
+  import { pin, user } from "$lib/store";
   import { onMount } from "svelte";
 
   export let value = "";
   export let title = $t("user.settings.verifyPIN");
   export let cancel = () => (p = "");
-  export let persist = true;
   export let notify = true;
 
   let p = "";
@@ -33,7 +32,8 @@
 
     if (result) {
       if (notify) success("Pin confirmed");
-      if (persist) $pin = p;
+      if ($user.locktime) setCookie("pin", p, $user.locktime);
+      $pin = p;
     } else {
       fail("Invalid pin");
       value = "";
@@ -50,6 +50,23 @@
     >
       <h1 class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
+
+      <div>
+        <label class="font-bold">{$t("user.settings.rememberFor")}</label>
+        <select
+          name="locktime"
+          class="select-styles block py-3 w-full"
+            bind:value={$user.locktime}
+        >
+          <option value={30}>30 {$t("user.settings.seconds")}</option>
+          <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
+          <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
+          <option value={30 * 60}>30 {$t("user.settings.minutes")}</option>
+          <option value={60 * 60}>1 {$t("user.settings.hour")}</option>
+          <option value={8 * 60 * 60}>8 {$t("user.settings.hours")}</option>
+        </select>
+      </div>
+
       <div class="w-full flex">
         <button
           class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 641ddb2b..843e4779 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -51,6 +51,7 @@
       {:else}
         <input
           on:keydown={validate}
+            use:focus
           bind:value={v}
           class="outline-none border-0 text-center py-0"
           type="text"
diff --git a/src/lib/store.js b/src/lib/store.js
index 5cba8672..cd5f471b 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -49,7 +49,7 @@ export let decrypted = persistLocal("decrypted", {});
 export let newPayment = persistLocal("newPayment");
 export let password = writable();
 export let passwordPrompt = writable();
-export let pin = persistSession("pin");
+export let pin = persistLocal("pin");
 export let rate = writable();
 export let request = writable();
 export let requestRedirect = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 9f9fc042..8e3ff004 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -223,6 +223,7 @@ export let sats = 100000000;
 
 export let back = () =>
   browser && (history.length ? history.go(-1) : goto("/"));
+
 export let focus = (el) =>
   browser && screen.width > 1280 && setTimeout(() => el.focus(), 1);
 
@@ -316,3 +317,21 @@ export let isLiquid = (text) =>
   (text.startsWith("ex1q") && text.length === 42) ||
   text.startsWith("el1qq") ||
   text.startsWith("lq1qq");
+
+export function getCookie(name) {
+  let nameEQ = name + "=";
+  let ca = document.cookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === " ") c = c.substring(1);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+export function setCookie(name, value, seconds) {
+  const now = new Date();
+  now.setTime(now.getTime() + seconds * 1000);
+  const expires = "expires=" + now.toUTCString();
+  document.cookie = name + "=" + value + ";" + expires + ";path=/";
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 2e7fd7be..76fe4b13 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -160,7 +160,7 @@
     "nostrPubkey": "Nostr pubkey",
     "requestPayment": "Request Payment",
     "welcome": "Welcome! Your account balance is empty. You can start by making a deposit or by asking someone to pay you.",
-    "showBalance": "Show Balance",
+    "showBalance": "Reveal balance",
     "bitcoin": "Bitcoin",
     "lightning": "Lightning",
     "invoice": "Invoice",
@@ -204,6 +204,7 @@
       "placeholder": "Enter an address, invoice or username"
     },
     "settings": {
+      "rememberFor": "Remember for",
       "import": "Import key",
       "destination": "Autowithdrawal address",
       "destinationDesc": "The address that withdrawals will be sent to",
@@ -256,6 +257,7 @@
       "localCurrency": "Currency",
       "btcUnit": "Display bitcoin in:",
       "bitcoin": "bitcoin",
+      "seconds": "seconds",
       "minutes": "minutes",
       "hour": "hour",
       "hours": "hours",
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 07f8a2a1..dce7abae 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -10,6 +10,7 @@
     passwordPrompt,
     password,
     pin,
+    user as u,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -17,7 +18,7 @@
   import Invoice from "$comp/Invoice.svelte";
   import Password from "$comp/Password.svelte";
   import Request from "$comp/Request.svelte";
-  import { warning, protectedRoutes } from "$lib/utils";
+  import { getCookie, warning, protectedRoutes } from "$lib/utils";
   import { t, locale, loading } from "$lib/translations";
   import { goto, onNavigate } from "$app/navigation";
 
@@ -39,13 +40,13 @@
   $: update(data);
   let update = (data) => {
     ({ rate, user, subject, token, rates } = data);
+    if (browser) $u = user;
   };
 
   onMount(async () => {
     if (browser) {
       checkSocket();
-      let locktime = user && user.locktime ? user.locktime : 300;
-      expireTimer = setTimeout(expirePin, locktime * 1000);
+      $pin = getCookie('pin');
 
       if (window.NDEFReader && user.nfc) {
         try {
@@ -85,11 +86,6 @@
     checkTimer = setTimeout(checkSocket, 1000);
   };
 
-  let expirePin = () => {
-    $pin = null;
-    expireTimer = setTimeout(expirePin, user.locktime * 1000 || 300000);
-  };
-
   onDestroy(() => {
     if (browser) {
       close();
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 7a1eeac9..6b44f830 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -209,28 +209,6 @@
   {/if}
 </div>
 
-{#if user.haspin}
-  <div>
-    <label for="locktime" class="font-bold mb-1"
-      >{$t("user.settings.autoLock")}</label
-    >
-    <p class="text-secondary mb-1">
-      {$t("user.settings.autoLockDescription")}
-    </p>
-    <select
-      name="locktime"
-      class="select-styles block py-3 w-full"
-      value={parseInt(user.locktime)}
-    >
-      <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
-      <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
-      <option value={30 * 60}>30 {$t("user.settings.minutes")}</option>
-      <option value={60 * 60}>1 {$t("user.settings.hour")}</option>
-      <option value={8 * 60 * 60}>8 {$t("user.settings.hours")}</option>
-    </select>
-  </div>
-{/if}
-
 <div>
   <span class="font-bold mb-1">{$t("user.settings.twofa")}</span>
   <p class="text-secondary mb-4">
@@ -248,18 +226,18 @@
     </div>
 
     <button type="button" class="primary" on:click={startConfirming2fa}>
-      <Icon icon="mobile" style="mr-1" />
-      Confirm
+      <Icon icon="numpad" style="w-8 mr-1" />
+      <div class="my-auto">Confirm</div>
     </button>
   {:else if user.twofa}
     <button type="button" class="primary" on:click={startDisabling2fa}>
-      <Icon icon="mobile" style="mr-1" />
-      {$t("user.settings.twofaDisable")}
+      <Icon icon="mobile" style="w-8 mr-1" />
+      <div class="my-auto">{$t("user.settings.twofaDisable")}</div>
     </button>
   {:else}
     <button type="button" class="primary" on:click={startEnabling2fa}>
-      <Icon icon="mobile" style="mr-1" />
-      {$t("user.settings.twofaSetup")}
+      <Icon icon="mobile" style="w-8 mr-1" />
+      <div class="my-auto">{$t("user.settings.twofaSetup")}</div>
     </button>
   {/if}