fox-send/app/templates/share.js

205 lines
6.4 KiB
JavaScript
Raw Normal View History

/* global EXPIRE_SECONDS */
const html = require('choo/html');
const assets = require('../../common/assets');
const notFound = require('./notFound');
const uploadPassword = require('./uploadPassword');
2017-11-30 21:41:09 +00:00
const selectbox = require('./selectbox');
const { allowedCopy, delay, fadeOut } = require('../utils');
function passwordComplete(state, password) {
const el = html([
`<div class="selectPassword">${state.translate('passwordResult', {
password: '<pre></pre>'
2018-01-14 14:49:10 +00:00
})}
<button id="resetButton">${state.translate('changePasswordButton')}</button>
<form id='reset-form' class="setPassword hidden" data-no-csrf>
<input id="unlock-reset-input"
class="unlock-input input-no-btn"
maxlength="64"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}">
<input type="submit"
id="unlock-reset-btn"
class="btn btn-hidden"
value="Reset Password"/>
</form>
</div>`
]);
2018-01-14 14:49:10 +00:00
el.querySelector('#resetButton').onclick = toggleResetInput;
el.querySelector('#unlock-reset-input').oninput = inputChanged;
2017-12-21 09:47:31 +00:00
const passwordOriginal = document.createElement('div');
passwordOriginal.className = 'passwordOriginal';
passwordOriginal.innerText = password;
const passwordStar = document.createElement('div');
passwordStar.className = 'passwordStar';
passwordStar.innerText = password.replace(/./g, '●');
2018-01-14 14:49:10 +00:00
el.firstElementChild.appendChild(passwordOriginal);
el.firstElementChild.appendChild(passwordStar);
return el;
}
2018-01-14 14:49:10 +00:00
function inputChanged() {
const resetInput = document.getElementById('unlock-reset-input');
const resetBtn = document.getElementById('unlock-reset-btn');
if (resetInput.value.length > 0) {
resetBtn.classList.remove('btn-hidden');
resetInput.classList.remove('input-no-btn');
} else {
resetBtn.classList.add('btn-hidden');
resetInput.classList.add('input-no-btn');
}
}
function toggleResetInput(event) {
const form = event.target.parentElement.querySelector('form');
if (form.style.visibility === 'hidden' || form.style.visibility === '') {
form.style.visibility = 'visible';
} else {
form.style.visibility = 'hidden';
}
inputChanged();
}
2017-11-30 21:41:09 +00:00
function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
2017-11-30 21:41:09 +00:00
const el = html([
`<div>${translate('expireInfo', {
downloadCount: '<select></select>',
timespan: translate('timespanHours', { num: hours })
2017-11-30 21:41:09 +00:00
})}</div>`
]);
const select = el.querySelector('select');
const options = [1, 2, 3, 4, 5, 20];
2017-12-06 03:07:23 +00:00
const t = num => translate('downloadCount', { num });
2017-11-30 21:41:09 +00:00
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);
}
file.password = file.password || '';
const passwordSection = file.password
? passwordComplete(state, file.password)
: uploadPassword(state, emit);
const div = html`
<div id="share-link" class="fadeIn">
2017-11-30 21:41:09 +00:00
<div class="title">${expireInfo(file, state.translate, emit)}</div>
<div id="share-window">
<div id="copy-text">
${state.translate('copyUrlFormLabelWithName', {
filename: file.name
})}</div>
<div id="copy">
<input id="link" type="url" value="${file.url}" readonly="true"/>
<button id="copy-btn"
class="btn"
title="${state.translate('copyUrlFormButton')}"
onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
</div>
${passwordSection}
<button id="delete-file"
class="btn"
title="${state.translate('deleteFileButton')}"
2017-12-23 03:20:19 +00:00
onclick=${showPopup}>${state.translate('deleteFileButton')}
2018-01-09 15:26:27 +00:00
</button>
<div id="deletePopup" class="popup">
<div class="popuptext" onblur=${cancel} tabindex="-1">
<div class="popup-message">${state.translate('deletePopupText')}
</div>
<div class="popup-action">
<span class="popup-no" onclick=${cancel}>${state.translate(
2017-12-23 03:20:19 +00:00
'deletePopupCancel'
2018-01-09 15:26:27 +00:00
)}
</span>
<span class="popup-yes" onclick=${deleteFile}>${state.translate(
2017-12-23 03:20:19 +00:00
'deletePopupYes'
2018-01-09 15:26:27 +00:00
)}
</span>
</div>
</div>
</div>
<a class="send-new"
data-state="completed"
href="/"
onclick=${sendNew}>${state.translate('sendAnotherFileLink')}</a>
</div>
</div>
`;
2018-01-14 14:49:10 +00:00
if (div.querySelector('#reset-form'))
div.querySelector('#reset-form').onsubmit = resetPassword;
function resetPassword(event) {
event.preventDefault();
const existingPassword = document.querySelector('.passwordOriginal')
.innerText;
const password = document.querySelector('#unlock-reset-input').value;
if (password.length > 0) {
document.getElementById('copy').classList.remove('wait-password');
document.getElementById('copy-btn').disabled = false;
emit('password', { existingPassword, password, file });
}
}
2017-12-23 03:20:19 +00:00
function showPopup() {
const popupText = document.querySelector('.popuptext');
popupText.classList.add('show');
2018-01-09 19:20:36 +00:00
popupText.focus();
2017-12-23 03:20:19 +00:00
}
function cancel(e) {
e.stopPropagation();
2018-01-09 15:26:27 +00:00
const popupText = document.querySelector('.popuptext');
2017-12-23 03:20:19 +00:00
popupText.classList.remove('show');
}
async function sendNew(e) {
e.preventDefault();
await fadeOut('share-link');
emit('pushState', '/');
}
async function copyLink() {
if (allowedCopy()) {
emit('copy', { url: file.url, location: 'success-screen' });
2017-08-29 18:25:41 +00:00
const input = document.getElementById('link');
input.disabled = true;
const copyBtn = document.getElementById('copy-btn');
copyBtn.disabled = true;
copyBtn.classList.add('success');
copyBtn.replaceChild(
html`<img src="${assets.get('check-16.svg')}" class="icon-check">`,
copyBtn.firstChild
);
await delay(2000);
2017-08-29 18:25:41 +00:00
input.disabled = false;
2017-10-24 17:00:27 +00:00
if (!copyBtn.parentNode.classList.contains('wait-password')) {
copyBtn.disabled = false;
}
copyBtn.classList.remove('success');
copyBtn.textContent = state.translate('copyUrlFormButton');
}
}
async function deleteFile() {
emit('delete', { file, location: 'success-screen' });
await fadeOut('share-link');
emit('pushState', '/');
}
return div;
};