Merge pull request #632 from mozilla/pwd

display the 'add password' button only when the input field isn't empty

app/templates/downloadPassword.js

@@ -16,17 +16,31 @@ module.exports = function(state, emit) {
       ${label}
       <form id="unlock" onsubmit=${checkPassword}>
         <input id="unlock-input"
+          class="unlock-input input-no-btn"
           maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
+          oninput=${inputChanged}
           type="password"/>
         <input type="submit"
           id="unlock-btn"
-          class="btn"
+          class="btn btn-hidden"
           value="${state.translate('unlockButtonLabel')}"/>
       </form>
     </div>`;
 
+  function inputChanged() {
+    const input = document.getElementById('unlock-input');
+    const btn = document.getElementById('unlock-btn');
+    if (input.value.length > 0) {
+      btn.classList.remove('btn-hidden');
+      input.classList.remove('input-no-btn');
+    } else {
+      btn.classList.add('btn-hidden');
+      input.classList.add('input-no-btn');
+    }
+  }
+
   function checkPassword(event) {
     event.preventDefault();
     const password = document.getElementById('unlock-input').value;

app/templates/share.js

@@ -4,6 +4,16 @@ const notFound = require('./notFound');
 const uploadPassword = require('./uploadPassword');
 const { allowedCopy, delay, fadeOut } = require('../utils');
 
+function passwordComplete(state, password) {
+  const el = html([
+    `<div class="selectPassword">${state.translate('passwordResult', {
+      password: '<pre></pre>'
+    })}</div>`
+  ]);
+  el.lastElementChild.textContent = password;
+  return el;
+}
+
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   if (!file) {
@@ -11,11 +21,9 @@ module.exports = function(state, emit) {
   }
 
   file.password = file.password || '';
-  const passwordComplete = html`<div class="selectPassword"></div>`;
-  passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
 
   const passwordSection = file.password
-    ? passwordComplete
+    ? passwordComplete(state, file.password)
     : uploadPassword(state, emit);
   const div = html`
   <div id="share-link" class="fadeIn">

app/templates/uploadPassword.js

@@ -11,16 +11,30 @@ module.exports = function(state, emit) {
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
       <input id="unlock-input"
+        class="unlock-input input-no-btn"
         maxlength="64"
         autocomplete="off"
-        placeholder="${state.translate('unlockInputPlaceholder')}"/>
+        placeholder="${state.translate('unlockInputPlaceholder')}"
+        oninput=${inputChanged}/>
       <input type="submit"
         id="unlock-btn"
-        class="btn"
+        class="btn btn-hidden"
         value="${state.translate('addPasswordButton')}"/>
     </form>
   </div>`;
 
+  function inputChanged() {
+    const input = document.getElementById('unlock-input');
+    const btn = document.getElementById('unlock-btn');
+    if (input.value.length > 0) {
+      btn.classList.remove('btn-hidden');
+      input.classList.remove('input-no-btn');
+    } else {
+      btn.classList.add('btn-hidden');
+      input.classList.add('input-no-btn');
+    }
+  }
+
   function togglePasswordInput(e) {
     const unlockInput = document.getElementById('unlock-input');
     const boxChecked = e.target.checked;
@@ -36,6 +50,7 @@ module.exports = function(state, emit) {
     } else {
       unlockInput.value = '';
     }
+    inputChanged();
   }
 
   function setPassword(event) {

assets/main.css

@@ -137,6 +137,7 @@ body {
   width: 96%;
 }
 
+pre,
 input,
 select,
 textarea,
@@ -145,6 +146,11 @@ button {
   margin: 0;
 }
 
+pre {
+  font-weight: 600;
+  display: inline-block;
+}
+
 a {
   text-decoration: none;
 }
@@ -809,7 +815,7 @@ tbody {
   padding: 10px 0;
 }
 
-#unlock-input {
+.unlock-input {
   flex: 1;
   height: 46px;
   border: 1px solid #0297f8;
@@ -841,6 +847,14 @@ tbody {
   background-color: #0287e8;
 }
 
+.btn-hidden {
+  visibility: hidden;
+}
+
+.input-no-btn {
+  border-radius: 6px;
+}
+
 /*    footer    */
 .footer {
   right: 0;

package-lock.json

@@ -32,6 +32,16 @@
       "integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=",
       "dev": true
     },
+    "JSONStream": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
+      "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "0.0.5",
+        "through": "2.3.8"
+      }
+    },
     "accept-language": {
       "version": "3.0.17",
       "resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.17.tgz",
@@ -4621,14 +4631,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -4639,6 +4641,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -6069,16 +6079,6 @@
       "integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=",
       "dev": true
     },
-    "JSONStream": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
-      "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "0.0.5",
-        "through": "2.3.8"
-      }
-    },
     "jszip": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.4.tgz",
@@ -10865,11 +10865,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@@ -10914,6 +10909,11 @@
         "function-bind": "1.1.1"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "stringify-object": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz",

public/locales/en-US/send.ftl

@@ -87,3 +87,5 @@ footerLinkCookies = Cookies
 requirePasswordCheckbox = Require a password to download this file
 addPasswordButton = Add password
 passwordTryAgain = Incorrect password. Try again.
+// This label is followed by the password needed to download a file
+passwordResult = Password: { $password }