Merge pull request #632 from mozilla/pwd

display the 'add password' button only when the input field isn't empty
This commit is contained in:
Danny Coates 2017-11-06 09:41:06 -08:00 committed by GitHub
commit 181a74df88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 30 deletions

View File

@ -16,17 +16,31 @@ module.exports = function(state, emit) {
${label} ${label}
<form id="unlock" onsubmit=${checkPassword}> <form id="unlock" onsubmit=${checkPassword}>
<input id="unlock-input" <input id="unlock-input"
class="unlock-input input-no-btn"
maxlength="64" maxlength="64"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
oninput=${inputChanged}
type="password"/> type="password"/>
<input type="submit" <input type="submit"
id="unlock-btn" id="unlock-btn"
class="btn" class="btn btn-hidden"
value="${state.translate('unlockButtonLabel')}"/> value="${state.translate('unlockButtonLabel')}"/>
</form> </form>
</div>`; </div>`;
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) { function checkPassword(event) {
event.preventDefault(); event.preventDefault();
const password = document.getElementById('unlock-input').value; const password = document.getElementById('unlock-input').value;

View File

@ -4,6 +4,16 @@ const notFound = require('./notFound');
const uploadPassword = require('./uploadPassword'); const uploadPassword = require('./uploadPassword');
const { allowedCopy, delay, fadeOut } = require('../utils'); const { allowedCopy, delay, fadeOut } = require('../utils');
function passwordComplete(state, password) {
const el = html([
`<div class="selectPassword">${state.translate('passwordResult', {
password: '<pre></pre>'
})}</div>`
]);
el.lastElementChild.textContent = password;
return el;
}
module.exports = function(state, emit) { module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id); const file = state.storage.getFileById(state.params.id);
if (!file) { if (!file) {
@ -11,11 +21,9 @@ module.exports = function(state, emit) {
} }
file.password = file.password || ''; file.password = file.password || '';
const passwordComplete = html`<div class="selectPassword"></div>`;
passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
const passwordSection = file.password const passwordSection = file.password
? passwordComplete ? passwordComplete(state, file.password)
: uploadPassword(state, emit); : uploadPassword(state, emit);
const div = html` const div = html`
<div id="share-link" class="fadeIn"> <div id="share-link" class="fadeIn">

View File

@ -11,16 +11,30 @@ module.exports = function(state, emit) {
</div> </div>
<form class="setPassword hidden" onsubmit=${setPassword}> <form class="setPassword hidden" onsubmit=${setPassword}>
<input id="unlock-input" <input id="unlock-input"
class="unlock-input input-no-btn"
maxlength="64" maxlength="64"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"/> placeholder="${state.translate('unlockInputPlaceholder')}"
oninput=${inputChanged}/>
<input type="submit" <input type="submit"
id="unlock-btn" id="unlock-btn"
class="btn" class="btn btn-hidden"
value="${state.translate('addPasswordButton')}"/> value="${state.translate('addPasswordButton')}"/>
</form> </form>
</div>`; </div>`;
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) { function togglePasswordInput(e) {
const unlockInput = document.getElementById('unlock-input'); const unlockInput = document.getElementById('unlock-input');
const boxChecked = e.target.checked; const boxChecked = e.target.checked;
@ -36,6 +50,7 @@ module.exports = function(state, emit) {
} else { } else {
unlockInput.value = ''; unlockInput.value = '';
} }
inputChanged();
} }
function setPassword(event) { function setPassword(event) {

View File

@ -137,6 +137,7 @@ body {
width: 96%; width: 96%;
} }
pre,
input, input,
select, select,
textarea, textarea,
@ -145,6 +146,11 @@ button {
margin: 0; margin: 0;
} }
pre {
font-weight: 600;
display: inline-block;
}
a { a {
text-decoration: none; text-decoration: none;
} }
@ -809,7 +815,7 @@ tbody {
padding: 10px 0; padding: 10px 0;
} }
#unlock-input { .unlock-input {
flex: 1; flex: 1;
height: 46px; height: 46px;
border: 1px solid #0297f8; border: 1px solid #0297f8;
@ -841,6 +847,14 @@ tbody {
background-color: #0287e8; background-color: #0287e8;
} }
.btn-hidden {
visibility: hidden;
}
.input-no-btn {
border-radius: 6px;
}
/* footer */ /* footer */
.footer { .footer {
right: 0; right: 0;

46
package-lock.json generated
View File

@ -32,6 +32,16 @@
"integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=", "integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=",
"dev": true "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": { "accept-language": {
"version": "3.0.17", "version": "3.0.17",
"resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.17.tgz", "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": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
@ -4639,6 +4641,14 @@
"strip-ansi": "3.0.1" "strip-ansi": "3.0.1"
} }
}, },
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"bundled": true, "bundled": true,
@ -6069,16 +6079,6 @@
"integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=", "integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=",
"dev": true "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": { "jszip": {
"version": "3.1.4", "version": "3.1.4",
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.4.tgz", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.4.tgz",
@ -10865,11 +10865,6 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true "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": { "string-hash": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@ -10914,6 +10909,11 @@
"function-bind": "1.1.1" "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": { "stringify-object": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz",

View File

@ -87,3 +87,5 @@ footerLinkCookies = Cookies
requirePasswordCheckbox = Require a password to download this file requirePasswordCheckbox = Require a password to download this file
addPasswordButton = Add password addPasswordButton = Add password
passwordTryAgain = Incorrect password. Try again. passwordTryAgain = Incorrect password. Try again.
// This label is followed by the password needed to download a file
passwordResult = Password: { $password }