From 40078b1d7c0f51db12f6ffd813f2c5193ff1a84e Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 20 Dec 2024 14:24:33 -0800
Subject: pin placeholders

---
 src/components/Pinpad.svelte                    |  2 ++
 src/routes/(app)/settings/security/+page.svelte | 11 +++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 0efdd471..e27a8c8f 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -55,6 +55,7 @@
       type="password"
       class="clean text-center !text-5xl !w-96 block"
       pattern="[0-9]+"
+      placeholder="_ _ _ _ _ _"
     />
   {:else}
     <input
@@ -64,6 +65,7 @@
       class="clean text-center !text-5xl !w-96 block"
       type="text"
       pattern="[0-9]+"
+      placeholder="_ _ _ _ _ _"
     />
   {/if}
   <button type="button" class="contents" onclick={toggle}>
diff --git a/src/routes/(app)/settings/security/+page.svelte b/src/routes/(app)/settings/security/+page.svelte
index 67efbc9e..e520781f 100644
--- a/src/routes/(app)/settings/security/+page.svelte
+++ b/src/routes/(app)/settings/security/+page.svelte
@@ -12,8 +12,9 @@
   import { page } from "$app/stores";
 
   let { data } = $props();
-  let { user } = $state(data);
+  let { user } = $derived(data);
   let { id } = user;
+  let { haspin } = $derived(user);
 
   let confirming2fa = $state(),
     disabling2fa = $state(),
@@ -59,7 +60,6 @@
   let checkPin = async () => {
     try {
       if (pin.length > 5 && pin === verify) {
-        user.haspin = true;
         $current = pin;
         pin = "";
         verify = "";
@@ -87,7 +87,7 @@
   let disablingPin = $state(false);
 
   let togglePin = async () => {
-    if (user.haspin) {
+    if (haspin) {
       try {
         disablingPin = true;
         await tick();
@@ -191,10 +191,10 @@
   {:else}
     <button type="button" class="btn" onclick={togglePin}>
       <iconify-icon
-        icon={user.haspin ? "ph:lock-key-open-bold" : "ph:lock-key-bold"}
+        icon={haspin ? "ph:lock-key-open-bold" : "ph:lock-key-bold"}
         width="32"
       ></iconify-icon>
-      {user.haspin
+      {haspin
         ? $t("user.settings.disablePIN")
         : $t("user.settings.enablePIN")}</button
     >
@@ -243,4 +243,3 @@
     />
   {/if}
 </div>
-
-- 
cgit v1.2.3