Merge pull request #612 from mozilla/password-nits

Password UI nits

app/templates/downloadPassword.js

@@ -6,7 +6,7 @@ module.exports = function(state, emit) {
     fileInfo.password === null
       ? html`
           <label class="red"
-            for="unlock-input">${state.translate('incorrectPassword')}</label>`
+            for="unlock-input">${state.translate('passwordTryAgain')}</label>`
       : html`
           <label for="unlock-input">
             ${state.translate('unlockInputLabel')}
@@ -16,6 +16,7 @@ module.exports = function(state, emit) {
       ${label}
       <form id="unlock" onsubmit=${checkPassword}>
         <input id="unlock-input"
+          maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
           type="password"/>

app/templates/share.js

@@ -9,10 +9,11 @@ module.exports = function(state, emit) {
   if (!file) {
     return notFound(state, emit);
   }
-  const passwordComplete = html`
-  <div class="selectPassword">
-    Password: ${file.password}
-  </div>`;
+
+  file.password = file.password || '';
+  const passwordComplete = html`<div class="selectPassword"></div>`;
+  passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
+
   const passwordSection = file.password
     ? passwordComplete
     : uploadPassword(state, emit);

app/templates/uploadPassword.js

@@ -4,14 +4,14 @@ module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   const div = html`
   <div class="selectPassword">
-    <div>
+    <div id="addPasswordWrapper">
       <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
-      <label for="addPassword">${state.translate(
-        'requirePasswordCheckbox'
-      )}</label>
+      <label for="addPassword">
+        ${state.translate('requirePasswordCheckbox')}</label>
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
       <input id="unlock-input"
+        maxlength="64"
         autocomplete="off"
         placeholder="${state.translate('unlockInputPlaceholder')}"/>
       <input type="submit"