feat: add Custom OIDC provider and move SSO to Community tier (#626)

* feat: add Custom OIDC provider and move SSO to Community tier

Add a generic Custom OIDC provider that works with any spec-compliant
OIDC identity provider (Keycloak, Authentik, Authelia, Zitadel, KanIDM,
Pocket ID, etc.) via standard discovery. Supports configurable claim
mapping for User ID, Username, and Email fields to handle non-standard
providers.

Move all SSO functionality (LDAP and OIDC) from the Admiral tier to the
Community tier so every user has access to identity provider integration.

Backend: add oidc_custom to AuthProvider type, extend SSOService with
claim mapping fields and env-var seeding, add oidc_custom to route
validation, remove requireAdmiral guards from SSO config endpoints.

Frontend: add Custom OIDC card with Display Name, Issuer URL, and claim
mapping fields to SSOSection; add KeyRound icon on login page; remove
AdmiralGate wrapper and lock icon from SSO settings nav.

Tests: update tier guard expectations, add oidc_custom authorize/config/
provisioning tests and claim mapping coverage. All 992 tests pass.

Docs: add Custom OIDC configuration reference, provider-specific setup
examples, troubleshooting section, and updated screenshots.

* fix: settings dialog close button overlap and combobox styling

Reposition the close button in Settings Hub above the scroll area so
it stays fixed when content scrolls. Increase dialog height to
accommodate the growing number of setting sections.

Fix combobox trigger styling to match Input component tokens
(border-glass-border, bg-input) and eliminate the gap between trigger
and dropdown list (top-full -mt-px). Apply the same fixes to
multi-select-combobox for consistency.

Add items-start to the Scopes/Default Role grid so the combobox
aligns with the adjacent input field. Add showClose prop to
DialogContent for consumers that need custom close button placement.

Update SSO doc screenshots at 1920x900.
This commit is contained in:
Anso
2026-04-15 23:15:28 -04:00
committed by GitHub
parent ccc42d2a7f
commit 7c6df0aa5d
14 changed files with 369 additions and 87 deletions
+2 -2
View File
@@ -99,7 +99,7 @@ export function Combobox({
disabled={disabled}
onClick={() => { if (!disabled) setOpen(true) }}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-glass-border bg-input px-3 py-2 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
!value && "text-muted-foreground"
)}
>
@@ -112,7 +112,7 @@ export function Combobox({
{/* Options list — absolutely positioned overlay */}
{open && (
<div className="absolute left-0 top-[calc(100%+4px)] z-50 w-full rounded-md border border-glass-border bg-popover text-popover-foreground shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2">
<div className="absolute left-0 top-full -mt-px z-50 w-full rounded-md border border-glass-border bg-popover text-popover-foreground shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2">
<div className="max-h-[200px] overflow-y-auto overflow-x-hidden p-1">
{filtered.length === 0 ? (
<div className="py-4 text-center text-sm text-muted-foreground">
+8 -6
View File
@@ -20,8 +20,8 @@ import {
// while delegating animation to animate-ui's spring-based dialog
const DialogContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<typeof AnimateDialogContent>
>(({ className, children, ...props }, ref) => (
React.ComponentProps<typeof AnimateDialogContent> & { showClose?: boolean }
>(({ className, children, showClose = true, ...props }, ref) => (
<DialogPortal>
<AnimateDialogOverlay className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" />
<AnimateDialogContent
@@ -33,10 +33,12 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogClose>
{showClose && (
<DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogClose>
)}
</AnimateDialogContent>
</DialogPortal>
));
@@ -87,7 +87,7 @@ export function MultiSelectCombobox({
disabled={disabled}
onClick={() => { if (!disabled) setOpen(!open) }}
className={cn(
"flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md border border-input bg-transparent px-2.5 text-xs shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
"flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md border border-glass-border bg-input px-2.5 text-xs shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
selected.size > 0 ? "text-foreground" : "text-muted-foreground",
open && "ring-1 ring-ring border-ring"
)}
@@ -97,7 +97,7 @@ export function MultiSelectCombobox({
</button>
{open && (
<div className="absolute left-0 top-[calc(100%+4px)] z-50 min-w-[180px] rounded-md border border-glass-border bg-popover text-popover-foreground shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2">
<div className="absolute left-0 top-full -mt-px z-50 min-w-[180px] rounded-md border border-glass-border bg-popover text-popover-foreground shadow-md backdrop-blur-[10px] backdrop-saturate-[1.15] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2">
{options.length > 5 && (
<div className="p-1.5 border-b border-glass-border">
<input