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

big refactor

Browse source
This commit is contained in:
Danny Coates 2018-01-24 10:23:13 -08:00
parent dd448cb3ed
commit 565e47aef8
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
37 changed files with 1095 additions and 943 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/templates/blank.js
View file

@ -1,6 +1,6 @@
const html = require('choo/html');
module.exports = function() {
const div = html`<div id="page-one"></div>`;
const div = html`<div></div>`;
return div;
};

27
app/templates/completed.js
View file

@ -5,21 +5,22 @@ const { fadeOut } = require('../utils');
module.exports = function(state, emit) {
const div = html`
<div id="page-one">
<div id="download" class="fadeIn">
<div id="download-progress">
<div id="dl-title" class="title">${state.translate(
'downloadFinish'
)}</div>
<div class="description"></div>
${progress(1)}
<div class="upload">
<div class="progress-text"></div>
<div id="download" class="fadeIn">
<div id="download-progress">
<div id="dl-title" class="title">
${state.translate('downloadFinish')}
</div>
<div class="description"></div>
${progress(1)}
<div class="upload">
<div class="progress-text"></div>
</div>
</div>
<a class="send-new"
data-state="completed"
href="/"
onclick=${sendNew}>${state.translate('sendYourFilesLink')}</a>
</div>
<a class="send-new" data-state="completed" href="/" onclick=${
sendNew
}>${state.translate('sendYourFilesLink')}</a>
</div>
</div>
`;

11
app/templates/download.js
View file

@ -2,7 +2,7 @@ const html = require('choo/html');
const progress = require('./progress');
const { bytes } = require('../utils');
module.exports = function(state) {
module.exports = function(state, emit) {
const transfer = state.transfer;
const div = html`
<div id="page-one">
@ -24,11 +24,20 @@ module.exports = function(state) {
transfer.msg,
transfer.sizes
)}</div>
<button
id="cancel-upload"
title="${state.translate('deletePopupCancel')}"
onclick=${cancel}>${state.translate('deletePopupCancel')}</button>
</div>
</div>
</div>
</div>
`;
function cancel() {
const btn = document.getElementById('cancel-upload');
btn.remove();
emit('cancel');
}
return div;
};

16
app/templates/downloadButton.js Normal file
View file

@ -0,0 +1,16 @@
const html = require('choo/html');
module.exports = function(state, emit) {
function download(event) {
event.preventDefault();
emit('download', state.fileInfo);
}
return html`
<div>
<button id="download-btn"
class="btn"
onclick=${download}>${state.translate('downloadButtonLabel')}
</button>
</div>`;
};

7
app/templates/downloadPassword.js
View file

@ -5,8 +5,9 @@ module.exports = function(state, emit) {
const label =
fileInfo.password === null
? html`
<label class="red"
for="unlock-input">${state.translate('passwordTryAgain')}</label>`
<label class="red" for="unlock-input">
${state.translate('passwordTryAgain')}
</label>`
: html`
<label for="unlock-input">
${state.translate('unlockInputLabel')}
@ -48,7 +49,7 @@ module.exports = function(state, emit) {
document.getElementById('unlock-btn').disabled = true;
state.fileInfo.url = window.location.href;
state.fileInfo.password = password;
emit('preview');
emit('getMetadata');
}
}

58
app/templates/file.js
View file

@ -1,52 +1,62 @@
const html = require('choo/html');
const assets = require('../../common/assets');
function timeLeft(milliseconds) {
function timeLeft(milliseconds, state) {
const minutes = Math.floor(milliseconds / 1000 / 60);
const hours = Math.floor(minutes / 60);
const seconds = Math.floor((milliseconds / 1000) % 60);
if (hours >= 1) {
return `${hours}h ${minutes % 60}m`;
return state.translate('expiresHoursMinutes', {
hours,
minutes: minutes % 60
});
} else if (hours === 0) {
return `${minutes}m ${seconds}s`;
if (minutes === 0) {
return state.translate('expiresMinutes', { minutes: '< 1' });
}
return state.translate('expiresMinutes', { minutes });
}
return null;
}
module.exports = function(file, state, emit) {
const ttl = file.expiresAt - Date.now();
const remainingTime = timeLeft(ttl) || state.translate('linkExpiredAlt');
const remainingTime =
timeLeft(ttl, state) || state.translate('linkExpiredAlt');
const downloadLimit = file.dlimit || 1;
const totalDownloads = file.dtotal || 0;
const row = html`
<tr id="${file.id}">
<td class="overflow-col" title="${
file.name
}"><a class="link" href="/share/${file.id}">${file.name}</a></td>
<td class="overflow-col" title="${file.name}">
<a class="link" href="/share/${file.id}">${file.name}</a>
</td>
<td class="center-col">
<img onclick=${copyClick} src="${assets.get(
'copy-16.svg'
)}" class="icon-copy" title="${state.translate('copyUrlHover')}">
<span class="text-copied" hidden="true">${state.translate(
'copiedUrl'
)}</span>
<img
onclick=${copyClick}
src="${assets.get('copy-16.svg')}"
class="icon-copy"
title="${state.translate('copyUrlHover')}">
<span class="text-copied" hidden="true">
${state.translate('copiedUrl')}
</span>
</td>
<td>${remainingTime}</td>
<td class="center-col">${totalDownloads}/${downloadLimit}</td>
<td class="center-col">${totalDownloads} / ${downloadLimit}</td>
<td class="center-col">
<img onclick=${showPopup} src="${assets.get(
'close-16.svg'
)}" class="icon-delete" title="${state.translate('deleteButtonHover')}">
<img
onclick=${showPopup}
src="${assets.get('close-16.svg')}"
class="icon-delete"
title="${state.translate('deleteButtonHover')}">
<div 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(
'deletePopupCancel'
)}</span>
<span class="popup-yes" onclick=${deleteFile}>${state.translate(
'deletePopupYes'
)}</span>
<span class="popup-no" onclick=${cancel}>
${state.translate('deletePopupCancel')}
</span>
<span class="popup-yes" onclick=${deleteFile}>
${state.translate('deletePopupYes')}
</span>
</div>
</div>
</div>

24
app/templates/fileList.js
View file

@ -9,18 +9,18 @@ module.exports = function(state, emit) {
<thead>
<tr>
<th id="uploaded-file">${state.translate('uploadedFile')}</th>
<th id="copy-file-list" class="center-col">${state.translate(
'copyFileList'
)}</th>
<th id="expiry-time-file-list" >${state.translate(
'timeFileList'
)}</th>
<th id="expiry-downloads-file-list" >${state.translate(
'downloadsFileList'
)}</th>
<th id="delete-file-list" class="center-col">${state.translate(
'deleteFileList'
)}</th>
<th id="copy-file-list" class="center-col">
${state.translate('copyFileList')}
</th>
<th id="expiry-time-file-list" >
${state.translate('timeFileList')}
</th>
<th id="expiry-downloads-file-list" >
${state.translate('downloadsFileList')}
</th>
<th id="delete-file-list" class="center-col">
${state.translate('deleteFileList')}
</th>
</tr>
</thead>
<tbody>

51
app/templates/footer.js
View file

@ -4,31 +4,40 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`<div class="footer">
<div class="legal-links">
<a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="${assets.get(
'mozilla-logo.svg'
)}" alt="mozilla"/></a>
<a href="https://www.mozilla.org/about/legal">${state.translate(
'footerLinkLegal'
)}</a>
<a href="https://testpilot.firefox.com/about">${state.translate(
'footerLinkAbout'
)}</a>
<a href="https://www.mozilla.org" role="presentation">
<img
class="mozilla-logo"
src="${assets.get('mozilla-logo.svg')}"
alt="mozilla"/>
</a>
<a href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')}
</a>
<a href="https://testpilot.firefox.com/about">
${state.translate('footerLinkAbout')}
</a>
<a href="/legal">${state.translate('footerLinkPrivacy')}</a>
<a href="/legal">${state.translate('footerLinkTerms')}</a>
<a href="https://www.mozilla.org/privacy/websites/#cookies">${state.translate(
'footerLinkCookies'
)}</a>
<a href="https://www.mozilla.org/about/legal/report-infringement/">${state.translate(
'reportIPInfringement'
)}</a>
<a href="https://www.mozilla.org/privacy/websites/#cookies">
${state.translate('footerLinkCookies')}
</a>
<a href="https://www.mozilla.org/about/legal/report-infringement/">
${state.translate('reportIPInfringement')}
</a>
</div>
<div class="social-links">
<a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="${assets.get(
'github-icon.svg'
)}" alt="github"/></a>
<a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="${assets.get(
'twitter-icon.svg'
)}" alt="twitter"/></a>
<a href="https://github.com/mozilla/send" role="presentation">
<img
class="github"
src="${assets.get('github-icon.svg')}"
alt="github"/>
</a>
<a href="https://twitter.com/FxTestPilot" role="presentation">
<img
class="twitter"
src="${assets.get('twitter-icon.svg')}"
alt="twitter"/>
</a>
</div>
</div>`;
};

7
app/templates/header.js
View file

@ -41,9 +41,10 @@ module.exports = function(state) {
return html`<header class="header">
<div class="send-logo">
<a href="/">
<img src="${assets.get(
'send_logo.svg'
)}" alt="Send"/><h1 class="site-title">Send</h1>
<img
src="${assets.get('send_logo.svg')}"
alt="Send"/>
<h1 class="site-title">Send</h1>
</a>
<div class="site-subtitle">
<a href="https://testpilot.firefox.com">Firefox Test Pilot</a>

