613 lines
25 KiB
TypeScript
613 lines
25 KiB
TypeScript
import { AdminLayout } from "./AdminLayout.tsx";
|
|
|
|
export const AdminInvitesPage = ({
|
|
invites,
|
|
apps,
|
|
allRoles = [],
|
|
}: {
|
|
invites: any[];
|
|
apps: any[];
|
|
allRoles?: any[];
|
|
}) => {
|
|
return (
|
|
<AdminLayout
|
|
title="Invite & Onboarding Tokens"
|
|
currentPath="/admin/invites"
|
|
>
|
|
<div
|
|
id="status-banner"
|
|
style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 4px; font-size: 0.9rem;"
|
|
/>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
|
|
<div>
|
|
<h2 style="margin: 0; border: none; padding: 0;">
|
|
Invite & Onboarding Tokens
|
|
</h2>
|
|
<p style="color: #6c757d; font-size: 0.9rem; margin: 0.2rem 0 0 0;">
|
|
Issue single-use, team limited-use, or campaign-wide registration
|
|
tokens.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="btn-action btn-success"
|
|
style="padding: 0.5rem 1rem; font-size: 0.9rem;"
|
|
onclick="toggleCreateInviteForm()"
|
|
>
|
|
+ Generate Onboarding Token
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="create-invite-card"
|
|
class="card"
|
|
style="display: none; border-left: 4px solid #28a745; margin-bottom: 1.5rem;"
|
|
>
|
|
<h3>Generate User Onboarding Token</h3>
|
|
<p style="color: #6c757d; font-size: 0.9rem;">
|
|
Configure time bounds, usage limits, role assignments, and initial
|
|
account activation status.
|
|
</p>
|
|
|
|
<form id="createInviteForm" onsubmit="handleCreateInvite(event)">
|
|
{/* Row 1: Type & Target App */}
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Token Provisioning Type *
|
|
</label>
|
|
<select
|
|
id="inviteType"
|
|
onchange="handleInviteTypeChange()"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
|
|
>
|
|
<option value="site_scoped">
|
|
Type 2: Site-Scoped Token (Pre-Authorized for App)
|
|
</option>
|
|
<option value="global_admin">
|
|
Type 1: Global Admin Token (Full System Access)
|
|
</option>
|
|
<option value="open_pending">
|
|
Type 3: General Open Token (Unassigned Access)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="appSelectContainer">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Target Application *
|
|
</label>
|
|
<select
|
|
id="inviteAppId"
|
|
onchange="updateInviteRoleOptions()"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
|
|
>
|
|
{apps.map((app) => (
|
|
<option value={app.id}>
|
|
{app.name} ({app.spiffe_id})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row 2: Usage Limits & Assigned Role */}
|
|
<div style="display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 1rem; margin-bottom: 1rem;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Usage Policy (Capacity) *
|
|
</label>
|
|
<select
|
|
id="inviteUsageType"
|
|
onchange="handleUsageTypeChange()"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
|
|
>
|
|
<option value="single">
|
|
Single-Use (1 Person - Max Security)
|
|
</option>
|
|
<option value="limited">
|
|
Limited Multi-Use (Cap at N People)
|
|
</option>
|
|
<option value="unlimited">
|
|
Unlimited Time-Bound (Campaign / Beta)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="maxUsesContainer" style="display: none;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Max Registrations *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="inviteMaxUses"
|
|
value="5"
|
|
min="2"
|
|
max="1000"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
|
|
/>
|
|
</div>
|
|
|
|
<div id="roleSelectContainer">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Assigned Role *
|
|
</label>
|
|
<select
|
|
id="inviteRole"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
|
|
>
|
|
{/* Dynamically populated */}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row 3: Expiration, Custom Code, Activation Toggle */}
|
|
<div style="display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 1rem; margin-bottom: 1.2rem; align-items: flex-end;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Expires In (Days)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="inviteExpiresInDays"
|
|
value="7"
|
|
min="1"
|
|
max="30"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
|
|
Custom Code (Optional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="inviteCustomCode"
|
|
placeholder="Leave blank to auto-generate"
|
|
style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
|
|
/>
|
|
</div>
|
|
|
|
<div style="padding-bottom: 0.4rem;">
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;">
|
|
<input
|
|
type="checkbox"
|
|
id="inviteAutoActivate"
|
|
checked
|
|
style="width: 16px; height: 16px; cursor: pointer;"
|
|
/>
|
|
Auto-Activate Account
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button type="submit" class="btn-action btn-success">
|
|
Create Invite Token
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-action"
|
|
onclick="toggleCreateInviteForm()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div
|
|
id="generated-token-banner"
|
|
style="display: none; margin-top: 1rem; padding: 1rem; background: #e7f5ea; border: 1px solid #28a745; border-radius: 4px;"
|
|
>
|
|
<strong style="color: #155724;">Token Created Successfully!</strong>
|
|
<div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
|
|
<code
|
|
id="generatedTokenUrl"
|
|
style="padding: 0.4rem 0.6rem; background: white; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9rem; flex: 1; word-break: break-all;"
|
|
>
|
|
</code>
|
|
<button
|
|
type="button"
|
|
class="btn-action btn-success"
|
|
onclick="copyGeneratedTokenUrl()"
|
|
>
|
|
Copy Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invites Ledger Table */}
|
|
<div class="card">
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Invite Code</th>
|
|
<th>Scope / App</th>
|
|
<th>Role</th>
|
|
<th>Usage & Capacity</th>
|
|
<th>Status</th>
|
|
<th>Activation</th>
|
|
<th>Expires</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invites.length === 0
|
|
? (
|
|
<tr>
|
|
<td
|
|
colspan={8}
|
|
style="text-align: center; color: #6c757d; padding: 2rem;"
|
|
>
|
|
No active or historical invite tokens found.
|
|
</td>
|
|
</tr>
|
|
)
|
|
: (
|
|
invites.map((inv) => {
|
|
const usesCount = inv.uses_count || 0;
|
|
const maxUses = inv.max_uses; // null = unlimited, number = limit
|
|
const isUnlimited = maxUses === null;
|
|
const isExhausted = !isUnlimited && usesCount >= maxUses;
|
|
const isExpired = new Date(inv.expires_at) < new Date();
|
|
const isActive = !isExhausted && !isExpired;
|
|
|
|
return (
|
|
<tr key={inv.id}>
|
|
<td>
|
|
<code style="background: #e9ecef; padding: 0.2rem 0.4rem; border-radius: 3px; font-weight: bold; color: #212529;">
|
|
{inv.code}
|
|
</code>
|
|
</td>
|
|
<td>
|
|
{inv.app_name
|
|
? <strong>{inv.app_name}</strong>
|
|
: inv.role === "admin"
|
|
? <span class="badge badge-info">Global Admin</span>
|
|
: (
|
|
<span class="badge badge-secondary">
|
|
General (Unassigned)
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-info">{inv.role}</span>
|
|
</td>
|
|
<td>
|
|
<div style="min-width: 110px;">
|
|
{isUnlimited
|
|
? (
|
|
<span style="font-size: 0.85rem; font-weight: 500; color: #0d6efd;">
|
|
{usesCount} claimed (Unlimited)
|
|
</span>
|
|
)
|
|
: (
|
|
<div>
|
|
<span style="font-size: 0.85rem; font-weight: 600;">
|
|
{usesCount} / {maxUses} used
|
|
</span>
|
|
<div style="background: #e9ecef; border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
|
|
<div
|
|
style={`background: ${
|
|
isExhausted ? "#6c757d" : "#28a745"
|
|
}; height: 100%; width: ${
|
|
Math.min(
|
|
100,
|
|
(usesCount / maxUses) * 100,
|
|
)
|
|
}%;`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{isExhausted && (
|
|
<span class="badge badge-secondary">Exhausted</span>
|
|
)}
|
|
{isExpired && !isExhausted && (
|
|
<span class="badge badge-suspended">Expired</span>
|
|
)}
|
|
{isActive && (
|
|
<span class="badge badge-active">Active</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
{inv.auto_activate !== false
|
|
? (
|
|
<span style="font-size: 0.8rem; color: #198754; font-weight: 500;">
|
|
Auto-Active
|
|
</span>
|
|
)
|
|
: (
|
|
<span style="font-size: 0.8rem; color: #fd7e14; font-weight: 500;">
|
|
Requires Approval
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td style="font-size: 0.85rem;">
|
|
{new Date(inv.expires_at).toLocaleDateString()}
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; gap: 0.3rem; flex-wrap: wrap;">
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-action btn-success"
|
|
onclick={`copyInviteLink('${inv.code}')`}
|
|
>
|
|
Copy Link
|
|
</button>
|
|
)}
|
|
{usesCount > 0 && (
|
|
<button
|
|
type="button"
|
|
class="btn-action"
|
|
style="background: #e2e3e5; color: #383d41;"
|
|
onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Claimed ({usesCount})
|
|
</button>
|
|
)}
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-action btn-warning"
|
|
onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Revoke
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Redemptions Modal */}
|
|
<div
|
|
id="redemptions-modal"
|
|
style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center;"
|
|
>
|
|
<div style="background: white; border-radius: 8px; width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; font-size: 1.1rem;">
|
|
Users Claimed:{" "}
|
|
<code id="modal-invite-code" style="color: #0d6efd;"></code>
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onclick="closeRedemptionsModal()"
|
|
style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #6c757d;"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="modal-redemptions-content"
|
|
style="max-height: 350px; overflow-y: auto;"
|
|
>
|
|
<p style="color: #6c757d; font-size: 0.9rem;">
|
|
Loading claimed users...
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align: right; margin-top: 1rem;">
|
|
<button
|
|
type="button"
|
|
class="btn-action"
|
|
onclick="closeRedemptionsModal()"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
const ROLES_CATALOG = ${JSON.stringify(allRoles)};
|
|
|
|
function updateInviteRoleOptions() {
|
|
const appSelect = document.getElementById('inviteAppId');
|
|
const roleSelect = document.getElementById('inviteRole');
|
|
if (!appSelect || !roleSelect) return;
|
|
|
|
const appId = appSelect.value;
|
|
roleSelect.innerHTML = '';
|
|
|
|
const available = ROLES_CATALOG.filter(r => !r.app_id || r.app_id === appId);
|
|
if (available.length === 0) {
|
|
const opt = document.createElement('option');
|
|
opt.value = 'user';
|
|
opt.textContent = 'user';
|
|
roleSelect.appendChild(opt);
|
|
return;
|
|
}
|
|
|
|
available.forEach(r => {
|
|
const opt = document.createElement('option');
|
|
opt.value = r.name;
|
|
opt.textContent = r.name + (r.app_id ? ' (App Custom)' : ' (Global)');
|
|
roleSelect.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
if (document.getElementById('inviteAppId')) {
|
|
updateInviteRoleOptions();
|
|
}
|
|
|
|
function showNotice(msg, isError) {
|
|
const banner = document.getElementById('status-banner');
|
|
banner.textContent = msg;
|
|
banner.style.display = 'block';
|
|
banner.style.background = isError ? '#f8d7da' : '#d1e7dd';
|
|
banner.style.color = isError ? '#842029' : '#0f5132';
|
|
banner.style.border = isError ? '1px solid #f5c2c7' : '1px solid #badbcc';
|
|
setTimeout(() => { banner.style.display = 'none'; }, 6000);
|
|
}
|
|
|
|
function toggleCreateInviteForm() {
|
|
const el = document.getElementById('create-invite-card');
|
|
el.style.display = el.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
function handleInviteTypeChange() {
|
|
const type = document.getElementById('inviteType').value;
|
|
const appContainer = document.getElementById('appSelectContainer');
|
|
const roleContainer = document.getElementById('roleSelectContainer');
|
|
|
|
if (type === 'global_admin' || type === 'open_pending') {
|
|
appContainer.style.display = 'none';
|
|
roleContainer.style.display = 'none';
|
|
} else {
|
|
appContainer.style.display = 'block';
|
|
roleContainer.style.display = 'block';
|
|
updateInviteRoleOptions();
|
|
}
|
|
}
|
|
|
|
function handleUsageTypeChange() {
|
|
const usage = document.getElementById('inviteUsageType').value;
|
|
const maxUsesContainer = document.getElementById('maxUsesContainer');
|
|
maxUsesContainer.style.display = usage === 'limited' ? 'block' : 'none';
|
|
}
|
|
|
|
async function handleCreateInvite(e) {
|
|
e.preventDefault();
|
|
const type = document.getElementById('inviteType').value;
|
|
let appId = null;
|
|
let role = 'user';
|
|
|
|
if (type === 'global_admin') {
|
|
role = 'admin';
|
|
} else if (type === 'open_pending') {
|
|
role = 'user';
|
|
} else {
|
|
appId = document.getElementById('inviteAppId').value;
|
|
role = document.getElementById('inviteRole').value;
|
|
}
|
|
|
|
const usageLimitType = document.getElementById('inviteUsageType').value;
|
|
const maxUses = usageLimitType === 'limited' ? parseInt(document.getElementById('inviteMaxUses').value) || 5 : null;
|
|
const autoActivate = document.getElementById('inviteAutoActivate').checked;
|
|
const expiresInDays = parseInt(document.getElementById('inviteExpiresInDays').value) || 7;
|
|
const customCode = document.getElementById('inviteCustomCode').value.trim();
|
|
|
|
try {
|
|
const res = await fetch('/api/admin/invites/create', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
appId,
|
|
role,
|
|
usageLimitType,
|
|
maxUses,
|
|
autoActivate,
|
|
expiresInDays,
|
|
customCode: customCode || undefined,
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
const regUrl = window.location.origin + '/register?code=' + data.inviteCode;
|
|
document.getElementById('generatedTokenUrl').textContent = regUrl;
|
|
document.getElementById('generated-token-banner').style.display = 'block';
|
|
showNotice('Invite token created successfully!', false);
|
|
setTimeout(() => { window.location.reload(); }, 2500);
|
|
} else {
|
|
showNotice(data.error || 'Failed to create invite token', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error creating invite', true);
|
|
}
|
|
}
|
|
|
|
function copyGeneratedTokenUrl() {
|
|
const text = document.getElementById('generatedTokenUrl').textContent;
|
|
navigator.clipboard.writeText(text);
|
|
showNotice('Registration URL copied to clipboard: ' + text, false);
|
|
}
|
|
|
|
function copyInviteLink(code) {
|
|
const url = window.location.origin + '/register?code=' + code;
|
|
navigator.clipboard.writeText(url);
|
|
showNotice('Registration link copied: ' + url, false);
|
|
}
|
|
|
|
async function revokeInvite(inviteId, code) {
|
|
if (!confirm('Revoke invite code "' + code + '"?')) return;
|
|
try {
|
|
const res = await fetch('/api/admin/invites/' + inviteId, {
|
|
method: 'DELETE',
|
|
});
|
|
if (res.ok) {
|
|
showNotice('Invite token revoked', false);
|
|
setTimeout(() => window.location.reload(), 800);
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to revoke invite', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error', true);
|
|
}
|
|
}
|
|
|
|
async function showRedemptionsModal(inviteId, code) {
|
|
const modal = document.getElementById('redemptions-modal');
|
|
const codeEl = document.getElementById('modal-invite-code');
|
|
const contentEl = document.getElementById('modal-redemptions-content');
|
|
|
|
codeEl.textContent = code;
|
|
contentEl.innerHTML = '<p style="color: #6c757d;">Loading...</p>';
|
|
modal.style.display = 'flex';
|
|
|
|
try {
|
|
const res = await fetch('/api/admin/invites/' + inviteId + '/redemptions');
|
|
const data = await res.json();
|
|
if (res.ok && data.redemptions && data.redemptions.length > 0) {
|
|
let html = '<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">';
|
|
html += '<thead><tr style="text-align: left; border-bottom: 2px solid #dee2e6;">';
|
|
html += '<th style="padding: 0.4rem;">Username</th>';
|
|
html += '<th style="padding: 0.4rem;">Status</th>';
|
|
html += '<th style="padding: 0.4rem;">Redeemed At</th>';
|
|
html += '</tr></thead><tbody>';
|
|
data.redemptions.forEach(r => {
|
|
html += '<tr style="border-bottom: 1px solid #dee2e6;">';
|
|
html += '<td style="padding: 0.4rem;"><strong>' + r.username + '</strong></td>';
|
|
html += '<td style="padding: 0.4rem;"><span class="badge badge-' + r.account_status + '">' + r.account_status + '</span></td>';
|
|
html += '<td style="padding: 0.4rem; color: #6c757d;">' + new Date(r.redeemed_at).toLocaleString() + '</td>';
|
|
html += '</tr>';
|
|
});
|
|
html += '</tbody></table>';
|
|
contentEl.innerHTML = html;
|
|
} else {
|
|
contentEl.innerHTML = '<p style="color: #6c757d; text-align: center; padding: 1rem;">No users have redeemed this token yet.</p>';
|
|
}
|
|
} catch (err) {
|
|
contentEl.innerHTML = '<p style="color: #dc3545;">Failed to load redemption details.</p>';
|
|
}
|
|
}
|
|
|
|
function closeRedemptionsModal() {
|
|
document.getElementById('redemptions-modal').style.display = 'none';
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
</AdminLayout>
|
|
);
|
|
};
|