Allow to show or hide private key

diegogurpegui · Jun 30, 2024 · 5e41e23 · 5e41e23
1 parent 7ff59e5
commit 5e41e23
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/src/assets/icons/eye-off-outline.svg b/src/assets/icons/eye-off-outline.svg
diff --git a/src/assets/icons/eye-outline.svg b/src/assets/icons/eye-outline.svg
diff --git a/src/options.tsx b/src/options.tsx
@@ -25,6 +25,8 @@ import AddCircleIcon from './assets/icons/add-circle-outline.svg';
 import ArrowUpCircleIcon from './assets/icons/arrow-up-circle-outline.svg';
 import CopyIcon from './assets/icons/copy-outline.svg';
 import DiceIcon from './assets/icons/dice-outline.svg';
+import EyeIcon from './assets/icons/eye-outline.svg';
+import EyeOffIcon from './assets/icons/eye-off-outline.svg';
 import DownloadIcon from './assets/icons/download-outline.svg';
 import RadioIcon from './assets/icons/radio-outline.svg';
 import TrashIcon from './assets/icons/trash-outline.svg';
@@ -315,6 +317,10 @@ function Options() {
     setPrivateKey(nip19.nsecEncode(generateSecretKey()));
   }
 
+  function handlePrivateKeyShowClick() {
+    setKeyHidden(!isKeyHidden);
+  }
+
   //#endregion Private key
 
   //#region Permissions
@@ -521,9 +527,10 @@ function Options() {
                 value={privateKey}
                 readOnly={selectedProfilePubKey != ''}
                 onChange={handlePrivateKeyChange}
-                onFocus={() => setKeyHidden(false)}
-                onBlur={() => setKeyHidden(true)}
               />
+              <button onClick={handlePrivateKeyShowClick}>
+                {isKeyHidden ? <EyeIcon /> : <EyeOffIcon />}
+              </button>
               <button onClick={generateRandomPrivateKey}>
                 <DiceIcon /> Generate
               </button>

diff --git a/src/style.scss b/src/style.scss
@@ -347,9 +347,20 @@ input,
     border-right: 0;
   }
   button {
+    margin-left: calc(var(--bs-border-width) * -1);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    margin-left: calc(var(--bs-border-width) * -1);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: $button-radius;
+      border-bottom-left-radius: $button-radius;
+    }
+    &:last-child {
+      border-top-right-radius: $button-radius;
+      border-bottom-right-radius: $button-radius;
+    }
   }
 }