diff --git a/app/templates/passwordInput/index.js b/app/templates/passwordInput/index.js index 7e124fc8..98623fd0 100644 --- a/app/templates/passwordInput/index.js +++ b/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; } diff --git a/app/templates/passwordInput/passwordInput.css b/app/templates/passwordInput/passwordInput.css index 1bc7cdab..ef752b02 100644 --- a/app/templates/passwordInput/passwordInput.css +++ b/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) {