diff --git a/app/main.css b/app/main.css index bd277e91..f7326f11 100644 --- a/app/main.css +++ b/app/main.css @@ -67,6 +67,63 @@ progress::-webkit-progress-value { box-shadow: 0 0 5rem 5rem white; } +.checkbox { + @apply leading-normal; + @apply select-none; +} + +.checkbox > input[type='checkbox'] { + @apply absolute; + @apply opacity-0; +} + +.checkbox > label { + @apply cursor-pointer; +} + +.checkbox > label::before { + @apply bg-blue-lightest; + @apply border; + @apply rounded-sm; + + content: ''; + height: 1.5rem; + width: 1.5rem; + margin-right: 0.5rem; + float: left; +} + +.checkbox > label:hover::before { + @apply border-blue; +} + +.checkbox > input:focus + label::before { + @apply border-blue; +} + +.checkbox > input:checked + label::before { + background-image: url('../assets/lock.svg'); + background-position: center; + background-size: 1.25rem; + background-repeat: no-repeat; +} + +.checkbox > input:disabled + label { + cursor: auto; +} + +.checkbox > input:disabled + label::before { + background-image: url('../assets/lock.svg'); + background-position: center; + background-size: 1.25rem; + background-repeat: no-repeat; + cursor: auto; +} + +#password-msg::after { + content: '\200b'; +} + @screen md { .main { @apply flex-1; diff --git a/app/pasteManager.js b/app/pasteManager.js index 33b180b4..cdde7a81 100644 --- a/app/pasteManager.js +++ b/app/pasteManager.js @@ -7,6 +7,7 @@ function getString(item) { export default function(state, emitter) { window.addEventListener('paste', async event => { if (state.route !== '/' || state.uploading) return; + if (event.target.type === 'password') return; const items = Array.from(event.clipboardData.items); const transferFiles = items.filter(item => item.kind === 'file'); diff --git a/app/ui/archiveList.js b/app/ui/archiveList.js index bb7adfc7..6b3177bf 100644 --- a/app/ui/archiveList.js +++ b/app/ui/archiveList.js @@ -1,21 +1,7 @@ const html = require('choo/html'); -const assets = require('../../common/assets'); const { list } = require('../utils'); const archiveTile = require('./archiveTile'); - -function intro(state) { - return html` -
-

-

${state.translate('uploadPageHeader')}
-
${state.translate('pageHeaderCredits')}
-

- -

${state.translate( - 'uploadPageExplainer' - )}

-
`; -} +const intro = require('./intro'); module.exports = function(state, emit) { const archives = state.storage.files.map(archive => diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index d17b6851..8c9bcd7f 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -16,6 +16,81 @@ function expiryInfo(translate, archive) { ); } +function password(state) { + const MAX_LENGTH = 32; + + return html` +
+
+ + +
+ + +
`; + + function togglePasswordInput(event) { + event.stopPropagation(); + const checked = event.target.checked; + const input = document.getElementById('password-input'); + if (checked) { + input.classList.remove('invisible'); + input.focus(); + } else { + input.classList.add('invisible'); + input.value = ''; + document.getElementById('password-msg').textContent = ''; + state.password = null; + } + } + + function inputChanged() { + const passwordInput = document.getElementById('password-input'); + const pwdmsg = document.getElementById('password-msg'); + const password = passwordInput.value; + const length = password.length; + + if (length === MAX_LENGTH) { + pwdmsg.textContent = state.translate('maxPasswordLength', { + length: MAX_LENGTH + }); + } else { + pwdmsg.textContent = ''; + } + state.password = password; + } + + function focused(event) { + event.preventDefault(); + const el = document.getElementById('password-input'); + if (el.placeholder !== state.translate('unlockInputPlaceholder')) { + el.placeholder = ''; + } + } +} + function fileInfo(file, action) { return html`
@@ -104,6 +179,7 @@ module.exports.wip = function(state, emit) { ${expiryOptions(state, emit)} + ${password(state, emit)}