From 14b40d820bc27ca24e6c764b57c5094f6d1d7f88 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 21 Feb 2018 12:35:52 -0800
Subject: [PATCH] added password setting error UI

---
 app/base.css                                  |  8 +++++
 app/fileManager.js                            |  4 ++-
 app/ownedFile.js                              | 16 ++++++---
 app/pages/welcome/index.js                    |  8 ++---
 .../downloadPassword/downloadPassword.css     |  8 -----
 app/templates/passwordInput/index.js          | 34 ++++++++++---------
 app/templates/passwordInput/passwordInput.css | 27 +++++++++------
 app/templates/setPasswordSection/index.js     |  4 +--
 public/locales/en-US/send.ftl                 |  2 +-
 9 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/app/base.css b/app/base.css
index 7d21eb9e..93e26a13 100644
--- a/app/base.css
+++ b/app/base.css
@@ -106,6 +106,10 @@ a {
   padding-right: 10px;
 }
 
+.input--error {
+  border-color: var(--errorColor);
+}
+
 .input--noBtn {
   border-radius: 6px;
 }
@@ -215,6 +219,10 @@ a {
   }
 }
 
+.error {
+  color: var(--errorColor);
+}
+
 .title {
   font-size: 33px;
   line-height: 40px;
diff --git a/app/fileManager.js b/app/fileManager.js
index b8892272..b2a63278 100644
--- a/app/fileManager.js
+++ b/app/fileManager.js
@@ -136,9 +136,11 @@ export default function(state, emitter) {
       state.storage.writeFile(file);
       metrics.addedPassword({ size: file.size });
       await delay(1000);
-      state.settingPassword = false;
     } catch (err) {
       console.error(err);
+      state.passwordSetError = err;
+    } finally {
+      state.settingPassword = false;
     }
     render();
   });
