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:
commit
181a74df88
|
@ -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;
|
||||
|
|
|
@ -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, ' ');
|
||||
|
||||
const passwordSection = file.password
|
||||
? passwordComplete
|
||||
? passwordComplete(state, file.password)
|
||||
: uploadPassword(state, emit);
|
||||
const div = html`
|
||||
<div id="share-link" class="fadeIn">
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 }
|
Loading…
Reference in New Issue