styled dl password input a bit
This commit is contained in:
parent
26a943939d
commit
c359678226
|
@ -233,11 +233,7 @@ export default function(state, emitter) {
|
||||||
await dl;
|
await dl;
|
||||||
const time = Date.now() - start;
|
const time = Date.now() - start;
|
||||||
const speed = size / (time / 1000);
|
const speed = size / (time / 1000);
|
||||||
if (document.querySelector('.page')) {
|
|
||||||
await delay(1000);
|
|
||||||
}
|
|
||||||
state.storage.totalDownloads += 1;
|
state.storage.totalDownloads += 1;
|
||||||
state.transfer.reset();
|
|
||||||
metrics.completedDownload({ size, time, speed });
|
metrics.completedDownload({ size, time, speed });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (err.message === '0') {
|
if (err.message === '0') {
|
||||||
|
|
|
@ -7,21 +7,21 @@ function password(state, emit) {
|
||||||
const fileInfo = state.fileInfo;
|
const fileInfo = state.fileInfo;
|
||||||
const invalid = fileInfo.password === null;
|
const invalid = fileInfo.password === null;
|
||||||
|
|
||||||
const visible = invalid ? 'visible' : 'invisible';
|
|
||||||
const invalidBtn = invalid ? '' : '';
|
|
||||||
|
|
||||||
const div = html`
|
const div = html`
|
||||||
<div class="">
|
<div class="h-full flex flex-col items-center justify-center border border-grey-light bg-white">
|
||||||
<label
|
<label
|
||||||
class="${visible}"
|
id="password-error"
|
||||||
|
class="${invalid ? '' : 'invisible'} text-red"
|
||||||
for="password-input">
|
for="password-input">
|
||||||
${state.translate('passwordTryAgain')}
|
${state.translate('passwordTryAgain')}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<form class="" onsubmit=${checkPassword} data-no-csrf>
|
<form class="w-5/6" onsubmit=${checkPassword} data-no-csrf>
|
||||||
<input id="password-input"
|
<input id="password-input"
|
||||||
class=""
|
class="w-full border rounded ${
|
||||||
maxlength="64"
|
invalid ? 'border-red' : 'border-grey'
|
||||||
|
} leading-loose"
|
||||||
|
maxlength="32"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||||
oninput=${inputChanged}
|
oninput=${inputChanged}
|
||||||
|
@ -29,7 +29,7 @@ function password(state, emit) {
|
||||||
|
|
||||||
<input type="submit"
|
<input type="submit"
|
||||||
id="password-btn"
|
id="password-btn"
|
||||||
class="${invalidBtn}"
|
class="hidden"
|
||||||
value="${state.translate('unlockInputLabel')}"/>
|
value="${state.translate('unlockInputLabel')}"/>
|
||||||
</form>
|
</form>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
@ -39,11 +39,10 @@ function password(state, emit) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function inputChanged() {
|
function inputChanged() {
|
||||||
//TODO
|
const label = document.getElementById('password-error');
|
||||||
const input = document.querySelector('.passwordForm__error');
|
const input = document.getElementById('password-input');
|
||||||
input.classList.remove('visible');
|
label.classList.add('invisible');
|
||||||
const btn = document.getElementById('password-btn');
|
input.classList.remove('border-red');
|
||||||
btn.classList.remove('unlockBtn--error');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkPassword(event) {
|
function checkPassword(event) {
|
||||||
|
@ -87,7 +86,15 @@ module.exports = function(state, emit) {
|
||||||
content = archiveTile.downloading(state, emit);
|
content = archiveTile.downloading(state, emit);
|
||||||
break;
|
break;
|
||||||
case 'complete':
|
case 'complete':
|
||||||
content = ''; //TODO
|
content = html`
|
||||||
|
<div class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
|
||||||
|
<h1 class="text-center">${state.translate('downloadFinish')}</h1>
|
||||||
|
<p class="">
|
||||||
|
<a href="/" class="text-blue">${state.translate(
|
||||||
|
'sendYourFilesLink'
|
||||||
|
)}</a>
|
||||||
|
</p>
|
||||||
|
</div>`;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
content = archiveTile.preview(state, emit);
|
content = archiveTile.preview(state, emit);
|
||||||
|
@ -99,7 +106,7 @@ module.exports = function(state, emit) {
|
||||||
<main class="main container">
|
<main class="main container">
|
||||||
<section class="relative h-full w-full px-6 md:flex md:flex-row">
|
<section class="relative h-full w-full px-6 md:flex md:flex-row">
|
||||||
<div class="pt-4 md:mr-6 md:pb-4 md:w-1/2">${content}</div>
|
<div class="pt-4 md:mr-6 md:pb-4 md:w-1/2">${content}</div>
|
||||||
<div class="pt-4 md:w-1/2">${intro(state)}</div>
|
<div class="py-4 md:w-1/2">${intro(state)}</div>
|
||||||
</section>
|
</section>
|
||||||
</main>`;
|
</main>`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,7 @@ const assets = require('../../common/assets');
|
||||||
|
|
||||||
module.exports = function intro(state) {
|
module.exports = function intro(state) {
|
||||||
return html`
|
return html`
|
||||||
<article class="flex flex-col items-center justify-center bg-white border border-grey-light p-2">
|
<article class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
|
||||||
<p class="text-center">
|
<p class="text-center">
|
||||||
<div class="font-semibold">${state.translate('uploadPageHeader')}</div>
|
<div class="font-semibold">${state.translate('uploadPageHeader')}</div>
|
||||||
<div class="italic">${state.translate('pageHeaderCredits')}</div>
|
<div class="italic">${state.translate('pageHeaderCredits')}</div>
|
||||||
|
|
Loading…
Reference in New Issue