use cookies for pin memory

3 files changed, 23 insertions, 5 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"