updated password input UI

app/templates/setPasswordSection/index.js

@@ -3,10 +3,13 @@ const passwordInput = require('../passwordInput');
 
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
-  const div = html`
+
+  return html`
   <div class="setPasswordSection">
     <div class="checkbox">
       <input
+        ${file.hasPassword ? 'disabled' : ''}
+        ${file.hasPassword ? 'checked' : ''}
         class="checkbox__input"
         id="add-password"
         type="checkbox"
@@ -16,22 +19,9 @@ module.exports = function(state, emit) {
         ${state.translate('requirePasswordCheckbox')}
       </label>
     </div>
-    ${passwordInput(
-      state.translate('unlockInputPlaceholder'),
-      state.translate('addPasswordButton'),
-      addPassword
-    )}
+    ${passwordInput(file, state, emit)}
   </div>`;
 
-  function addPassword(event) {
-    event.preventDefault();
-    const password = document.getElementById('password-input').value;
-    if (password.length > 0) {
-      emit('password', { password, file });
-    }
-    return false;
-  }
-
   function togglePasswordInput(e) {
     const unlockInput = document.getElementById('password-input');
     const boxChecked = e.target.checked;
@@ -44,6 +34,4 @@ module.exports = function(state, emit) {
       unlockInput.value = '';
     }
   }
-
-  return div;
 };

app/templates/setPasswordSection/setPasswordSection.css

@@ -11,7 +11,7 @@
 
 .checkbox__input {
   position: absolute;
-  visibility: collapse;
+  opacity: 0;
 }
 
 .checkbox__label {
@@ -31,12 +31,13 @@
   border-radius: 2px;
 }
 
+.checkbox__input:focus + .checkbox__label::before,
 .checkbox:hover .checkbox__label::before {
   border: 1px solid var(--primaryControlBGColor);
 }
 
 .checkbox__input:checked + .checkbox__label {
-  color: #000;
+  color: var(--textColor);
 }
 
 .checkbox__input:checked + .checkbox__label::before {
@@ -44,6 +45,19 @@
   background-position: 2px 1px;
 }
 
+.checkbox__input:disabled + .checkbox__label {
+  cursor: auto;
+}
+
+.checkbox__input:disabled + .checkbox__label::before {
+  background-image: url('../assets/check-16.svg');
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+  border-color: var(--successControlBGColor);
+  background-color: var(--successControlBGColor);
+  cursor: auto;
+}
+
 @media (max-device-width: 520px), (max-width: 520px) {
   .setPasswordSection {
     align-self: center;