refactored css, including some markup changes
This commit is contained in:
Danny Coates
parent
3163edcbe4
commit
8d41111cd6
62 changed files with 5731 additions and 4078 deletions
|
|
@ -0,0 +1,29 @@
|
|||
.changePasswordSection {
|
||||
padding: 10px 0;
|
||||
align-self: left;
|
||||
max-width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.btn--reset {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
border-color: rgba(12, 12, 13, 0.3);
|
||||
margin-top: 5px;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 24px;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.btn--reset:hover {
|
||||
background: #efeff1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.changePasswordSection {
|
||||
align-self: center;
|
||||
min-width: 95%;
|
||||
}
|
||||
}
|
||||
52
app/templates/changePasswordSection/index.js
Normal file
52
app/templates/changePasswordSection/index.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const passwordInput = require('../passwordInput');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
|
||||
return html`<div class="changePasswordSection">
|
||||
${passwordSpan(file.password)}
|
||||
<button
|
||||
class="btn btn--reset"
|
||||
onclick=${toggleResetInput}
|
||||
>${state.translate('changePasswordButton')}</button>
|
||||
${passwordInput(
|
||||
state.translate('unlockInputPlaceholder'),
|
||||
state.translate('changePasswordButton'),
|
||||
changePassword
|
||||
)}
|
||||
</div>`;
|
||||
|
||||
function passwordSpan(password) {
|
||||
password = password || '●●●●●';
|
||||
const span = html`<span>${raw(
|
||||
state.translate('passwordResult', {
|
||||
password: '<pre class="passwordMask"></pre>'
|
||||
})
|
||||
)}</span>`;
|
||||
const masked = span.querySelector('.passwordMask');
|
||||
masked.textContent = password.replace(/./g, '●');
|
||||
return span;
|
||||
}
|
||||
|
||||
function changePassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
emit('password', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function toggleResetInput(event) {
|
||||
const form = event.target.parentElement.querySelector('form.passwordInput');
|
||||
const input = document.getElementById('password-input');
|
||||
if (form.style.visibility === 'hidden' || form.style.visibility === '') {
|
||||
form.style.visibility = 'visible';
|
||||
input.focus();
|
||||
} else {
|
||||
form.style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
};
|
||||
10
app/templates/downloadButton/downloadButton.css
Normal file
10
app/templates/downloadButton/downloadButton.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.btn--download {
|
||||
width: 180px;
|
||||
height: 44px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn--download:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
|
@ -8,8 +8,7 @@ module.exports = function(state, emit) {
|
|||
|
||||
return html`
|
||||
<div>
|
||||
<button id="download-btn"
|
||||
class="btn"
|
||||
<button class="btn btn--download"
|
||||
onclick=${download}>${state.translate('downloadButtonLabel')}
|
||||
</button>
|
||||
</div>`;
|
||||
30
app/templates/downloadPassword/downloadPassword.css
Normal file
30
app/templates/downloadPassword/downloadPassword.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.passwordSection {
|
||||
text-align: left;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.passwordForm {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.input--password {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inputBtn--password {
|
||||
flex: 0 1 165px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.passwordForm {
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,52 +5,52 @@ module.exports = function(state, emit) {
|
|||
const label =
|
||||
fileInfo.password === null
|
||||
? html`
|
||||
<label class="red" for="unlock-input">
|
||||
<label class="red" for="password-input">
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>`
|
||||
: html`
|
||||
<label for="unlock-input">
|
||||
<label for="password-input">
|
||||
${state.translate('unlockInputLabel')}
|
||||
</label>`;
|
||||
const div = html`
|
||||
<div class="enterPassword">
|
||||
<div class="passwordSection">
|
||||
${label}
|
||||
<form id="unlock" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="unlock-input"
|
||||
class="unlock-input input-no-btn"
|
||||
<form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="password-input"
|
||||
class="input input--password input--noBtn"
|
||||
maxlength="64"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput=${inputChanged}
|
||||
type="password" />
|
||||
<input type="submit"
|
||||
id="unlock-btn"
|
||||
class="btn btn-hidden"
|
||||
id="password-btn"
|
||||
class="inputBtn inputBtn--password inputBtn--hidden"
|
||||
value="${state.translate('unlockButtonLabel')}"/>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.querySelector('#unlock-input').focus());
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
}
|
||||
|
||||
function inputChanged() {
|
||||
const input = document.getElementById('unlock-input');
|
||||
const btn = document.getElementById('unlock-btn');
|
||||
const input = document.getElementById('password-input');
|
||||
const btn = document.getElementById('password-btn');
|
||||
if (input.value.length > 0) {
|
||||
btn.classList.remove('btn-hidden');
|
||||
input.classList.remove('input-no-btn');
|
||||
btn.classList.remove('inputBtn--hidden');
|
||||
input.classList.remove('input--noBtn');
|
||||
} else {
|
||||
btn.classList.add('btn-hidden');
|
||||
input.classList.add('input-no-btn');
|
||||
btn.classList.add('inputBtn--hidden');
|
||||
input.classList.add('input--noBtn');
|
||||
}
|
||||
}
|
||||
|
||||
function checkPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('unlock-input').value;
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('unlock-btn').disabled = true;
|
||||
document.getElementById('password-btn').disabled = true;
|
||||
state.fileInfo.url = window.location.href;
|
||||
state.fileInfo.password = password;
|
||||
emit('getMetadata');
|
||||
26
app/templates/file/file.css
Normal file
26
app/templates/file/file.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.fileData {
|
||||
font-size: 15px;
|
||||
vertical-align: top;
|
||||
color: #4a4a4a;
|
||||
padding: 17px 19px 0;
|
||||
line-height: 23px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fileData--overflow {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileData--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.fileData {
|
||||
font-size: 13px;
|
||||
padding: 17px 5px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const number = require('../utils').number;
|
||||
const assets = require('../../../common/assets');
|
||||
const number = require('../../utils').number;
|
||||
const deletePopup = require('../popup');
|
||||
|
||||
function timeLeft(milliseconds, state) {
|
||||
const minutes = Math.floor(milliseconds / 1000 / 60);
|
||||
|
|
@ -27,42 +28,35 @@ module.exports = function(file, state, emit) {
|
|||
const totalDownloads = file.dtotal || 0;
|
||||
const row = html`
|
||||
<tr id="${file.id}">
|
||||
<td class="overflow-col" title="${file.name}">
|
||||
<td class="fileData fileData--overflow" title="${file.name}">
|
||||
<a class="link" href="/share/${file.id}">${file.name}</a>
|
||||
</td>
|
||||
<td class="center-col">
|
||||
<td class="fileData fileData--center">
|
||||
<img
|
||||
onclick=${copyClick}
|
||||
src="${assets.get('copy-16.svg')}"
|
||||
class="icon-copy"
|
||||
class="cursor--pointer"
|
||||
title="${state.translate('copyUrlHover')}">
|
||||
<span class="text-copied" hidden="true">
|
||||
<span hidden="true">
|
||||
${state.translate('copiedUrl')}
|
||||
</span>
|
||||
</td>
|
||||
<td class="overflow-col">${remainingTime}</td>
|
||||
<td class="center-col">${number(totalDownloads)} / ${number(
|
||||
<td class="fileData fileData--overflow">${remainingTime}</td>
|
||||
<td class="fileData fileData--center">${number(totalDownloads)} / ${number(
|
||||
downloadLimit
|
||||
)}</td>
|
||||
<td class="center-col">
|
||||
<td class="fileData fileData--center">
|
||||
<img
|
||||
onclick=${showPopup}
|
||||
src="${assets.get('close-16.svg')}"
|
||||
class="icon-delete"
|
||||
class="cursor--pointer"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${deletePopup(
|
||||
state.translate('deletePopupText'),
|
||||
state.translate('deletePopupYes'),
|
||||
state.translate('deletePopupCancel'),
|
||||
deleteFile
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
|
@ -81,18 +75,11 @@ module.exports = function(file, state, emit) {
|
|||
|
||||
function showPopup() {
|
||||
const tr = document.getElementById(file.id);
|
||||
const popup = tr.querySelector('.popuptext');
|
||||
popup.classList.add('show');
|
||||
const popup = tr.querySelector('.popup');
|
||||
popup.classList.add('popup--show');
|
||||
popup.focus();
|
||||
}
|
||||
|
||||
function cancel(e) {
|
||||
e.stopPropagation();
|
||||
const tr = document.getElementById(file.id);
|
||||
const popup = tr.querySelector('.popuptext');
|
||||
popup.classList.remove('show');
|
||||
}
|
||||
|
||||
function deleteFile() {
|
||||
emit('delete', { file, location: 'upload-list' });
|
||||
emit('render');
|
||||
52
app/templates/fileList/fileList.css
Normal file
52
app/templates/fileList/fileList.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.fileList {
|
||||
margin: 45.3px auto;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
}
|
||||
|
||||
.fileList__header {
|
||||
font-size: 16px;
|
||||
color: #858585;
|
||||
font-weight: lighter;
|
||||
text-align: left;
|
||||
background: rgba(0, 148, 251, 0.05);
|
||||
height: 40px;
|
||||
border-top: 1px solid rgba(0, 148, 251, 0.1);
|
||||
padding: 0 19px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileList__body {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fileList__nameCol {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.fileList__copyCol {
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.fileList__expireCol {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.fileList__dlCol {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.fileList__delCol {
|
||||
text-align: center;
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.fileList__header {
|
||||
font-size: 14px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +1,35 @@
|
|||
const html = require('choo/html');
|
||||
const file = require('./file');
|
||||
const file = require('../file');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
let table = '';
|
||||
if (state.storage.files.length) {
|
||||
table = html`
|
||||
<table id="uploaded-files">
|
||||
<table class="fileList">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="uploaded-file">${state.translate('uploadedFile')}</th>
|
||||
<th id="copy-file-list" class="center-col">
|
||||
<th class="fileList__header fileList__nameCol">
|
||||
${state.translate('uploadedFile')}
|
||||
</th>
|
||||
<th class="fileList__header fileList__copyCol">
|
||||
${state.translate('copyFileList')}
|
||||
</th>
|
||||
<th id="expiry-time-file-list" >
|
||||
<th class="fileList__header fileList__expireCol" >
|
||||
${state.translate('timeFileList')}
|
||||
</th>
|
||||
<th id="expiry-downloads-file-list" >
|
||||
<th class="fileList__header fileList__dlCol" >
|
||||
${state.translate('downloadsFileList')}
|
||||
</th>
|
||||
<th id="delete-file-list" class="center-col">
|
||||
<th class="fileList__header fileList__delCol">
|
||||
${state.translate('deleteFileList')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="fileList__body">
|
||||
${state.storage.files.map(f => file(f, state, emit))}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
<div id="file-list">
|
||||
${table}
|
||||
</div>
|
||||
`;
|
||||
return table;
|
||||
};
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
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="/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>
|
||||
</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>
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
93
app/templates/footer/footer.css
Normal file
93
app/templates/footer/footer.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.footer {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 50px 31px 41px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
max-width: 81vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
color: #858585;
|
||||
opacity: 0.9;
|
||||
white-space: nowrap;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
|
||||
.legalSection__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.legalSection__link:visited {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.socialSection__link {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.socialSection__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.socialSection__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px), (max-width: 768px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
max-width: 630px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
margin-top: 20px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
64
app/templates/footer/index.js
Normal file
64
app/templates/footer/index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`<div class="footer">
|
||||
<div class="legalSection">
|
||||
<a
|
||||
href="https://www.mozilla.org"
|
||||
class="legalSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="legalSection__mozLogo"
|
||||
src="${assets.get('mozilla-logo.svg')}"
|
||||
alt="mozilla"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<a
|
||||
href="https://testpilot.firefox.com/about"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkPrivacy')}</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkTerms')}</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/privacy/websites/#cookies"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkCookies')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal/report-infringement/"
|
||||
class="legalSection__link">
|
||||
${state.translate('reportIPInfringement')}
|
||||
</a>
|
||||
</div>
|
||||
<div class="socialSection">
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="socialSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="github"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="socialSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="twitter"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
56
app/templates/fxPromo/fxPromo.css
Normal file
56
app/templates/fxPromo/fxPromo.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
.fxPromo {
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
background-color: #efeff1;
|
||||
color: #4a4a4f;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fxPromo > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fxPromo > div > span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.fxPromo__logo {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.fxPromo--blue {
|
||||
background: linear-gradient(-180deg, #45a1ff 0%, #00feff 94%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fxPromo--pink {
|
||||
background: linear-gradient(-180deg, #ff9400 0%, #ff1ad9 94%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fxPromo--blue a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--pink a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--blue a:hover {
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--pink a:hover {
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
function clicked() {
|
||||
emit('experiment', { cd3: 'promo' });
|
||||
}
|
||||
let classes = 'banner';
|
||||
let classes = 'fxPromo';
|
||||
switch (state.promo) {
|
||||
case 'blue':
|
||||
classes = 'banner banner-blue';
|
||||
classes = 'fxPromo fxPromo--blue';
|
||||
break;
|
||||
case 'pink':
|
||||
classes = 'banner banner-pink';
|
||||
classes = 'fxPromo fxPromo--pink';
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ module.exports = function(state, emit) {
|
|||
<div>
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefox-logo-small"
|
||||
class="fxPromo__logo"
|
||||
alt="Firefox"/>
|
||||
<span>Send is brought to you by the all-new Firefox.
|
||||
<a
|
||||
104
app/templates/header/header.css
Normal file
104
app/templates/header/header.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.header {
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 31px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo__link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
color: #3e3d40;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 8px;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__title:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.logo__subtitle {
|
||||
color: #3e3d40;
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.logo__subtitle-link {
|
||||
font-weight: bold;
|
||||
color: #3e3d40;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__subtitle-link:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
background-image: url('../assets/feedback.svg');
|
||||
background-position: 2px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
opacity: 0.9;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
min-width: 12px;
|
||||
max-width: 12px;
|
||||
text-indent: 17px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback:hover,
|
||||
.feedback:focus {
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.feedback:active {
|
||||
background-color: #0277d8;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
margin-top: 10px;
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
/*
|
||||
The current weback config uses package.json to generate
|
||||
version.json for /__version__ meaning `require` returns the
|
||||
|
|
@ -10,7 +10,7 @@ const assets = require('../../common/assets');
|
|||
has a custom loader (/build/version_loader.js) just to replace
|
||||
string with the value from package.json. 🤢
|
||||
*/
|
||||
const version = require('../../package.json').version || 'VERSION';
|
||||
const version = require('../../../package.json').version || 'VERSION';
|
||||
|
||||
function browserName() {
|
||||
try {
|
||||
|
|
@ -39,15 +39,15 @@ const browser = browserName();
|
|||
|
||||
module.exports = function(state) {
|
||||
return html`<header class="header">
|
||||
<div class="send-logo">
|
||||
<a href="/">
|
||||
<div class="logo">
|
||||
<a class="logo__link" href="/">
|
||||
<img
|
||||
src="${assets.get('send_logo.svg')}"
|
||||
alt="Send"/>
|
||||
<h1 class="site-title">Send</h1>
|
||||
<h1 class="logo__title">Send</h1>
|
||||
</a>
|
||||
<div class="site-subtitle">
|
||||
<a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
|
||||
<div class="logo__subtitle">
|
||||
<a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
|
||||
<div>${state.translate('siteSubtitle')}</div>
|
||||
</div>
|
||||
</div>
|
||||
34
app/templates/passwordInput/index.js
Normal file
34
app/templates/passwordInput/index.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(placeholder, action, submit) {
|
||||
return html`
|
||||
<form
|
||||
class="passwordInput passwordInput--hidden"
|
||||
onsubmit=${submit}
|
||||
data-no-csrf>
|
||||
<input id="password-input"
|
||||
class="input input--noBtn"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
oninput=${inputChanged}
|
||||
placeholder="${placeholder}">
|
||||
<input type="submit"
|
||||
id="password-btn"
|
||||
class="inputBtn inputBtn--hidden"
|
||||
value="${action}"/>
|
||||
</form>
|
||||
`;
|
||||
|
||||
function inputChanged() {
|
||||
const resetInput = document.getElementById('password-input');
|
||||
const resetBtn = document.getElementById('password-btn');
|
||||
if (resetInput.value.length > 0) {
|
||||
resetBtn.classList.remove('inputBtn--hidden');
|
||||
resetInput.classList.remove('input--noBtn');
|
||||
} else {
|
||||
resetBtn.classList.add('inputBtn--hidden');
|
||||
resetInput.classList.add('input--noBtn');
|
||||
}
|
||||
}
|
||||
};
|
||||
18
app/templates/passwordInput/passwordInput.css
Normal file
18
app/templates/passwordInput/passwordInput.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.passwordInput {
|
||||
align-self: left;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 80%;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.passwordInput--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.passwordInput {
|
||||
flex-direction: column;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
26
app/templates/popup/index.js
Normal file
26
app/templates/popup/index.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(msg, confirmText, cancelText, confirmCallback) {
|
||||
function hide(e) {
|
||||
e.stopPropagation();
|
||||
const popup = document.querySelector('.popup.popup--show');
|
||||
if (popup) {
|
||||
popup.classList.remove('popup--show');
|
||||
}
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="popup__wrapper">
|
||||
<div class="popup" onblur=${hide} tabindex="-1">
|
||||
<div class="popup__message">${msg}</div>
|
||||
<div class="popup__action">
|
||||
<span class="popup__no" onclick=${hide}>
|
||||
${cancelText}
|
||||
</span>
|
||||
<span class="popup__yes" onclick=${confirmCallback}>
|
||||
${confirmText}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
122
app/templates/popup/popup.css
Normal file
122
app/templates/popup/popup.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
.popup {
|
||||
visibility: hidden;
|
||||
min-width: 204px;
|
||||
min-height: 105px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #d7d7db;
|
||||
padding: 15px 24px;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 20px;
|
||||
left: -40px;
|
||||
transition: opacity 0.5s;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
box-shadow: 3px 3px 7px rgba(136, 136, 136, 0.3);
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: 20px;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 0 0 5px;
|
||||
border-right: 1px solid #d7d7db;
|
||||
border-bottom: 1px solid #d7d7db;
|
||||
border-left: 1px solid #fff;
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.popup__wrapper {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popup__message {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px #ebebeb solid;
|
||||
color: var(--textColor);
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
padding-bottom: 15px;
|
||||
white-space: nowrap;
|
||||
width: calc(100% + 48px);
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.popup__action {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup__no {
|
||||
color: #4a4a4a;
|
||||
background-color: #fbfbfb;
|
||||
border: 1px #c1c1c1 solid;
|
||||
border-radius: 5px;
|
||||
padding: 5px 25px;
|
||||
font-weight: normal;
|
||||
min-width: 94px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup__no:hover {
|
||||
background-color: #efeff1;
|
||||
}
|
||||
|
||||
.popup__yes {
|
||||
color: #fff;
|
||||
background-color: var(--primaryControlBGColor);
|
||||
border-radius: 5px;
|
||||
padding: 5px 25px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
min-width: 94px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popup__yes:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.popup--show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 992px), (max-width: 992px) {
|
||||
.popup {
|
||||
left: auto;
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
left: auto;
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.popup::after {
|
||||
left: 125px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
const html = require('choo/html');
|
||||
const percent = require('../utils').percent;
|
||||
const percent = require('../../utils').percent;
|
||||
|
||||
const radius = 73;
|
||||
const oRadius = radius + 10;
|
||||
|
|
@ -10,20 +10,20 @@ module.exports = function(progressRatio) {
|
|||
const dashOffset = (1 - progressRatio) * circumference;
|
||||
const percentComplete = percent(progressRatio);
|
||||
const div = html`
|
||||
<div class="progress-bar">
|
||||
<div class="progress">
|
||||
<svg
|
||||
id="progress"
|
||||
width="${oDiameter}"
|
||||
height="${oDiameter}"
|
||||
viewPort="0 0 ${oDiameter} ${oDiameter}"
|
||||
version="1.1">
|
||||
<circle
|
||||
class="progress__bg"
|
||||
r="${radius}"
|
||||
cx="${oRadius}"
|
||||
cy="${oRadius}"
|
||||
fill="transparent"/>
|
||||
<circle
|
||||
id="bar"
|
||||
class="progress__bar"
|
||||
r="${radius}"
|
||||
cx="${oRadius}"
|
||||
cy="${oRadius}"
|
||||
|
|
@ -31,8 +31,8 @@ module.exports = function(progressRatio) {
|
|||
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">${percentComplete}</tspan>
|
||||
<text class="progress__percent" text-anchor="middle" x="50%" y="98">
|
||||
${percentComplete}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
27
app/templates/progress/progress.css
Normal file
27
app/templates/progress/progress.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.progress {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 3px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress__bg {
|
||||
stroke: #eee;
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
stroke: #3b9dff;
|
||||
stroke-width: 0.75em;
|
||||
transition: stroke-dashoffset 300ms linear;
|
||||
}
|
||||
|
||||
.progress__percent {
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
font-size: 43.2px;
|
||||
letter-spacing: -0.78px;
|
||||
line-height: 58px;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
const html = require('choo/html');
|
||||
const number = require('../utils').number;
|
||||
const number = require('../../utils').number;
|
||||
|
||||
module.exports = function(selected, options, translate, changed) {
|
||||
const id = `select-${Math.random()}`;
|
||||
|
|
@ -8,17 +8,17 @@ module.exports = function(selected, options, translate, changed) {
|
|||
function close() {
|
||||
const ul = document.getElementById(id);
|
||||
const body = document.querySelector('body');
|
||||
ul.classList.remove('active');
|
||||
ul.classList.remove('selectbox__options--active');
|
||||
body.removeEventListener('click', close);
|
||||
}
|
||||
|
||||
function toggle(event) {
|
||||
event.stopPropagation();
|
||||
const ul = document.getElementById(id);
|
||||
if (ul.classList.contains('active')) {
|
||||
if (ul.classList.contains('selectbox__options--active')) {
|
||||
close();
|
||||
} else {
|
||||
ul.classList.add('active');
|
||||
ul.classList.add('selectbox__options--active');
|
||||
const body = document.querySelector('body');
|
||||
body.addEventListener('click', close);
|
||||
}
|
||||
|
|
@ -45,10 +45,10 @@ module.exports = function(selected, options, translate, changed) {
|
|||
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul id="${id}" class="selectOptions">
|
||||
<ul id="${id}" class="selectbox__options">
|
||||
${options.map(
|
||||
i =>
|
||||
html`<li class="selectOption" onclick=${choose} data-value="${i}">${number(
|
||||
html`<li class="selectbox__option" onclick=${choose} data-value="${i}">${number(
|
||||
i
|
||||
)}</li>`
|
||||
)}
|
||||
36
app/templates/selectbox/selectbox.css
Normal file
36
app/templates/selectbox/selectbox.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.selectbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectbox__options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectbox__options--active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 40px 0;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(12, 12, 13, 0.3);
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 2px 4px rgba(12, 12, 13, 0.3);
|
||||
}
|
||||
|
||||
.selectbox__option {
|
||||
color: var(--lightTextColor);
|
||||
font-size: 12pt;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
padding: 0 60px;
|
||||
border-bottom: 1px solid rgba(12, 12, 13, 0.3);
|
||||
}
|
||||
|
||||
.selectbox__option:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
49
app/templates/setPasswordSection/index.js
Normal file
49
app/templates/setPasswordSection/index.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
const html = require('choo/html');
|
||||
const passwordInput = require('../passwordInput');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
const div = html`
|
||||
<div class="setPasswordSection">
|
||||
<div class="checkbox">
|
||||
<input
|
||||
class="checkbox__input"
|
||||
id="add-password"
|
||||
type="checkbox"
|
||||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label class="checkbox__label" for="add-password">
|
||||
${state.translate('requirePasswordCheckbox')}
|
||||
</label>
|
||||
</div>
|
||||
${passwordInput(
|
||||
state.translate('unlockInputPlaceholder'),
|
||||
state.translate('addPasswordButton'),
|
||||
addPassword
|
||||
)}
|
||||
</div>`;
|
||||
|
||||
function addPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
emit('password', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function togglePasswordInput(e) {
|
||||
const unlockInput = document.getElementById('password-input');
|
||||
const boxChecked = e.target.checked;
|
||||
document
|
||||
.querySelector('form.passwordInput')
|
||||
.classList.toggle('passwordInput--hidden', !boxChecked);
|
||||
if (boxChecked) {
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
unlockInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
56
app/templates/setPasswordSection/setPasswordSection.css
Normal file
56
app/templates/setPasswordSection/setPasswordSection.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
.setPasswordSection {
|
||||
padding: 10px 0;
|
||||
align-self: left;
|
||||
max-width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.checkbox__input {
|
||||
position: absolute;
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.checkbox__label {
|
||||
line-height: 23px;
|
||||
cursor: pointer;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.checkbox__label::before {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
border: 1px solid rgba(12, 12, 13, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.checkbox:hover .checkbox__label::before {
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.checkbox__input:checked + .checkbox__label {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.checkbox__input:checked + .checkbox__label::before {
|
||||
background-image: url('../assets/check-16-blue.svg');
|
||||
background-position: 2px 1px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.setPasswordSection {
|
||||
align-self: center;
|
||||
min-width: 95%;
|
||||
}
|
||||
|
||||
.checkbox__label::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
|
||||
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>${raw(
|
||||
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 });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
const div = html`
|
||||
<div class="selectPassword">
|
||||
<div id="addPasswordWrapper">
|
||||
<input
|
||||
id="addPassword"
|
||||
type="checkbox"
|
||||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label for="addPassword">
|
||||
${state.translate('requirePasswordCheckbox')}
|
||||
</label>
|
||||
</div>
|
||||
<form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
|
||||
<input id="unlock-input"
|
||||
class="unlock-input input-no-btn"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
type="password"
|
||||
oninput=${inputChanged}/>
|
||||
<input type="submit"
|
||||
id="unlock-btn"
|
||||
class="btn btn-hidden"
|
||||
value="${state.translate('addPasswordButton')}"/>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
function inputChanged() {
|
||||
const input = document.getElementById('unlock-input');
|
||||
const btn = document.getElementById('unlock-btn');
|
||||
if (input.value.length > 0) {
|
||||
btn.classList.remove('btn-hidden');
|
||||
input.classList.remove('input-no-btn');
|
||||
} else {
|
||||
btn.classList.add('btn-hidden');
|
||||
input.classList.add('input-no-btn');
|
||||
}
|
||||
}
|
||||
|
||||
function togglePasswordInput(e) {
|
||||
const unlockInput = document.getElementById('unlock-input');
|
||||
const boxChecked = e.target.checked;
|
||||
document
|
||||
.querySelector('.setPassword')
|
||||
.classList.toggle('hidden', !boxChecked);
|
||||
if (boxChecked) {
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
unlockInput.value = '';
|
||||
}
|
||||
inputChanged();
|
||||
}
|
||||
|
||||
function setPassword(event) {
|
||||
event.preventDefault();
|
||||
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', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue