feat: add OIDC Config admin page
This commit is contained in:
hsiegeln
65
src/pages/Admin/OidcConfig/OidcConfig.module.css
Normal file
65
src/pages/Admin/OidcConfig/OidcConfig.module.css
Normal file
@@ -0,0 +1,65 @@
|
||||
.page {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toggleRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.tagList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.noRoles {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
font-style: italic;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.addRoleRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.roleInput {
|
||||
width: 200px;
|
||||
}
|
||||
191
src/pages/Admin/OidcConfig/OidcConfig.tsx
Normal file
191
src/pages/Admin/OidcConfig/OidcConfig.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { useState } from 'react'
|
||||
import { AdminLayout } from '../Admin'
|
||||
import { Button } from '../../../design-system/primitives/Button/Button'
|
||||
import { Input } from '../../../design-system/primitives/Input/Input'
|
||||
import { Toggle } from '../../../design-system/primitives/Toggle/Toggle'
|
||||
import { FormField } from '../../../design-system/primitives/FormField/FormField'
|
||||
import { Tag } from '../../../design-system/primitives/Tag/Tag'
|
||||
import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
|
||||
import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
|
||||
import { useToast } from '../../../design-system/composites/Toast/Toast'
|
||||
import styles from './OidcConfig.module.css'
|
||||
|
||||
interface OidcFormData {
|
||||
enabled: boolean
|
||||
autoSignup: boolean
|
||||
issuerUri: string
|
||||
clientId: string
|
||||
clientSecret: string
|
||||
rolesClaim: string
|
||||
displayNameClaim: string
|
||||
defaultRoles: string[]
|
||||
}
|
||||
|
||||
const INITIAL_DATA: OidcFormData = {
|
||||
enabled: true,
|
||||
autoSignup: true,
|
||||
issuerUri: 'https://keycloak.example.com/realms/cameleer',
|
||||
clientId: 'cameleer-app',
|
||||
clientSecret: '••••••••••••',
|
||||
rolesClaim: 'realm_access.roles',
|
||||
displayNameClaim: 'name',
|
||||
defaultRoles: ['USER', 'VIEWER'],
|
||||
}
|
||||
|
||||
export function OidcConfig() {
|
||||
const [form, setForm] = useState<OidcFormData>(INITIAL_DATA)
|
||||
const [newRole, setNewRole] = useState('')
|
||||
const [deleteOpen, setDeleteOpen] = useState(false)
|
||||
const { toast } = useToast()
|
||||
|
||||
function update<K extends keyof OidcFormData>(key: K, value: OidcFormData[K]) {
|
||||
setForm((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
function addRole() {
|
||||
const role = newRole.trim().toUpperCase()
|
||||
if (role && !form.defaultRoles.includes(role)) {
|
||||
update('defaultRoles', [...form.defaultRoles, role])
|
||||
setNewRole('')
|
||||
}
|
||||
}
|
||||
|
||||
function removeRole(role: string) {
|
||||
update('defaultRoles', form.defaultRoles.filter((r) => r !== role))
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
toast({ title: 'Settings saved', description: 'OIDC configuration updated successfully.', variant: 'success' })
|
||||
}
|
||||
|
||||
function handleTest() {
|
||||
toast({ title: 'Connection test', description: 'OIDC provider responded successfully.', variant: 'info' })
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
setDeleteOpen(false)
|
||||
setForm({ ...INITIAL_DATA, enabled: false, issuerUri: '', clientId: '', clientSecret: '', defaultRoles: [] })
|
||||
toast({ title: 'Configuration deleted', description: 'OIDC configuration has been removed.', variant: 'warning' })
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout title="OIDC Configuration">
|
||||
<div className={styles.page}>
|
||||
<div className={styles.header}>
|
||||
<h2 className={styles.title}>OIDC Configuration</h2>
|
||||
<div className={styles.headerActions}>
|
||||
<Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri}>
|
||||
Test Connection
|
||||
</Button>
|
||||
<Button size="sm" variant="primary" onClick={handleSave}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className={styles.section}>
|
||||
<SectionHeader>Behavior</SectionHeader>
|
||||
<div className={styles.toggleRow}>
|
||||
<Toggle
|
||||
label="Enabled"
|
||||
checked={form.enabled}
|
||||
onChange={(e) => update('enabled', e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.toggleRow}>
|
||||
<Toggle
|
||||
label="Auto Sign-Up"
|
||||
checked={form.autoSignup}
|
||||
onChange={(e) => update('autoSignup', e.target.checked)}
|
||||
/>
|
||||
<span className={styles.hint}>Automatically create accounts for new OIDC users</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<SectionHeader>Provider Settings</SectionHeader>
|
||||
<FormField label="Issuer URI" htmlFor="issuer">
|
||||
<Input
|
||||
id="issuer"
|
||||
type="url"
|
||||
placeholder="https://idp.example.com/realms/my-realm"
|
||||
value={form.issuerUri}
|
||||
onChange={(e) => update('issuerUri', e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Client ID" htmlFor="client-id">
|
||||
<Input
|
||||
id="client-id"
|
||||
value={form.clientId}
|
||||
onChange={(e) => update('clientId', e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Client Secret" htmlFor="client-secret">
|
||||
<Input
|
||||
id="client-secret"
|
||||
type="password"
|
||||
value={form.clientSecret}
|
||||
onChange={(e) => update('clientSecret', e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<SectionHeader>Claim Mapping</SectionHeader>
|
||||
<FormField label="Roles Claim" htmlFor="roles-claim" hint="JSON path to roles in the ID token">
|
||||
<Input
|
||||
id="roles-claim"
|
||||
value={form.rolesClaim}
|
||||
onChange={(e) => update('rolesClaim', e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Display Name Claim" htmlFor="name-claim" hint="Claim used for user display name">
|
||||
<Input
|
||||
id="name-claim"
|
||||
value={form.displayNameClaim}
|
||||
onChange={(e) => update('displayNameClaim', e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<SectionHeader>Default Roles</SectionHeader>
|
||||
<div className={styles.tagList}>
|
||||
{form.defaultRoles.map((role) => (
|
||||
<Tag key={role} label={role} color="primary" onRemove={() => removeRole(role)} />
|
||||
))}
|
||||
{form.defaultRoles.length === 0 && (
|
||||
<span className={styles.noRoles}>No default roles configured</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.addRoleRow}>
|
||||
<Input
|
||||
placeholder="Add role..."
|
||||
value={newRole}
|
||||
onChange={(e) => setNewRole(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addRole() } }}
|
||||
className={styles.roleInput}
|
||||
/>
|
||||
<Button size="sm" variant="secondary" onClick={addRole} disabled={!newRole.trim()}>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<SectionHeader>Danger Zone</SectionHeader>
|
||||
<Button size="sm" variant="danger" onClick={() => setDeleteOpen(true)}>
|
||||
Delete OIDC Configuration
|
||||
</Button>
|
||||
<ConfirmDialog
|
||||
open={deleteOpen}
|
||||
onClose={() => setDeleteOpen(false)}
|
||||
onConfirm={handleDelete}
|
||||
message="Delete OIDC configuration? All users signed in via OIDC will lose access."
|
||||
confirmText="delete oidc"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user