make 'change' button visible by default after pwd set
This commit is contained in:
parent
f2661989dc
commit
130ddca135
|
@ -1,15 +1,20 @@
|
||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
|
|
||||||
module.exports = function(file, state, emit) {
|
module.exports = function(file, state, emit) {
|
||||||
const setting = state.settingPassword;
|
const loading = state.settingPassword;
|
||||||
const formClass = file.hasPassword
|
const pwd = file.hasPassword;
|
||||||
|
const formClass = pwd
|
||||||
? 'passwordInput'
|
? 'passwordInput'
|
||||||
: 'passwordInput passwordInput--hidden';
|
: 'passwordInput passwordInput--hidden';
|
||||||
const inputClass = setting ? 'input' : 'input input--noBtn';
|
const inputClass = loading || pwd ? 'input' : 'input input--noBtn';
|
||||||
const btnClass = setting
|
let btnClass = 'inputBtn inputBtn--hidden';
|
||||||
? 'inputBtn inputBtn--loading'
|
if (loading) {
|
||||||
: 'inputBtn inputBtn--hidden';
|
btnClass = 'inputBtn inputBtn--loading';
|
||||||
const action = file.hasPassword
|
} else if (pwd) {
|
||||||
|
btnClass = 'inputBtn';
|
||||||
|
}
|
||||||
|
|
||||||
|
const action = pwd
|
||||||
? state.translate('changePasswordButton')
|
? state.translate('changePasswordButton')
|
||||||
: state.translate('addPasswordButton');
|
: state.translate('addPasswordButton');
|
||||||
return html`
|
return html`
|
||||||
|
@ -19,26 +24,26 @@ module.exports = function(file, state, emit) {
|
||||||
onsubmit=${setPassword}
|
onsubmit=${setPassword}
|
||||||
data-no-csrf>
|
data-no-csrf>
|
||||||
<input id="password-input"
|
<input id="password-input"
|
||||||
${setting ? 'disabled' : ''}
|
${loading ? 'disabled' : ''}
|
||||||
class="${inputClass}"
|
class="${inputClass}"
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
type="password"
|
type="password"
|
||||||
oninput=${inputChanged}
|
oninput=${inputChanged}
|
||||||
placeholder="${
|
placeholder="${
|
||||||
file.hasPassword
|
pwd
|
||||||
? passwordPlaceholder(file.password)
|
? passwordPlaceholder(file.password)
|
||||||
: state.translate('unlockInputPlaceholder')
|
: state.translate('unlockInputPlaceholder')
|
||||||
}">
|
}">
|
||||||
<input type="submit"
|
<input type="submit"
|
||||||
id="password-btn"
|
id="password-btn"
|
||||||
${setting ? 'disabled' : ''}
|
${loading ? 'disabled' : ''}
|
||||||
class="${btnClass}"
|
class="${btnClass}"
|
||||||
value="${setting ? '' : action}">
|
value="${loading ? '' : action}">
|
||||||
</form>
|
</form>
|
||||||
<div class="passwordInput__msg">${message(
|
<div class="passwordInput__msg">${message(
|
||||||
setting,
|
loading,
|
||||||
file.hasPassword,
|
pwd,
|
||||||
state.translate('passwordIsSet')
|
state.translate('passwordIsSet')
|
||||||
)}</div>
|
)}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -74,8 +79,8 @@ function passwordPlaceholder(password) {
|
||||||
return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
|
return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
|
||||||
}
|
}
|
||||||
|
|
||||||
function message(setting, pwd, deflt) {
|
function message(loading, pwd, deflt) {
|
||||||
if (setting || !pwd) {
|
if (loading || !pwd) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
return deflt;
|
return deflt;
|
||||||
|
|
Loading…
Reference in New Issue