Merge pull request 'Add button for copying lndhub setup code' (#55) from feature/37-copy_setup_code into master
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #55
This commit is contained in:
Râu Cao 2021-12-16 14:23:13 +00:00
commit 0f0f296a5e
2 changed files with 30 additions and 16 deletions

View File

@ -1,4 +1,4 @@
// version 4
// version 5
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

View File

@ -20,42 +20,56 @@
<section>
<h3>Blue Wallet</h3>
<p>
<p class="mb-6">
You can connect
<%= link_to "Blue Wallet", "https://bluewallet.io",
class: "ks-text-link", target: "_blank" %>
(Android or iOS) to your Kosmos lightning wallet. In order to do so,
scan the setup QR code from the Import Wallet screen in the app.
</p>
<p>
<a id="show-setup-code" class="ks-text-link cursor-pointer">Show setup code</a>
<a id="hide-setup-code" class="ks-text-link cursor-pointer" style="display: none;">Hide setup code</a>
<p class="mb-6">
<button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button>
<button id="hide-setup-code" class="btn-sm btn-blue hidden">Hide setup code</button>
<span class="mx-2">or</span>
<button id="copy-setup-code" class="btn-sm btn-blue">Copy setup code</button>
</p>
<p id="setup-code" style="display: none;">
<p id="setup-code" class="hidden">
<%= raw @svg %>
</p>
</section>
<script type="text/javascript">
(function () {
const linkShow = document.querySelector('#show-setup-code');
const linkHide = document.querySelector('#hide-setup-code');
const buttonShow = document.querySelector('#show-setup-code');
const buttonHide = document.querySelector('#hide-setup-code');
const buttonCopy = document.querySelector('#copy-setup-code');
const setupCode = document.querySelector('#setup-code');
linkShow.addEventListener('click', function(ev) {
buttonShow.addEventListener('click', function(ev) {
ev.preventDefault();
setupCode.style.display = 'block';
linkShow.style.display = 'none';
linkHide.style.display = 'block';
setupCode.classList.remove('hidden');
buttonHide.classList.remove('hidden');
buttonShow.classList.add('hidden');
window.scrollTo(0, document.body.scrollHeight);
});
linkHide.addEventListener('click', function(ev) {
buttonHide.addEventListener('click', function(ev) {
ev.preventDefault();
const el = document.querySelector('#setup-code');
setupCode.style.display = 'none';
linkShow.style.display = 'block';
linkHide.style.display = 'none';
setupCode.classList.add('hidden');
buttonHide.classList.add('hidden');
buttonShow.classList.remove('hidden');
});
buttonCopy.addEventListener('click', function(ev) {
ev.preventDefault();
navigator.clipboard.writeText('<%= @wallet_url %>').then(() => {
const buttonText = buttonCopy.innerText;
buttonCopy.innerText = 'Copied ✔';
setTimeout(() => {
buttonCopy.innerText = buttonText;
}, 2000);
});
});
})();
</script>