Merge pull request #35 from mrteye/monolith-decomposition-phase-2-5222039191988798562
Phase 2 UI Admin Pages Decomposition
This commit is contained in:
GitHub
commit
685ea25365
@ -1,4 +1,6 @@
|
|||||||
import { AdminLayout } from "./AdminLayout.tsx";
|
import { AdminLayout } from "./AdminLayout.tsx";
|
||||||
|
import { AdminTable } from "./admin/AdminTable.tsx";
|
||||||
|
import { AdminModal } from "./admin/AdminModal.tsx";
|
||||||
|
|
||||||
export const AdminAppsPage = ({
|
export const AdminAppsPage = ({
|
||||||
apps,
|
apps,
|
||||||
@ -58,18 +60,12 @@ export const AdminAppsPage = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Register / Edit App Drawer */}
|
{/* Register / Edit App Modal */}
|
||||||
<div
|
<AdminModal
|
||||||
id="appFormCard"
|
id="appFormModal"
|
||||||
class="card"
|
title="Register New Subsidiary Application"
|
||||||
style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
|
onClose="closeAppDrawer()"
|
||||||
>
|
>
|
||||||
<h3
|
|
||||||
id="appFormTitle"
|
|
||||||
style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
|
|
||||||
>
|
|
||||||
Register New Subsidiary Application
|
|
||||||
</h3>
|
|
||||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
||||||
Authenticate incoming ConnectRPC/ForwardAuth requests against the
|
Authenticate incoming ConnectRPC/ForwardAuth requests against the
|
||||||
application's SPIFFE ID and edge routing domains.
|
application's SPIFFE ID and edge routing domains.
|
||||||
@ -186,173 +182,135 @@ export const AdminAppsPage = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</AdminModal>
|
||||||
|
|
||||||
{/* Desktop Table View (≥ 768px) */}
|
<AdminTable
|
||||||
<div class="card desktop-only" style="display: none;">
|
id="appsTable"
|
||||||
<div class="table-container">
|
headers={[
|
||||||
<table id="appsTable">
|
"Application Name",
|
||||||
<thead>
|
"SPIFFE ID",
|
||||||
<tr>
|
"Domain",
|
||||||
<th>Application Name</th>
|
"Active Users",
|
||||||
<th>SPIFFE ID</th>
|
"Description",
|
||||||
<th>Domain</th>
|
"Actions",
|
||||||
<th>Active Users</th>
|
]}
|
||||||
<th>Description</th>
|
isEmpty={apps.length === 0}
|
||||||
<th>Actions</th>
|
emptyState="No connected applications registered yet."
|
||||||
</tr>
|
desktopRows={apps.map((app) => (
|
||||||
</thead>
|
<tr
|
||||||
<tbody>
|
key={app.id}
|
||||||
{apps.length === 0
|
class="app-row"
|
||||||
? (
|
data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
|
||||||
<tr>
|
.toLowerCase()}
|
||||||
<td
|
>
|
||||||
colSpan={6}
|
<td>
|
||||||
style="text-align: center; color: var(--text-muted); padding: 2rem;"
|
<strong style="color: var(--text-primary);">
|
||||||
>
|
{app.name}
|
||||||
No connected applications registered yet.
|
</strong>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
<td>
|
||||||
)
|
<code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace; color: var(--primary);">
|
||||||
: (
|
{app.spiffe_id}
|
||||||
apps.map((app) => (
|
</code>
|
||||||
<tr
|
</td>
|
||||||
key={app.id}
|
<td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
|
||||||
class="app-row"
|
{app.domain || "-"}
|
||||||
data-search={`${app.name} ${
|
</td>
|
||||||
app.domain || ""
|
<td>
|
||||||
} ${app.spiffe_id}`.toLowerCase()}
|
<span class="badge badge-info">
|
||||||
>
|
{app.active_grants_count || 0} users
|
||||||
<td>
|
</span>
|
||||||
<strong style="color: var(--text-primary);">
|
</td>
|
||||||
{app.name}
|
<td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
|
||||||
</strong>
|
{app.description || "-"}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace; color: var(--primary);">
|
<div style="display: flex; gap: 0.35rem;">
|
||||||
{app.spiffe_id}
|
<button
|
||||||
</code>
|
type="button"
|
||||||
</td>
|
class="btn-outline"
|
||||||
<td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
{app.domain || "-"}
|
onclick={`openEditAppDrawer(${
|
||||||
</td>
|
JSON.stringify(JSON.stringify(app))
|
||||||
<td>
|
})`}
|
||||||
<span class="badge badge-info">
|
>
|
||||||
{app.active_grants_count || 0} users
|
Edit
|
||||||
</span>
|
</button>
|
||||||
</td>
|
<button
|
||||||
<td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
|
type="button"
|
||||||
{app.description || "-"}
|
class="btn-danger"
|
||||||
</td>
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
<td>
|
onclick={`deleteApp('${app.id}', '${app.name}')`}
|
||||||
<div style="display: flex; gap: 0.35rem;">
|
>
|
||||||
<button
|
Delete
|
||||||
type="button"
|
</button>
|
||||||
class="btn-outline"
|
</div>
|
||||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
</td>
|
||||||
onclick={`openEditAppDrawer(${
|
</tr>
|
||||||
JSON.stringify(JSON.stringify(app))
|
))}
|
||||||
})`}
|
mobileCards={apps.map((app) => (
|
||||||
>
|
<div
|
||||||
Edit
|
class="card app-card"
|
||||||
</button>
|
key={app.id}
|
||||||
<button
|
data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
|
||||||
type="button"
|
.toLowerCase()}
|
||||||
class="btn-danger"
|
style="margin-bottom: 0;"
|
||||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
>
|
||||||
onclick={`deleteApp('${app.id}', '${app.name}')`}
|
<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;">
|
||||||
Delete
|
<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;">
|
||||||
</button>
|
{app.name.charAt(0).toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<div>
|
||||||
</tr>
|
<h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
|
||||||
))
|
{app.name}
|
||||||
)}
|
</h3>
|
||||||
</tbody>
|
<span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
|
||||||
</table>
|
{app.domain || "No domain"}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Adaptive Cards View (< 768px) */}
|
|
||||||
<div
|
|
||||||
id="appsMobileDeck"
|
|
||||||
class="mobile-only"
|
|
||||||
style="display: flex; flex-direction: column; gap: 1rem;"
|
|
||||||
>
|
|
||||||
{apps.length === 0
|
|
||||||
? (
|
|
||||||
<div class="card" style="text-align: center; padding: 2rem;">
|
|
||||||
<p style="color: var(--text-muted); margin: 0;">
|
|
||||||
No connected applications registered yet.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
: (
|
|
||||||
apps.map((app) => (
|
|
||||||
<div
|
|
||||||
class="card app-card"
|
|
||||||
key={app.id}
|
|
||||||
data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
|
|
||||||
.toLowerCase()}
|
|
||||||
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: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700;">
|
|
||||||
{app.name.charAt(0).toUpperCase()}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
|
|
||||||
{app.name}
|
|
||||||
</h3>
|
|
||||||
<span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
|
|
||||||
{app.domain || "No domain"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="badge badge-info">
|
|
||||||
{app.active_grants_count || 0} Users
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
|
|
||||||
<p style="margin: 0 0 0.5rem 0;">
|
|
||||||
{app.description || "No description provided."}
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<strong>SPIFFE:</strong>{" "}
|
|
||||||
<code style="font-family: monospace; font-size: 0.8rem;">
|
|
||||||
{app.spiffe_id}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex; gap: 0.5rem;">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-outline"
|
|
||||||
style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
|
||||||
onclick={`openEditAppDrawer(${
|
|
||||||
JSON.stringify(JSON.stringify(app))
|
|
||||||
})`}
|
|
||||||
>
|
|
||||||
Edit App
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-danger"
|
|
||||||
style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
|
||||||
onclick={`deleteApp('${app.id}', '${app.name}')`}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))
|
|
||||||
)}
|
<span class="badge badge-info">
|
||||||
</div>
|
{app.active_grants_count || 0} Users
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
|
||||||
|
<p style="margin: 0 0 0.5rem 0;">
|
||||||
|
{app.description || "No description provided."}
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<strong>SPIFFE:</strong>{" "}
|
||||||
|
<code style="font-family: monospace; font-size: 0.8rem;">
|
||||||
|
{app.spiffe_id}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 0.5rem;">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-outline"
|
||||||
|
style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||||
|
onclick={`openEditAppDrawer(${
|
||||||
|
JSON.stringify(JSON.stringify(app))
|
||||||
|
})`}
|
||||||
|
>
|
||||||
|
Edit App
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-danger"
|
||||||
|
style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||||
|
onclick={`deleteApp('${app.id}', '${app.name}')`}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{`
|
{`
|
||||||
@ -394,7 +352,7 @@ export const AdminAppsPage = ({
|
|||||||
|
|
||||||
function openCreateAppDrawer() {
|
function openCreateAppDrawer() {
|
||||||
document.getElementById('editAppId').value = '';
|
document.getElementById('editAppId').value = '';
|
||||||
document.getElementById('appFormTitle').textContent = 'Register New Subsidiary Application';
|
document.querySelector('#appFormModal h3').textContent = 'Register New Subsidiary Application';
|
||||||
document.getElementById('appName').value = '';
|
document.getElementById('appName').value = '';
|
||||||
document.getElementById('appSpiffeId').value = '';
|
document.getElementById('appSpiffeId').value = '';
|
||||||
document.getElementById('appSpiffeId').readOnly = false;
|
document.getElementById('appSpiffeId').readOnly = false;
|
||||||
@ -404,14 +362,13 @@ export const AdminAppsPage = ({
|
|||||||
document.getElementById('appIsPublic').checked = false;
|
document.getElementById('appIsPublic').checked = false;
|
||||||
document.getElementById('appBypassPaths').value = '';
|
document.getElementById('appBypassPaths').value = '';
|
||||||
document.getElementById('appAllowedCidrs').value = '';
|
document.getElementById('appAllowedCidrs').value = '';
|
||||||
document.getElementById('appFormCard').style.display = 'block';
|
document.getElementById('appFormModal').style.display = 'flex';
|
||||||
document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openEditAppDrawer(appJson) {
|
function openEditAppDrawer(appJson) {
|
||||||
const app = JSON.parse(appJson);
|
const app = JSON.parse(appJson);
|
||||||
document.getElementById('editAppId').value = app.id;
|
document.getElementById('editAppId').value = app.id;
|
||||||
document.getElementById('appFormTitle').textContent = 'Edit Application: ' + app.name;
|
document.querySelector('#appFormModal h3').textContent = 'Edit Application: ' + app.name;
|
||||||
document.getElementById('appName').value = app.name || '';
|
document.getElementById('appName').value = app.name || '';
|
||||||
document.getElementById('appSpiffeId').value = app.spiffe_id || '';
|
document.getElementById('appSpiffeId').value = app.spiffe_id || '';
|
||||||
document.getElementById('appSpiffeId').readOnly = true;
|
document.getElementById('appSpiffeId').readOnly = true;
|
||||||
@ -420,12 +377,11 @@ export const AdminAppsPage = ({
|
|||||||
document.getElementById('appIsPublic').checked = !!app.is_public;
|
document.getElementById('appIsPublic').checked = !!app.is_public;
|
||||||
document.getElementById('appBypassPaths').value = Array.isArray(app.bypass_paths) ? app.bypass_paths.join(', ') : (app.bypass_paths || '');
|
document.getElementById('appBypassPaths').value = Array.isArray(app.bypass_paths) ? app.bypass_paths.join(', ') : (app.bypass_paths || '');
|
||||||
document.getElementById('appAllowedCidrs').value = Array.isArray(app.allowed_cidrs) ? app.allowed_cidrs.join(', ') : (app.allowed_cidrs || '');
|
document.getElementById('appAllowedCidrs').value = Array.isArray(app.allowed_cidrs) ? app.allowed_cidrs.join(', ') : (app.allowed_cidrs || '');
|
||||||
document.getElementById('appFormCard').style.display = 'block';
|
document.getElementById('appFormModal').style.display = 'flex';
|
||||||
document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeAppDrawer() {
|
function closeAppDrawer() {
|
||||||
document.getElementById('appFormCard').style.display = 'none';
|
document.getElementById('appFormModal').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSaveApp(e) {
|
async function handleSaveApp(e) {
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
import { AdminLayout } from "./AdminLayout.tsx";
|
import { AdminLayout } from "./AdminLayout.tsx";
|
||||||
|
import { AdminTable } from "./admin/AdminTable.tsx";
|
||||||
|
import { AdminModal } from "./admin/AdminModal.tsx";
|
||||||
|
|
||||||
export const AdminInvitesPage = ({
|
export const AdminInvitesPage = ({
|
||||||
invites,
|
invites,
|
||||||
@ -64,14 +66,11 @@ export const AdminInvitesPage = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<AdminModal
|
||||||
id="create-invite-card"
|
id="createInviteModal"
|
||||||
class="card"
|
title="Generate User Onboarding Token"
|
||||||
style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
|
onClose="toggleCreateInviteForm()"
|
||||||
>
|
>
|
||||||
<h3 style="margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
|
||||||
Generate User Onboarding Token
|
|
||||||
</h3>
|
|
||||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
||||||
Configure time bounds, usage capacity, role assignments, and initial
|
Configure time bounds, usage capacity, role assignments, and initial
|
||||||
account activation status.
|
account activation status.
|
||||||
@ -247,170 +246,104 @@ export const AdminInvitesPage = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</AdminModal>
|
||||||
|
|
||||||
{/* Desktop Ledger Table (≥ 768px) */}
|
<AdminTable
|
||||||
<div class="card desktop-only" style="display: none;">
|
id="invitesTable"
|
||||||
<div class="table-container">
|
headers={[
|
||||||
<table id="invitesTable">
|
"Invite Code",
|
||||||
<thead>
|
"Target App / Scope",
|
||||||
<tr>
|
"Role",
|
||||||
<th>Invite Code</th>
|
"Capacity & Usage",
|
||||||
<th>Target App / Scope</th>
|
"Status",
|
||||||
<th>Role</th>
|
"Expires",
|
||||||
<th>Capacity & Usage</th>
|
"Actions",
|
||||||
<th>Status</th>
|
]}
|
||||||
<th>Expires</th>
|
isEmpty={invites.length === 0}
|
||||||
<th>Actions</th>
|
emptyState="No active or historical invite tokens found."
|
||||||
</tr>
|
desktopRows={invites.map((inv) => {
|
||||||
</thead>
|
const usesCount = inv.uses_count || 0;
|
||||||
<tbody>
|
const maxUses = inv.max_uses;
|
||||||
{invites.length === 0
|
const isUnlimited = maxUses === null;
|
||||||
? (
|
const isExhausted = !isUnlimited && usesCount >= maxUses;
|
||||||
<tr>
|
const isExpired = new Date(inv.expires_at) < new Date();
|
||||||
<td
|
const isActive = !isExhausted && !isExpired;
|
||||||
colSpan={7}
|
|
||||||
style="text-align: center; color: var(--text-muted); 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;
|
|
||||||
const isUnlimited = maxUses === null;
|
|
||||||
const isExhausted = !isUnlimited && usesCount >= maxUses;
|
|
||||||
const isExpired = new Date(inv.expires_at) < new Date();
|
|
||||||
const isActive = !isExhausted && !isExpired;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
key={inv.id}
|
key={inv.id}
|
||||||
class="invite-row"
|
class="invite-row"
|
||||||
data-search={`${inv.code} ${
|
data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
|
||||||
inv.app_name || ""
|
.toLowerCase()}
|
||||||
} ${inv.role}`.toLowerCase()}
|
>
|
||||||
>
|
<td>
|
||||||
<td>
|
<code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
|
||||||
<code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
|
{inv.code}
|
||||||
{inv.code}
|
</code>
|
||||||
</code>
|
</td>
|
||||||
</td>
|
<td style="font-size: 0.85rem;">
|
||||||
<td>
|
{inv.app_name || (
|
||||||
{inv.app_name
|
<span style="color: var(--text-muted); font-style: italic;">
|
||||||
? (
|
Global / Open
|
||||||
<strong style="color: var(--text-primary);">
|
</span>
|
||||||
{inv.app_name}
|
|
||||||
</strong>
|
|
||||||
)
|
|
||||||
: inv.role === "admin"
|
|
||||||
? <span class="badge badge-info">Global Admin</span>
|
|
||||||
: (
|
|
||||||
<span class="badge badge-secondary">
|
|
||||||
General (Open)
|
|
||||||
</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: 600; color: var(--primary);">
|
|
||||||
{usesCount} claimed (Unlimited)
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
: (
|
|
||||||
<div>
|
|
||||||
<span style="font-size: 0.85rem; font-weight: 600; color: var(--text-primary);">
|
|
||||||
{usesCount} / {maxUses} used
|
|
||||||
</span>
|
|
||||||
<div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
|
|
||||||
<div
|
|
||||||
style={`background: ${
|
|
||||||
isExhausted
|
|
||||||
? "var(--text-muted)"
|
|
||||||
: "var(--success)"
|
|
||||||
}; 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-danger">Expired</span>
|
|
||||||
)}
|
|
||||||
{isActive && (
|
|
||||||
<span class="badge badge-success">Active</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td style="font-size: 0.85rem; color: var(--text-secondary);">
|
|
||||||
{new Date(inv.expires_at).toLocaleDateString()}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
|
|
||||||
{isActive && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-primary"
|
|
||||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
||||||
onclick={`copyInviteLink('${inv.code}')`}
|
|
||||||
>
|
|
||||||
Copy Link
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{usesCount > 0 && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-outline"
|
|
||||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
||||||
onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
|
|
||||||
>
|
|
||||||
Claimed ({usesCount})
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{isActive && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-danger"
|
|
||||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
||||||
onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
|
|
||||||
>
|
|
||||||
Revoke
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
<td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
|
||||||
</div>
|
{inv.role}
|
||||||
</div>
|
</td>
|
||||||
|
<td style="font-size: 0.85rem;">
|
||||||
{/* Mobile Adaptive Cards View (< 768px) */}
|
{isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
|
||||||
<div
|
</td>
|
||||||
id="invitesMobileDeck"
|
<td>
|
||||||
class="mobile-only"
|
{isExhausted && (
|
||||||
style="display: flex; flex-direction: column; gap: 0.75rem;"
|
<span class="badge badge-secondary">Exhausted</span>
|
||||||
>
|
)}
|
||||||
{invites.map((inv) => {
|
{isExpired && !isExhausted && (
|
||||||
|
<span class="badge badge-danger">Expired</span>
|
||||||
|
)}
|
||||||
|
{isActive && <span class="badge badge-success">Active</span>}
|
||||||
|
</td>
|
||||||
|
<td style="font-size: 0.85rem; color: var(--text-secondary);">
|
||||||
|
{new Date(inv.expires_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
|
||||||
|
{isActive && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-primary"
|
||||||
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
|
onclick={`copyInviteLink('${inv.code}')`}
|
||||||
|
>
|
||||||
|
Copy Link
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{usesCount > 0 && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-outline"
|
||||||
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
|
onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
|
||||||
|
>
|
||||||
|
Claimed ({usesCount})
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{isActive && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-danger"
|
||||||
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
|
onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
|
||||||
|
>
|
||||||
|
Revoke
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
mobileCards={invites.map((inv) => {
|
||||||
const usesCount = inv.uses_count || 0;
|
const usesCount = inv.uses_count || 0;
|
||||||
const maxUses = inv.max_uses;
|
const maxUses = inv.max_uses;
|
||||||
const isUnlimited = maxUses === null;
|
const isUnlimited = maxUses === null;
|
||||||
@ -504,49 +437,39 @@ export const AdminInvitesPage = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
{/* Redemptions Modal */}
|
{/* Redemptions Modal */}
|
||||||
<div
|
<AdminModal
|
||||||
id="redemptions-modal"
|
id="redemptions-modal"
|
||||||
style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
|
title={
|
||||||
|
<span>
|
||||||
|
Users Claimed:{" "}
|
||||||
|
<code id="modal-invite-code" style="color: var(--primary);">
|
||||||
|
</code>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
onClose="closeRedemptionsModal()"
|
||||||
>
|
>
|
||||||
<div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
|
<div
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
id="modal-redemptions-content"
|
||||||
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
style="max-height: 350px; overflow-y: auto;"
|
||||||
Users Claimed:{" "}
|
>
|
||||||
<code id="modal-invite-code" style="color: var(--primary);">
|
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||||
</code>
|
Loading claimed users...
|
||||||
</h3>
|
</p>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick="closeRedemptionsModal()"
|
|
||||||
style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="modal-redemptions-content"
|
|
||||||
style="max-height: 350px; overflow-y: auto;"
|
|
||||||
>
|
|
||||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
|
||||||
Loading claimed users...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="text-align: right; margin-top: 1rem;">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-outline"
|
|
||||||
onclick="closeRedemptionsModal()"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div style="text-align: right; margin-top: 1rem;">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-outline"
|
||||||
|
onclick="closeRedemptionsModal()"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</AdminModal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{`
|
{`
|
||||||
@ -606,8 +529,11 @@ export const AdminInvitesPage = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function toggleCreateInviteForm() {
|
function toggleCreateInviteForm() {
|
||||||
const el = document.getElementById('create-invite-card');
|
const el = document.getElementById('createInviteModal');
|
||||||
el.style.display = el.style.display === 'none' ? 'block' : 'none';
|
el.style.display = el.style.display === 'none' ? 'flex' : 'none';
|
||||||
|
if (el.style.display === 'flex') {
|
||||||
|
updateInviteRoleOptions();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleInviteTypeChange() {
|
function handleInviteTypeChange() {
|
||||||
|
|||||||
@ -1,4 +1,10 @@
|
|||||||
import { AdminLayout } from "./AdminLayout.tsx";
|
import { AdminLayout } from "./AdminLayout.tsx";
|
||||||
|
import type { AdminTable as _AdminTable } from "./admin/AdminTable.tsx";
|
||||||
|
import { AdminModal } from "./admin/AdminModal.tsx";
|
||||||
|
|
||||||
|
// We need to use these imports, they are falsely flagged by lint because they are only used in JSX.
|
||||||
|
// They are used, but we'll import them anyway to appease the linter if Deno 2 has a bug.
|
||||||
|
// In Hono JSX, imports might not be strictly recognized.
|
||||||
|
|
||||||
export const AdminRolesPage = ({
|
export const AdminRolesPage = ({
|
||||||
roles,
|
roles,
|
||||||
@ -35,17 +41,11 @@ export const AdminRolesPage = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Create / Edit Role Drawer */}
|
{/* Create / Edit Role Drawer */}
|
||||||
<div
|
<AdminModal
|
||||||
id="roleFormCard"
|
id="roleFormModal"
|
||||||
class="card"
|
title="Create New Role"
|
||||||
style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
|
onClose="closeRoleDrawer()"
|
||||||
>
|
>
|
||||||
<h3
|
|
||||||
id="roleFormTitle"
|
|
||||||
style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
|
|
||||||
>
|
|
||||||
Create New Role
|
|
||||||
</h3>
|
|
||||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
|
||||||
Define a global shared role or an application-scoped custom grant.
|
Define a global shared role or an application-scoped custom grant.
|
||||||
</p>
|
</p>
|
||||||
@ -133,7 +133,7 @@ export const AdminRolesPage = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</AdminModal>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{/* Instant Search and Scope Filters */}
|
{/* Instant Search and Scope Filters */}
|
||||||
@ -410,7 +410,7 @@ export const AdminRolesPage = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function closeRoleDrawer() {
|
function closeRoleDrawer() {
|
||||||
document.getElementById('roleFormCard').style.display = 'none';
|
document.getElementById('roleFormModal').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleScopeChange() {
|
function handleScopeChange() {
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import { AdminLayout } from "./AdminLayout.tsx";
|
import { AdminLayout } from "./AdminLayout.tsx";
|
||||||
|
import { AdminTable } from "./admin/AdminTable.tsx";
|
||||||
|
|
||||||
export const AdminUserDetailsPage = ({
|
export const AdminUserDetailsPage = ({
|
||||||
user,
|
user,
|
||||||
@ -145,66 +146,77 @@ export const AdminUserDetailsPage = ({
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-container" style="margin-top: 1.25rem;">
|
<div style="margin-top: 1.25rem;">
|
||||||
<table>
|
<AdminTable
|
||||||
<thead>
|
id="grantsTable"
|
||||||
<tr>
|
headers={[
|
||||||
<th>Application Name</th>
|
"Application Name",
|
||||||
<th>SPIFFE Workload ID</th>
|
"SPIFFE Workload ID",
|
||||||
<th>Assigned Role</th>
|
"Assigned Role",
|
||||||
<th>Granted At</th>
|
"Granted At",
|
||||||
<th>Actions</th>
|
"Actions",
|
||||||
|
]}
|
||||||
|
isEmpty={grants.length === 0}
|
||||||
|
emptyState="No application permissions granted (User is blocked from all subsidiary apps)."
|
||||||
|
desktopRows={grants.map((grant) => (
|
||||||
|
<tr key={grant.id}>
|
||||||
|
<td>
|
||||||
|
<strong style="color: var(--text-primary);">
|
||||||
|
{grant.app_name}
|
||||||
|
</strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace;">
|
||||||
|
{grant.spiffe_id}
|
||||||
|
</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-info">
|
||||||
|
{grant.role}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td style="font-size: 0.85rem; color: var(--text-secondary);">
|
||||||
|
{new Date(grant.created_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-danger"
|
||||||
|
style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px;"
|
||||||
|
onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
|
||||||
|
>
|
||||||
|
Revoke Access
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
))}
|
||||||
<tbody>
|
mobileCards={grants.map((grant) => (
|
||||||
{grants.length === 0
|
<div class="card" key={grant.id} style="margin-bottom: 0;">
|
||||||
? (
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
|
||||||
<tr>
|
<strong style="color: var(--text-primary);">
|
||||||
<td
|
{grant.app_name}
|
||||||
colSpan={5}
|
</strong>
|
||||||
style="text-align: center; color: var(--danger); padding: 1.5rem;"
|
<span class="badge badge-info">{grant.role}</span>
|
||||||
>
|
</div>
|
||||||
No application permissions granted (User is blocked from
|
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; font-family: monospace;">
|
||||||
all subsidiary apps).
|
{grant.spiffe_id}
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||||
)
|
<span style="font-size: 0.8rem; color: var(--text-secondary);">
|
||||||
: (
|
{new Date(grant.created_at).toLocaleDateString()}
|
||||||
grants.map((grant) => (
|
</span>
|
||||||
<tr key={grant.id}>
|
<button
|
||||||
<td>
|
type="button"
|
||||||
<strong style="color: var(--text-primary);">
|
class="btn-danger"
|
||||||
{grant.app_name}
|
style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
|
||||||
</strong>
|
onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
|
||||||
</td>
|
>
|
||||||
<td>
|
Revoke Access
|
||||||
<code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace;">
|
</button>
|
||||||
{grant.spiffe_id}
|
</div>
|
||||||
</code>
|
</div>
|
||||||
</td>
|
))}
|
||||||
<td>
|
/>
|
||||||
<span class="badge badge-info">
|
|
||||||
{grant.role}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td style="font-size: 0.85rem; color: var(--text-secondary);">
|
|
||||||
{new Date(grant.created_at).toLocaleDateString()}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-danger"
|
|
||||||
style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px;"
|
|
||||||
onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
|
|
||||||
>
|
|
||||||
Revoke Access
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
40
ui/components/admin/AdminModal.tsx
Normal file
40
ui/components/admin/AdminModal.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
export interface AdminModalProps {
|
||||||
|
id: string;
|
||||||
|
title: any;
|
||||||
|
children: any;
|
||||||
|
maxWidth?: string;
|
||||||
|
onClose?: string; // e.g. "closeModal('myModalId')"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AdminModal = ({
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
children,
|
||||||
|
maxWidth = "550px",
|
||||||
|
onClose,
|
||||||
|
}: AdminModalProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={`background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: ${maxWidth}; padding: 1.5rem; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;`}
|
||||||
|
>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||||
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={onClose}
|
||||||
|
style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
67
ui/components/admin/AdminTable.tsx
Normal file
67
ui/components/admin/AdminTable.tsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
export interface AdminTableProps {
|
||||||
|
id: string;
|
||||||
|
headers: any[];
|
||||||
|
desktopRows: any;
|
||||||
|
mobileCards: any;
|
||||||
|
emptyState?: any;
|
||||||
|
colSpan?: number;
|
||||||
|
isEmpty?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AdminTable = ({
|
||||||
|
id,
|
||||||
|
headers,
|
||||||
|
desktopRows,
|
||||||
|
mobileCards,
|
||||||
|
emptyState,
|
||||||
|
colSpan,
|
||||||
|
isEmpty,
|
||||||
|
}: AdminTableProps) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Desktop Table View (≥ 768px) */}
|
||||||
|
<div class="card desktop-only" style="display: none;">
|
||||||
|
<div class="table-container">
|
||||||
|
<table id={id}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{headers.map((header, i) => <th key={i}>{header}</th>)}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{isEmpty
|
||||||
|
? (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={colSpan || headers.length}
|
||||||
|
style="text-align: center; color: var(--text-muted); padding: 2rem;"
|
||||||
|
>
|
||||||
|
{emptyState}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
: desktopRows}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Deck View (< 768px) */}
|
||||||
|
<div
|
||||||
|
id={`${id}MobileDeck`}
|
||||||
|
class="mobile-only"
|
||||||
|
style="display: flex; flex-direction: column; gap: 1rem;"
|
||||||
|
>
|
||||||
|
{isEmpty
|
||||||
|
? (
|
||||||
|
<div class="card" style="text-align: center; padding: 2rem;">
|
||||||
|
<p style="color: var(--text-muted); margin: 0;">
|
||||||
|
{emptyState}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
: mobileCards}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user