hjess/tink-demo
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

feat: show Demo Bank credentials on Step 3 with copy buttons
All checks were successful
Build and Deploy / deploy (push) Successful in 21s
Details

Browse Source 
Adds a credential hint box directly in the Tink Link connection UI
showing username (u04877810) and password (vxw774) with copy buttons.
No more hunting in Tink Console during a demo.
This commit is contained in:
Henrik Jess Nielsen
2026-05-22 21:49:09 +02:00
parent 179424a78f
commit 0e67583da5
2 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/templates/base.html
View File

@@ -106,6 +106,14 @@
if (btn) { btn.textContent = '✓ Kopieret'; setTimeout(() => btn.textContent = 'Kopier', 2000); }
});
}
function copyText(id, btn) {
const el = document.getElementById(id);
navigator.clipboard.writeText(el.innerText).then(() => {
const orig = btn.textContent;
btn.textContent = '✓';
setTimeout(() => btn.textContent = orig, 2000);
});
}
</script>
</body>
</html>

27
src/templates/step.html
View File

@@ -144,6 +144,33 @@
</ol>
</div>
<!-- Demo Bank credentials hint -->
<div class="bg-slate-800/70 border border-amber-700/30 rounded-lg p-4">
<div class="flex items-center gap-2 mb-3">
<svg class="w-4 h-4 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
<span class="text-amber-300 text-sm font-semibold">Demo Bank Credentials</span>
</div>
<div class="grid grid-cols-2 gap-2">
<div>
<div class="text-xs text-slate-500 mb-1">Username</div>
<div class="flex items-center gap-2 bg-slate-900 border border-slate-700 rounded px-3 py-2">
<code id="demo-user" class="text-sm font-mono text-emerald-300 flex-1">u04877810</code>
<button onclick="copyText('demo-user', this)"
class="text-xs text-slate-500 hover:text-slate-300 transition flex-shrink-0">Kopier</button>
</div>
</div>
<div>
<div class="text-xs text-slate-500 mb-1">Password</div>
<div class="flex items-center gap-2 bg-slate-900 border border-slate-700 rounded px-3 py-2">
<code id="demo-pass" class="text-sm font-mono text-emerald-300 flex-1">vxw774</code>
<button onclick="copyText('demo-pass', this)"
class="text-xs text-slate-500 hover:text-slate-300 transition flex-shrink-0">Kopier</button>
</div>
</div>
</div>
<p class="text-xs text-slate-500 mt-2">Vælg <span class="text-slate-400">Tink Demo Bank → Open Banking → Password And OTP</span></p>
</div>
<div class="flex items-center gap-3">
<a href="{{ tink_link_url }}"
class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-lg transition">