diff --git a/app/ownedFile.js b/app/ownedFile.js
index 307621f1..dafb1d4d 100644
--- a/app/ownedFile.js
+++ b/app/ownedFile.js
@@ -21,11 +21,17 @@ export default class OwnedFile {
   }
 
   async setPassword(password) {
-    this.password = password;
-    this._hasPassword = true;
-    this.keychain.setPassword(password, this.url);
-    const result = await setPassword(this.id, this.ownerToken, this.keychain);
-    return result;
+    try {
+      this.password = password;
+      this._hasPassword = true;
+      this.keychain.setPassword(password, this.url);
+      const result = await setPassword(this.id, this.ownerToken, this.keychain);
+      return result;
+    } catch (e) {
+      this.password = null;
+      this._hasPassword = false;
+      throw e;
+    }
   }
 
   del() {
diff --git a/app/pages/welcome/index.js b/app/pages/welcome/index.js
index a0581e41..22da7656 100644
--- a/app/pages/welcome/index.js
+++ b/app/pages/welcome/index.js
@@ -21,11 +21,9 @@ module.exports = function(state, emit) {
     <div class="uploadArea"
       ondragover=${dragover}
       ondragleave=${dragleave}>
-      <div id="upload-img">
-        <img
-          src="${assets.get('upload.svg')}"
-          title="${state.translate('uploadSvgAlt')}"/>
-      </div>
+      <img
+        src="${assets.get('upload.svg')}"
+        title="${state.translate('uploadSvgAlt')}"/>
       <div class="uploadArea__msg">
         ${state.translate('uploadPageDropMessage')}
       </div>
diff --git a/app/templates/downloadPassword/downloadPassword.css b/app/templates/downloadPassword/downloadPassword.css
index 2a4bc0a8..cb60e505 100644
--- a/app/templates/downloadPassword/downloadPassword.css
+++ b/app/templates/downloadPassword/downloadPassword.css
@@ -11,14 +11,6 @@
   padding: 10px 0;
 }
 
-.error {
-  color: var(--errorColor);
-}
-
-.input--error {
-  border-color: var(--errorColor);
-}
-
 @media (max-device-width: 520px), (max-width: 520px) {
   .passwordSection {
     width: 100%;
diff --git a/app/templates/passwordInput/index.js b/app/templates/passwordInput/index.js
index b48af8c6..b53db8ee 100644
--- a/app/templates/passwordInput/index.js
+++ b/app/templates/passwordInput/index.js
@@ -4,9 +4,10 @@ const MAX_LENGTH = 32;
 module.exports = function(file, state, emit) {
   const loading = state.settingPassword;
   const pwd = file.hasPassword;
-  const formClass = pwd
-    ? 'passwordInput'
-    : 'passwordInput passwordInput--hidden';
+  const sectionClass =
+    pwd || state.passwordSetError
+      ? 'passwordInput'
+      : 'passwordInput passwordInput--hidden';
   const inputClass = loading || pwd ? 'input' : 'input input--noBtn';
   let btnClass = 'inputBtn inputBtn--password inputBtn--hidden';
   if (loading) {
@@ -14,14 +15,13 @@ module.exports = function(file, state, emit) {
   } else if (pwd) {
     btnClass = 'inputBtn inputBtn--password';
   }
-
   const action = pwd
     ? state.translate('changePasswordButton')
     : state.translate('addPasswordButton');
   return html`
-  <div>
+  <div class="${sectionClass}">
     <form
-      class="${formClass}"
+      class="passwordInput__form"
       onsubmit=${setPassword}
       data-no-csrf>
       <input id="password-input"
@@ -33,7 +33,7 @@ module.exports = function(file, state, emit) {
         oninput=${inputChanged}
         onfocus=${focused}
         placeholder="${
-          pwd
+          pwd && !state.passwordSetError
             ? passwordPlaceholder(file.password)
             : state.translate('unlockInputPlaceholder')
         }">
@@ -44,15 +44,14 @@ module.exports = function(file, state, emit) {
         value="${loading ? '' : action}">
     </form>
     <label
-      class="passwordInput__msg"
-      for="password-input">${message(
-        loading,
-        pwd,
-        state.translate('passwordIsSet')
-      )}</label>
+      class="passwordInput__msg ${
+        state.passwordSetError ? 'passwordInput__msg--error' : ''
+      }"
+      for="password-input">${message(state, pwd)}</label>
   </div>`;
 
   function inputChanged() {
+    state.passwordSetError = null;
     const resetInput = document.getElementById('password-input');
     const resetBtn = document.getElementById('password-btn');
     const pwdmsg = document.querySelector('.passwordInput__msg');
@@ -99,9 +98,12 @@ function passwordPlaceholder(password) {
   return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
 }
 
-function message(loading, pwd, deflt) {
-  if (loading || !pwd) {
+function message(state, pwd) {
+  if (state.passwordSetError) {
+    return state.translate('passwordSetError');
+  }
+  if (state.settingPassword || !pwd) {
     return '';
   }
-  return deflt;
+  return state.translate('passwordIsSet');
 }
diff --git a/app/templates/passwordInput/passwordInput.css b/app/templates/passwordInput/passwordInput.css
index ef752b02..dcd09b31 100644
--- a/app/templates/passwordInput/passwordInput.css
+++ b/app/templates/passwordInput/passwordInput.css
@@ -1,21 +1,28 @@
 .passwordInput {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 80%;
-  padding: 10px 5px 5px;
-}
-
-.passwordInput__msg {
+  width: 90%;
   height: 100px;
-  margin: 0 5px;
-  font-size: 15px;
-  color: var(--lightTextColor);
+  padding: 10px 5px 5px;
 }
 
 .passwordInput--hidden {
   visibility: hidden;
 }
 
+.passwordInput__form {
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: 5px;
+}
+
+.passwordInput__msg {
+  font-size: 15px;
+  color: var(--lightTextColor);
+}
+
+.passwordInput__msg--error {
+  color: var(--errorColor);
+}
+
 .inputBtn--loading {
   background-image: url('../assets/spinner.svg');
   background-position: center;
diff --git a/app/templates/setPasswordSection/index.js b/app/templates/setPasswordSection/index.js
index 1883ad5c..16130712 100644
--- a/app/templates/setPasswordSection/index.js
+++ b/app/templates/setPasswordSection/index.js
@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
     <div class="checkbox">
       <input
         ${file.hasPassword ? 'disabled' : ''}
-        ${file.hasPassword ? 'checked' : ''}
+        ${file.hasPassword || state.passwordSetError ? 'checked' : ''}
         class="checkbox__input"
         id="add-password"
         type="checkbox"
@@ -26,7 +26,7 @@ module.exports = function(state, emit) {
     const unlockInput = document.getElementById('password-input');
     const boxChecked = e.target.checked;
     document
-      .querySelector('form.passwordInput')
+      .querySelector('.passwordInput')
       .classList.toggle('passwordInput--hidden', !boxChecked);
     if (boxChecked) {
       unlockInput.focus();
diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl
index 0d48f0c9..60bd9e8c 100644
--- a/public/locales/en-US/send.ftl
+++ b/public/locales/en-US/send.ftl
@@ -116,4 +116,4 @@ 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
+passwordSetError = This password could not be set