Browse Source

added maxPasswordLength and passwordError messages

Danny Coates 7 years ago
parent
commit
c18f488be7
2 changed files with 24 additions and 14 deletions
  1. 20 12
      app/templates/passwordInput/index.js
  2. 4 2
      public/locales/en-US/send.ftl

+ 20 - 12
app/templates/passwordInput/index.js

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

+ 4 - 2
public/locales/en-US/send.ftl

@@ -103,8 +103,6 @@ requirePasswordCheckbox = Require a password to download this file
 addPasswordButton = Add password
 changePasswordButton = Change
 passwordTryAgain = Incorrect password. Try again.
-# This label is followed by the password needed to download a file
-passwordResult = Password: { $password }
 reportIPInfringement = Report IP Infringement
 javascriptRequired = Firefox Send requires JavaScript
 whyJavascript = Why does Firefox Send require JavaScript?
@@ -115,3 +113,7 @@ expiresHoursMinutes = { $hours }h { $minutes }m
 expiresMinutes = { $minutes }m
 # A short status message shown when a password is successfully 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