From 046f2270031525343a236b4ec8bf72e19a4d83ff Mon Sep 17 00:00:00 2001 From: Erica Wright Date: Mon, 23 Oct 2017 09:51:33 -0400 Subject: [PATCH] disable copying link when password not completed --- app/templates/share.js | 2 ++ app/templates/uploadPassword.js | 8 +++++++- assets/main.css | 12 ++++++++++-- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/app/templates/share.js b/app/templates/share.js index 2fe1a741..72dac63d 100644 --- a/app/templates/share.js +++ b/app/templates/share.js @@ -57,6 +57,7 @@ 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 @@ -64,6 +65,7 @@ module.exports = function(state, emit) { await delay(2000); input.disabled = false; 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..0a70b4c8 100644 --- a/app/templates/uploadPassword.js +++ b/app/templates/uploadPassword.js @@ -21,14 +21,20 @@ module.exports = function(state, emit) { `; - function togglePasswordInput() { + function togglePasswordInput(e) { document.querySelector('.setPassword').classList.toggle('hidden'); + document + .getElementById('copy') + .classList.toggle('wait-password', e.target.checked); + document.getElementById('copy-btn').disabled = e.target.checked; } 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 69c5f9e6..561045e3 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; }