51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
const html = require('choo/html');
|
|
|
|
module.exports = function(state) {
|
|
const placeholder =
|
|
state.route === '/' ? '' : state.translate('unlockInputPlaceholder');
|
|
const hasPassword = !!state.password;
|
|
const sectionClass = hasPassword
|
|
? 'passwordInput'
|
|
: 'passwordInput passwordInput--hidden';
|
|
|
|
return html`
|
|
<div class="${sectionClass}">
|
|
<form
|
|
onsubmit=${onSubmit}
|
|
data-no-csrf>
|
|
|
|
<input id="password-input"
|
|
class="input passwordInput__fill"
|
|
autocomplete="off"
|
|
type="password"
|
|
oninput=${inputChanged}
|
|
onfocus=${focused}
|
|
placeholder="${
|
|
hasPassword ? passwordPlaceholder(state.password) : placeholder
|
|
}"
|
|
>
|
|
</form>
|
|
</div>`;
|
|
|
|
function onSubmit() {
|
|
event.preventDefault();
|
|
}
|
|
|
|
function inputChanged() {
|
|
const password = document.getElementById('password-input').value;
|
|
state.password = password;
|
|
}
|
|
|
|
function focused(event) {
|
|
event.preventDefault();
|
|
const el = document.getElementById('password-input');
|
|
if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
|
|
el.placeholder = '';
|
|
}
|
|
}
|
|
};
|
|
|
|
function passwordPlaceholder(password) {
|
|
return password ? password.replace(/./g, '•') : '••••••••••••';
|
|
}
|