feat: frontend SSO support

frontend/app/src/components/sso/SsoDeleteConfirmationDialog.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@/components/v1/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/v1/ui/dialog';
+import { useSsoDeleteConfirmation } from '@/hooks/sso/SsoSetupHooks';
+import { Loader2 } from 'lucide-react';
+
+export function SsoDeleteConfirmationDialog() {
+  const { open, onOpenChange, onConfirm, deleting, providerName } =
+    useSsoDeleteConfirmation();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete SSO Configuration?</DialogTitle>
+          <DialogDescription>
+            This will permanently delete the SSO configuration for{' '}
+            <strong>{providerName}</strong>. This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={deleting}
+          >
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} disabled={deleting}>
+            {deleting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              'Delete Configuration'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/app/src/components/sso/SsoErrorAlert.tsx

@@ -0,0 +1,16 @@
+import { Alert, AlertDescription } from '@/components/v1/ui/alert';
+import { useSsoErrorAlert } from '@/hooks/sso/SsoSetupHooks';
+
+export function SsoErrorAlert() {
+  const { message } = useSsoErrorAlert();
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <Alert variant="destructive">
+      <AlertDescription>{message}</AlertDescription>
+    </Alert>
+  );
+}

frontend/app/src/components/sso/SsoErrorText.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export function SsoErrorText({ children }: { children?: React.ReactNode }) {
+  if (!children) {
+    return null;
+  }
+  return <p className="text-xs text-destructive">{children}</p>;
+}

frontend/app/src/components/sso/SsoField.tsx

@@ -0,0 +1,22 @@
+import { Label } from '@/components/v1/ui/label';
+
+export function SsoField({
+  label,
+  htmlFor,
+  children,
+  required,
+}: {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+  required?: boolean;
+}) {
+  return (
+    <div className="grid gap-1.5">
+      <Label htmlFor={htmlFor}>
+        {label} {required && <span className="text-destructive">*</span>}
+      </Label>
+      {children}
+    </div>
+  );
+}

frontend/app/src/components/sso/SsoFormInput.tsx

@@ -0,0 +1,39 @@
+import { SsoErrorText } from './SsoErrorText';
+import { Input } from '@/components/v1/ui/input';
+
+export function SsoFormInput({
+  id,
+  type = 'text',
+  placeholder,
+  value,
+  onChange,
+  error,
+  readOnly,
+  autoComplete,
+  ...dataAttributes
+}: {
+  id: string;
+  type?: string;
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  readOnly?: boolean;
+  autoComplete?: string;
+} & Record<`data-${string}`, string | boolean | undefined>) {
+  return (
+    <>
+      <Input
+        id={id}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        autoComplete={autoComplete}
+        {...dataAttributes}
+      />
+      {error && <SsoErrorText>{error}</SsoErrorText>}
+    </>
+  );
+}

frontend/app/src/components/sso/SsoIdpPicker.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/v1/ui/button';
+import { useSsoIdpPicker } from '@/hooks/sso/SsoSetupHooks';
+import { PROVIDER_CONFIG } from '@/lib/sso/sso-constants';
+import { ProviderKey } from '@/lib/sso/sso-types';
+
+export function SsoIdpPicker() {
+  const { onProviderSelect } = useSsoIdpPicker();
+  const providers = Object.keys(PROVIDER_CONFIG) as ProviderKey[];
+
+  return (
+    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+      {providers.map((p) => (
+        <Button
+          key={p}
+          type="button"
+          onClick={() => onProviderSelect(p)}
+          className="cursor-pointer"
+        >
+          <span className="font-medium">{PROVIDER_CONFIG[p].displayName}</span>
+        </Button>
+      ))}
+    </div>
+  );
+}

frontend/app/src/components/sso/SsoLoadingState.tsx

@@ -0,0 +1,11 @@
+import { Loader2 } from 'lucide-react';
+
+export function SsoLoadingState() {
+  return (
+    <div className="mx-auto max-w-3xl">
+      <div className="flex h-32 items-center justify-center text-muted-foreground">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading…
+      </div>
+    </div>
+  );
+}

frontend/app/src/components/sso/SsoPkceRow.tsx

@@ -0,0 +1,19 @@
+import { Switch } from '@/components/v1/ui/switch';
+
+export function SsoPkceRow({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div className="mt-2 flex items-center justify-between rounded-xl border p-3">
+      <div className="space-y-0.5">
+        <div className="text-sm font-medium">Use PKCE</div>
+        <p className="text-xs text-muted-foreground">Recommended.</p>
+      </div>
+      <Switch checked={checked} onCheckedChange={onChange} />
+    </div>
+  );
+}

frontend/app/src/components/sso/SsoProviderForm.tsx