12
app/templates/notFound.js
View file

@ -9,12 +9,12 @@ module.exports = function(state) {
<div class="share-window">
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">
</div>
<div class="expired-description">${state.translate(
'uploadPageExplainer'
)}</div>
<a class="send-new" href="/" data-state="notfound">${state.translate(
'sendYourFilesLink'
)}</a>
<div class="expired-description">
${state.translate('uploadPageExplainer')}
</div>
<a class="send-new" href="/" data-state="notfound">
${state.translate('sendYourFilesLink')}
</a>
</div>
</div>`;
return div;

53
app/templates/preview.js
View file

@ -1,48 +1,13 @@
const html = require('choo/html');
const assets = require('../../common/assets');
const notFound = require('./notFound');
const downloadPassword = require('./downloadPassword');
const { bytes } = require('../utils');
function getFileFromDOM() {
const el = document.getElementById('dl-file');
if (!el) {
return null;
}
return {
nonce: el.getAttribute('data-nonce'),
pwd: !!+el.getAttribute('data-requires-password')
};
}
module.exports = function(state, emit) {
state.fileInfo = state.fileInfo || getFileFromDOM();
if (!state.fileInfo) {
return notFound(state, emit);
}
state.fileInfo.id = state.params.id;
state.fileInfo.secretKey = state.params.key;
module.exports = function(state, pageAction) {
const fileInfo = state.fileInfo;
const size = fileInfo.size
? state.translate('downloadFileSize', { size: bytes(fileInfo.size) })
: '';
let action = html`
<div>
<img src="${assets.get('illustration_download.svg')}"
id="download-img"
alt="${state.translate('downloadAltText')}"/>
<div>
<button id="download-btn"
class="btn"
onclick=${download}>${state.translate('downloadButtonLabel')}
</button>
</div>
</div>`;
if (fileInfo.pwd && !fileInfo.password) {
action = downloadPassword(state, emit);
} else if (!state.transfer) {
emit('preview');
}
const title = fileInfo.name
? state.translate('downloadFileName', { filename: fileInfo.name })
: state.translate('downloadFileTitle');
@ -53,20 +18,20 @@ module.exports = function(state, emit) {
<div class="title">
<span id="dl-file"
data-nonce="${fileInfo.nonce}"
data-requires-password="${fileInfo.pwd}">${title}</span>
data-requires-password="${fileInfo.requiresPassword}"
>${title}</span>
<span id="dl-filesize">${' ' + size}</span>
</div>
<div class="description">${state.translate('downloadMessage')}</div>
${action}
<img
src="${assets.get('illustration_download.svg')}"
id="download-img"
alt="${state.translate('downloadAltText')}"/>
${pageAction}
</div>
<a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
</div>
</div>
`;
function download(event) {
event.preventDefault();
emit('download', fileInfo);
}
return div;
};

