updated password input UI

app/templates/passwordInput/index.js

@@ -1,26 +1,54 @@
 const html = require('choo/html');
 
-module.exports = function(placeholder, action, submit) {
+module.exports = function(file, state, emit) {
+  const setting = state.settingPassword;
+  const formClass = file.hasPassword
+    ? 'passwordInput'
+    : 'passwordInput passwordInput--hidden';
+  const inputClass = setting ? 'input input--copied' : 'input input--noBtn';
+  const btnClass = setting
+    ? 'inputBtn inputBtn--loading'
+    : 'inputBtn inputBtn--hidden';
+  const action = file.hasPassword
+    ? state.translate('changePasswordButton')
+    : state.translate('addPasswordButton');
   return html`
+  <div>
     <form
-      class="passwordInput passwordInput--hidden"
-      onsubmit=${submit}
+      class="${formClass}"
+      onsubmit=${setPassword}
       data-no-csrf>
       <input id="password-input"
-        class="input input--noBtn"
+        ${setting ? 'disabled' : ''}
+        class="${inputClass}"
         maxlength="32"
         autocomplete="off"
         type="password"
         oninput=${inputChanged}
-        placeholder="${placeholder}">
+        placeholder="${
+          file.hasPassword
+            ? passwordPlaceholder(file.password)
+            : state.translate('unlockInputPlaceholder')
+        }">
       <input type="submit"
         id="password-btn"
-        class="inputBtn inputBtn--hidden"
-        value="${action}"/>
+        ${setting ? 'disabled' : ''}
+        class="${btnClass}"
+        value="${setting ? '' : action}">
     </form>
+    <div class="passwordInput__msg">${message(
+      setting,
+      file.hasPassword,
+      state.translate('passwordIsSet')
+    )}</div>
+  </div>
   `;
 
   function inputChanged() {
+    const pwdmsg = document.querySelector('.passwordInput__msg');
+    if (pwdmsg) {
+      pwdmsg.textContent = '';
+    }
     const resetInput = document.getElementById('password-input');
     const resetBtn = document.getElementById('password-btn');
     if (resetInput.value.length > 0) {
@@ -31,4 +59,24 @@ module.exports = function(placeholder, action, submit) {
       resetInput.classList.add('input--noBtn');
     }
   }
+
+  function setPassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('password-input').value;
+    if (password.length > 0) {
+      emit('password', { password, file });
+    }
+    return false;
+  }
 };
+
+function passwordPlaceholder(password) {
+  return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
+}
+
+function message(setting, pwd, deflt) {
+  if (setting || !pwd) {
+    return '';
+  }
+  return deflt;
+}

app/templates/passwordInput/passwordInput.css

@@ -3,16 +3,42 @@
   display: flex;
   flex-wrap: nowrap;
   width: 80%;
-  padding: 10px 5px;
+  padding: 10px 5px 5px;
+}
+
+.passwordInput__msg {
+  height: 100px;
+  margin: 0 5px;
+  font-size: 15px;
+  color: var(--lightTextColor);
 }
 
 .passwordInput--hidden {
   visibility: hidden;
 }
 
+.inputBtn--loading {
+  background-image: url('../assets/spinner.svg');
+  background-position: center;
+  background-size: 30px 30px;
+  background-repeat: no-repeat;
+  background-color: var(--successControlBGColor);
+  border: 1px solid var(--successControlBGColor);
+  color: var(--successControlFGColor);
+  width: 10em;
+}
+
+.inputBtn--loading:hover {
+  background-color: var(--successControlBGColor);
+}
+
 @media (max-device-width: 520px), (max-width: 520px) {
   .passwordInput {
     flex-direction: column;
     width: inherit;
   }
+
+  .inputBtn--loading {
+    width: inherit;
+  }
 }