1 files changed, 18 insertions, 32 deletions
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index da53577e..fb17c612 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,36 +1,28 @@
-<script lang="ts">
-  import { run, createBubbler, preventDefault } from "svelte/legacy";
-
-  const bubble = createBubbler();
+<script>
   import { t } from "$lib/translations";
   import { post, success, fail, focus, setCookie } from "$lib/utils";
   import Pinpad from "$comp/Pinpad.svelte";
   import { pin } from "$lib/store";
   import { onMount } from "svelte";
 
-  interface Props {
-    value?: string;
-    title?: any;
-    cancel?: any;
-    notify?: boolean;
-  }
-
-  let {
-    value = $bindable(""),
-    title = $t("user.settings.verifyPIN"),
-    cancel = () => (p = ""),
-    notify = true,
-  }: Props = $props();
+  export let value = "";
+  export let title = $t("user.settings.verifyPIN");
+  export let cancel = () => (p = "");
+  export let notify = true;
 
-  let p = $state("");
+  let p = "";
 
+  $: update(value);
   let update = (value) => (p = value);
 
-  let loaded = $state();
+  $: p.toString().length > 5 && (value = p.toString());
+
+  let loaded;
   onMount(() => setTimeout(() => (loaded = true), 500));
 
-  let locktime = $state(30 * 60);
+  let locktime = 30 * 60;
 
+  $: loaded && checkPin(p);
   let checkPin = async (p) => {
     if (p?.length !== 6) return;
     let result;
@@ -49,21 +41,12 @@
       value = "";
     }
   };
-  run(() => {
-    p.toString().length > 5 && (value = p.toString());
-  });
-  run(() => {
-    update(value);
-  });
-  run(() => {
-    loaded && checkPin(p);
-  });
 </script>
 
 {#if loaded}
   <div
     class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
-    onclick={preventDefault(bubble("click"))}
+    on:click|preventDefault
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
@@ -75,7 +58,10 @@
         <label for="locktime" class="font-bold"
           >{$t("user.settings.rememberFor")}</label
         >
-        <select name="locktime" bind:value={locktime}>
+        <select
+          name="locktime"
+          bind:value={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>
@@ -86,7 +72,7 @@
       </div>
 
       <div class="w-full flex">
-        <button class="btn" onclick={preventDefault(cancel)}>
+        <button class="btn" on:click|preventDefault={cancel}>
           <div class="my-auto">Cancel</div>
         </button>
       </div>