fox-send/app/templates/passwordInput/index.js

51 lines
1.3 KiB
JavaScript
Raw Normal View History

const html = require('choo/html');
2018-07-31 18:09:18 +00:00
module.exports = function(state) {
const placeholder =
state.route === '/' ? '' : state.translate('unlockInputPlaceholder');
const hasPassword = !!state.password;
const sectionClass = hasPassword
? 'passwordInput'
: 'passwordInput passwordInput--hidden';
return html`
2018-02-21 20:35:52 +00:00
<div class="${sectionClass}">
<form
2018-07-31 18:09:18 +00:00
onsubmit=${onSubmit}
data-no-csrf>
2018-07-31 18:09:18 +00:00
<input id="password-input"
2018-07-31 18:09:18 +00:00
class="input passwordInput__fill"
autocomplete="off"
type="password"
oninput=${inputChanged}
onfocus=${focused}
2018-02-16 20:56:53 +00:00
placeholder="${
2018-07-31 18:09:18 +00:00
hasPassword ? passwordPlaceholder(state.password) : placeholder
}"
>
</form>
</div>`;
2018-07-31 18:09:18 +00:00
function onSubmit() {
event.preventDefault();
}
2018-07-31 18:09:18 +00:00
function inputChanged() {
const password = document.getElementById('password-input').value;
state.password = password;
}
2018-02-16 20:56:53 +00:00
function focused(event) {
event.preventDefault();
const el = document.getElementById('password-input');
if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
el.placeholder = '';
}
}
};
2018-02-16 20:56:53 +00:00
function passwordPlaceholder(password) {
2018-07-31 18:09:18 +00:00
return password ? password.replace(/./g, '•') : '••••••••••••';
2018-02-16 20:56:53 +00:00
}