mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-13 20:27:22 +00:00
7c6df0aa5d
* 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.
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { X } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import {
|
|
Dialog,
|
|
DialogPortal,
|
|
DialogOverlay as AnimateDialogOverlay,
|
|
DialogClose,
|
|
DialogTrigger,
|
|
DialogContent as AnimateDialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from '@/components/animate-ui/primitives/radix/dialog';
|
|
|
|
// Drop-in DialogContent that bundles portal + overlay + close button
|
|
// while delegating animation to animate-ui's spring-based dialog
|
|
const DialogContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
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
|
|
ref={ref}
|
|
className={cn(
|
|
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-glass-border bg-popover p-6 shadow-lg backdrop-blur-[10px] backdrop-saturate-[1.15] sm:rounded-lg',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{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>
|
|
));
|
|
DialogContent.displayName = 'DialogContent';
|
|
|
|
const DialogOverlay = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<typeof AnimateDialogOverlay>
|
|
>((props, ref) => (
|
|
<AnimateDialogOverlay ref={ref} {...props} />
|
|
));
|
|
DialogOverlay.displayName = 'DialogOverlay';
|
|
|
|
// Override DialogFooter to add proper spacing (animate-ui's version has no classes)
|
|
const DialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) => (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
DialogFooter.displayName = 'DialogFooter';
|
|
|
|
export {
|
|
Dialog,
|
|
DialogPortal,
|
|
DialogOverlay,
|
|
DialogTrigger,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogFooter,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
};
|