36
app/templates/progress.js
View file

@ -10,18 +10,30 @@ module.exports = function(progressRatio) {
const percent = Math.floor(progressRatio * 100);
const div = html`
<div class="progress-bar">
<svg id="progress" width="${oDiameter}" height="${
oDiameter
}" viewPort="0 0 ${oDiameter} ${oDiameter}" version="1.1">
<circle r="${radius}" cx="${oRadius}" cy="${oRadius}" fill="transparent"/>
<circle id="bar" r="${radius}" cx="${oRadius}" cy="${
oRadius
}" fill="transparent" transform="rotate(-90 ${oRadius} ${
oRadius
})" stroke-dasharray="${circumference}" stroke-dashoffset="${dashOffset}"/>
<text class="percentage" text-anchor="middle" x="50%" y="98"><tspan class="percent-number">${
percent
}</tspan><tspan class="percent-sign">%</tspan></text>
<svg
id="progress"
width="${oDiameter}"
height="${oDiameter}"
viewPort="0 0 ${oDiameter} ${oDiameter}"
version="1.1">
<circle
r="${radius}"
cx="${oRadius}"
cy="${oRadius}"
fill="transparent"/>
<circle
id="bar"
r="${radius}"
cx="${oRadius}"
cy="${oRadius}"
fill="transparent"
transform="rotate(-90 ${oRadius} ${oRadius})"
stroke-dasharray="${circumference}"
stroke-dashoffset="${dashOffset}"/>
<text class="percentage" text-anchor="middle" x="50%" y="98">
<tspan class="percent-number">${percent}</tspan>
<tspan class="percent-sign">%</tspan>
</text>
</svg>
</div>
`;

4
app/templates/selectbox.js
View file

@ -47,9 +47,7 @@ module.exports = function(selected, options, translate, changed) {
<ul id="${id}" class="selectOptions">
${options.map(
i =>
html`<li class="selectOption" onclick=${choose} data-value="${i}">${
i
}</li>`
html`<li class="selectOption" onclick=${choose} data-value="${i}">${i}</li>`
)}
</ul>
</div>`;

98
app/templates/share.js
View file

@ -2,34 +2,11 @@
const html = require('choo/html');
const assets = require('../../common/assets');
const notFound = require('./notFound');
const uploadPassword = require('./uploadPassword');
const uploadPasswordSet = require('./uploadPasswordSet');
const uploadPasswordUnset = require('./uploadPasswordUnset');
const selectbox = require('./selectbox');
const { allowedCopy, delay, fadeOut } = require('../utils');
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');
const input = document.getElementById('unlock-reset-input');
if (form.style.visibility === 'hidden' || form.style.visibility === '') {
form.style.visibility = 'visible';
input.focus();
} else {
form.style.visibility = 'hidden';
}
inputChanged();
}
function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
const el = html([
@ -55,19 +32,16 @@ module.exports = function(state, emit) {
return notFound(state, emit);
}
file.password = file.password || '';
const passwordSection = file.password
? passwordComplete(file.password)
: uploadPassword(state, emit);
const passwordSection = file.hasPassword()
? uploadPasswordSet(state, emit)
: uploadPasswordUnset(state, emit);
const div = html`
<div id="share-link" class="fadeIn">
<div class="title">${expireInfo(file, state.translate, emit)}</div>
<div id="share-window">
<div id="copy-text">
${state.translate('copyUrlFormLabelWithName', {
filename: file.name
})}</div>
${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
</div>
<div id="copy">
<input id="link" type="url" value="${file.url}" readonly="true"/>
<button id="copy-btn"
@ -86,13 +60,11 @@ module.exports = function(state, emit) {
<div class="popup-message">${state.translate('deletePopupText')}
</div>
<div class="popup-action">
<span class="popup-no" onclick=${cancel}>${state.translate(
'deletePopupCancel'
)}
<span class="popup-no" onclick=${cancel}>
${state.translate('deletePopupCancel')}
</span>
<span class="popup-yes" onclick=${deleteFile}>${state.translate(
'deletePopupYes'
)}
<span class="popup-yes" onclick=${deleteFile}>
${state.translate('deletePopupYes')}
</span>
</div>
</div>
@ -105,54 +77,6 @@ module.exports = function(state, emit) {
</div>
`;
function passwordComplete(password) {
const passwordSpan = html([
`<span>${state.translate('passwordResult', {
password:
'<pre class="passwordOriginal"></pre><pre class="passwordMask"></pre>'
})}</span>`
]);
const og = passwordSpan.querySelector('.passwordOriginal');
const masked = passwordSpan.querySelector('.passwordMask');
og.textContent = password;
masked.textContent = password.replace(/./g, '●');
return html`<div class="selectPassword">
${passwordSpan}
<button
id="resetButton"
onclick=${toggleResetInput}
>${state.translate('changePasswordButton')}</button>
<form
id='reset-form'
class="setPassword hidden"
onsubmit=${resetPassword}
data-no-csrf>
<input id="unlock-reset-input"
class="unlock-input input-no-btn"
maxlength="32"
autocomplete="off"
type="password"
oninput=${inputChanged}
placeholder="${state.translate('unlockInputPlaceholder')}">
<input type="submit"
id="unlock-reset-btn"
class="btn btn-hidden"
value="${state.translate('changePasswordButton')}"/>
</form>
</div>`;
}
function resetPassword(event) {
event.preventDefault();
const existingPassword = file.password;
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 });
}
}
function showPopup() {
const popupText = document.querySelector('.popuptext');
popupText.classList.add('show');

50
app/templates/unsupported.js
View file

@ -7,39 +7,45 @@ module.exports = function(state) {
? html`
<div id="unsupported-browser">
<div class="title">${state.translate('notSupportedHeader')}</div>
<div class="description">${state.translate(
'notSupportedOutdatedDetail'
)}</div>
<a id="update-firefox" href="https://support.mozilla.org/kb/update-firefox-latest-version">
<img src="${assets.get(
'firefox_logo-only.svg'
)}" class="firefox-logo" alt="Firefox"/>
<div class="unsupported-button-text">${state.translate(
'updateFirefox'
)}</div>
<div class="description">
${state.translate('notSupportedOutdatedDetail')}
</div>
<a
id="update-firefox"
href="https://support.mozilla.org/kb/update-firefox-latest-version">
<img
src="${assets.get('firefox_logo-only.svg')}"
class="firefox-logo"
alt="Firefox"/>
<div class="unsupported-button-text">
${state.translate('updateFirefox')}
</div>
</a>
<div class="unsupported-description">${state.translate(
'uploadPageExplainer'
)}</div>
<div class="unsupported-description">
${state.translate('uploadPageExplainer')}
</div>
</div>`
: html`
<div id="unsupported-browser">
<div class="title">${state.translate('notSupportedHeader')}</div>
<div class="description">${state.translate('notSupportedDetail')}</div>
<div class="description"><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">${state.translate(
'notSupportedLink'
)}</a></div>
<div class="description">
<a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">
${state.translate('notSupportedLink')}
</a>
</div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com">
<img src="${assets.get(
'firefox_logo-only.svg'
)}" class="firefox-logo" alt="Firefox"/>
<img
src="${assets.get('firefox_logo-only.svg')}"
class="firefox-logo"
alt="Firefox"/>
<div class="unsupported-button-text">Firefox<br>
<span>${state.translate('downloadFirefoxButtonSub')}</span>
</div>
</a>
<div class="unsupported-description">${state.translate(
'uploadPageExplainer'
)}</div>
<div class="unsupported-description">
${state.translate('uploadPageExplainer')}
</div>
</div>`;
const div = html`<div id="page-one">${msg}</div>`;
return div;

25
app/templates/upload.js
View file

@ -8,23 +8,24 @@ module.exports = function(state, emit) {
const div = html`
<div id="download">
<div id="upload-progress" class="fadeIn">
<div class="title" id="upload-filename">${state.translate(
'uploadingPageProgress',
{
<div class="title" id="upload-filename">
${state.translate('uploadingPageProgress', {
filename: transfer.file.name,
size: bytes(transfer.file.size)
}
)}</div>
})}
</div>
<div class="description"></div>
${progress(transfer.progressRatio)}
<div class="upload">
<div class="progress-text">${state.translate(
transfer.msg,
transfer.sizes
)}</div>
<button id="cancel-upload" title="${state.translate(
'uploadingPageCancel'
)}" onclick=${cancel}>${state.translate('uploadingPageCancel')}</button>
<div class="progress-text">
${state.translate(transfer.msg, transfer.sizes)}
</div>
<button
id="cancel-upload"
title="${state.translate('uploadingPageCancel')}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>
</div>
</div>

