65f59521c0
Phase 2 Admin Drawers & Scripts execution: - Extract `AppDrawer`, `InviteDrawer`, `RoleEditorDrawer`, and `GrantDrawer`. - Extract `AdminAppsScript`, `AdminInvitesScript`, `AdminRolesScript`, and `AdminUserDetailsScript`. - Hook extracted components into their respective pages. - Format `AdminRolesPage.tsx` and all modified files using `deno fmt`. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
100 lines
3.3 KiB
XML
100 lines
3.3 KiB
XML
import { AdminModal } from "../AdminModal.tsx";
|
|
|
|
export const RoleEditorDrawer = ({ apps }: { apps: any[] }) => {
|
|
return (
|
|
<AdminModal
|
|
id="roleFormModal"
|
|
title="Create New Role"
|
|
onClose="closeRoleDrawer()"
|
|
>
|
|
<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.
|
|
</p>
|
|
|
|
<form id="roleForm" onsubmit="handleSaveRole(event)">
|
|
<input type="hidden" id="editRoleId" value="" />
|
|
|
|
<div
|
|
id="scopeSelectContainer"
|
|
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;"
|
|
>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
|
|
Scope (Applicability) *
|
|
</label>
|
|
<select
|
|
id="roleScope"
|
|
onchange="handleScopeChange()"
|
|
style="width: 100%;"
|
|
>
|
|
<option value="global">
|
|
Global (Shared across ALL applications)
|
|
</option>
|
|
<option value="app_specific">
|
|
Application-Specific (Scoped to single app)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="appSelectContainer" style="display: none;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
|
|
Target Application *
|
|
</label>
|
|
<select
|
|
id="roleAppId"
|
|
style="width: 100%;"
|
|
>
|
|
{apps.map((app) => (
|
|
<option value={app.id}>
|
|
{app.name} ({app.spiffe_id})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
|
|
Role Identifier *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="roleName"
|
|
placeholder="e.g. navigator, copilot, auditor"
|
|
required
|
|
style="width: 100%;"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
|
|
Description / Purpose
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="roleDescription"
|
|
placeholder="e.g. Flight routing and navigational telemetry access"
|
|
style="width: 100%;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.75rem;">
|
|
<button type="submit" class="btn-primary" style="min-height: 42px;">
|
|
Save Role
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
onclick="closeRoleDrawer()"
|
|
style="min-height: 42px;"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AdminModal>
|
|
);
|
|
};
|