add share invoice button with Web Share API / clipboard fallback

This commit is contained in:
2026-07-10 10:32:52 -04:00
parent 5536d8b14e
commit 8bdef5d18f

View File

@@ -139,6 +139,11 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none} .btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55} .note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55}
.note strong{color:var(--ink)} .note strong{color:var(--ink)}
.btn-share{
display:block;margin:0 auto 8px;font:inherit;font-size:13px;cursor:pointer;
padding:8px 16px;border-radius:8px;border:1px solid var(--line-strong);
background:var(--panel);color:var(--accent);
}
.invoice{display:none} .invoice{display:none}
.invoice.show{display:block} .invoice.show{display:block}
@@ -301,6 +306,7 @@ footer a{color:var(--accent);text-decoration:none}
<div class="row"><span>Status</span><span id="iv-status2"></span></div> <div class="row"><span>Status</span><span id="iv-status2"></span></div>
<div class="row"><span>Server</span><span id="iv-url"></span></div> <div class="row"><span>Server</span><span id="iv-url"></span></div>
<div id="qrcode"></div> <div id="qrcode"></div>
<button class="btn-share" id="share-btn">Share invoice</button>
<p class="note"> <p class="note">
<strong>Please make sure your server is online before you attempt to add it.</strong> <strong>Please make sure your server is online before you attempt to add it.</strong>
</p> </p>
@@ -493,6 +499,7 @@ document.getElementById('submit').addEventListener('click', async () => {
document.getElementById('iv-status2').textContent = '—'; document.getElementById('iv-status2').textContent = '—';
document.getElementById('iv-url').textContent = '—'; document.getElementById('iv-url').textContent = '—';
document.getElementById('qrcode').innerHTML = ''; document.getElementById('qrcode').innerHTML = '';
document.getElementById('share-btn').textContent = 'Share invoice';
document.getElementById('terms-box').classList.remove('show'); document.getElementById('terms-box').classList.remove('show');
document.getElementById('terms-check').checked = false; document.getElementById('terms-check').checked = false;
document.getElementById('terms-accept').disabled = true; document.getElementById('terms-accept').disabled = true;
@@ -519,6 +526,18 @@ document.getElementById('submit').addEventListener('click', async () => {
const qrEl = document.getElementById('qrcode'); const qrEl = document.getElementById('qrcode');
qrEl.innerHTML = ''; qrEl.innerHTML = '';
new QRCode(qrEl, invoiceuri); new QRCode(qrEl, invoiceuri);
const shareBtn = document.getElementById('share-btn');
shareBtn.textContent = 'Share invoice';
shareBtn.onclick = function () {
if (navigator.share) {
navigator.share({ title: 'BAL Invoice', text: invoiceuri });
} else {
navigator.clipboard.writeText(invoiceuri).then(() => {
this.textContent = 'Copied!';
setTimeout(() => this.textContent = 'Share invoice', 2000);
});
}
};
const serverUrl = result.url || url; const serverUrl = result.url || url;
const infoUrl = serverUrl + '/' + (result.chain || chain) + '/info'; const infoUrl = serverUrl + '/' + (result.chain || chain) + '/info';
document.getElementById('iv-url').textContent = serverUrl; document.getElementById('iv-url').textContent = serverUrl;