79
app/templates/uploadPasswordSet.js Normal file
View file

@ -0,0 +1,79 @@
const html = require('choo/html');
module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id);
return html`<div class="selectPassword">
${passwordSpan(file.password)}
<button
id="resetButton"
onclick=${toggleResetInput}
>${state.translate('changePasswordButton')}</button>
<form
id='reset-form'
class="setPassword hidden"
onsubmit=${resetPassword}
data-no-csrf>
<input id="unlock-reset-input"
class="unlock-input input-no-btn"
maxlength="32"
autocomplete="off"
type="password"
oninput=${inputChanged}
placeholder="${state.translate('unlockInputPlaceholder')}">
<input type="submit"
id="unlock-reset-btn"
class="btn btn-hidden"
value="${state.translate('changePasswordButton')}"/>
</form>
</div>`;
function passwordSpan(password) {
password = password || '●●●●●';
const span = html([
`<span>${state.translate('passwordResult', {
password:
'<pre class="passwordOriginal"></pre><pre class="passwordMask"></pre>'
})}</span>`
]);
const og = span.querySelector('.passwordOriginal');
const masked = span.querySelector('.passwordMask');
og.textContent = password;
masked.textContent = password.replace(/./g, '●');
return span;
}
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 resetPassword(event) {
event.preventDefault();
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', { password, file });
}
}
function toggleResetInput(event) {
const form = event.target.parentElement.querySelector('form');
const input = document.getElementById('unlock-reset-input');
if (form.style.visibility === 'hidden' || form.style.visibility === '') {
form.style.visibility = 'visible';
input.focus();
} else {
form.style.visibility = 'hidden';
}
inputChanged();
}
};

