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) {