feat(ui): implement adaptive card decks for launchpad, sessions, and passkeys with emergency recovery backup
This commit is contained in:
parent
a3f5c5c286
commit
7ab1405459
@ -21,80 +21,114 @@ export const AppLaunchpadPage = ({
|
||||
currentPath="/dashboard"
|
||||
isAdmin={isAdmin}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "2rem",
|
||||
}}
|
||||
>
|
||||
<h2>Application Launchpad</h2>
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
||||
Application Launchpad
|
||||
</h1>
|
||||
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
||||
Single sign-on authorized workloads and microservices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
||||
gap: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem;">
|
||||
{apps.length === 0
|
||||
? (
|
||||
<div style={{ color: "#6c757d", gridColumn: "1 / -1" }}>
|
||||
No authorized applications found.
|
||||
<div
|
||||
class="card"
|
||||
style="grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem;"
|
||||
>
|
||||
<div style="display: inline-flex; width: 48px; height: 48px; background: var(--surface-muted); border-radius: var(--radius-full); align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--text-muted);">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
||||
No Authorized Applications
|
||||
</h3>
|
||||
<p style="margin: 0; color: var(--text-muted); font-size: 0.9rem;">
|
||||
You do not have active role grants for any workloads.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
apps.map((app) => (
|
||||
<div
|
||||
class="card"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
marginBottom: "0",
|
||||
}}
|
||||
>
|
||||
apps.map((app) => {
|
||||
const isAdminRole = app.role === "Admin" ||
|
||||
app.role === "Global Admin";
|
||||
const targetUrl = app.domain.startsWith("http")
|
||||
? app.domain
|
||||
: `https://${app.domain}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
class="card"
|
||||
key={app.id}
|
||||
style="display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 0; transition: transform 0.15s ease, box-shadow 0.15s ease;"
|
||||
>
|
||||
<h3 style={{ margin: 0, color: "#212529" }}>{app.name}</h3>
|
||||
<span
|
||||
class={`badge ${
|
||||
app.role === "Admin" || app.role === "Global Admin"
|
||||
? "badge-success"
|
||||
: "badge-primary"
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor:
|
||||
app.role === "Admin" || app.role === "Global Admin"
|
||||
? "#28a745"
|
||||
: "#007bff",
|
||||
}}
|
||||
>
|
||||
{app.role}
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ color: "#6c757d", flex: 1, fontSize: "0.9rem" }}>
|
||||
{app.description || "No description provided."}
|
||||
</p>
|
||||
<div style={{ marginTop: "1rem", textAlign: "right" }}>
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 0.5rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700; font-size: 1rem;">
|
||||
{app.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
||||
{app.name}
|
||||
</h3>
|
||||
<span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
|
||||
{app.domain}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class={`badge ${
|
||||
isAdminRole ? "badge-success" : "badge-info"
|
||||
}`}
|
||||
>
|
||||
{app.role}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.25rem 0; flex: 1;">
|
||||
{app.description ||
|
||||
"Zero-trust secured internal application."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`https://${app.domain}`}
|
||||
href={targetUrl}
|
||||
class="btn-primary"
|
||||
style={{ textDecoration: "none", display: "inline-block" }}
|
||||
style="width: 100%; min-height: 46px; text-decoration: none; justify-content: center;"
|
||||
>
|
||||
Launch
|
||||
<span>Launch App</span>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
|
||||
@ -13,81 +13,86 @@ export const PasskeysPage = ({
|
||||
currentPath="/dashboard/passkeys"
|
||||
isAdmin={isAdmin}
|
||||
>
|
||||
<div class="card">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: 0, border: "none", padding: 0 }}>
|
||||
<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
|
||||
</h2>
|
||||
<button type="button" id="addPasskeyBtn" class="btn-primary">
|
||||
+ Add New Passkey
|
||||
</button>
|
||||
</h1>
|
||||
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
||||
Manage FIDO2 WebAuthn credentials and biometric authenticators.
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#6c757d",
|
||||
fontSize: "0.9rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="addPasskeyBtn"
|
||||
class="btn-primary"
|
||||
style="min-height: 44px; box-shadow: var(--shadow-sm);"
|
||||
>
|
||||
Manage your registered hardware tokens. We recommend having at least
|
||||
two registered.
|
||||
<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="addPasskeyContainer"
|
||||
style={{
|
||||
display: "none",
|
||||
marginBottom: "1.5rem",
|
||||
padding: "1rem",
|
||||
background: "#f8f9fa",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid #dee2e6",
|
||||
}}
|
||||
id="addPasskeyStatus"
|
||||
style="margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600;"
|
||||
>
|
||||
<h3 style={{ marginTop: 0, fontSize: "1.1rem" }}>
|
||||
Register New Passkey
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.9rem", color: "#6c757d" }}>
|
||||
Please insert your new hardware token and follow the prompts.
|
||||
</p>
|
||||
<div
|
||||
id="addPasskeyStatus"
|
||||
style={{ marginBottom: "1rem", fontSize: "0.9rem" }}
|
||||
>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<button
|
||||
type="button"
|
||||
id="confirmAddPasskeyBtn"
|
||||
class="btn-primary"
|
||||
style={{ background: "#28a745" }}
|
||||
>
|
||||
Start Registration
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="cancelAddPasskeyBtn"
|
||||
class="btn-danger"
|
||||
style={{ background: "#6c757d" }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</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>ID</th>
|
||||
<th>Uses (Counter)</th>
|
||||
<th>Credential ID</th>
|
||||
<th>Sign Counter</th>
|
||||
<th>AAGUID Vendor</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -96,10 +101,10 @@ export const PasskeysPage = ({
|
||||
? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={3}
|
||||
style={{ textAlign: "center", padding: "2rem" }}
|
||||
colSpan={4}
|
||||
style="text-align: center; padding: 2rem; color: var(--text-muted);"
|
||||
>
|
||||
No passkeys found.
|
||||
No passkeys registered.
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
@ -107,29 +112,31 @@ export const PasskeysPage = ({
|
||||
passkeys.map((passkey) => (
|
||||
<tr key={passkey.id}>
|
||||
<td>
|
||||
<code
|
||||
style={{
|
||||
background: "#f1f3f5",
|
||||
padding: "0.2rem 0.4rem",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
{passkey.id.split("-")[0]}...
|
||||
<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>{passkey.counter}</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-btn"
|
||||
class="btn-danger revoke-passkey-btn"
|
||||
data-passkey-id={passkey.id}
|
||||
disabled={passkeys.length <= 1}
|
||||
title={passkeys.length <= 1
|
||||
? "Cannot remove last passkey"
|
||||
: "Remove"}
|
||||
style={passkeys.length <= 1
|
||||
? { opacity: 0.5, cursor: "not-allowed" }
|
||||
: {}}
|
||||
? "opacity: 0.5; cursor: not-allowed;"
|
||||
: ""}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
@ -139,34 +146,194 @@ export const PasskeysPage = ({
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{passkeys.length <= 1 && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.85rem",
|
||||
color: "#dc3545",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
* You must register another passkey before you can remove your
|
||||
only remaining one.
|
||||
</p>
|
||||
)}
|
||||
</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: `
|
||||
// Revoke Passkey Logic
|
||||
document.querySelectorAll('.revoke-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
if (e.target.disabled) return;
|
||||
if (!confirm('Are you sure you want to remove this passkey? This action cannot be undone.')) return;
|
||||
import { entropyToMnemonic } from '/public/ui/utils/bip39.ts';
|
||||
|
||||
const passkeyId = e.target.getAttribute('data-passkey-id');
|
||||
const originalText = e.target.textContent;
|
||||
e.target.textContent = 'Removing...';
|
||||
e.target.disabled = true;
|
||||
// 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}\`, {
|
||||
@ -178,13 +345,13 @@ export const PasskeysPage = ({
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.error || 'Failed to remove passkey');
|
||||
e.target.textContent = originalText;
|
||||
e.target.disabled = false;
|
||||
e.currentTarget.textContent = originalText;
|
||||
e.currentTarget.disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
alert('An error occurred');
|
||||
e.target.textContent = originalText;
|
||||
e.target.disabled = false;
|
||||
e.currentTarget.textContent = originalText;
|
||||
e.currentTarget.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -196,77 +363,88 @@ export const PasskeysPage = ({
|
||||
const confirmBtn = document.getElementById('confirmAddPasskeyBtn');
|
||||
const statusDiv = document.getElementById('addPasskeyStatus');
|
||||
|
||||
addBtn.addEventListener('click', () => {
|
||||
addBtn?.addEventListener('click', () => {
|
||||
addContainer.style.display = 'block';
|
||||
addBtn.style.display = 'none';
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
cancelBtn?.addEventListener('click', () => {
|
||||
addContainer.style.display = 'none';
|
||||
addBtn.style.display = 'block';
|
||||
addBtn.style.display = 'inline-flex';
|
||||
statusDiv.textContent = '';
|
||||
});
|
||||
|
||||
confirmBtn.addEventListener('click', async () => {
|
||||
confirmBtn?.addEventListener('click', async () => {
|
||||
confirmBtn.disabled = true;
|
||||
statusDiv.textContent = 'Setting up passkey... Follow the prompt on your device.';
|
||||
statusDiv.style.color = '#007bff';
|
||||
statusDiv.textContent = 'Follow prompt on device...';
|
||||
statusDiv.style.color = 'var(--primary)';
|
||||
|
||||
try {
|
||||
// 1. Fetch challenge
|
||||
const resp = await fetch("/api/passkeys/register/challenge", {
|
||||
method: "POST",
|
||||
});
|
||||
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 = 'red';
|
||||
statusDiv.style.color = 'var(--danger)';
|
||||
confirmBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Pass challenge to authenticator
|
||||
const { startRegistration } = SimpleWebAuthnBrowser;
|
||||
let attResp;
|
||||
try {
|
||||
attResp = await startRegistration(data.options);
|
||||
} catch (error) {
|
||||
statusDiv.textContent = error.message || "Registration failed on device";
|
||||
statusDiv.style.color = 'red';
|
||||
confirmBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
const attResp = await startRegistration({ optionsJSON: data.options });
|
||||
|
||||
// 3. Send response back to verify
|
||||
const verificationResp = await fetch("/api/passkeys/register/verify", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
response: attResp,
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ response: attResp }),
|
||||
});
|
||||
|
||||
const verificationJSON = await verificationResp.json();
|
||||
|
||||
if (verificationJSON.success) {
|
||||
statusDiv.textContent = "Passkey added successfully! Reloading...";
|
||||
statusDiv.style.color = 'green';
|
||||
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 = 'red';
|
||||
statusDiv.style.color = 'var(--danger)';
|
||||
confirmBtn.disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
statusDiv.textContent = 'An unexpected error occurred.';
|
||||
statusDiv.style.color = 'red';
|
||||
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);
|
||||
}
|
||||
});
|
||||
`,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -11,22 +11,22 @@ export const SessionsPage = ({
|
||||
}) => {
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
title="Active Sessions"
|
||||
title="Sessions"
|
||||
currentPath="/dashboard/sessions"
|
||||
isAdmin={isAdmin}
|
||||
>
|
||||
<div class="card">
|
||||
<h2>Active Sessions</h2>
|
||||
<p
|
||||
style={{
|
||||
color: "#6c757d",
|
||||
fontSize: "0.9rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
Review and revoke active sessions connected to your account.
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
||||
Active Sessions
|
||||
</h1>
|
||||
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
||||
Manage and revoke authenticated device sessions connected to your
|
||||
account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Table View (≥ 768px) */}
|
||||
<div class="card desktop-only" style="display: none;">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
@ -43,7 +43,7 @@ export const SessionsPage = ({
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
style={{ textAlign: "center", padding: "2rem" }}
|
||||
style="text-align: center; padding: 2rem; color: var(--text-muted);"
|
||||
>
|
||||
No active sessions found.
|
||||
</td>
|
||||
@ -61,16 +61,25 @@ export const SessionsPage = ({
|
||||
Current Session
|
||||
</span>
|
||||
)
|
||||
: <span class="badge badge-secondary">Active</span>}
|
||||
: (
|
||||
<span class="badge badge-secondary">
|
||||
Remote Session
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td style="color: var(--text-secondary);">
|
||||
{new Date(session.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td style="color: var(--text-secondary);">
|
||||
{new Date(session.expires_at).toLocaleString()}
|
||||
</td>
|
||||
<td>{new Date(session.created_at).toLocaleString()}</td>
|
||||
<td>{new Date(session.expires_at).toLocaleString()}</td>
|
||||
<td>
|
||||
{!isCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-danger revoke-btn"
|
||||
data-session-id={session.id}
|
||||
style="padding: 0.35rem 0.75rem; font-size: 0.85rem; min-height: 32px;"
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
@ -85,6 +94,104 @@ export const SessionsPage = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Adaptive Cards View (< 768px) */}
|
||||
<div
|
||||
class="mobile-only"
|
||||
style="display: flex; flex-direction: column; gap: 1rem;"
|
||||
>
|
||||
{sessions.length === 0
|
||||
? (
|
||||
<div class="card" style="text-align: center; padding: 2rem;">
|
||||
<p style="color: var(--text-muted); margin: 0;">
|
||||
No active sessions found.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
sessions.map((session) => {
|
||||
const isCurrent = session.id === currentSessionId;
|
||||
return (
|
||||
<div class="card" key={session.id} style="margin-bottom: 0;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface-muted); border-radius: var(--radius-md); color: var(--text-secondary);">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect
|
||||
width="14"
|
||||
height="20"
|
||||
x="5"
|
||||
y="2"
|
||||
rx="2"
|
||||
ry="2"
|
||||
>
|
||||
</rect>
|
||||
<line x1="12" x2="12.01" y1="18" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight: 600; font-size: 0.95rem; color: var(--text-primary);">
|
||||
{isCurrent ? "This Device" : "Remote Device"}
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
|
||||
{session.id.substring(0, 13)}...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCurrent
|
||||
? <span class="badge badge-success">Active Now</span>
|
||||
: <span class="badge badge-secondary">Active</span>}
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.6;">
|
||||
<div>
|
||||
<strong>Signed in:</strong>{" "}
|
||||
{new Date(session.created_at).toLocaleString()}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Expires:</strong>{" "}
|
||||
{new Date(session.expires_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-danger revoke-btn"
|
||||
data-session-id={session.id}
|
||||
style="width: 100%; min-height: 44px;"
|
||||
>
|
||||
Revoke Device Session
|
||||
</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; }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@ -92,10 +199,10 @@ export const SessionsPage = ({
|
||||
btn.addEventListener('click', async (e) => {
|
||||
if (!confirm('Are you sure you want to revoke this session?')) return;
|
||||
|
||||
const sessionId = e.target.getAttribute('data-session-id');
|
||||
const originalText = e.target.textContent;
|
||||
e.target.textContent = 'Revoking...';
|
||||
e.target.disabled = true;
|
||||
const sessionId = e.currentTarget.getAttribute('data-session-id');
|
||||
const originalText = e.currentTarget.textContent;
|
||||
e.currentTarget.textContent = 'Revoking...';
|
||||
e.currentTarget.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await fetch(\`/api/sessions/\${sessionId}\`, {
|
||||
@ -103,18 +210,17 @@ export const SessionsPage = ({
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
// Reload the page to reflect changes
|
||||
window.location.reload();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.error || 'Failed to revoke session');
|
||||
e.target.textContent = originalText;
|
||||
e.target.disabled = false;
|
||||
e.currentTarget.textContent = originalText;
|
||||
e.currentTarget.disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
alert('An error occurred');
|
||||
e.target.textContent = originalText;
|
||||
e.target.disabled = false;
|
||||
e.currentTarget.textContent = originalText;
|
||||
e.currentTarget.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user