12
app/templates/uploadPassword.js → app/templates/uploadPasswordUnset.js
View file

@ -5,9 +5,14 @@ module.exports = function(state, emit) {
const div = html`
<div class="selectPassword">
<div id="addPasswordWrapper">
<input id="addPassword" type="checkbox" autocomplete="off" onchange=${togglePasswordInput}/>
<input
id="addPassword"
type="checkbox"
autocomplete="off"
onchange=${togglePasswordInput}/>
<label for="addPassword">
${state.translate('requirePasswordCheckbox')}</label>
${state.translate('requirePasswordCheckbox')}
</label>
</div>
<form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
<input id="unlock-input"
@ -52,12 +57,11 @@ module.exports = function(state, emit) {
function setPassword(event) {
event.preventDefault();
const existingPassword = null;
const password = document.getElementById('unlock-input').value;
if (password.length > 0) {
document.getElementById('copy').classList.remove('wait-password');
document.getElementById('copy-btn').disabled = false;
emit('password', { existingPassword, password, file });
emit('password', { password, file });
}
}

13
app/templates/welcome.js
View file

@ -10,14 +10,18 @@ module.exports = function(state, emit) {
<div class="title">${state.translate('uploadPageHeader')}</div>
<div class="description">
<div>${state.translate('uploadPageExplainer')}</div>
<a href="https://testpilot.firefox.com/experiments/send"
class="link">${state.translate('uploadPageLearnMore')}</a>
<a
href="https://testpilot.firefox.com/experiments/send"
class="link">
${state.translate('uploadPageLearnMore')}
</a>
</div>
<div class="upload-window"
ondragover=${dragover}
ondragleave=${dragleave}>
<div id="upload-img">
<img src="${assets.get('upload.svg')}"
<img
src="${assets.get('upload.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
</div>
<div id="upload-text">${state.translate('uploadPageDropMessage')}</div>
@ -34,7 +38,8 @@ module.exports = function(state, emit) {
id="browse"
class="btn browse"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}</label>
${state.translate('uploadPageBrowseButton1')}
</label>
</div>
${fileList(state, emit)}
</div>