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}
<form id="unlock" onsubmit=${checkPassword}>
<input id="unlock-input"
class="unlock-input input-no-btn"
maxlength="64"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"
oninput=${inputChanged}
type="password"/>
<input type="submit"
id="unlock-btn"
class="btn"
class="btn btn-hidden"
value="${state.translate('unlockButtonLabel')}"/>
</form>
</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) {
event.preventDefault();
const password = document.getElementById('unlock-input').value;

View File

@ -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([
`<div class="selectPassword">${state.translate('passwordResult', {
password: '<pre></pre>'
})}</div>`
]);
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`<div class="selectPassword"></div>`;
passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
const passwordSection = file.password
? passwordComplete
? passwordComplete(state, file.password)
: uploadPassword(state, emit);
const div = html`
<div id="share-link" class="fadeIn">

View File

@ -11,16 +11,30 @@ module.exports = function(state, emit) {
</div>
<form class="setPassword hidden" onsubmit=${setPassword}>
<input id="unlock-input"
class="unlock-input input-no-btn"
maxlength="64"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"/>
placeholder="${state.translate('unlockInputPlaceholder')}"
oninput=${inputChanged}/>
<input type="submit"
id="unlock-btn"
class="btn"
class="btn btn-hidden"
value="${state.translate('addPasswordButton')}"/>
</form>
</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) {
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) {

View File

@ -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;

46
package-lock.json generated
View File

@ -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",

View File

@ -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 }