mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 17:08:10 +00:00
Anso
865d792874
* feat(pricing): collapse to two tiers (Community + Admiral) Collapse Sencho's pricing from three tiers (Community / Skipper / Admiral) to two: a generous free Community tier and a single paid Admiral tier. The Skipper tier is removed. Now free in Community: auto-heal, auto-update, scheduled operations, webhooks, notification routing, Fleet Actions and bulk operations, SSO preset providers (Google / GitHub / Okta), unlimited users with admin and viewer roles, and deploy safety (atomic deploys, auto-rollback, and one-click rollback). Admiral (paid) is focused on running and governing a fleet: blueprints, Fleet Secrets, deploy enforcement, vulnerability report export, audit log, host console, private registries, mesh networking, node cordon, managed cloud backup, LDAP / Active Directory SSO, and the advanced RBAC roles (deployer, node-admin, auditor) with per-resource scoped assignments. Internally the license variant distinction is removed so tier is binary (community / paid). License validation still verifies the Lemon Squeezy store and product before granting paid status. Docs and the contributor guide are updated to the two-tier model. * docs(pricing): correct licensing page to two-tier pricing and tidy stale tier wording The licensing docs page kept the old Admiral pricing plus a Founder Lifetime column and an Enterprise paragraph after the two-tier collapse. Update it to $12/month or $99/year, drop the lifetime and Enterprise content, and link to the pricing page for current pricing. Also fix stale "Skipper" wording in CLA.md, SUPPORT.md, one test title, and three test comments. Historical CHANGELOG entries and the retired-Skipper license-guard test are intentionally left as-is. * docs: align licensing and SSO pages with the two-tier model Correct the SSO overview so the Google, GitHub, and Okta presets read as available on every tier, matching the provider table; only LDAP and Active Directory require Sencho Admiral. Remove the lifetime-plan references from the licensing, settings, and troubleshooting pages so they reflect subscription-only Admiral pricing. * fix(rbac): omit scoped permissions from /me on the Community tier Scoped role assignments only take effect on the paid tier, but GET /api/permissions/me returned them unconditionally, so a downgraded instance with leftover assignments rendered per-resource affordances the API then rejected with 403. The endpoint now mirrors the permission middleware and includes scoped permissions only on the paid tier. Adds a regression test covering the downgrade case. * docs: use custom-pricing wording on the contact page The two-tier model has no Enterprise tier; reword the contact page's enterprise pricing/deals to custom pricing/deals so it does not imply a tier that no longer exists.
470 lines
24 KiB
TypeScript
470 lines
24 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { TogglePill } from '@/components/ui/toggle-pill';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Combobox } from '@/components/ui/combobox';
|
|
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 { Loader2, CheckCircle, XCircle } from 'lucide-react';
|
|
import { SettingsPrimaryButton } from './settings/SettingsActions';
|
|
import { useMastheadStats } from './settings/MastheadStatsContext';
|
|
|
|
const ROLE_OPTIONS = [
|
|
{ value: 'viewer', label: 'Viewer' },
|
|
{ value: 'admin', label: 'Admin' },
|
|
];
|
|
|
|
interface SSOProviderConfig {
|
|
provider: string;
|
|
enabled: boolean;
|
|
displayName: string;
|
|
// LDAP
|
|
ldapUrl?: string;
|
|
ldapBindDn?: string;
|
|
ldapBindPassword?: string;
|
|
ldapSearchBase?: string;
|
|
ldapSearchFilter?: string;
|
|
ldapAdminGroupDn?: string;
|
|
ldapDefaultRole?: string;
|
|
ldapTlsRejectUnauthorized?: boolean;
|
|
// OIDC
|
|
oidcIssuerUrl?: string;
|
|
oidcClientId?: string;
|
|
oidcClientSecret?: string;
|
|
oidcScopes?: string;
|
|
oidcAdminClaim?: string;
|
|
oidcAdminClaimValue?: string;
|
|
oidcDefaultRole?: string;
|
|
// Custom OIDC claim mapping
|
|
oidcIdClaim?: string;
|
|
oidcUsernameClaim?: string;
|
|
oidcEmailClaim?: string;
|
|
}
|
|
|
|
// Ordered by tier: free OIDC (Custom + presets) first, then LDAP/AD (paid).
|
|
// The ordering reinforces the free → paid progression in the UI.
|
|
const PROVIDERS = [
|
|
{ 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: 'ldap', label: 'LDAP / Active Directory', type: 'ldap' as const },
|
|
];
|
|
|
|
function ProviderCard({ providerId, type, label, initialConfig, onSave }: {
|
|
providerId: string;
|
|
type: 'ldap' | 'oidc';
|
|
label: string;
|
|
initialConfig: SSOProviderConfig | null;
|
|
onSave: () => void;
|
|
}) {
|
|
const [config, setConfig] = useState<Partial<SSOProviderConfig>>(initialConfig || { enabled: false });
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState(false);
|
|
const [testResult, setTestResult] = useState<{ success: boolean; error?: string } | null>(null);
|
|
const [expanded, setExpanded] = useState(!!initialConfig?.enabled);
|
|
|
|
const update = (field: string, value: string | boolean) => {
|
|
setConfig(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const body = {
|
|
...config,
|
|
provider: providerId,
|
|
displayName: config.displayName || label,
|
|
};
|
|
const res = await apiFetch(`/sso/config/${providerId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
});
|
|
if (res.ok) {
|
|
toast.success('SSO configuration saved');
|
|
onSave();
|
|
} else {
|
|
const data = await res.json();
|
|
toast.error(data?.error || data?.message || 'Failed to save');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to save SSO configuration');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleTest = async () => {
|
|
setTesting(true);
|
|
setTestResult(null);
|
|
try {
|
|
const res = await apiFetch(`/sso/config/${providerId}/test`, { method: 'POST' });
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
const message = data?.error || data?.message || 'Connection test failed';
|
|
setTestResult({ success: false, error: message });
|
|
toast.error(message);
|
|
return;
|
|
}
|
|
setTestResult(data);
|
|
if (data?.success) {
|
|
toast.success('Connection successful');
|
|
} else {
|
|
toast.error(data?.error || 'Connection failed');
|
|
}
|
|
} catch (error: unknown) {
|
|
const message = (error as Error)?.message || 'Connection test failed';
|
|
setTestResult({ success: false, error: message });
|
|
toast.error(message);
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
const res = await apiFetch(`/sso/config/${providerId}`, { method: 'DELETE' });
|
|
if (res.ok) {
|
|
toast.success('SSO provider removed');
|
|
setConfig({ enabled: false });
|
|
setExpanded(false);
|
|
onSave();
|
|
} else {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to remove provider');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to remove provider');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel transition-colors hover:border-t-card-border-hover">
|
|
<div
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/30 transition-colors"
|
|
onClick={() => setExpanded(!expanded)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="font-medium text-sm">{label}</span>
|
|
{initialConfig?.enabled && (
|
|
<Badge variant="secondary" className="text-xs bg-success-muted text-success border-success/20">
|
|
Active
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<TogglePill
|
|
checked={!!config.enabled}
|
|
onChange={(checked) => update('enabled', checked)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{expanded && (
|
|
<div className="border-t border-border p-4 space-y-4">
|
|
{type === 'ldap' ? (
|
|
<>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Server URL</Label>
|
|
<Input
|
|
placeholder="ldap://ldap.example.com:389"
|
|
value={config.ldapUrl || ''}
|
|
onChange={e => update('ldapUrl', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Bind DN</Label>
|
|
<Input
|
|
placeholder="cn=readonly,dc=example,dc=com"
|
|
value={config.ldapBindDn || ''}
|
|
onChange={e => update('ldapBindDn', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Bind Password</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter to update"
|
|
value={config.ldapBindPassword || ''}
|
|
onChange={e => update('ldapBindPassword', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Search Base</Label>
|
|
<Input
|
|
placeholder="ou=users,dc=example,dc=com"
|
|
value={config.ldapSearchBase || ''}
|
|
onChange={e => update('ldapSearchBase', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Search Filter</Label>
|
|
<Input
|
|
placeholder="(uid={{username}})"
|
|
value={config.ldapSearchFilter || ''}
|
|
onChange={e => update('ldapSearchFilter', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Use <code className="bg-muted px-1 rounded">{'{{username}}'}</code> as placeholder.
|
|
For Active Directory: <code className="bg-muted px-1 rounded">{'(sAMAccountName={{username}})'}</code>
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Group DN</Label>
|
|
<Input
|
|
placeholder="cn=sencho-admins,ou=groups,dc=..."
|
|
value={config.ldapAdminGroupDn || ''}
|
|
onChange={e => update('ldapAdminGroupDn', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Default Role</Label>
|
|
<Combobox
|
|
options={ROLE_OPTIONS}
|
|
value={config.ldapDefaultRole || 'viewer'}
|
|
onValueChange={v => update('ldapDefaultRole', v)}
|
|
placeholder="Select role"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<TogglePill
|
|
checked={config.ldapTlsRejectUnauthorized !== false}
|
|
onChange={checked => update('ldapTlsRejectUnauthorized', checked)}
|
|
/>
|
|
<Label className="text-xs text-muted-foreground">Verify TLS certificate</Label>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{providerId === 'oidc_custom' && (
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Display Name</Label>
|
|
<Input
|
|
placeholder="My Identity Provider"
|
|
value={config.displayName || ''}
|
|
onChange={e => update('displayName', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Name shown on the login button (e.g., "Corporate SSO").
|
|
</p>
|
|
</div>
|
|
)}
|
|
{(providerId === 'oidc_okta' || providerId === 'oidc_custom') && (
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Issuer URL</Label>
|
|
<Input
|
|
placeholder={providerId === 'oidc_okta' ? 'https://dev-123456.okta.com' : 'https://auth.example.com/realms/myrealm'}
|
|
value={config.oidcIssuerUrl || ''}
|
|
onChange={e => update('oidcIssuerUrl', e.target.value)}
|
|
/>
|
|
{providerId === 'oidc_custom' && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Base URL of the OIDC discovery endpoint (without <code className="bg-muted px-1 rounded">/.well-known/openid-configuration</code>).
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Client ID</Label>
|
|
<Input
|
|
placeholder="Client ID"
|
|
value={config.oidcClientId || ''}
|
|
onChange={e => update('oidcClientId', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Client Secret</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter to update"
|
|
value={config.oidcClientSecret || ''}
|
|
onChange={e => update('oidcClientSecret', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Claim</Label>
|
|
<Input
|
|
placeholder="groups"
|
|
value={config.oidcAdminClaim || ''}
|
|
onChange={e => update('oidcAdminClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Admin Claim Value</Label>
|
|
<Input
|
|
placeholder="sencho-admins"
|
|
value={config.oidcAdminClaimValue || ''}
|
|
onChange={e => update('oidcAdminClaimValue', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 items-start">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Scopes</Label>
|
|
<Input
|
|
placeholder="openid email profile"
|
|
value={config.oidcScopes || ''}
|
|
onChange={e => update('oidcScopes', e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Space-separated list of OAuth scopes. Leave blank for default.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Default Role</Label>
|
|
<Combobox
|
|
options={ROLE_OPTIONS}
|
|
value={config.oidcDefaultRole || 'viewer'}
|
|
onValueChange={v => update('oidcDefaultRole', v)}
|
|
placeholder="Select role"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{providerId === 'oidc_custom' && (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">User ID Claim</Label>
|
|
<Input
|
|
placeholder="sub"
|
|
value={config.oidcIdClaim || ''}
|
|
onChange={e => update('oidcIdClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Username Claim</Label>
|
|
<Input
|
|
placeholder="preferred_username"
|
|
value={config.oidcUsernameClaim || ''}
|
|
onChange={e => update('oidcUsernameClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label className="text-xs text-muted-foreground">Email Claim</Label>
|
|
<Input
|
|
placeholder="email"
|
|
value={config.oidcEmailClaim || ''}
|
|
onChange={e => update('oidcEmailClaim', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Map claims from your provider's token to Sencho user fields. Leave blank for standard OIDC defaults.
|
|
</p>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between pt-2">
|
|
<div className="flex items-center gap-2">
|
|
<SettingsPrimaryButton size="sm" onClick={handleSave} disabled={saving}>
|
|
{saving ? <><Loader2 className="w-3 h-3 animate-spin" /> Saving</> : 'Save'}
|
|
</SettingsPrimaryButton>
|
|
<Button size="sm" variant="outline" onClick={handleTest} disabled={testing}>
|
|
{testing ? <><Loader2 className="w-3 h-3 mr-1 animate-spin" /> Testing...</> : 'Test Connection'}
|
|
</Button>
|
|
{testResult && (
|
|
testResult.success
|
|
? <CheckCircle className="w-4 h-4 text-success" />
|
|
: <XCircle className="w-4 h-4 text-destructive" />
|
|
)}
|
|
</div>
|
|
{initialConfig && (
|
|
<Button size="sm" variant="ghost" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground" onClick={handleDelete}>
|
|
Remove
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Mirrors the backend tier split in ssoConfig.ts requireTierForProvider: Custom OIDC
|
|
// and preset OIDC (Google/GitHub/Okta) are free, LDAP/AD requires the paid plan.
|
|
function ProviderCardWithGate(props: {
|
|
providerId: string;
|
|
type: 'ldap' | 'oidc';
|
|
label: string;
|
|
initialConfig: SSOProviderConfig | null;
|
|
onSave: () => void;
|
|
}) {
|
|
const card = <ProviderCard {...props} />;
|
|
if (props.providerId === 'ldap') {
|
|
return <PaidGate>{card}</PaidGate>;
|
|
}
|
|
return card;
|
|
}
|
|
|
|
export function SSOSection() {
|
|
const [configs, setConfigs] = useState<SSOProviderConfig[]>([]);
|
|
|
|
const fetchConfigs = async () => {
|
|
try {
|
|
const res = await apiFetch('/sso/config');
|
|
if (res.ok) {
|
|
setConfigs(await res.json());
|
|
} else {
|
|
const data = await res.json().catch(() => null);
|
|
toast.error(data?.error || data?.message || 'Failed to load SSO configuration');
|
|
}
|
|
} catch (error: unknown) {
|
|
toast.error((error as Error)?.message || 'Failed to load SSO configuration');
|
|
}
|
|
};
|
|
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
useEffect(() => { fetchConfigs(); }, []);
|
|
|
|
const enabledProviders = configs.filter(c => c.enabled).length;
|
|
useMastheadStats([
|
|
{ label: 'PROVIDERS', value: `${configs.length}` },
|
|
{
|
|
label: 'ENABLED',
|
|
value: `${enabledProviders}`,
|
|
tone: enabledProviders > 0 ? 'value' : 'subtitle',
|
|
},
|
|
]);
|
|
|
|
const getConfig = (provider: string) => configs.find(c => c.provider === provider) || null;
|
|
|
|
return (
|
|
<CapabilityGate capability="sso" featureName="SSO Authentication">
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
{PROVIDERS.map(p => (
|
|
<ProviderCardWithGate
|
|
key={p.id}
|
|
providerId={p.id}
|
|
type={p.type}
|
|
label={p.label}
|
|
initialConfig={getConfig(p.id)}
|
|
onSave={fetchConfigs}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground space-y-1">
|
|
<p>SSO users are automatically provisioned on first login and assigned a role based on your identity provider's group membership.</p>
|
|
<p>For OIDC providers, set the OAuth callback URL to: <code className="bg-muted px-1 rounded">{'https://<your-sencho-url>/api/auth/sso/oidc/<provider>/callback'}</code></p>
|
|
</div>
|
|
</div>
|
|
</CapabilityGate>
|
|
);
|
|
}
|