mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-09 18:32:52 +00:00
feat(sso): split SSO providers by delivery model across tiers (#754)
Custom OIDC stays on Community so self-hosters can wire any spec-compliant OIDC identity provider (Authelia, Keycloak, Authentik, Zitadel, and others). Google, GitHub, and Okta one-click presets move to Skipper. LDAP / Active Directory and scoped RBAC are Admiral-only. Backend enforces the split via a new requireTierForSsoProvider helper in middleware/tierGates.ts, applied after requireAdmin in all four ssoConfig mutation handlers. GET /sso/config (list) stays ungated so downgraded admins can still see previously-configured providers. Invalid provider ids now 400 before the tier check to avoid leaking tier information. Frontend adds a compact mode to PaidGate and AdmiralGate for inline list-item locks, and SSOSection reorders the provider cards as Custom OIDC > Google > GitHub > Okta > LDAP to reinforce the free-to-paid progression. Stale 'SSO is Admiral' copy in AdmiralGate, PaidGate, and the Admiral upgrade card on the License settings page has been replaced to reflect the new split. User-facing licensing, SSO, overview, quickstart, and security docs have been updated with the per-tier provider matrix.
This commit is contained in:
Anso
@@ -6,6 +6,9 @@ import { useLicense } from '@/context/LicenseContext';
|
||||
interface AdmiralGateProps {
|
||||
children: ReactNode;
|
||||
featureName?: string;
|
||||
// Inline compact lock for list items (e.g. a single SSO provider card). Skips
|
||||
// the full-page upsell and dismiss timer; always renders the blurred + pill style.
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const DISMISS_KEY = 'sencho-admiral-upgrade-prompt-dismissed';
|
||||
@@ -16,13 +19,13 @@ function isDismissedFromStorage(): boolean {
|
||||
return !!dismissedAt && Date.now() - parseInt(dismissedAt, 10) < DISMISS_DURATION_MS;
|
||||
}
|
||||
|
||||
export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralGateProps) {
|
||||
export function AdmiralGate({ children, featureName = 'This feature', compact = false }: AdmiralGateProps) {
|
||||
const { isPaid, license } = useLicense();
|
||||
const [dismissed, setDismissed] = useState(isDismissedFromStorage);
|
||||
|
||||
if (isPaid && license?.variant === 'admiral') return <>{children}</>;
|
||||
|
||||
if (dismissed) {
|
||||
if (compact || dismissed) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="opacity-40 pointer-events-none select-none blur-[2px]">
|
||||
@@ -46,7 +49,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG
|
||||
<div className="text-center max-w-md">
|
||||
<h3 className="text-lg font-semibold mb-2">{featureName} requires Sencho Admiral</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Unlock team features like SSO authentication, audit logging, API tokens, and unlimited user accounts with a Sencho Admiral license.
|
||||
Unlock team features like LDAP / Active Directory, audit logging, API tokens, and unlimited user accounts with a Sencho Admiral license.
|
||||
For enterprise pricing or questions, contact{' '}
|
||||
<a href="mailto:licensing@sencho.io" className="text-brand hover:underline">licensing@sencho.io</a>.
|
||||
</p>
|
||||
|
||||
@@ -6,6 +6,9 @@ import { useLicense } from '@/context/LicenseContext';
|
||||
interface PaidGateProps {
|
||||
children: ReactNode;
|
||||
featureName?: string;
|
||||
// Inline compact lock for list items (e.g. a single SSO provider card). Skips
|
||||
// the full-page upsell and dismiss timer; always renders the blurred + pill style.
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const DISMISS_KEY = 'sencho-upgrade-prompt-dismissed';
|
||||
@@ -16,13 +19,13 @@ function isDismissedFromStorage(): boolean {
|
||||
return !!dismissedAt && Date.now() - parseInt(dismissedAt, 10) < DISMISS_DURATION_MS;
|
||||
}
|
||||
|
||||
export function PaidGate({ children, featureName = 'This feature' }: PaidGateProps) {
|
||||
export function PaidGate({ children, featureName = 'This feature', compact = false }: PaidGateProps) {
|
||||
const { isPaid } = useLicense();
|
||||
const [dismissed, setDismissed] = useState(isDismissedFromStorage);
|
||||
|
||||
if (isPaid) return <>{children}</>;
|
||||
|
||||
if (dismissed) {
|
||||
if (compact || dismissed) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="opacity-40 pointer-events-none select-none blur-[2px]">
|
||||
@@ -31,7 +34,7 @@ export function PaidGate({ children, featureName = 'This feature' }: PaidGatePro
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-8">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted/80 border border-border text-muted-foreground text-xs">
|
||||
<Compass className="w-3 h-3" />
|
||||
Upgrade to unlock more features
|
||||
Upgrade to unlock {featureName}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +49,7 @@ export function PaidGate({ children, featureName = 'This feature' }: PaidGatePro
|
||||
<div className="text-center max-w-md">
|
||||
<h3 className="text-lg font-semibold mb-2">{featureName} requires a paid license</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Unlock features like fleet management, viewer accounts, and more with a Skipper or Admiral license.
|
||||
Unlock features like fleet management, viewer accounts, one-click Google / GitHub / Okta SSO, and more with a Skipper or Admiral license.
|
||||
For enterprise pricing or questions, contact{' '}
|
||||
<a href="mailto:licensing@sencho.io" className="text-brand hover:underline">licensing@sencho.io</a>.
|
||||
</p>
|
||||
|
||||
@@ -8,6 +8,8 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { CapabilityGate } from './CapabilityGate';
|
||||
import { PaidGate } from './PaidGate';
|
||||
import { AdmiralGate } from './AdmiralGate';
|
||||
import { Loader2, CheckCircle, XCircle } from 'lucide-react';
|
||||
|
||||
const ROLE_OPTIONS = [
|
||||
@@ -42,12 +44,14 @@ interface SSOProviderConfig {
|
||||
oidcEmailClaim?: string;
|
||||
}
|
||||
|
||||
// Ordered by tier: Custom OIDC (Community) → preset OIDC (Skipper) → LDAP/AD (Admiral).
|
||||
// The ordering reinforces the free → paid progression in the UI.
|
||||
const PROVIDERS = [
|
||||
{ id: 'ldap', label: 'LDAP / Active Directory', type: 'ldap' as const },
|
||||
{ id: 'oidc_custom', label: 'Custom OIDC', type: 'oidc' as const },
|
||||
{ id: 'oidc_google', label: 'Google', type: 'oidc' as const },
|
||||
{ id: 'oidc_github', label: 'GitHub', type: 'oidc' as const },
|
||||
{ id: 'oidc_okta', label: 'Okta', type: 'oidc' as const },
|
||||
{ id: 'oidc_custom', label: 'Custom OIDC', type: 'oidc' as const },
|
||||
{ id: 'ldap', label: 'LDAP / Active Directory', type: 'ldap' as const },
|
||||
];
|
||||
|
||||
function ProviderCard({ providerId, type, label, initialConfig, onSave }: {
|
||||
@@ -379,6 +383,23 @@ function ProviderCard({ providerId, type, label, initialConfig, onSave }: {
|
||||
);
|
||||
}
|
||||
|
||||
// Mirrors the backend tier split in ssoConfig.ts requireTierForProvider: Custom OIDC
|
||||
// is free, preset OIDC (Google/GitHub/Okta) requires Skipper+, LDAP requires Admiral.
|
||||
function ProviderCardWithGate(props: {
|
||||
providerId: string;
|
||||
type: 'ldap' | 'oidc';
|
||||
label: string;
|
||||
initialConfig: SSOProviderConfig | null;
|
||||
onSave: () => void;
|
||||
}) {
|
||||
const card = <ProviderCard {...props} />;
|
||||
if (props.providerId === 'oidc_custom') return card;
|
||||
if (props.providerId === 'ldap') {
|
||||
return <AdmiralGate compact featureName="LDAP / Active Directory">{card}</AdmiralGate>;
|
||||
}
|
||||
return <PaidGate compact featureName={`${props.label} SSO`}>{card}</PaidGate>;
|
||||
}
|
||||
|
||||
export function SSOSection() {
|
||||
const [configs, setConfigs] = useState<SSOProviderConfig[]>([]);
|
||||
|
||||
@@ -399,7 +420,7 @@ export function SSOSection() {
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
{PROVIDERS.map(p => (
|
||||
<ProviderCard
|
||||
<ProviderCardWithGate
|
||||
key={p.id}
|
||||
providerId={p.id}
|
||||
type={p.type}
|
||||
|
||||
@@ -177,7 +177,7 @@ export function LicenseSection() {
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Professional tools for solo operators.</p>
|
||||
<ul className="space-y-1.5">
|
||||
{['Fleet View with drill-down', 'Viewer accounts (1 admin + 3 viewers)', 'Webhooks & stack labels', 'Atomic deployments & backups', 'Auto-update policies'].map((f) => (
|
||||
{['Fleet View with drill-down', 'Viewer accounts (1 admin + 3 viewers)', 'Webhooks & stack labels', 'Atomic deployments & backups', 'Auto-update policies', 'Google / GitHub / Okta SSO'].map((f) => (
|
||||
<li key={f} className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Check className="w-3 h-3 shrink-0 text-success" />
|
||||
{f}
|
||||
@@ -208,7 +208,7 @@ export function LicenseSection() {
|
||||
...(license?.variant === 'skipper' ? ['Everything in Skipper'] : ['Everything in Community']),
|
||||
'Unlimited accounts & scoped RBAC',
|
||||
...(license?.variant !== 'skipper' ? ['Fleet View, webhooks & labels', 'Atomic deployments & backups'] : []),
|
||||
'SSO, audit log & host console',
|
||||
'LDAP/AD, audit log & host console',
|
||||
'API tokens & private registries',
|
||||
'Scheduled operations',
|
||||
].map((f) => (
|
||||
|
||||
Reference in New Issue
Block a user