added maxPasswordLength and passwordError messages

This commit is contained in:
Danny Coates 2018-02-20 11:46:27 -08:00
parent 099012fac9
commit c18f488be7
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
2 changed files with 25 additions and 15 deletions

View File

@ -1,4 +1,5 @@
const html = require('choo/html'); const html = require('choo/html');
const MAX_LENGTH = 32;
module.exports = function(file, state, emit) { module.exports = function(file, state, emit) {
const loading = state.settingPassword; const loading = state.settingPassword;
@ -26,7 +27,7 @@ module.exports = function(file, state, emit) {
<input id="password-input" <input id="password-input"
${loading ? 'disabled' : ''} ${loading ? 'disabled' : ''}
class="${inputClass}" class="${inputClass}"
maxlength="32" maxlength="${MAX_LENGTH}"
autocomplete="off" autocomplete="off"
type="password" type="password"
oninput=${inputChanged} oninput=${inputChanged}
@ -42,22 +43,29 @@ module.exports = function(file, state, emit) {
class="${btnClass}" class="${btnClass}"
value="${loading ? '' : action}"> value="${loading ? '' : action}">
</form> </form>
<div class="passwordInput__msg">${message( <label
loading, class="passwordInput__msg"
pwd, for="password-input">${message(
state.translate('passwordIsSet') loading,
)}</div> pwd,
</div> state.translate('passwordIsSet')
`; )}</label>
</div>`;
function inputChanged() { function inputChanged() {
const pwdmsg = document.querySelector('.passwordInput__msg');
if (pwdmsg) {
pwdmsg.textContent = '';
}
const resetInput = document.getElementById('password-input'); const resetInput = document.getElementById('password-input');
const resetBtn = document.getElementById('password-btn'); const resetBtn = document.getElementById('password-btn');
if (resetInput.value.length > 0) { const pwdmsg = document.querySelector('.passwordInput__msg');
const length = resetInput.value.length;
if (length === MAX_LENGTH) {
pwdmsg.textContent = state.translate('maxPasswordLength', {
length: MAX_LENGTH
});
} else {
pwdmsg.textContent = '';
}
if (length > 0) {
resetBtn.classList.remove('inputBtn--hidden'); resetBtn.classList.remove('inputBtn--hidden');
resetInput.classList.remove('input--noBtn'); resetInput.classList.remove('input--noBtn');
} else { } else {

View File

@ -103,8 +103,6 @@ requirePasswordCheckbox = Require a password to download this file
addPasswordButton = Add password addPasswordButton = Add password
changePasswordButton = Change changePasswordButton = Change
passwordTryAgain = Incorrect password. Try again. passwordTryAgain = Incorrect password. Try again.
# This label is followed by the password needed to download a file
passwordResult = Password: { $password }
reportIPInfringement = Report IP Infringement reportIPInfringement = Report IP Infringement
javascriptRequired = Firefox Send requires JavaScript javascriptRequired = Firefox Send requires JavaScript
whyJavascript = Why does Firefox Send require JavaScript? whyJavascript = Why does Firefox Send require JavaScript?
@ -115,3 +113,7 @@ expiresHoursMinutes = { $hours }h { $minutes }m
expiresMinutes = { $minutes }m expiresMinutes = { $minutes }m
# A short status message shown when a password is successfully set # A short status message shown when a password is successfully set
passwordIsSet = Password set passwordIsSet = Password set
# A short status message shown when the user enters a long password
maxPasswordLength = Maximum password length: { $length }
# A short status message shown when there was an error setting the password
passwordError = The password could not be set