diff --git a/app/templates/downloadPassword.js b/app/templates/downloadPassword.js index 74da26dc..324e8d24 100644 --- a/app/templates/downloadPassword.js +++ b/app/templates/downloadPassword.js @@ -16,17 +16,31 @@ module.exports = function(state, emit) { ${label}
`; + 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; diff --git a/app/templates/share.js b/app/templates/share.js index 9162c88f..3efeb6bd 100644 --- a/app/templates/share.js +++ b/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([ + `
${state.translate('passwordResult', { + password: '
'
+    })}
` + ]); + 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`
`; - passwordComplete.innerHTML = file.password.replace(/ /g, ' '); const passwordSection = file.password - ? passwordComplete + ? passwordComplete(state, file.password) : uploadPassword(state, emit); const div = html` `; + 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) { diff --git a/assets/main.css b/assets/main.css index 490a6eef..12d4af57 100644 --- a/assets/main.css +++ b/assets/main.css @@ -137,6 +137,7 @@ body { width: 96%; } +pre, input, select, textarea, @@ -145,6 +146,11 @@ button { margin: 0; } +pre { + font-weight: 600; + display: inline-block; +} + a { text-decoration: none; } @@ -809,7 +815,7 @@ tbody { padding: 10px 0; } -#unlock-input { +.unlock-input { flex: 1; height: 46px; border: 1px solid #0297f8; @@ -841,6 +847,14 @@ tbody { background-color: #0287e8; } +.btn-hidden { + visibility: hidden; +} + +.input-no-btn { + border-radius: 6px; +} + /* footer */ .footer { right: 0; diff --git a/package-lock.json b/package-lock.json index 63cc9cad..046a395d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,16 @@ "integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=", "dev": true }, + "JSONStream": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz", + "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=", + "dev": true, + "requires": { + "jsonparse": "0.0.5", + "through": "2.3.8" + } + }, "accept-language": { "version": "3.0.17", "resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.17.tgz", @@ -4621,14 +4631,6 @@ } } }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", "bundled": true, @@ -4639,6 +4641,14 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -6069,16 +6079,6 @@ "integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=", "dev": true }, - "JSONStream": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz", - "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=", - "dev": true, - "requires": { - "jsonparse": "0.0.5", - "through": "2.3.8" - } - }, "jszip": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.4.tgz", @@ -10865,11 +10865,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" - }, "string-hash": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", @@ -10914,6 +10909,11 @@ "function-bind": "1.1.1" } }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + }, "stringify-object": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz", diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl index f85ae79e..094908e5 100644 --- a/public/locales/en-US/send.ftl +++ b/public/locales/en-US/send.ftl @@ -87,3 +87,5 @@ footerLinkCookies = Cookies requirePasswordCheckbox = Require a password to download this file addPasswordButton = Add password passwordTryAgain = Incorrect password. Try again. +// This label is followed by the password needed to download a file +passwordResult = Password: { $password } \ No newline at end of file