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,18 +4,26 @@ 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) {
     return notFound(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;

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 }