From c18f488be7ee8d2c803108135a094428bb56c540 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Tue, 20 Feb 2018 11:46:27 -0800
Subject: [PATCH] added maxPasswordLength and passwordError messages

---
 app/templates/passwordInput/index.js | 34 +++++++++++++++++-----------
 public/locales/en-US/send.ftl        |  6 +++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/templates/passwordInput/index.js b/app/templates/passwordInput/index.js
index 98623fd0..b48af8c6 100644
--- a/app/templates/passwordInput/index.js
+++ b/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 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) {
+    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');
       resetInput.classList.remove('input--noBtn');
     } else {
diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl
index f0509943..0d48f0c9 100644
--- a/public/locales/en-US/send.ftl
+++ b/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