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/base";
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";

View File

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