From 14b40d820bc27ca24e6c764b57c5094f6d1d7f88 Mon Sep 17 00:00:00 2001 From: Danny Coates 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) {
-
- -
+
${state.translate('uploadPageDropMessage')}
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` -
+
@@ -44,15 +44,14 @@ module.exports = function(file, state, emit) { value="${loading ? '' : action}">
+ class="passwordInput__msg ${ + state.passwordSetError ? 'passwordInput__msg--error' : '' + }" + for="password-input">${message(state, pwd)}
`; 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) {