refactor(ui): move SSO, Export/Import, System Info from SystemPage to Settings
Aegis CI / lint-and-test (push) Has been cancelled
Aegis CI / lint-and-test (push) Has been cancelled
SystemPage now only shows operational content: MITRE Sync, Intel Scan, ATT&CK Evaluations, Scheduled Jobs, and Template Management. Settings gets two new admin-only tabs: - "SSO / Azure AD": full SAML 2.0 wizard (5-step setup for Azure AD) - "System": System Status + Version Info + Configuration Export/Import Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
kitos
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
Settings,
|
Settings,
|
||||||
@@ -19,8 +19,26 @@ import {
|
|||||||
Edit2,
|
Edit2,
|
||||||
X,
|
X,
|
||||||
Link2,
|
Link2,
|
||||||
|
KeyRound,
|
||||||
|
Copy,
|
||||||
|
Building2,
|
||||||
|
Server,
|
||||||
|
Database,
|
||||||
|
HardDrive,
|
||||||
|
Clock,
|
||||||
|
PackageOpen,
|
||||||
|
Download,
|
||||||
|
Upload,
|
||||||
|
ShieldCheck,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
import client from "../api/client";
|
||||||
|
import {
|
||||||
|
getSsoConfig,
|
||||||
|
updateSsoConfig,
|
||||||
|
type SsoConfig,
|
||||||
|
type SsoConfigUpdate,
|
||||||
|
} from "../api/sso";
|
||||||
import {
|
import {
|
||||||
getEmailConfig,
|
getEmailConfig,
|
||||||
updateEmailConfig,
|
updateEmailConfig,
|
||||||
@@ -1308,11 +1326,484 @@ function JiraConfigSection() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// SSO / Azure AD Config Section (admin only)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const AZURE_ROLES = [
|
||||||
|
{ value: "admin", label: "Aegis Admin", desc: "Full platform access including system settings" },
|
||||||
|
{ value: "red_lead", label: "Aegis Red Lead", desc: "Red team lead — manage tests, campaigns and templates" },
|
||||||
|
{ value: "blue_lead", label: "Aegis Blue Lead", desc: "Blue team lead — validate tests and manage coverage" },
|
||||||
|
{ value: "red_tech", label: "Aegis Red Tech", desc: "Red team technician — execute tests" },
|
||||||
|
{ value: "blue_tech", label: "Aegis Blue Tech", desc: "Blue team technician — review detections" },
|
||||||
|
{ value: "viewer", label: "Aegis Viewer", desc: "Read-only access to dashboards and reports" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function CopyFieldSSO({ value, label }: { value: string; label: string }) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const copy = () => {
|
||||||
|
navigator.clipboard.writeText(value).then(() => {
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-400">{label}</label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="flex-1 truncate rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-cyan-300 font-mono">
|
||||||
|
{value || <span className="text-gray-600 italic">not set</span>}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={copy}
|
||||||
|
disabled={!value}
|
||||||
|
className="flex-shrink-0 rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 transition-colors hover:text-white disabled:opacity-40"
|
||||||
|
title="Copy"
|
||||||
|
>
|
||||||
|
{copied ? <CheckCircle className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SsoConfigSection() {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const origin = typeof window !== "undefined" ? window.location.origin : "";
|
||||||
|
const defaultSpEntityId = `${origin}/api/v1/sso/metadata`;
|
||||||
|
const defaultSpAcsUrl = `${origin}/api/v1/sso/callback`;
|
||||||
|
|
||||||
|
const { data: existingConfig, isLoading: configLoading } = useQuery<SsoConfig | null>({
|
||||||
|
queryKey: ["sso-config"],
|
||||||
|
queryFn: async () => {
|
||||||
|
try { return await getSsoConfig(); } catch { return null; }
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [tenantId, setTenantId] = useState("");
|
||||||
|
const [form, setForm] = useState<SsoConfigUpdate>({
|
||||||
|
is_enabled: false,
|
||||||
|
provider_name: "Azure AD / Entra ID",
|
||||||
|
sp_entity_id: defaultSpEntityId,
|
||||||
|
sp_acs_url: defaultSpAcsUrl,
|
||||||
|
idp_entity_id: "",
|
||||||
|
idp_sso_url: "",
|
||||||
|
idp_certificate: "",
|
||||||
|
attr_email: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
||||||
|
attr_username: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
||||||
|
attr_role: "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
|
||||||
|
default_role: "viewer",
|
||||||
|
auto_provision: true,
|
||||||
|
});
|
||||||
|
const [formLoaded, setFormLoaded] = useState(false);
|
||||||
|
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||||
|
|
||||||
|
if (existingConfig && !formLoaded) {
|
||||||
|
setForm({
|
||||||
|
is_enabled: existingConfig.is_enabled,
|
||||||
|
provider_name: existingConfig.provider_name ?? "Azure AD / Entra ID",
|
||||||
|
sp_entity_id: existingConfig.sp_entity_id ?? defaultSpEntityId,
|
||||||
|
sp_acs_url: existingConfig.sp_acs_url ?? defaultSpAcsUrl,
|
||||||
|
idp_entity_id: existingConfig.idp_entity_id ?? "",
|
||||||
|
idp_sso_url: existingConfig.idp_sso_url ?? "",
|
||||||
|
idp_certificate: existingConfig.idp_certificate ?? "",
|
||||||
|
attr_email: existingConfig.attr_email ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
||||||
|
attr_username: existingConfig.attr_username ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
||||||
|
attr_role: existingConfig.attr_role ?? "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
|
||||||
|
default_role: existingConfig.default_role ?? "viewer",
|
||||||
|
auto_provision: existingConfig.auto_provision ?? true,
|
||||||
|
});
|
||||||
|
if (existingConfig.idp_sso_url) {
|
||||||
|
const m = existingConfig.idp_sso_url.match(/microsoftonline\.com\/([^/]+)\//);
|
||||||
|
if (m) setTenantId(m[1]);
|
||||||
|
}
|
||||||
|
setFormLoaded(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTenantChange = (val: string) => {
|
||||||
|
setTenantId(val);
|
||||||
|
if (val.trim()) {
|
||||||
|
setForm((f) => ({
|
||||||
|
...f,
|
||||||
|
idp_entity_id: `https://sts.windows.net/${val.trim()}/`,
|
||||||
|
idp_sso_url: `https://login.microsoftonline.com/${val.trim()}/saml2`,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (payload: SsoConfigUpdate) => updateSsoConfig(payload),
|
||||||
|
onSuccess: () => {
|
||||||
|
setSaveSuccess(true);
|
||||||
|
setTimeout(() => setSaveSuccess(false), 4000);
|
||||||
|
qc.invalidateQueries({ queryKey: ["sso-config"] });
|
||||||
|
qc.invalidateQueries({ queryKey: ["sso-status"] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSave = (e: React.FormEvent) => { e.preventDefault(); saveMutation.mutate(form); };
|
||||||
|
const isConfigured = !!(form.idp_entity_id && form.idp_sso_url && form.idp_certificate);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-indigo-500/30 bg-gray-900 p-6">
|
||||||
|
<div className="flex flex-wrap items-start justify-between gap-4 mb-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="rounded-lg bg-indigo-500/10 p-3 mt-0.5">
|
||||||
|
<KeyRound className="h-6 w-6 text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-white">Azure AD / Entra ID SSO</h2>
|
||||||
|
<p className="mt-1 text-sm text-gray-400 max-w-2xl">
|
||||||
|
Delegate authentication to Azure Active Directory via SAML 2.0.
|
||||||
|
Users sign in with corporate credentials; roles assigned automatically via Azure App Roles.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${
|
||||||
|
form.is_enabled && isConfigured
|
||||||
|
? "border-green-500/40 bg-green-900/20 text-green-400"
|
||||||
|
: "border-gray-600 bg-gray-800/50 text-gray-400"
|
||||||
|
}`}>
|
||||||
|
{form.is_enabled && isConfigured
|
||||||
|
? <><CheckCircle className="h-3 w-3" /> Active</>
|
||||||
|
: <><XCircle className="h-3 w-3" /> {isConfigured ? "Disabled" : "Not configured"}</>}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{configLoading ? (
|
||||||
|
<div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-indigo-400" /></div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSave} className="space-y-8">
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">1</span>
|
||||||
|
<h3 className="text-sm font-semibold text-white">Give these values to your IT team</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
||||||
|
<CopyFieldSSO label="Entity ID (Identifier)" value={form.sp_entity_id ?? defaultSpEntityId} />
|
||||||
|
<CopyFieldSSO label="Reply URL (Assertion Consumer Service)" value={form.sp_acs_url ?? defaultSpAcsUrl} />
|
||||||
|
<div className="pt-1">
|
||||||
|
<a href="/api/v1/sso/metadata" target="_blank" rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-500/30 bg-indigo-900/20 px-3 py-1.5 text-xs font-medium text-indigo-400 transition-colors hover:bg-indigo-900/40">
|
||||||
|
<Download className="h-3.5 w-3.5" /> Download SP Metadata XML
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">2</span>
|
||||||
|
<h3 className="text-sm font-semibold text-white">Create App Roles in Azure</h3>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800/30">
|
||||||
|
<table className="w-full text-left text-xs">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-gray-700">
|
||||||
|
<th className="px-4 py-2.5 font-semibold text-gray-400">Display Name</th>
|
||||||
|
<th className="px-4 py-2.5 font-semibold text-gray-400">Value (exact)</th>
|
||||||
|
<th className="px-4 py-2.5 font-semibold text-gray-400">Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{AZURE_ROLES.map((r) => (
|
||||||
|
<tr key={r.value} className="border-b border-gray-700/50 hover:bg-gray-700/20">
|
||||||
|
<td className="px-4 py-2.5 text-gray-200">{r.label}</td>
|
||||||
|
<td className="px-4 py-2.5"><code className="rounded bg-gray-800 px-1.5 py-0.5 text-indigo-300 font-mono">{r.value}</code></td>
|
||||||
|
<td className="px-4 py-2.5 text-gray-400">{r.desc}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">3</span>
|
||||||
|
<h3 className="text-sm font-semibold text-white">Enter Azure tenant details</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Tenant ID <span className="text-gray-500">(auto-fills fields below)</span></label>
|
||||||
|
<input type="text" value={tenantId} onChange={(e) => handleTenantChange(e.target.value)}
|
||||||
|
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
<p className="mt-1 text-xs text-gray-500">Azure AD → Overview → Tenant ID</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">IdP Entity ID <span className="text-red-400">*</span></label>
|
||||||
|
<input type="text" value={form.idp_entity_id ?? ""} onChange={(e) => setForm({ ...form, idp_entity_id: e.target.value })}
|
||||||
|
placeholder="https://sts.windows.net/{tenant-id}/"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">SSO URL <span className="text-red-400">*</span></label>
|
||||||
|
<input type="text" value={form.idp_sso_url ?? ""} onChange={(e) => setForm({ ...form, idp_sso_url: e.target.value })}
|
||||||
|
placeholder="https://login.microsoftonline.com/{tenant-id}/saml2"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Display name <span className="text-gray-500">(shown on login page)</span></label>
|
||||||
|
<input type="text" value={form.provider_name ?? ""} onChange={(e) => setForm({ ...form, provider_name: e.target.value })}
|
||||||
|
placeholder="Azure AD / Entra ID"
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 4 */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">4</span>
|
||||||
|
<h3 className="text-sm font-semibold text-white">Paste IdP certificate</h3>
|
||||||
|
</div>
|
||||||
|
<textarea value={form.idp_certificate ?? ""} onChange={(e) => setForm({ ...form, idp_certificate: e.target.value })}
|
||||||
|
placeholder={"-----BEGIN CERTIFICATE-----\nMIIC...base64...\n-----END CERTIFICATE-----"}
|
||||||
|
rows={5}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
<p className="mt-1 text-xs text-gray-500">Azure AD → Enterprise App → Single sign-on → SAML Signing Certificate → Download Base64</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 5 */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">5</span>
|
||||||
|
<h3 className="text-sm font-semibold text-white">Attribute mapping</h3>
|
||||||
|
<span className="text-xs text-gray-500">(pre-filled with Azure AD defaults)</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Email attribute</label>
|
||||||
|
<input type="text" value={form.attr_email ?? ""} onChange={(e) => setForm({ ...form, attr_email: e.target.value })}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Username attribute</label>
|
||||||
|
<input type="text" value={form.attr_username ?? ""} onChange={(e) => setForm({ ...form, attr_username: e.target.value })}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Role attribute</label>
|
||||||
|
<input type="text" value={form.attr_role ?? ""} onChange={(e) => setForm({ ...form, attr_role: e.target.value })}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono" />
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-xs font-medium text-gray-300">Default role</label>
|
||||||
|
<select value={form.default_role ?? "viewer"} onChange={(e) => setForm({ ...form, default_role: e.target.value })}
|
||||||
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-indigo-500 focus:outline-none">
|
||||||
|
{AZURE_ROLES.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-end pb-0.5">
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input type="checkbox" checked={form.auto_provision ?? true}
|
||||||
|
onChange={(e) => setForm({ ...form, auto_provision: e.target.checked })}
|
||||||
|
className="h-4 w-4 rounded accent-indigo-500" />
|
||||||
|
<span className="text-sm text-gray-300">Auto-provision new users</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enable + Save */}
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<div onClick={() => setForm((f) => ({ ...f, is_enabled: !f.is_enabled }))}
|
||||||
|
className={`relative h-6 w-11 rounded-full transition-colors ${form.is_enabled ? "bg-indigo-600" : "bg-gray-600"}`}>
|
||||||
|
<span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${form.is_enabled ? "translate-x-5" : "translate-x-0.5"}`} />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-200">
|
||||||
|
{form.is_enabled ? "SSO enabled — Azure AD is primary login" : "SSO disabled — local login only"}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{saveSuccess && <span className="flex items-center gap-1.5 text-sm text-green-400"><CheckCircle className="h-4 w-4" /> Saved</span>}
|
||||||
|
{saveMutation.isError && <span className="text-sm text-red-400">{(saveMutation.error as Error)?.message ?? "Save failed"}</span>}
|
||||||
|
<button type="submit" disabled={saveMutation.isPending || !isConfigured}
|
||||||
|
className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
|
||||||
|
title={!isConfigured ? "Fill in IdP Entity ID, SSO URL, and Certificate first" : undefined}>
|
||||||
|
{saveMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Building2 className="h-4 w-4" />}
|
||||||
|
{saveMutation.isPending ? "Saving…" : "Save configuration"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Export / Import Configuration (admin only)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function ExportImportSection() {
|
||||||
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [importing, setImporting] = useState(false);
|
||||||
|
const [importResult, setImportResult] = useState<{
|
||||||
|
status: string;
|
||||||
|
summary: Record<string, number>;
|
||||||
|
warnings: string[];
|
||||||
|
} | null>(null);
|
||||||
|
const [importError, setImportError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const handleExport = async () => {
|
||||||
|
try {
|
||||||
|
const resp = await client.get("/admin/export-config", { responseType: "blob" });
|
||||||
|
const url = URL.createObjectURL(resp.data);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = url;
|
||||||
|
a.download = `aegis-config-${new Date().toISOString().slice(0, 10)}.json`;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
} catch (e) {
|
||||||
|
alert("Export failed: " + (e as Error).message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImportFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
e.target.value = "";
|
||||||
|
setImportError(null);
|
||||||
|
setImportResult(null);
|
||||||
|
setImporting(true);
|
||||||
|
try {
|
||||||
|
const json = JSON.parse(await file.text());
|
||||||
|
const resp = await client.post("/admin/import-config", json);
|
||||||
|
setImportResult(resp.data);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const msg =
|
||||||
|
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||||
|
(err as Error)?.message ?? "Import failed";
|
||||||
|
setImportError(String(msg));
|
||||||
|
} finally {
|
||||||
|
setImporting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<PackageOpen className="h-5 w-5 text-cyan-400" />
|
||||||
|
<h2 className="text-lg font-semibold text-white">Configuration Export / Import</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-5 text-sm text-gray-400">
|
||||||
|
Export platform configuration to JSON for backup or migration. Import restores settings,
|
||||||
|
webhooks, templates and users on a fresh instance.
|
||||||
|
</p>
|
||||||
|
<div className="mb-5 rounded-lg border border-gray-800 bg-gray-800/30 p-4">
|
||||||
|
<p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">What is included</p>
|
||||||
|
<div className="grid gap-x-8 gap-y-1 text-xs text-gray-400 sm:grid-cols-2">
|
||||||
|
{[
|
||||||
|
["✅", "Email & Jira settings"],
|
||||||
|
["✅", "SSO / SAML configuration"],
|
||||||
|
["✅", "Webhooks"],
|
||||||
|
["✅", "Scoring weights"],
|
||||||
|
["✅", "Custom test templates"],
|
||||||
|
["✅", "Users (roles & status)"],
|
||||||
|
["🔒", "Passwords / API tokens → REDACTED"],
|
||||||
|
["❌", "Tests, campaigns, techniques data"],
|
||||||
|
].map(([icon, text]) => (
|
||||||
|
<div key={text} className="flex items-center gap-1.5"><span>{icon}</span><span>{text}</span></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
<button onClick={handleExport}
|
||||||
|
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors">
|
||||||
|
<Download className="h-4 w-4" /> Export Configuration
|
||||||
|
</button>
|
||||||
|
<input ref={fileRef} type="file" accept=".json" onChange={handleImportFile} className="hidden" />
|
||||||
|
<button onClick={() => fileRef.current?.click()} disabled={importing}
|
||||||
|
className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 disabled:opacity-50 transition-colors">
|
||||||
|
{importing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
|
||||||
|
{importing ? "Importing…" : "Import Configuration"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{importResult && (
|
||||||
|
<div className="mt-4 rounded-lg border border-green-500/30 bg-green-500/5 p-4 space-y-2">
|
||||||
|
<p className="text-sm font-medium text-green-400 flex items-center gap-2">
|
||||||
|
<CheckCircle className="h-4 w-4" /> Import completed successfully
|
||||||
|
</p>
|
||||||
|
<div className="grid gap-2 text-xs text-gray-400 sm:grid-cols-3">
|
||||||
|
{Object.entries(importResult.summary).map(([key, val]) => (
|
||||||
|
<div key={key} className="flex items-center justify-between rounded bg-gray-800 px-2 py-1">
|
||||||
|
<span className="capitalize">{key.replace(/_/g, " ")}</span>
|
||||||
|
<span className="font-mono text-cyan-400">{val}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{importResult.warnings.length > 0 && (
|
||||||
|
<ul className="mt-2 space-y-0.5 text-[11px] text-amber-400/80 list-disc list-inside">
|
||||||
|
{importResult.warnings.map((w) => <li key={w}>{w}</li>)}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{importError && (
|
||||||
|
<div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">⚠ {importError}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// System Information + Version (admin only)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function SystemInfoSection() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||||
|
<h2 className="mb-4 text-lg font-semibold text-white flex items-center gap-2">
|
||||||
|
<ShieldCheck className="h-5 w-5 text-cyan-400" /> System Status
|
||||||
|
</h2>
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{[
|
||||||
|
{ icon: Server, label: "Backend", value: "Online", color: "text-green-400" },
|
||||||
|
{ icon: Database, label: "PostgreSQL", value: "Connected", color: "text-green-400" },
|
||||||
|
{ icon: HardDrive, label: "MinIO Storage", value: "Available", color: "text-green-400" },
|
||||||
|
{ icon: Clock, label: "Scheduler", value: "Running", color: "text-green-400" },
|
||||||
|
].map(({ icon: Icon, label, value, color }) => (
|
||||||
|
<div key={label} className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Icon className={`h-5 w-5 ${color}`} />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium uppercase text-gray-500">{label}</p>
|
||||||
|
<p className={`text-sm font-medium ${color}`}>{value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||||
|
<h2 className="mb-4 text-lg font-semibold text-white">Version Information</h2>
|
||||||
|
<dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 text-sm">
|
||||||
|
<div><dt className="text-xs font-medium uppercase text-gray-500">Platform</dt><dd className="mt-1 text-gray-300">Aegis v0.1.0</dd></div>
|
||||||
|
<div><dt className="text-xs font-medium uppercase text-gray-500">Backend</dt><dd className="mt-1 text-gray-300">FastAPI + Python 3.11</dd></div>
|
||||||
|
<div><dt className="text-xs font-medium uppercase text-gray-500">Frontend</dt><dd className="mt-1 text-gray-300">React 19 + TypeScript</dd></div>
|
||||||
|
<div><dt className="text-xs font-medium uppercase text-gray-500">Database</dt><dd className="mt-1 text-gray-300">PostgreSQL 15</dd></div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Main SettingsPage
|
// Main SettingsPage
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
type Tab = "profile" | "notifications" | "webhooks" | "email" | "jira";
|
type Tab = "profile" | "notifications" | "webhooks" | "email" | "jira" | "sso" | "system";
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
@@ -1334,6 +1825,8 @@ export default function SettingsPage() {
|
|||||||
},
|
},
|
||||||
{ id: "email", label: "Email / SMTP", icon: Mail, show: isAdmin },
|
{ id: "email", label: "Email / SMTP", icon: Mail, show: isAdmin },
|
||||||
{ id: "jira", label: "Jira", icon: Link2, show: isAdmin },
|
{ id: "jira", label: "Jira", icon: Link2, show: isAdmin },
|
||||||
|
{ id: "sso", label: "SSO / Azure AD", icon: KeyRound, show: isAdmin },
|
||||||
|
{ id: "system", label: "System", icon: Server, show: isAdmin },
|
||||||
];
|
];
|
||||||
|
|
||||||
const visibleTabs = tabs.filter((t) => t.show);
|
const visibleTabs = tabs.filter((t) => t.show);
|
||||||
@@ -1398,6 +1891,15 @@ export default function SettingsPage() {
|
|||||||
<JiraConfigSection />
|
<JiraConfigSection />
|
||||||
</Section>
|
</Section>
|
||||||
)}
|
)}
|
||||||
|
{activeTab === "sso" && isAdmin && (
|
||||||
|
<SsoConfigSection />
|
||||||
|
)}
|
||||||
|
{activeTab === "system" && isAdmin && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<SystemInfoSection />
|
||||||
|
<ExportImportSection />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
import { useState, useRef } from "react";
|
import { useState, useRef } from "react";
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
Loader2,
|
Loader2,
|
||||||
AlertCircle,
|
AlertCircle,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
Server,
|
|
||||||
Database,
|
|
||||||
HardDrive,
|
|
||||||
Clock,
|
Clock,
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
XCircle,
|
XCircle,
|
||||||
@@ -19,25 +16,13 @@ import {
|
|||||||
BarChart3,
|
BarChart3,
|
||||||
X,
|
X,
|
||||||
Download,
|
Download,
|
||||||
Upload,
|
|
||||||
PackageOpen,
|
|
||||||
Swords,
|
Swords,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
AlertTriangle,
|
AlertTriangle,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
CalendarCheck,
|
CalendarCheck,
|
||||||
ShieldCheck,
|
ShieldCheck,
|
||||||
KeyRound,
|
|
||||||
Copy,
|
|
||||||
Building2,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import client from "../api/client";
|
|
||||||
import {
|
|
||||||
getSsoConfig,
|
|
||||||
updateSsoConfig,
|
|
||||||
type SsoConfig,
|
|
||||||
type SsoConfigUpdate,
|
|
||||||
} from "../api/sso";
|
|
||||||
import {
|
import {
|
||||||
triggerMitreSync,
|
triggerMitreSync,
|
||||||
triggerIntelScan,
|
triggerIntelScan,
|
||||||
@@ -1084,66 +1069,6 @@ export default function SystemPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* SSO / Azure AD Configuration */}
|
|
||||||
<SsoConfigSection />
|
|
||||||
|
|
||||||
{/* System Information */}
|
|
||||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
||||||
<h2 className="mb-4 text-lg font-semibold text-white">System Information</h2>
|
|
||||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Server className="h-5 w-5 text-green-400" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase text-gray-500">Backend</p>
|
|
||||||
<p className="text-sm font-medium text-green-400">Online</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Database className="h-5 w-5 text-green-400" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase text-gray-500">PostgreSQL</p>
|
|
||||||
<p className="text-sm font-medium text-green-400">Connected</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<HardDrive className="h-5 w-5 text-green-400" />
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase text-gray-500">MinIO Storage</p>
|
|
||||||
<p className="text-sm font-medium text-green-400">Available</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Clock
|
|
||||||
className={`h-5 w-5 ${
|
|
||||||
schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase text-gray-500">Scheduler</p>
|
|
||||||
<p
|
|
||||||
className={`text-sm font-medium ${
|
|
||||||
schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{statusLoading
|
|
||||||
? "Checking..."
|
|
||||||
: schedulerStatus?.running
|
|
||||||
? "Running"
|
|
||||||
: "Stopped"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Scheduled Jobs */}
|
{/* Scheduled Jobs */}
|
||||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||||
<h2 className="mb-4 text-lg font-semibold text-white">Scheduled Jobs</h2>
|
<h2 className="mb-4 text-lg font-semibold text-white">Scheduled Jobs</h2>
|
||||||
@@ -1210,32 +1135,6 @@ export default function SystemPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Export / Import Configuration */}
|
|
||||||
<ExportImportSection />
|
|
||||||
|
|
||||||
{/* Version Info */}
|
|
||||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
||||||
<h2 className="mb-4 text-lg font-semibold text-white">Version Information</h2>
|
|
||||||
<dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<div>
|
|
||||||
<dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
|
|
||||||
<dd className="mt-1 text-sm text-gray-300">Aegis v0.1.0</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-xs font-medium uppercase text-gray-500">Backend</dt>
|
|
||||||
<dd className="mt-1 text-sm text-gray-300">FastAPI + Python 3.11</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-xs font-medium uppercase text-gray-500">Frontend</dt>
|
|
||||||
<dd className="mt-1 text-sm text-gray-300">React 19 + TypeScript</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-xs font-medium uppercase text-gray-500">Database</dt>
|
|
||||||
<dd className="mt-1 text-sm text-gray-300">PostgreSQL 15</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Template Detail Modal */}
|
{/* Template Detail Modal */}
|
||||||
{selectedTemplateId && (
|
{selectedTemplateId && (
|
||||||
selectedTemplateLoading ? (
|
selectedTemplateLoading ? (
|
||||||
@@ -1257,143 +1156,6 @@ export default function SystemPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Export / Import Configuration ───────────────────────────────── */
|
|
||||||
|
|
||||||
function ExportImportSection() {
|
|
||||||
const fileRef = useRef<HTMLInputElement>(null);
|
|
||||||
const [importing, setImporting] = useState(false);
|
|
||||||
const [importResult, setImportResult] = useState<{
|
|
||||||
status: string;
|
|
||||||
summary: Record<string, number>;
|
|
||||||
warnings: string[];
|
|
||||||
} | null>(null);
|
|
||||||
const [importError, setImportError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const handleExport = async () => {
|
|
||||||
try {
|
|
||||||
const resp = await client.get("/admin/export-config", {
|
|
||||||
responseType: "blob",
|
|
||||||
});
|
|
||||||
const url = URL.createObjectURL(resp.data);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
const date = new Date().toISOString().slice(0, 10);
|
|
||||||
a.download = `aegis-config-${date}.json`;
|
|
||||||
a.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
} catch (e) {
|
|
||||||
alert("Export failed: " + (e as Error).message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImportFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
e.target.value = "";
|
|
||||||
setImportError(null);
|
|
||||||
setImportResult(null);
|
|
||||||
setImporting(true);
|
|
||||||
try {
|
|
||||||
const text = await file.text();
|
|
||||||
const json = JSON.parse(text);
|
|
||||||
const resp = await client.post("/admin/import-config", json);
|
|
||||||
setImportResult(resp.data);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
const msg =
|
|
||||||
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
|
||||||
(err as Error)?.message ??
|
|
||||||
"Import failed";
|
|
||||||
setImportError(String(msg));
|
|
||||||
} finally {
|
|
||||||
setImporting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<PackageOpen className="h-5 w-5 text-cyan-400" />
|
|
||||||
<h2 className="text-lg font-semibold text-white">Configuration Export / Import</h2>
|
|
||||||
</div>
|
|
||||||
<p className="mb-5 text-sm text-gray-400">
|
|
||||||
Export all platform configuration to a JSON file for backup or migration.
|
|
||||||
Import restores settings, webhooks, custom templates and users on a fresh instance.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* What is exported */}
|
|
||||||
<div className="mb-5 rounded-lg border border-gray-800 bg-gray-800/30 p-4">
|
|
||||||
<p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">What is included</p>
|
|
||||||
<div className="grid gap-x-8 gap-y-1 text-xs text-gray-400 sm:grid-cols-2">
|
|
||||||
{[
|
|
||||||
["✅", "Email & Jira settings"],
|
|
||||||
["✅", "SSO / SAML configuration"],
|
|
||||||
["✅", "Webhooks"],
|
|
||||||
["✅", "Scoring weights"],
|
|
||||||
["✅", "Custom test templates"],
|
|
||||||
["✅", "Users (roles & status)"],
|
|
||||||
["🔒", "Passwords / API tokens → REDACTED"],
|
|
||||||
["❌", "Tests, campaigns, techniques data"],
|
|
||||||
].map(([icon, text]) => (
|
|
||||||
<div key={text} className="flex items-center gap-1.5">
|
|
||||||
<span>{icon}</span>
|
|
||||||
<span>{text}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex flex-wrap gap-3">
|
|
||||||
<button
|
|
||||||
onClick={handleExport}
|
|
||||||
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors"
|
|
||||||
>
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
Export Configuration
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<input ref={fileRef} type="file" accept=".json" onChange={handleImportFile} className="hidden" />
|
|
||||||
<button
|
|
||||||
onClick={() => fileRef.current?.click()}
|
|
||||||
disabled={importing}
|
|
||||||
className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
{importing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
|
|
||||||
{importing ? "Importing…" : "Import Configuration"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Import result */}
|
|
||||||
{importResult && (
|
|
||||||
<div className="mt-4 rounded-lg border border-green-500/30 bg-green-500/5 p-4 space-y-2">
|
|
||||||
<p className="text-sm font-medium text-green-400 flex items-center gap-2">
|
|
||||||
<CheckCircle className="h-4 w-4" /> Import completed successfully
|
|
||||||
</p>
|
|
||||||
<div className="grid gap-2 text-xs text-gray-400 sm:grid-cols-3">
|
|
||||||
{Object.entries(importResult.summary).map(([key, val]) => (
|
|
||||||
<div key={key} className="flex items-center justify-between rounded bg-gray-800 px-2 py-1">
|
|
||||||
<span className="capitalize">{key.replace(/_/g, " ")}</span>
|
|
||||||
<span className="font-mono text-cyan-400">{val}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{importResult.warnings.length > 0 && (
|
|
||||||
<ul className="mt-2 space-y-0.5 text-[11px] text-amber-400/80 list-disc list-inside">
|
|
||||||
{importResult.warnings.map((w) => <li key={w}>{w}</li>)}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{importError && (
|
|
||||||
<div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
|
|
||||||
⚠ {importError}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Bulk Approve Evaluation Tests Modal ─────────────────────────── */
|
/* ── Bulk Approve Evaluation Tests Modal ─────────────────────────── */
|
||||||
|
|
||||||
function BulkApproveModal({
|
function BulkApproveModal({
|
||||||
@@ -1780,451 +1542,6 @@ function CreateTemplateForm({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── SSO / Azure AD Configuration Section ───────────────────────── */
|
|
||||||
|
|
||||||
const AZURE_ROLES = [
|
|
||||||
{ value: "admin", label: "Aegis Admin", desc: "Full platform access including system settings" },
|
|
||||||
{ value: "red_lead", label: "Aegis Red Lead", desc: "Red team lead — manage tests, campaigns and templates" },
|
|
||||||
{ value: "blue_lead", label: "Aegis Blue Lead", desc: "Blue team lead — validate tests and manage coverage" },
|
|
||||||
{ value: "red_tech", label: "Aegis Red Tech", desc: "Red team technician — execute tests" },
|
|
||||||
{ value: "blue_tech", label: "Aegis Blue Tech", desc: "Blue team technician — review detections" },
|
|
||||||
{ value: "viewer", label: "Aegis Viewer", desc: "Read-only access to dashboards and reports" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function CopyField({ value, label }: { value: string; label: string }) {
|
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
const copy = () => {
|
|
||||||
navigator.clipboard.writeText(value).then(() => {
|
|
||||||
setCopied(true);
|
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-400">{label}</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="flex-1 truncate rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-cyan-300 font-mono">
|
|
||||||
{value || <span className="text-gray-600 italic">not set</span>}
|
|
||||||
</code>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={copy}
|
|
||||||
disabled={!value}
|
|
||||||
className="flex-shrink-0 rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 transition-colors hover:text-white disabled:opacity-40"
|
|
||||||
title="Copy"
|
|
||||||
>
|
|
||||||
{copied ? <CheckCircle className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SsoConfigSection() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
// Derive default SP values from the current browser origin
|
|
||||||
const origin = window.location.origin;
|
|
||||||
const defaultSpEntityId = `${origin}/api/v1/sso/metadata`;
|
|
||||||
const defaultSpAcsUrl = `${origin}/api/v1/sso/callback`;
|
|
||||||
|
|
||||||
const { data: existingConfig, isLoading: configLoading } = useQuery<SsoConfig | null>({
|
|
||||||
queryKey: ["sso-config"],
|
|
||||||
queryFn: async () => {
|
|
||||||
try {
|
|
||||||
return await getSsoConfig();
|
|
||||||
} catch {
|
|
||||||
return null; // 404 = not configured yet
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Form state — pre-seeded from existing config when loaded
|
|
||||||
const [tenantId, setTenantId] = useState("");
|
|
||||||
const [form, setForm] = useState<SsoConfigUpdate>({
|
|
||||||
is_enabled: false,
|
|
||||||
provider_name: "Azure AD / Entra ID",
|
|
||||||
sp_entity_id: defaultSpEntityId,
|
|
||||||
sp_acs_url: defaultSpAcsUrl,
|
|
||||||
idp_entity_id: "",
|
|
||||||
idp_sso_url: "",
|
|
||||||
idp_certificate: "",
|
|
||||||
attr_email: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
|
||||||
attr_username: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
|
||||||
attr_role: "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
|
|
||||||
default_role: "viewer",
|
|
||||||
auto_provision: true,
|
|
||||||
});
|
|
||||||
const [formLoaded, setFormLoaded] = useState(false);
|
|
||||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
|
||||||
|
|
||||||
// Load existing config into form (once)
|
|
||||||
if (existingConfig && !formLoaded) {
|
|
||||||
setForm({
|
|
||||||
is_enabled: existingConfig.is_enabled,
|
|
||||||
provider_name: existingConfig.provider_name ?? "Azure AD / Entra ID",
|
|
||||||
sp_entity_id: existingConfig.sp_entity_id ?? defaultSpEntityId,
|
|
||||||
sp_acs_url: existingConfig.sp_acs_url ?? defaultSpAcsUrl,
|
|
||||||
idp_entity_id: existingConfig.idp_entity_id ?? "",
|
|
||||||
idp_sso_url: existingConfig.idp_sso_url ?? "",
|
|
||||||
idp_certificate: existingConfig.idp_certificate ?? "",
|
|
||||||
attr_email: existingConfig.attr_email ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
|
||||||
attr_username: existingConfig.attr_username ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
|
|
||||||
attr_role: existingConfig.attr_role ?? "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
|
|
||||||
default_role: existingConfig.default_role ?? "viewer",
|
|
||||||
auto_provision: existingConfig.auto_provision ?? true,
|
|
||||||
});
|
|
||||||
// Try to extract tenant ID from existing idp_sso_url
|
|
||||||
if (existingConfig.idp_sso_url) {
|
|
||||||
const m = existingConfig.idp_sso_url.match(/microsoftonline\.com\/([^/]+)\//);
|
|
||||||
if (m) setTenantId(m[1]);
|
|
||||||
}
|
|
||||||
setFormLoaded(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Auto-fill IdP URLs when tenant ID is entered
|
|
||||||
const handleTenantChange = (val: string) => {
|
|
||||||
setTenantId(val);
|
|
||||||
if (val.trim()) {
|
|
||||||
setForm((f) => ({
|
|
||||||
...f,
|
|
||||||
idp_entity_id: `https://sts.windows.net/${val.trim()}/`,
|
|
||||||
idp_sso_url: `https://login.microsoftonline.com/${val.trim()}/saml2`,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveMutation = useMutation({
|
|
||||||
mutationFn: (payload: SsoConfigUpdate) => updateSsoConfig(payload),
|
|
||||||
onSuccess: () => {
|
|
||||||
setSaveSuccess(true);
|
|
||||||
setTimeout(() => setSaveSuccess(false), 4000);
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["sso-config"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["sso-status"] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSave = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
saveMutation.mutate(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isConfigured = !!(form.idp_entity_id && form.idp_sso_url && form.idp_certificate);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="rounded-xl border border-indigo-500/30 bg-gray-900 p-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex flex-wrap items-start justify-between gap-4 mb-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="rounded-lg bg-indigo-500/10 p-3 mt-0.5">
|
|
||||||
<KeyRound className="h-6 w-6 text-indigo-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-lg font-semibold text-white">Azure AD / Entra ID SSO</h2>
|
|
||||||
<p className="mt-1 text-sm text-gray-400 max-w-2xl">
|
|
||||||
Delegate authentication to Azure Active Directory via SAML 2.0.
|
|
||||||
Users sign in with their corporate credentials; roles are assigned automatically via Azure App Roles.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Enabled badge */}
|
|
||||||
<span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${
|
|
||||||
form.is_enabled && isConfigured
|
|
||||||
? "border-green-500/40 bg-green-900/20 text-green-400"
|
|
||||||
: "border-gray-600 bg-gray-800/50 text-gray-400"
|
|
||||||
}`}>
|
|
||||||
{form.is_enabled && isConfigured ? (
|
|
||||||
<><CheckCircle className="h-3 w-3" /> Active</>
|
|
||||||
) : (
|
|
||||||
<><XCircle className="h-3 w-3" /> {isConfigured ? "Disabled" : "Not configured"}</>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{configLoading ? (
|
|
||||||
<div className="flex justify-center py-8">
|
|
||||||
<Loader2 className="h-6 w-6 animate-spin text-indigo-400" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<form onSubmit={handleSave} className="space-y-8">
|
|
||||||
|
|
||||||
{/* ── Step 1: SP values for IT ─────────────────────────── */}
|
|
||||||
<div>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">1</span>
|
|
||||||
<h3 className="text-sm font-semibold text-white">Give these values to your IT team</h3>
|
|
||||||
</div>
|
|
||||||
<p className="mb-4 text-xs text-gray-400">
|
|
||||||
Your IT team needs to register Aegis as an Enterprise Application in Azure AD.
|
|
||||||
Provide them with the following SP (Service Provider) values:
|
|
||||||
</p>
|
|
||||||
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
|
||||||
<CopyField
|
|
||||||
label="Entity ID (Identifier)"
|
|
||||||
value={form.sp_entity_id ?? defaultSpEntityId}
|
|
||||||
/>
|
|
||||||
<CopyField
|
|
||||||
label="Reply URL (Assertion Consumer Service)"
|
|
||||||
value={form.sp_acs_url ?? defaultSpAcsUrl}
|
|
||||||
/>
|
|
||||||
<div className="pt-1">
|
|
||||||
<a
|
|
||||||
href="/api/v1/sso/metadata"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-500/30 bg-indigo-900/20 px-3 py-1.5 text-xs font-medium text-indigo-400 transition-colors hover:bg-indigo-900/40"
|
|
||||||
>
|
|
||||||
<Download className="h-3.5 w-3.5" />
|
|
||||||
Download SP Metadata XML
|
|
||||||
</a>
|
|
||||||
<span className="ml-2 text-xs text-gray-500">
|
|
||||||
(Alternative to manual entry — import this XML directly into Azure AD)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Step 2: Azure App Roles to create ───────────────── */}
|
|
||||||
<div>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">2</span>
|
|
||||||
<h3 className="text-sm font-semibold text-white">Create App Roles in Azure</h3>
|
|
||||||
</div>
|
|
||||||
<p className="mb-3 text-xs text-gray-400">
|
|
||||||
In your Azure Enterprise App → App Roles, create the following roles. The{" "}
|
|
||||||
<strong className="text-gray-200">Value</strong> field must match exactly (case-sensitive):
|
|
||||||
</p>
|
|
||||||
<div className="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800/30">
|
|
||||||
<table className="w-full text-left text-xs">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-gray-700">
|
|
||||||
<th className="px-4 py-2.5 font-semibold text-gray-400">Display Name</th>
|
|
||||||
<th className="px-4 py-2.5 font-semibold text-gray-400">Value (exact)</th>
|
|
||||||
<th className="px-4 py-2.5 font-semibold text-gray-400">Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{AZURE_ROLES.map((r) => (
|
|
||||||
<tr key={r.value} className="border-b border-gray-700/50 hover:bg-gray-700/20">
|
|
||||||
<td className="px-4 py-2.5 text-gray-200">{r.label}</td>
|
|
||||||
<td className="px-4 py-2.5">
|
|
||||||
<code className="rounded bg-gray-800 px-1.5 py-0.5 text-indigo-300 font-mono">
|
|
||||||
{r.value}
|
|
||||||
</code>
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2.5 text-gray-400">{r.desc}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<p className="mt-2 text-xs text-gray-500">
|
|
||||||
After creating roles, assign them to users or groups in Azure AD → Enterprise Applications → Users and groups.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Step 3: IdP configuration ───────────────────────── */}
|
|
||||||
<div>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">3</span>
|
|
||||||
<h3 className="text-sm font-semibold text-white">Enter Azure tenant details</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
|
||||||
{/* Tenant ID shortcut */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">
|
|
||||||
Tenant ID <span className="text-gray-500">(auto-fills the fields below)</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={tenantId}
|
|
||||||
onChange={(e) => handleTenantChange(e.target.value)}
|
|
||||||
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Found in Azure AD → Overview → Tenant ID
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* IdP Entity ID */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">
|
|
||||||
IdP Entity ID <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.idp_entity_id ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, idp_entity_id: e.target.value })}
|
|
||||||
placeholder="https://sts.windows.net/{tenant-id}/"
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* IdP SSO URL */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">
|
|
||||||
SSO URL (Login URL) <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.idp_sso_url ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, idp_sso_url: e.target.value })}
|
|
||||||
placeholder="https://login.microsoftonline.com/{tenant-id}/saml2"
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Provider display name */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">
|
|
||||||
Display name <span className="text-gray-500">(shown on login page)</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.provider_name ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, provider_name: e.target.value })}
|
|
||||||
placeholder="Azure AD / Entra ID"
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Step 4: X.509 Certificate ───────────────────────── */}
|
|
||||||
<div>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">4</span>
|
|
||||||
<h3 className="text-sm font-semibold text-white">Paste IdP certificate</h3>
|
|
||||||
</div>
|
|
||||||
<p className="mb-3 text-xs text-gray-400">
|
|
||||||
In Azure AD → Enterprise App → Single sign-on → SAML Signing Certificate, download the{" "}
|
|
||||||
<strong className="text-gray-200">Base64 certificate</strong> and paste its contents below.
|
|
||||||
</p>
|
|
||||||
<textarea
|
|
||||||
value={form.idp_certificate ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, idp_certificate: e.target.value })}
|
|
||||||
placeholder={"-----BEGIN CERTIFICATE-----\nMIIC...base64...\n-----END CERTIFICATE-----"}
|
|
||||||
rows={6}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Include the header and footer lines, or paste just the base64 block — both are accepted.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Step 5: Attribute mapping ────────────────────────── */}
|
|
||||||
<div>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">5</span>
|
|
||||||
<h3 className="text-sm font-semibold text-white">Attribute mapping</h3>
|
|
||||||
<span className="text-xs text-gray-500">(pre-filled with Azure AD defaults)</span>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">Email attribute</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.attr_email ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, attr_email: e.target.value })}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">Username attribute</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.attr_username ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, attr_username: e.target.value })}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">Role attribute</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.attr_role ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, attr_role: e.target.value })}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs font-medium text-gray-300">Default role</label>
|
|
||||||
<select
|
|
||||||
value={form.default_role ?? "viewer"}
|
|
||||||
onChange={(e) => setForm({ ...form, default_role: e.target.value })}
|
|
||||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-indigo-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
{AZURE_ROLES.map((r) => (
|
|
||||||
<option key={r.value} value={r.value}>{r.label}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-end gap-3 pb-0.5">
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={form.auto_provision ?? true}
|
|
||||||
onChange={(e) => setForm({ ...form, auto_provision: e.target.checked })}
|
|
||||||
className="h-4 w-4 rounded accent-indigo-500"
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-gray-300">Auto-provision new users</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Enable toggle + Save ─────────────────────────────── */}
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
|
|
||||||
<label className="flex items-center gap-3 cursor-pointer">
|
|
||||||
<div
|
|
||||||
onClick={() => setForm((f) => ({ ...f, is_enabled: !f.is_enabled }))}
|
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
|
||||||
form.is_enabled ? "bg-indigo-600" : "bg-gray-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
|
|
||||||
form.is_enabled ? "translate-x-5" : "translate-x-0.5"
|
|
||||||
}`} />
|
|
||||||
</div>
|
|
||||||
<span className="text-sm font-medium text-gray-200">
|
|
||||||
{form.is_enabled ? "SSO enabled — Azure AD is the primary login" : "SSO disabled — local login only"}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{saveSuccess && (
|
|
||||||
<span className="flex items-center gap-1.5 text-sm text-green-400">
|
|
||||||
<CheckCircle className="h-4 w-4" /> Saved
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{saveMutation.isError && (
|
|
||||||
<span className="text-sm text-red-400">
|
|
||||||
{(saveMutation.error as Error)?.message ?? "Save failed"}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saveMutation.isPending || !isConfigured}
|
|
||||||
className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
|
|
||||||
title={!isConfigured ? "Fill in IdP Entity ID, SSO URL, and Certificate first" : undefined}
|
|
||||||
>
|
|
||||||
{saveMutation.isPending ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Building2 className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
{saveMutation.isPending ? "Saving…" : "Save configuration"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Template Detail / Edit Modal ────────────────────────────────── */
|
/* ── Template Detail / Edit Modal ────────────────────────────────── */
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user