Add password preview

Co-authored-by: timvisee <tim@visee.me>

app/ui/archiveTile.js

@@ -48,19 +48,37 @@ function password(state) {
           ${state.translate('addPassword')}
         </label>
       </div>
-      <input
-        id="password-input"
-        class="${state.archive.password
-          ? ''
-          : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
-        autocomplete="off"
-        maxlength="${MAX_LENGTH}"
-        type="password"
-        oninput="${inputChanged}"
-        onfocus="${focused}"
-        placeholder="${state.translate('unlockInputPlaceholder')}"
-        value="${state.archive.password || ''}"
-      />
+      <div class="relative inline-block">
+        <input
+          id="password-input"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
+          autocomplete="off"
+          maxlength="${MAX_LENGTH}"
+          type="password"
+          oninput="${inputChanged}"
+          onfocus="${focused}"
+          placeholder="${state.translate('unlockInputPlaceholder')}"
+          value="${state.archive.password || ''}"
+        />
+        <button
+          id="password-preview-button"
+          type="button"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} absolute top-0 right-0 p-2"
+          onclick="${onPasswordPreviewButtonclicked}"
+        >
+          <img src="assets/eye.svg" width="22" height="22" />
+          <img
+            src="assets/eye-off.svg"
+            width="22"
+            height="22"
+            class="${state.archive.password ? '' : 'hidden'}"
+          />
+        </button>
+      </div>
       <label
         id="password-msg"
         for="password-input"
@@ -69,15 +87,40 @@ function password(state) {
     </div>
   `;
 
+  function onPasswordPreviewButtonclicked(event) {
+    event.preventDefault();
+    const target = event.currentTarget;
+    const input = document.getElementById('password-input');
+    const eyeOn = target.querySelector('img:first-child');
+    const eyeOff = target.querySelector('img:last-child');
+
+    if (input.type === 'password') {
+      input.type = 'text';
+      eyeOn.classList.add('hidden');
+      eyeOff.classList.remove('hidden');
+    } else {
+      input.type = 'password';
+      eyeOn.classList.remove('hidden');
+      eyeOff.classList.add('hidden');
+    }
+
+    input.focus();
+  }
+
   function togglePasswordInput(event) {
     event.stopPropagation();
     const checked = event.target.checked;
     const input = document.getElementById('password-input');
+    const passwordPreviewButton = document.getElementById(
+      'password-preview-button'
+    );
     if (checked) {
       input.classList.remove('invisible');
+      passwordPreviewButton.classList.remove('invisible');
       input.focus();
     } else {
       input.classList.add('invisible');
+      passwordPreviewButton.classList.add('invisible');
       input.value = '';
       document.getElementById('password-msg').textContent = '';
       state.archive.password = null;

assets/eye-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#4A4A4A" d="M256.1 144.8c56.2 0 101.9 45.3 101.9 101.1 0 13.1-2.6 25.5-7.3 37l59.5 59c30.8-25.5 55-58.4 69.9-96-35.3-88.7-122.3-151.6-224.2-151.6-28.5 0-55.8 5.1-81.1 14.1l44 43.7c11.6-4.6 24.1-7.3 37.3-7.3zM52.4 89.7l46.5 46.1 9.4 9.3c-33.9 26-60.4 60.8-76.3 100.8 35.2 88.7 122.2 151.6 224.1 151.6 31.6 0 61.7-6.1 89.2-17l8.6 8.5 59.7 59 25.9-25.7L78.2 64 52.4 89.7zM165 201.4l31.6 31.3c-1 4.2-1.6 8.7-1.6 13.1 0 33.5 27.3 60.6 61.1 60.6 4.5 0 9-.6 13.2-1.6l31.6 31.3c-13.6 6.7-28.7 10.7-44.8 10.7-56.2 0-101.9-45.3-101.9-101.1 0-15.8 4.1-30.7 10.8-44.3zm87.8-15.7l64.2 63.7.4-3.2c0-33.5-27.3-60.6-61.1-60.6l-3.5.1z"/></svg>

assets/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#4A4A4A" d="M256 105c-101.8 0-188.4 62.4-224 151 35.6 88.6 122.2 151 224 151s188.4-62.4 224-151c-35.6-88.6-122.2-151-224-151zm0 251.7c-56 0-101.8-45.3-101.8-100.7S200 155.3 256 155.3 357.8 200.6 357.8 256 312 356.7 256 356.7zm0-161.1c-33.6 0-61.1 27.2-61.1 60.4s27.5 60.4 61.1 60.4 61.1-27.2 61.1-60.4-27.5-60.4-61.1-60.4z"/></svg>