diff --git a/app/templates/share.js b/app/templates/share.js index 2fe1a741..21916cc6 100644 --- a/app/templates/share.js +++ b/app/templates/share.js @@ -57,13 +57,17 @@ module.exports = function(state, emit) { input.disabled = true; const copyBtn = document.getElementById('copy-btn'); copyBtn.disabled = true; + copyBtn.classList.add('success'); copyBtn.replaceChild( html``, copyBtn.firstChild ); await delay(2000); input.disabled = false; - copyBtn.disabled = false; + if (!copyBtn.parentNode.classList.contains('wait-password')) { + copyBtn.disabled = false; + } + copyBtn.classList.remove('success'); copyBtn.textContent = state.translate('copyUrlFormButton'); } } diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js index fe589aff..d68368c6 100644 --- a/app/templates/uploadPassword.js +++ b/app/templates/uploadPassword.js @@ -21,14 +21,27 @@ module.exports = function(state, emit) { `; - function togglePasswordInput() { + function togglePasswordInput(e) { + const unlockInput = document.getElementById('unlock-input'); + const boxChecked = e.target.checked; document.querySelector('.setPassword').classList.toggle('hidden'); + document + .getElementById('copy') + .classList.toggle('wait-password', boxChecked); + document.getElementById('copy-btn').disabled = boxChecked; + if (boxChecked) { + unlockInput.focus(); + } else { + unlockInput.value = ''; + } } 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 }); } } diff --git a/assets/main.css b/assets/main.css index 90068de3..5b38576d 100644 --- a/assets/main.css +++ b/assets/main.css @@ -553,6 +553,11 @@ tbody { width: 100%; } +#copy.wait-password #link, +#copy.wait-password #copy-btn { + opacity: 0.5; +} + #copy-text { align-self: flex-start; margin-top: 60px; @@ -596,13 +601,16 @@ tbody { white-space: nowrap; } -#copy-btn:hover { +#copy-btn:not(:disabled):hover { background-color: #0287e8; } -#copy-btn:disabled { +#copy-btn.success { background: #05a700; border: 1px solid #05a700; +} + +#copy-btn:disabled { cursor: auto; }