455 lines
17 KiB
TypeScript
455 lines
17 KiB
TypeScript
import { AuthenticatedLayout } from "./AuthenticatedLayout.tsx";
|
|
|
|
export const PasskeysPage = ({
|
|
passkeys,
|
|
isAdmin = false,
|
|
}: {
|
|
passkeys: any[];
|
|
isAdmin?: boolean;
|
|
}) => {
|
|
return (
|
|
<AuthenticatedLayout
|
|
title="Passkeys"
|
|
currentPath="/dashboard/passkeys"
|
|
isAdmin={isAdmin}
|
|
>
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
|
|
<div>
|
|
<h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
|
Registered Passkeys
|
|
</h1>
|
|
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
|
Manage FIDO2 WebAuthn credentials and biometric authenticators.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
id="addPasskeyBtn"
|
|
class="btn-primary"
|
|
style="min-height: 44px; box-shadow: var(--shadow-sm);"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
<span>Enroll New Passkey</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Add Passkey Drawer / Container */}
|
|
<div
|
|
id="addPasskeyContainer"
|
|
class="card"
|
|
style="display: none; border-color: var(--primary); background: var(--primary-light); margin-bottom: 1.5rem;"
|
|
>
|
|
<h3 style="margin: 0 0 0.5rem 0; color: var(--primary);">
|
|
Enroll New Passkey
|
|
</h3>
|
|
<p style="font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 1rem 0;">
|
|
Insert a hardware security key (YubiKey) or follow your device's
|
|
biometric prompt.
|
|
</p>
|
|
|
|
<div
|
|
id="addPasskeyStatus"
|
|
style="margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600;"
|
|
>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.75rem;">
|
|
<button
|
|
type="button"
|
|
id="confirmAddPasskeyBtn"
|
|
class="btn-primary"
|
|
>
|
|
Start Device Prompt
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="cancelAddPasskeyBtn"
|
|
class="btn-outline"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Table View (≥ 768px) */}
|
|
<div class="card desktop-only" style="display: none;">
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Credential ID</th>
|
|
<th>Sign Counter</th>
|
|
<th>AAGUID Vendor</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{passkeys.length === 0
|
|
? (
|
|
<tr>
|
|
<td
|
|
colSpan={4}
|
|
style="text-align: center; padding: 2rem; color: var(--text-muted);"
|
|
>
|
|
No passkeys registered.
|
|
</td>
|
|
</tr>
|
|
)
|
|
: (
|
|
passkeys.map((passkey) => (
|
|
<tr key={passkey.id}>
|
|
<td>
|
|
<code style="background: var(--surface-muted); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem;">
|
|
{passkey.credential_id
|
|
? `${passkey.credential_id.substring(0, 16)}...`
|
|
: passkey.id}
|
|
</code>
|
|
</td>
|
|
<td style="color: var(--text-secondary);">
|
|
{passkey.counter}
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-info">
|
|
{passkey.aaguid
|
|
? passkey.aaguid.substring(0, 8)
|
|
: "FIDO2 Key"}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button
|
|
type="button"
|
|
class="btn-danger revoke-passkey-btn"
|
|
data-passkey-id={passkey.id}
|
|
disabled={passkeys.length <= 1}
|
|
style={passkeys.length <= 1
|
|
? "opacity: 0.5; cursor: not-allowed;"
|
|
: ""}
|
|
>
|
|
Remove
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Adaptive Cards View (< 768px) */}
|
|
<div
|
|
class="mobile-only"
|
|
style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;"
|
|
>
|
|
{passkeys.length === 0
|
|
? (
|
|
<div class="card" style="text-align: center; padding: 2rem;">
|
|
<p style="color: var(--text-muted); margin: 0;">
|
|
No passkeys registered.
|
|
</p>
|
|
</div>
|
|
)
|
|
: (
|
|
passkeys.map((passkey) => (
|
|
<div class="card" key={passkey.id} style="margin-bottom: 0;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<div style="display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md);">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="7.5" cy="15.5" r="5.5"></circle>
|
|
<path d="m21 2-9.6 9.6"></path>
|
|
<path d="m15.5 7.5 3 3L22 7l-3-3"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 700; color: var(--text-primary);">
|
|
Passkey Credential
|
|
</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
|
|
{passkey.credential_id
|
|
? `${passkey.credential_id.substring(0, 14)}...`
|
|
: passkey.id}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="badge badge-info">
|
|
{passkey.aaguid ? "Hardware/OS" : "FIDO2"}
|
|
</span>
|
|
</div>
|
|
|
|
<div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem;">
|
|
<div>
|
|
<strong>Counter:</strong> {passkey.counter} authentications
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-danger revoke-passkey-btn"
|
|
data-passkey-id={passkey.id}
|
|
disabled={passkeys.length <= 1}
|
|
style={`width: 100%; min-height: 44px; ${
|
|
passkeys.length <= 1
|
|
? "opacity: 0.5; cursor: not-allowed;"
|
|
: ""
|
|
}`}
|
|
>
|
|
{passkeys.length <= 1
|
|
? "Cannot Remove Last Passkey"
|
|
: "Remove Passkey"}
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Emergency Recovery Backup Section */}
|
|
<div class="card" style="border-left: 4px solid var(--warning);">
|
|
<div style="display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<div style="display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-md);">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
|
Zero-Trust Recovery Backup
|
|
</h3>
|
|
<p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);">
|
|
2-of-3 Shamir's Secret Sharing Matrix & Cold 12-Word Voucher
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="badge badge-warning">Active Protection</span>
|
|
</div>
|
|
|
|
<p style="color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.25rem 0;">
|
|
If you lose your hardware keys or mobile device, your 12-word recovery
|
|
voucher combined with your secret PIN allows you to re-enroll a fresh
|
|
passkey without admin assistance.
|
|
</p>
|
|
|
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
<button
|
|
type="button"
|
|
id="regenVoucherBtn"
|
|
class="btn-outline"
|
|
style="font-size: 0.85rem;"
|
|
>
|
|
📋 Generate Fresh 12-Word Recovery Voucher
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="voucherModal"
|
|
style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: var(--surface-muted); border-radius: var(--radius-md); border: 1px solid var(--border-subtle);"
|
|
>
|
|
<div style="font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;">
|
|
New 12-Word Recovery Voucher:
|
|
</div>
|
|
<div
|
|
id="generatedWordGrid"
|
|
style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem;"
|
|
>
|
|
{/* Populated dynamically */}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
id="copyVoucherBtn"
|
|
class="btn-primary"
|
|
style="width: 100%;"
|
|
>
|
|
Copy All 12 Words
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
{`
|
|
@media (min-width: 768px) {
|
|
.desktop-only { display: block !important; }
|
|
.mobile-only { display: none !important; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.desktop-only { display: none !important; }
|
|
.mobile-only { display: flex !important; }
|
|
}
|
|
.word-cell {
|
|
background: var(--surface-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.35rem 0.65rem;
|
|
font-size: 0.85rem;
|
|
font-family: monospace;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<script
|
|
type="module"
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
import { entropyToMnemonic } from '/public/ui/utils/bip39.ts';
|
|
|
|
// Revoke Passkey Logic
|
|
document.querySelectorAll('.revoke-passkey-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
if (e.currentTarget.disabled) return;
|
|
if (!confirm('Are you sure you want to remove this passkey?')) return;
|
|
|
|
const passkeyId = e.currentTarget.getAttribute('data-passkey-id');
|
|
const originalText = e.currentTarget.textContent;
|
|
e.currentTarget.textContent = 'Removing...';
|
|
e.currentTarget.disabled = true;
|
|
|
|
try {
|
|
const res = await fetch(\`/api/passkeys/\${passkeyId}\`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (res.ok) {
|
|
window.location.reload();
|
|
} else {
|
|
const data = await res.json();
|
|
alert(data.error || 'Failed to remove passkey');
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
alert('An error occurred');
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add Passkey Logic
|
|
const addContainer = document.getElementById('addPasskeyContainer');
|
|
const addBtn = document.getElementById('addPasskeyBtn');
|
|
const cancelBtn = document.getElementById('cancelAddPasskeyBtn');
|
|
const confirmBtn = document.getElementById('confirmAddPasskeyBtn');
|
|
const statusDiv = document.getElementById('addPasskeyStatus');
|
|
|
|
addBtn?.addEventListener('click', () => {
|
|
addContainer.style.display = 'block';
|
|
addBtn.style.display = 'none';
|
|
});
|
|
|
|
cancelBtn?.addEventListener('click', () => {
|
|
addContainer.style.display = 'none';
|
|
addBtn.style.display = 'inline-flex';
|
|
statusDiv.textContent = '';
|
|
});
|
|
|
|
confirmBtn?.addEventListener('click', async () => {
|
|
confirmBtn.disabled = true;
|
|
statusDiv.textContent = 'Follow prompt on device...';
|
|
statusDiv.style.color = 'var(--primary)';
|
|
|
|
try {
|
|
const resp = await fetch("/api/passkeys/register/challenge", { method: "POST" });
|
|
const data = await resp.json();
|
|
if (!resp.ok) {
|
|
statusDiv.textContent = data.error || "Failed to get registration challenge";
|
|
statusDiv.style.color = 'var(--danger)';
|
|
confirmBtn.disabled = false;
|
|
return;
|
|
}
|
|
|
|
const { startRegistration } = SimpleWebAuthnBrowser;
|
|
const attResp = await startRegistration({ optionsJSON: data.options });
|
|
|
|
const verificationResp = await fetch("/api/passkeys/register/verify", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ response: attResp }),
|
|
});
|
|
|
|
const verificationJSON = await verificationResp.json();
|
|
if (verificationJSON.success) {
|
|
statusDiv.textContent = "Passkey registered successfully! Reloading...";
|
|
statusDiv.style.color = 'var(--success-text)';
|
|
setTimeout(() => window.location.reload(), 1000);
|
|
} else {
|
|
statusDiv.textContent = verificationJSON.error || "Registration verification failed";
|
|
statusDiv.style.color = 'var(--danger)';
|
|
confirmBtn.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
statusDiv.textContent = err.message || 'An error occurred.';
|
|
statusDiv.style.color = 'var(--danger)';
|
|
confirmBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Re-generate Recovery Voucher
|
|
let backupMnemonic = "";
|
|
document.getElementById('regenVoucherBtn')?.addEventListener('click', async () => {
|
|
const entropy = new Uint8Array(16);
|
|
crypto.getRandomValues(entropy);
|
|
backupMnemonic = await entropyToMnemonic(entropy);
|
|
|
|
const grid = document.getElementById('generatedWordGrid');
|
|
grid.innerHTML = backupMnemonic.split(' ').map((w, idx) => \`
|
|
<div class="word-cell">
|
|
<span style="color: var(--text-muted); font-size: 0.75rem; width: 18px;">\${idx + 1}.</span>
|
|
<span style="color: var(--text-primary); font-weight: 600;">\${w}</span>
|
|
</div>
|
|
\`).join('');
|
|
|
|
document.getElementById('voucherModal').style.display = 'block';
|
|
});
|
|
|
|
document.getElementById('copyVoucherBtn')?.addEventListener('click', async () => {
|
|
if (!backupMnemonic) return;
|
|
try {
|
|
await navigator.clipboard.writeText(backupMnemonic);
|
|
const btn = document.getElementById('copyVoucherBtn');
|
|
const origHtml = btn.innerHTML;
|
|
btn.innerHTML = '<span>✓ Copied 12 Words to Clipboard!</span>';
|
|
setTimeout(() => { btn.innerHTML = origHtml; }, 2500);
|
|
} catch (_e) {
|
|
alert(backupMnemonic);
|
|
}
|
|
});
|
|
`,
|
|
}}
|
|
>
|
|
</script>
|
|
</AuthenticatedLayout>
|
|
);
|
|
};
|