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`
-
+
-
${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) {