refactor security settings

5 files changed, 41 insertions, 40 deletions

diff --git a/src/app.css b/src/app.css
index 86dcc94c..3d3ffd94 100644
--- a/src/app.css
+++ b/src/app.css
@@ -45,7 +45,7 @@ textarea:focus, textarea:focus-within, .input:focus, .input:focus-within {
   @apply outline-offset-0;
 }
 
-input.clean {
+input.clean, textarea.clean {
   border: none;
   outline: none;
   padding: 0;
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index 81bc1285..dc77c0d3 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { t } from "$lib/translations";
   import { preventDefault } from "svelte/legacy";
 
@@ -68,10 +68,14 @@
         ></iconify-icon>
       </label>
       <div class="w-full flex gap-2">
-        <button type="button" class="btn !w-auto grow" onclick={cancel} onkeydown={cancel}
-          >Cancel</button
+        <button
+          type="button"
+          class="btn !w-auto grow"
+          onclick={cancel}
+          onkeydown={cancel}>Cancel</button
+        >
+        <button type="submit" class="btn btn-accent !w-auto grow">Submit</button
         >
-        <button type="submit" class="btn btn-accent !w-auto grow">Submit</button>
       </div>
     </form>
   </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 5fcfa880..c47bf051 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -248,7 +248,7 @@
 			"memoPrompt": "Checkout instructions",
 			"memoPromptPlaceholder": "e.g. Please enter your name for the order",
 			"rememberFor": "Remember for",
-			"import": "Import key",
+			"import": "Import secret key",
 			"destination": "Autowithdrawal address",
 			"destinationDesc": "The address that withdrawals will be sent to",
 			"destinationPlaceholder": "Enter a Bitcoin, Liquid or Lightning address",
diff --git a/src/routes/(app)/settings/security/+page.svelte b/src/routes/(app)/settings/security/+page.svelte
index 32488d1e..cc988d6c 100644
--- a/src/routes/(app)/settings/security/+page.svelte
+++ b/src/routes/(app)/settings/security/+page.svelte
@@ -19,11 +19,9 @@
   let confirming2fa = $state(),
     disabling2fa = $state(),
     importing = $state(),
-    locked,
-    mnemonic,
+    mnemonic = $state(),
     newNsec = $state(),
     nsec = $state(),
-    old,
     otp = $state(),
     password = $state(),
     pin = $state(""),
@@ -61,8 +59,6 @@
   };
 
   let checkPin = async () => {
-    old = $current;
-
     try {
       if (pin.length > 5 && pin === verify) {
         user.haspin = true;
@@ -168,26 +164,30 @@
 <input type="hidden" name="newpin" value={disablingPin ? "delete" : pin} />
 <input type="hidden" name="confirm" bind:value={password} />
 
-<div class="relative mb-5">
+<div>
   <label for="password" class="block font-bold block mb-1"
     >{$t("user.settings.newPassword")}</label
   >
-  {#if revealPassword}
-    <input name="password" type="text" bind:value={password} />
-  {:else}
-    <input name="password" type="password" bind:value={password} />
-  {/if}
-  <button
-    type="button"
-    onclick={togglePassword}
-    onkeydown={togglePassword}
-    class="absolute right-5 top-11"
+  <label
+    for="password"
+    class="input flex items-center justify-center gap-2 w-full"
   >
+    {#if revealPassword}
+      <input name="password" type="text" bind:value={password} class="clean" />
+    {:else}
+      <input
+        name="password"
+        type="password"
+        bind:value={password}
+        class="clean"
+      />
+    {/if}
     <iconify-icon
+      onclick={togglePassword}
       icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
       width="32"
     ></iconify-icon>
-  </button>
+  </label>
 </div>
 
 <div>
@@ -264,7 +264,7 @@
   {/if}
 </div>
 
-<div>
+<div class="space-y-2">
   <label for="seedphrase" class="font-bold"
     >{$t("user.settings.nostrKeys")}</label
   >
@@ -274,6 +274,15 @@
   </p>
 
   <div class="flex flex-wrap sm:flex-nowrap gap-2">
+    <button
+      type="button"
+      class="btn !w-auto flex-grow"
+      onclick={toggleImporting}
+    >
+      <iconify-icon icon="ph:arrow-down-left-bold" width="32"></iconify-icon>
+      {$t("user.settings.import")}
+    </button>
+
     <button type="button" class="btn !w-auto flex-grow" onclick={toggleNsec}>
       {#if revealNsec}
         <iconify-icon icon="ph:eye-slash-bold" width="32"></iconify-icon>
@@ -283,15 +292,6 @@
         {$t("user.settings.revealNsec")}
       {/if}
     </button>
-
-    <button
-      type="button"
-      class="btn !w-auto flex-grow"
-      onclick={toggleImporting}
-    >
-      <iconify-icon icon="ph:floppy-disk-bold" width="32"></iconify-icon>
-      {$t("user.settings.import")}
-    </button>
   </div>
 
   {#if importing}
@@ -299,13 +299,10 @@
   {/if}
 
   {#if revealNsec}
-    <div class="text-lg break-all">
-      {nsec}
-    </div>
+    <button type="button" class="btn break-all !h-auto font-normal leading-normal flex-nowrap" onclick={() => copy(nsec)}>
+      <div>{nsec}</div>
 
-    <button type="button" class="btn" onclick={() => copy(nsec)}>
       <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
-      Copy
     </button>
   {/if}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 480ea1c4..998673f9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
+  import { run } from "svelte/legacy";
 
   import LandingHeader from "$comp/LandingHeader.svelte";
   import LandingHero from "$comp/LandingHero.svelte";