dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated password input UI

Browse source
This commit is contained in:
Danny Coates 2018-02-16 12:56:53 -08:00
parent 8d41111cd6
commit 346e604f34
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
37 changed files with 282 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

49
app/pages/share/index.js
View file

@ -3,41 +3,18 @@ const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../../common/assets');
const notFound = require('../notFound');
const changePasswordSection = require('../../templates/changePasswordSection');
const setPasswordSection = require('../../templates/setPasswordSection');
const selectbox = require('../../templates/selectbox');
const deletePopup = require('../../templates/popup');
const { allowedCopy, delay, fadeOut } = require('../../utils');
function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
const el = html`<div>${raw(
translate('expireInfo', {
downloadCount: '<select></select>',
timespan: translate('timespanHours', { num: hours })
})
)}</div>`;
const select = el.querySelector('select');
const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
const t = num => translate('downloadCount', { num });
const changed = value => emit('changeLimit', { file, value });
select.parentNode.replaceChild(
selectbox(file.dlimit || 1, options, t, changed),
select
);
return el;
}
module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id);
if (!file) {
return notFound(state, emit);
}
const passwordSection = file.hasPassword
? changePasswordSection(state, emit)
: setPasswordSection(state, emit);
const div = html`
return html`
<div id="shareWrapper" class="effect--fadeIn">
<div class="title">${expireInfo(file, state.translate, emit)}</div>
<div class="sharePage">
@ -56,7 +33,7 @@ module.exports = function(state, emit) {
title="${state.translate('copyUrlFormButton')}"
onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
</div>
${passwordSection}
${setPasswordSection(state, emit)}
<button
class="btn btn--delete"
title="${state.translate('deleteFileButton')}"
@ -94,6 +71,7 @@ module.exports = function(state, emit) {
emit('copy', { url: file.url, location: 'success-screen' });
const input = document.getElementById('fileUrl');
input.disabled = true;
input.classList.add('input--copied');
const copyBtn = document.getElementById('copyBtn');
copyBtn.disabled = true;
copyBtn.classList.add('inputBtn--copied');
@ -103,6 +81,7 @@ module.exports = function(state, emit) {
);
await delay(2000);
input.disabled = false;
input.classList.remove('input--copied');
copyBtn.disabled = false;
copyBtn.classList.remove('inputBtn--copied');
copyBtn.textContent = state.translate('copyUrlFormButton');
@ -114,5 +93,23 @@ module.exports = function(state, emit) {
await fadeOut('#shareWrapper');
emit('pushState', '/');
}
return div;
};
function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
const el = html`<div>${raw(
translate('expireInfo', {
downloadCount: '<select></select>',
timespan: translate('timespanHours', { num: hours })
})
)}</div>`;
const select = el.querySelector('select');
const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
const t = num => translate('downloadCount', { num });
const changed = value => emit('changeLimit', { file, value });
select.parentNode.replaceChild(
selectbox(file.dlimit || 1, options, t, changed),
select
);
return el;
}