hook multifile to ui

app/templates/passwordInput/index.js

@@ -1,76 +1,39 @@
 const html = require('choo/html');
-const MAX_LENGTH = 32;
 
-module.exports = function(file, state, emit) {
-  const loading = state.settingPassword;
-  const pwd = file.hasPassword;
-  const sectionClass =
-    pwd || state.passwordSetError
-      ? 'passwordInput'
-      : 'passwordInput passwordInput--hidden';
-  const inputClass = loading || pwd ? 'input' : 'input input--noBtn';
-  let btnClass = 'inputBtn inputBtn--password inputBtn--hidden';
-  if (loading) {
-    btnClass = 'inputBtn inputBtn--password inputBtn--loading';
-  } else if (pwd) {
-    btnClass = 'inputBtn inputBtn--password';
-  }
-  const action = pwd
-    ? state.translate('changePasswordButton')
-    : state.translate('addPasswordButton');
+module.exports = function(state) {
+  const placeholder =
+    state.route === '/' ? '' : state.translate('unlockInputPlaceholder');
+  const hasPassword = !!state.password;
+  const sectionClass = hasPassword
+    ? 'passwordInput'
+    : 'passwordInput passwordInput--hidden';
+
   return html`
   <div class="${sectionClass}">
     <form
-      class="passwordInput__form"
-      onsubmit=${setPassword}
+      onsubmit=${onSubmit}
       data-no-csrf>
+
       <input id="password-input"
-        ${loading ? 'disabled' : ''}
-        class="${inputClass}"
-        maxlength="${MAX_LENGTH}"
+        class="input passwordInput__fill"
         autocomplete="off"
         type="password"
         oninput=${inputChanged}
         onfocus=${focused}
         placeholder="${
-          pwd && !state.passwordSetError
-            ? passwordPlaceholder(file.password)
-            : state.translate('unlockInputPlaceholder')
-        }">
-      <input type="submit"
-        id="password-btn"
-        ${loading ? 'disabled' : ''}
-        class="${btnClass}"
-        value="${loading ? '' : action}">
+          hasPassword ? passwordPlaceholder(state.password) : placeholder
+        }"
+      >
     </form>
-    <label
-      class="passwordInput__msg ${
-        state.passwordSetError ? 'passwordInput__msg--error' : ''
-      }"
-      for="password-input">${message(state, pwd)}</label>
   </div>`;
 
-  function inputChanged() {
-    state.passwordSetError = null;
-    const resetInput = document.getElementById('password-input');
-    const resetBtn = document.getElementById('password-btn');
-    const pwdmsg = document.querySelector('.passwordInput__msg');
-    const length = resetInput.value.length;
+  function onSubmit() {
+    event.preventDefault();
+  }
 
-    if (length === MAX_LENGTH) {
-      pwdmsg.textContent = state.translate('maxPasswordLength', {
-        length: MAX_LENGTH
-      });
-    } else {
-      pwdmsg.textContent = '';
-    }
-    if (length > 0) {
-      resetBtn.classList.remove('inputBtn--hidden');
-      resetInput.classList.remove('input--noBtn');
-    } else {
-      resetBtn.classList.add('inputBtn--hidden');
-      resetInput.classList.add('input--noBtn');
-    }
+  function inputChanged() {
+    const password = document.getElementById('password-input').value;
+    state.password = password;
   }
 
   function focused(event) {
@@ -80,30 +43,8 @@ module.exports = function(file, state, emit) {
       el.placeholder = '';
     }
   }
-
-  function setPassword(event) {
-    event.preventDefault();
-    const el = document.getElementById('password-input');
-    const password = el.value;
-    if (password.length > 0) {
-      emit('password', { password, file });
-    } else {
-      el.focus();
-    }
-    return false;
-  }
 };
 
 function passwordPlaceholder(password) {
-  return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
-}
-
-function message(state, pwd) {
-  if (state.passwordSetError) {
-    return state.translate('passwordSetError');
-  }
-  if (state.settingPassword || !pwd) {
-    return '';
-  }
-  return state.translate('passwordIsSet');
+  return password ? password.replace(/./g, '•') : '••••••••••••';
 }

app/templates/passwordInput/passwordInput.css

@@ -1,41 +1,31 @@
 .passwordInput {
-  width: 90%;
-  height: 100px;
-  padding: 10px 5px 5px;
+  display: inline;
 }
 
 .passwordInput--hidden {
   visibility: hidden;
 }
 
-.passwordInput__form {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 5px;
+.passwordInput__fill {
+  height: 24px;
+  box-sizing: border-box;
+  padding: 4px;
+  font-size: 18px;
+  border: none;
+  background-color: var(--lightControlBGColor);
+  outline: none;
+}
+
+.passwordInput__fill:focus {
+  border: 1px solid rgba(12, 12, 13, 0.2);
+  background-color: var(--pageBGColor);
 }
 
 .passwordInput__msg {
-  font-size: 15px;
+  font-size: 12px;
   color: var(--lightTextColor);
 }
 
 .passwordInput__msg--error {
   color: var(--errorColor);
 }
-
-.inputBtn--loading {
-  background-image: url('../assets/spinner.svg');
-  background-position: center;
-  background-size: 30px 30px;
-  background-repeat: no-repeat;
-}
-
-.inputBtn--password {
-  flex: 0 0 200px;
-}
-
-@media (max-device-width: 520px), (max-width: 520px) {
-  .passwordInput__form {
-    flex-direction: column;
-  }
-}