@@ -0,0 +1,129 @@
+import { SsoField } from './SsoField';
+import { SsoFormInput } from './SsoFormInput';
+import { SsoPkceRow } from './SsoPkceRow';
+import { useSsoProviderForm } from '@/hooks/sso/SsoSetupHooks';
+
+export function SsoProviderForm() {
+  const { form, errors, onChange, isEditMode } = useSsoProviderForm();
+  // Common fields for all providers
+  const commonSsoFields = (
+    <>
+      <SsoField label="Client ID" htmlFor="clientId" required>
+        <SsoFormInput
+          id="clientId"
+          placeholder="client_id"
+          value={form.clientId}
+          onChange={(v) => onChange('clientId', v)}
+          error={errors.clientId}
+          readOnly={isEditMode}
+          autoComplete="off"
+          data-1p-ignore
+          data-bwignore
+          data-lpignore="true"
+          data-protonpass-ignore="true"
+          data-form-type="other"
+        />
+      </SsoField>
+      <SsoField
+        label="Client Secret"
+        htmlFor="clientSecret"
+        required={!isEditMode}
+      >
+        <SsoFormInput
+          id="clientSecret"
+          type="password"
+          placeholder={isEditMode ? 'Leave empty to keep existing' : '••••••••'}
+          value={form.clientSecret}
+          onChange={(v) => onChange('clientSecret', v)}
+          error={errors.clientSecret}
+          autoComplete="off"
+          data-1p-ignore
+          data-bwignore
+          data-lpignore="true"
+          data-protonpass-ignore="true"
+          data-form-type="other"
+        />
+      </SsoField>
+    </>
+  );
+
+  if (form.provider === 'Okta') {
+    return (
+      <>
+        <SsoField label="SSO Domain" htmlFor="ssoDomain" required>
+          <SsoFormInput
+            id="ssoDomain"
+            placeholder="example.okta.com"
+            value={form.ssoDomain || ''}
+            onChange={(v) => onChange('ssoDomain', v)}
+            error={errors.ssoDomain}
+          />
+        </SsoField>
+        {commonSsoFields}
+        <SsoPkceRow
+          checked={form.usesPkce}
+          onChange={(v) => onChange('usesPkce', v)}
+        />
+      </>
+    );
+  }
+
+  if (form.provider === 'MicrosoftEntra') {
+    return (
+      <>
+        <SsoField label="Tenant ID" htmlFor="tenantId" required>
+          <SsoFormInput
+            id="tenantId"
+            placeholder="00000000-0000-0000-0000-000000000000"
+            value={form.tenantId || ''}
+            onChange={(v) => onChange('tenantId', v)}
+            error={errors.tenantId}
+          />
+        </SsoField>
+        {commonSsoFields}
+        <SsoPkceRow
+          checked={form.usesPkce}
+          onChange={(v) => onChange('usesPkce', v)}
+        />
+      </>
+    );
+  }
+
+  // Generic providers (Google, OneLogin, JumpCloud, Generic)
+  return (
+    <>
+      {commonSsoFields}
+      <SsoField label="Authorize URL" htmlFor="authUrl" required>
+        <SsoFormInput
+          id="authUrl"
+          placeholder="https://.../authorize"
+          value={form.authUrl || ''}
+          onChange={(v) => onChange('authUrl', v)}
+          error={errors.authUrl}
+        />
+      </SsoField>
+      <SsoField label="Token URL" htmlFor="tokenUrl" required>
+        <SsoFormInput
+          id="tokenUrl"
+          placeholder="https://.../token"
+          value={form.tokenUrl || ''}
+          onChange={(v) => onChange('tokenUrl', v)}
+          error={errors.tokenUrl}
+        />
+      </SsoField>
+      <SsoField label="Userinfo URL" htmlFor="userinfoUrl" required>
+        <SsoFormInput
+          id="userinfoUrl"
+          placeholder="https://.../userinfo"
+          value={form.userinfoUrl || ''}
+          onChange={(v) => onChange('userinfoUrl', v)}
+          error={errors.userinfoUrl}
+        />
+      </SsoField>
+      <SsoPkceRow
+        checked={form.usesPkce}
+        onChange={(v) => onChange('usesPkce', v)}
+      />
+    </>
+  );
+}

frontend/app/src/components/sso/SsoRedirectUriField.tsx

@@ -0,0 +1,35 @@
+import { SsoField } from './SsoField';
+import { Button } from '@/components/v1/ui/button';
+import { Input } from '@/components/v1/ui/input';
+import { copySsoToClipboard } from '@/lib/sso/sso-utils';
+import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
+
+export function SsoRedirectUriField({ redirectUrl }: { redirectUrl: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <SsoField label="Redirect / Callback URL">
+      <div className="flex items-center gap-2">
+        <Input readOnly value={redirectUrl} tabIndex={-1} />
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => {
+            copySsoToClipboard(redirectUrl, () => {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 500);
+            });
+          }}
+          className="shrink-0 cursor-pointer"
+        >
+          {copied ? (
+            <Check className="h-4 w-4" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </SsoField>
+  );
+}