Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

updated download password input style

Browse Source
This commit is contained in:
Danny Coates 2018-02-20 12:21:00 -08:00
parent 130ddca135
commit ebecc6bb81
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/downloadPassword/downloadPassword.css
View File

@ -11,8 +11,12 @@
padding: 10px 0; padding: 10px 0;
} }
.red { .error {
color: red; color: var(--errorColor);
}
.input--error {
border-color: var(--errorColor);
} }
@media (max-device-width: 520px), (max-width: 520px) { @media (max-device-width: 520px), (max-width: 520px) {

12
app/templates/downloadPassword/index.js
View File

@ -2,22 +2,25 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const fileInfo = state.fileInfo; const fileInfo = state.fileInfo;
const label = const invalid = fileInfo.password === null;
fileInfo.password === null const label = invalid
? html` ? html`
<label class="red" for="password-input"> <label class="error" for="password-input">
${state.translate('passwordTryAgain')} ${state.translate('passwordTryAgain')}
</label>` </label>`
: html` : html`
<label for="password-input"> <label for="password-input">
${state.translate('unlockInputLabel')} ${state.translate('unlockInputLabel')}
</label>`; </label>`;
const inputClass = invalid
? 'input input--noBtn input--error'
: 'input input--noBtn';
const div = html` const div = html`
<div class="passwordSection"> <div class="passwordSection">
${label} ${label}
<form class="passwordForm" onsubmit=${checkPassword} data-no-csrf> <form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
<input id="password-input" <input id="password-input"
class="input input--noBtn" class="${inputClass}"
maxlength="64" maxlength="64"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
@ -37,6 +40,7 @@ module.exports = function(state, emit) {
function inputChanged() { function inputChanged() {
const input = document.getElementById('password-input'); const input = document.getElementById('password-input');
const btn = document.getElementById('password-btn'); const btn = document.getElementById('password-btn');
input.classList.remove('input--error');
if (input.value.length > 0) { if (input.value.length > 0) {
btn.classList.remove('inputBtn--hidden'); btn.classList.remove('inputBtn--hidden');
input.classList.remove('input--noBtn'); input.classList.remove('input--noBtn');