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 8f1d7fc0..b198177b 100644 --- a/app/fileManager.js +++ b/app/fileManager.js @@ -135,9 +135,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 98623fd0..b53db8ee 100644 --- a/app/templates/passwordInput/index.js +++ b/app/templates/passwordInput/index.js @@ -1,11 +1,13 @@ const html = require('choo/html'); +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) { @@ -13,26 +15,25 @@ module.exports = function(file, state, emit) { } else if (pwd) { btnClass = 'inputBtn inputBtn--password'; } - const action = pwd ? state.translate('changePasswordButton') : state.translate('addPasswordButton'); return html` -
+
@@ -42,22 +43,28 @@ module.exports = function(file, state, emit) { class="${btnClass}" value="${loading ? '' : action}">
-
${message( - loading, - pwd, - state.translate('passwordIsSet') - )}
-
- `; + +
`; function inputChanged() { - const pwdmsg = document.querySelector('.passwordInput__msg'); - if (pwdmsg) { - pwdmsg.textContent = ''; - } + state.passwordSetError = null; const resetInput = document.getElementById('password-input'); const resetBtn = document.getElementById('password-btn'); - if (resetInput.value.length > 0) { + const pwdmsg = document.querySelector('.passwordInput__msg'); + const length = resetInput.value.length; + + if (length === MAX_LENGTH) { + pwdmsg.textContent = state.translate('maxPasswordLength', { + length: MAX_LENGTH + }); + } else { + pwdmsg.textContent = ''; + } + if (length > 0) { resetBtn.classList.remove('inputBtn--hidden'); resetInput.classList.remove('input--noBtn'); } else { @@ -91,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) {