Toggleable Password

Changed * to ●

app/templates/share.js

@@ -11,7 +11,23 @@ function passwordComplete(state, password) {
       password: '<pre></pre>'
     })}</div>`
   ]);
-  el.lastElementChild.textContent = password;
+  const displayPassword = [];
+  for (let i = 0; i < password.length; i++) {
+    displayPassword[i] = '●';
+  }
+
+  const passwordOriginal = document.createElement('div');
+  passwordOriginal.className = 'passwordOriginal';
+  passwordOriginal.innerText = password;
+
+  const passwordStar = document.createElement('div');
+  passwordStar.className = 'passwordStar';
+  passwordStar.innerText = displayPassword
+    .toString()
+    .split(',')
+    .join('');
+  el.lastElementChild.appendChild(passwordOriginal);
+  el.lastElementChild.appendChild(passwordStar);
   return el;
 }
 

app/templates/uploadPassword.js

@@ -5,9 +5,7 @@ module.exports = function(state, emit) {
   const div = html`
   <div class="selectPassword">
     <div id="addPasswordWrapper">
-      <input id="addPassword" type="checkbox" autocomplete="off" onchange=${
+      <input id="addPassword" type="checkbox" autocomplete="off" onchange=${togglePasswordInput}/>
-        togglePasswordInput
-      }/>
       <label for="addPassword">
         ${state.translate('requirePasswordCheckbox')}</label>
     </div>
@@ -17,6 +15,7 @@ module.exports = function(state, emit) {
         maxlength="64"
         autocomplete="off"
         placeholder="${state.translate('unlockInputPlaceholder')}"
+        type="password"
         oninput=${inputChanged}/>
       <input type="submit"
         id="unlock-btn"

assets/main.css

@@ -666,6 +666,18 @@ tbody {
   overflow-wrap: break-word;
 }
 
+.passwordOriginal {
+  display: none;
+}
+
+.selectPassword :hover .passwordOriginal {
+  display: block;
+}
+
+.selectPassword :hover .passwordStar {
+  display: none;
+}
+
 .setPassword {
   align-self: left;
   display: flex;