updated password input behavior. fixes #762 & fixes #763

app/templates/passwordInput/index.js

@@ -7,11 +7,11 @@ module.exports = function(file, state, emit) {
     ? 'passwordInput'
     : 'passwordInput passwordInput--hidden';
   const inputClass = loading || pwd ? 'input' : 'input input--noBtn';
-  let btnClass = 'inputBtn inputBtn--hidden';
+  let btnClass = 'inputBtn inputBtn--password inputBtn--hidden';
   if (loading) {
-    btnClass = 'inputBtn inputBtn--loading';
+    btnClass = 'inputBtn inputBtn--password inputBtn--loading';
   } else if (pwd) {
-    btnClass = 'inputBtn';
+    btnClass = 'inputBtn inputBtn--password';
   }
 
   const action = pwd
@@ -30,6 +30,7 @@ module.exports = function(file, state, emit) {
         autocomplete="off"
         type="password"
         oninput=${inputChanged}
+        onfocus=${focused}
         placeholder="${
           pwd
             ? passwordPlaceholder(file.password)
@@ -65,11 +66,22 @@ module.exports = function(file, state, emit) {
     }
   }
 
+  function focused(event) {
+    event.preventDefault();
+    const el = document.getElementById('password-input');
+    if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
+      el.placeholder = '';
+    }
+  }
+
   function setPassword(event) {
     event.preventDefault();
-    const password = document.getElementById('password-input').value;
+    const el = document.getElementById('password-input');
+    const password = el.value;
     if (password.length > 0) {
       emit('password', { password, file });
+    } else {
+      el.focus();
     }
     return false;
   }

app/templates/passwordInput/passwordInput.css

@@ -21,7 +21,10 @@
   background-position: center;
   background-size: 30px 30px;
   background-repeat: no-repeat;
-  flex-basis: 20%;
+}
+
+.inputBtn--password {
+  flex: 0 0 200px;
 }
 
 @media (max-device-width: 520px), (max-width: 520px) {