big refactor

app/templates/uploadPasswordUnset.js

@@ -0,0 +1,69 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  const file = state.storage.getFileById(state.params.id);
+  const div = html`
+  <div class="selectPassword">
+    <div id="addPasswordWrapper">
+      <input
+        id="addPassword"
+        type="checkbox"
+        autocomplete="off"
+        onchange=${togglePasswordInput}/>
+      <label for="addPassword">
+        ${state.translate('requirePasswordCheckbox')}
+      </label>
+    </div>
+    <form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
+      <input id="unlock-input"
+        class="unlock-input input-no-btn"
+        maxlength="32"
+        autocomplete="off"
+        placeholder="${state.translate('unlockInputPlaceholder')}"
+        type="password"
+        oninput=${inputChanged}/>
+      <input type="submit"
+        id="unlock-btn"
+        class="btn btn-hidden"
+        value="${state.translate('addPasswordButton')}"/>
+    </form>
+  </div>`;
+
+  function inputChanged() {
+    const input = document.getElementById('unlock-input');
+    const btn = document.getElementById('unlock-btn');
+    if (input.value.length > 0) {
+      btn.classList.remove('btn-hidden');
+      input.classList.remove('input-no-btn');
+    } else {
+      btn.classList.add('btn-hidden');
+      input.classList.add('input-no-btn');
+    }
+  }
+
+  function togglePasswordInput(e) {
+    const unlockInput = document.getElementById('unlock-input');
+    const boxChecked = e.target.checked;
+    document
+      .querySelector('.setPassword')
+      .classList.toggle('hidden', !boxChecked);
+    if (boxChecked) {
+      unlockInput.focus();
+    } else {
+      unlockInput.value = '';
+    }
+    inputChanged();
+  }
+
+  function setPassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('unlock-input').value;
+    if (password.length > 0) {
+      document.getElementById('copy').classList.remove('wait-password');
+      document.getElementById('copy-btn').disabled = false;
+      emit('password', { password, file });
+    }
+  }
+
+  return div;
+};