refactored css, including some markup changes

app/templates/changePasswordSection/index.js

@@ -0,0 +1,52 @@
+const html = require('choo/html');
+const raw = require('choo/html/raw');
+const passwordInput = require('../passwordInput');
+
+module.exports = function(state, emit) {
+  const file = state.storage.getFileById(state.params.id);
+
+  return html`<div class="changePasswordSection">
+    ${passwordSpan(file.password)}
+    <button
+      class="btn btn--reset"
+      onclick=${toggleResetInput}
+      >${state.translate('changePasswordButton')}</button>
+    ${passwordInput(
+      state.translate('unlockInputPlaceholder'),
+      state.translate('changePasswordButton'),
+      changePassword
+    )}
+    </div>`;
+
+  function passwordSpan(password) {
+    password = password || '●●●●●';
+    const span = html`<span>${raw(
+      state.translate('passwordResult', {
+        password: '<pre class="passwordMask"></pre>'
+      })
+    )}</span>`;
+    const masked = span.querySelector('.passwordMask');
+    masked.textContent = password.replace(/./g, '●');
+    return span;
+  }
+
+  function changePassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('password-input').value;
+    if (password.length > 0) {
+      emit('password', { password, file });
+    }
+    return false;
+  }
+
+  function toggleResetInput(event) {
+    const form = event.target.parentElement.querySelector('form.passwordInput');
+    const input = document.getElementById('password-input');
+    if (form.style.visibility === 'hidden' || form.style.visibility === '') {
+      form.style.visibility = 'visible';
+      input.focus();
+    } else {
+      form.style.visibility = 'hidden';
+    }
+  }
+};