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

100 lines
2.7 KiB
JavaScript
Raw Normal View History

const html = require('choo/html');
2018-02-16 20:56:53 +00:00
module.exports = function(file, state, emit) {
const loading = state.settingPassword;
const pwd = file.hasPassword;
const formClass = pwd
2018-02-16 20:56:53 +00:00
? 'passwordInput'
: 'passwordInput passwordInput--hidden';
const inputClass = loading || pwd ? 'input' : 'input input--noBtn';
let btnClass = 'inputBtn inputBtn--password inputBtn--hidden';
if (loading) {
btnClass = 'inputBtn inputBtn--password inputBtn--loading';
} else if (pwd) {
btnClass = 'inputBtn inputBtn--password';
}
const action = pwd
2018-02-16 20:56:53 +00:00
? state.translate('changePasswordButton')
: state.translate('addPasswordButton');
return html`
2018-02-16 20:56:53 +00:00
<div>
<form
2018-02-16 20:56:53 +00:00
class="${formClass}"
onsubmit=${setPassword}
data-no-csrf>
<input id="password-input"
${loading ? 'disabled' : ''}
2018-02-16 20:56:53 +00:00
class="${inputClass}"
maxlength="32"
autocomplete="off"
type="password"
oninput=${inputChanged}
onfocus=${focused}
2018-02-16 20:56:53 +00:00
placeholder="${
pwd
2018-02-16 20:56:53 +00:00
? passwordPlaceholder(file.password)
: state.translate('unlockInputPlaceholder')
}">
<input type="submit"
id="password-btn"
${loading ? 'disabled' : ''}
2018-02-16 20:56:53 +00:00
class="${btnClass}"
value="${loading ? '' : action}">
</form>
2018-02-16 20:56:53 +00:00
<div class="passwordInput__msg">${message(
loading,
pwd,
2018-02-16 20:56:53 +00:00
state.translate('passwordIsSet')
)}</div>
</div>
`;
function inputChanged() {
2018-02-16 20:56:53 +00:00
const pwdmsg = document.querySelector('.passwordInput__msg');
if (pwdmsg) {
pwdmsg.textContent = '';
}
const resetInput = document.getElementById('password-input');
const resetBtn = document.getElementById('password-btn');
if (resetInput.value.length > 0) {
resetBtn.classList.remove('inputBtn--hidden');
resetInput.classList.remove('input--noBtn');
} else {
resetBtn.classList.add('inputBtn--hidden');
resetInput.classList.add('input--noBtn');
}
}
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 setPassword(event) {
event.preventDefault();
const el = document.getElementById('password-input');
const password = el.value;
2018-02-16 20:56:53 +00:00
if (password.length > 0) {
emit('password', { password, file });
} else {
el.focus();
2018-02-16 20:56:53 +00:00
}
return false;
}
};
2018-02-16 20:56:53 +00:00
function passwordPlaceholder(password) {
return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
}
function message(loading, pwd, deflt) {
if (loading || !pwd) {
2018-02-16 20:56:53 +00:00
return '';
}
return deflt;
}