Fixes #9 - allow to unhide literals in popup settings

getvictor · Aug 3, 2024 · 81744cd · 81744cd
1 parent 0f32828
commit 81744cd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/popup.css b/src/popup.css
@@ -17,5 +17,5 @@
 }
 
 .ob-button-link {
-  @apply text-indigo-400 m-1.5 px-3 py-1 text-xs outline-none focus:outline-none ease-linear transition-all duration-150;
+  @apply text-blue-600 m-1.5 px-3 py-1 text-xs outline-none focus:outline-none ease-linear transition-all duration-150;
 }
diff --git a/src/popup.ts b/src/popup.ts
@@ -80,6 +80,16 @@ chrome.storage.sync.get(null, (data) => {
     input.addEventListener("input", debounce(getInputListener(i), 1000))
     input.addEventListener("change", getInputListener(i))
   }
+
+  // Listen to "show" item.
+  const show = document.getElementById(`items_show`) as HTMLOrSVGImageElement
+  show.addEventListener("click", () => {
+    // Switch between text and password type
+    for (let i = 0; i < NUMBER_OF_LITERALS; i++) {
+      const input = document.getElementById(`item_${String(i)}`) as HTMLInputElement
+      input.type = input.type === "text" ? "password" : "text"
+    }
+  })
 })
 checkbox.addEventListener("change", (event) => {
   if (event.target instanceof HTMLInputElement) {

diff --git a/static/popup.html b/static/popup.html
@@ -32,8 +32,22 @@
     <label for="item_9" class="invisible"></label>
     <input id="item_9" class="ob-input w-52" type="password" placeholder="secret" />
 
-    <div class="ob-center">
-      <button id="go-to-options" class="ob-button-link">Advanced options</button>
+    <div class="flex items-center">
+      <div class="ob-center">
+        <button id="go-to-options" class="ob-button-link">Advanced options</button>
+      </div>
+      <div>
+        <svg
+          id="items_show"
+          class="mr-2 h-7 w-7 fill-blue-600 cursor-pointer"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+        >
+          <path
+            d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+          />
+        </svg>
+      </div>
     </div>
     <script src="popup.js"></script>
   </body>