kitos
1793 lines
73 KiB
TypeScript
1793 lines
73 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Settings,
|
|
Mail,
|
|
Webhook,
|
|
Bell,
|
|
User,
|
|
Plus,
|
|
Trash2,
|
|
TestTube,
|
|
Save,
|
|
Eye,
|
|
EyeOff,
|
|
CheckCircle,
|
|
XCircle,
|
|
AlertCircle,
|
|
Loader2,
|
|
Edit2,
|
|
X,
|
|
Link2,
|
|
KeyRound,
|
|
Copy,
|
|
Building2,
|
|
Server,
|
|
Database,
|
|
HardDrive,
|
|
Clock,
|
|
PackageOpen,
|
|
Download,
|
|
Upload,
|
|
ShieldCheck,
|
|
} from "lucide-react";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import client from "../api/client";
|
|
import {
|
|
getSsoConfig,
|
|
updateSsoConfig,
|
|
type SsoConfig,
|
|
type SsoConfigUpdate,
|
|
} from "../api/sso";
|
|
import {
|
|
getEmailConfig,
|
|
updateEmailConfig,
|
|
sendTestEmail,
|
|
getWebhooks,
|
|
createWebhook,
|
|
updateWebhook,
|
|
deleteWebhook,
|
|
testWebhook,
|
|
getMe,
|
|
updateMyPreferences,
|
|
getJiraConfig,
|
|
updateJiraConfig,
|
|
testJiraConnection,
|
|
testTempoConnection,
|
|
type EmailConfigUpdate,
|
|
type WebhookCreate,
|
|
type WebhookOut,
|
|
type NotificationPreferences,
|
|
type JiraConfigUpdate,
|
|
} from "../api/settings";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function Section({
|
|
title,
|
|
icon: Icon,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
icon: React.FC<{ className?: string }>;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-6 flex items-center gap-2 text-lg font-semibold text-white">
|
|
<Icon className="h-5 w-5 text-cyan-400" />
|
|
{title}
|
|
</h2>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ToggleRow({
|
|
label,
|
|
description,
|
|
checked,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
description?: string;
|
|
checked: boolean;
|
|
onChange: (v: boolean) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between py-3 border-b border-gray-800 last:border-0">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-200">{label}</p>
|
|
{description && <p className="text-xs text-gray-500">{description}</p>}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(!checked)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
checked ? "bg-cyan-500" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
|
checked ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Toast({
|
|
message,
|
|
type,
|
|
onClose,
|
|
}: {
|
|
message: string;
|
|
type: "success" | "error";
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`fixed bottom-6 right-6 z-50 flex items-center gap-3 rounded-lg px-4 py-3 shadow-lg text-sm font-medium ${
|
|
type === "success"
|
|
? "bg-emerald-900/90 text-emerald-300 border border-emerald-700"
|
|
: "bg-red-900/90 text-red-300 border border-red-700"
|
|
}`}
|
|
>
|
|
{type === "success" ? (
|
|
<CheckCircle className="h-4 w-4 shrink-0" />
|
|
) : (
|
|
<XCircle className="h-4 w-4 shrink-0" />
|
|
)}
|
|
{message}
|
|
<button onClick={onClose} className="ml-2 opacity-60 hover:opacity-100">
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SMTP Email Section (admin only)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const AVAILABLE_EVENTS = [
|
|
"test.validated",
|
|
"test.rejected",
|
|
"campaign.completed",
|
|
"campaign.started",
|
|
"mitre.synced",
|
|
"webhook.test",
|
|
];
|
|
|
|
function EmailSection() {
|
|
const qc = useQueryClient();
|
|
const [showPw, setShowPw] = useState(false);
|
|
const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
|
|
const [testEmail, setTestEmail] = useState("");
|
|
|
|
const { data: cfg, isLoading } = useQuery({
|
|
queryKey: ["email-config"],
|
|
queryFn: getEmailConfig,
|
|
});
|
|
|
|
const [form, setForm] = useState<EmailConfigUpdate & { password?: string }>({});
|
|
const effective = { ...cfg, ...form };
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: updateEmailConfig,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["email-config"] });
|
|
setForm({});
|
|
setToast({ msg: "Email configuration saved", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to save email configuration", type: "error" }),
|
|
});
|
|
|
|
const testMutation = useMutation({
|
|
mutationFn: () => sendTestEmail(testEmail),
|
|
onSuccess: () => setToast({ msg: `Test email sent to ${testEmail}`, type: "success" }),
|
|
onError: () =>
|
|
setToast({ msg: "Failed to send test email. Check SMTP settings and logs.", type: "error" }),
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const field = (
|
|
key: keyof EmailConfigUpdate,
|
|
label: string,
|
|
type = "text",
|
|
placeholder = ""
|
|
) => (
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">{label}</label>
|
|
<input
|
|
type={type}
|
|
value={String(form[key] ?? cfg?.[key as keyof typeof cfg] ?? "")}
|
|
onChange={(e) =>
|
|
setForm((prev) => ({ ...prev, [key]: e.target.value }))
|
|
}
|
|
placeholder={placeholder}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{toast && (
|
|
<Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />
|
|
)}
|
|
<div className="space-y-4">
|
|
{/* Enable toggle */}
|
|
<ToggleRow
|
|
label="Enable email notifications"
|
|
description="When disabled, no emails are sent regardless of other settings"
|
|
checked={Boolean(form.enabled !== undefined ? form.enabled : cfg?.enabled)}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, enabled: v }))}
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 gap-4 pt-2">
|
|
{field("host", "SMTP Host", "text", "smtp.gmail.com")}
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">SMTP Port</label>
|
|
<input
|
|
type="number"
|
|
value={String(form.port ?? cfg?.port ?? 587)}
|
|
onChange={(e) =>
|
|
setForm((prev) => ({ ...prev, port: parseInt(e.target.value) || 587 }))
|
|
}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
{field("username", "Username / Email", "text", "you@company.com")}
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">Password</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showPw ? "text" : "password"}
|
|
value={String(form.password ?? "")}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, password: e.target.value }))}
|
|
placeholder="Leave blank to keep current"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 pr-10 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPw(!showPw)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
|
>
|
|
{showPw ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{field("from_email", "From Address", "email", "aegis@company.com")}
|
|
</div>
|
|
|
|
<ToggleRow
|
|
label="Use TLS (STARTTLS)"
|
|
checked={Boolean(form.use_tls !== undefined ? form.use_tls : cfg?.use_tls)}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, use_tls: v }))}
|
|
/>
|
|
|
|
<div className="flex items-center justify-between pt-2">
|
|
<button
|
|
onClick={() => {
|
|
if (Object.keys(form).length > 0) saveMutation.mutate(form);
|
|
}}
|
|
disabled={saveMutation.isPending || Object.keys(form).length === 0}
|
|
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 disabled:opacity-50 transition-colors"
|
|
>
|
|
{saveMutation.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
Save Configuration
|
|
</button>
|
|
</div>
|
|
|
|
{/* Test email */}
|
|
<div className="mt-4 rounded-lg border border-gray-700 bg-gray-800/50 p-4">
|
|
<p className="mb-3 text-sm font-medium text-gray-300">Send Test Email</p>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="email"
|
|
value={testEmail}
|
|
onChange={(e) => setTestEmail(e.target.value)}
|
|
placeholder="recipient@example.com"
|
|
className="flex-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
onClick={() => testEmail && testMutation.mutate()}
|
|
disabled={testMutation.isPending || !testEmail}
|
|
className="flex items-center gap-2 rounded-lg border border-cyan-700 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-900/30 disabled:opacity-50 transition-colors"
|
|
>
|
|
{testMutation.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<TestTube className="h-4 w-4" />
|
|
)}
|
|
Send Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Webhooks Section (admin + leads)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function WebhookForm({
|
|
initial,
|
|
onSave,
|
|
onCancel,
|
|
isSaving,
|
|
}: {
|
|
initial?: Partial<WebhookCreate>;
|
|
onSave: (data: WebhookCreate) => void;
|
|
onCancel: () => void;
|
|
isSaving: boolean;
|
|
}) {
|
|
const [form, setForm] = useState<WebhookCreate>({
|
|
name: initial?.name ?? "",
|
|
url: initial?.url ?? "",
|
|
secret: initial?.secret ?? "",
|
|
events: initial?.events ?? [],
|
|
is_active: initial?.is_active ?? true,
|
|
});
|
|
|
|
const toggleEvent = (ev: string) => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
events: prev.events.includes(ev)
|
|
? prev.events.filter((e) => e !== ev)
|
|
: [...prev.events, ev],
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg border border-cyan-800/50 bg-gray-800/50 p-4 space-y-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">Name</label>
|
|
<input
|
|
value={form.name}
|
|
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
|
|
placeholder="My Webhook"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">URL</label>
|
|
<input
|
|
value={form.url}
|
|
onChange={(e) => setForm((p) => ({ ...p, url: e.target.value }))}
|
|
placeholder="https://hooks.example.com/..."
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">
|
|
Secret (optional — used for HMAC-SHA256 signature)
|
|
</label>
|
|
<input
|
|
value={form.secret ?? ""}
|
|
onChange={(e) => setForm((p) => ({ ...p, secret: e.target.value }))}
|
|
placeholder="supersecretkey"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="mb-2 block text-xs font-medium text-gray-400">Events</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{AVAILABLE_EVENTS.map((ev) => (
|
|
<button
|
|
key={ev}
|
|
type="button"
|
|
onClick={() => toggleEvent(ev)}
|
|
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
|
form.events.includes(ev)
|
|
? "bg-cyan-600 text-white"
|
|
: "bg-gray-700 text-gray-400 hover:bg-gray-600"
|
|
}`}
|
|
>
|
|
{ev}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<ToggleRow
|
|
label="Active"
|
|
checked={form.is_active ?? true}
|
|
onChange={(v) => setForm((p) => ({ ...p, is_active: v }))}
|
|
/>
|
|
<div className="flex gap-2 pt-1">
|
|
<button
|
|
onClick={() => onSave(form)}
|
|
disabled={isSaving || !form.name || !form.url || form.events.length === 0}
|
|
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 disabled:opacity-50 transition-colors"
|
|
>
|
|
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={onCancel}
|
|
className="rounded-lg border border-gray-700 px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WebhooksSection() {
|
|
const qc = useQueryClient();
|
|
const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
|
|
const [creating, setCreating] = useState(false);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
|
|
const { data: webhooks = [], isLoading } = useQuery({
|
|
queryKey: ["webhooks"],
|
|
queryFn: getWebhooks,
|
|
});
|
|
|
|
const createMut = useMutation({
|
|
mutationFn: createWebhook,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["webhooks"] });
|
|
setCreating(false);
|
|
setToast({ msg: "Webhook created", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to create webhook", type: "error" }),
|
|
});
|
|
|
|
const updateMut = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: Partial<WebhookCreate> }) =>
|
|
updateWebhook(id, data),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["webhooks"] });
|
|
setEditingId(null);
|
|
setToast({ msg: "Webhook updated", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to update webhook", type: "error" }),
|
|
});
|
|
|
|
const deleteMut = useMutation({
|
|
mutationFn: deleteWebhook,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["webhooks"] });
|
|
setToast({ msg: "Webhook deleted", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to delete webhook", type: "error" }),
|
|
});
|
|
|
|
const testMut = useMutation({
|
|
mutationFn: testWebhook,
|
|
onSuccess: () => setToast({ msg: "Test ping dispatched", type: "success" }),
|
|
onError: () => setToast({ msg: "Ping failed", type: "error" }),
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{toast && (
|
|
<Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />
|
|
)}
|
|
<div className="space-y-3">
|
|
{webhooks.length === 0 && !creating && (
|
|
<p className="text-center py-6 text-sm text-gray-500">No webhooks configured yet.</p>
|
|
)}
|
|
|
|
{webhooks.map((wh) =>
|
|
editingId === wh.id ? (
|
|
<WebhookForm
|
|
key={wh.id}
|
|
initial={{
|
|
name: wh.name,
|
|
url: wh.url,
|
|
events: wh.events,
|
|
is_active: wh.is_active,
|
|
}}
|
|
onSave={(data) => updateMut.mutate({ id: wh.id, data })}
|
|
onCancel={() => setEditingId(null)}
|
|
isSaving={updateMut.isPending}
|
|
/>
|
|
) : (
|
|
<WebhookRow
|
|
key={wh.id}
|
|
wh={wh}
|
|
onEdit={() => setEditingId(wh.id)}
|
|
onDelete={() => deleteMut.mutate(wh.id)}
|
|
onTest={() => testMut.mutate(wh.id)}
|
|
isDeleting={deleteMut.isPending}
|
|
isTesting={testMut.isPending}
|
|
/>
|
|
)
|
|
)}
|
|
|
|
{creating && (
|
|
<WebhookForm
|
|
onSave={(data) => createMut.mutate(data)}
|
|
onCancel={() => setCreating(false)}
|
|
isSaving={createMut.isPending}
|
|
/>
|
|
)}
|
|
|
|
{!creating && (
|
|
<button
|
|
onClick={() => setCreating(true)}
|
|
className="flex items-center gap-2 rounded-lg border border-dashed border-gray-700 px-4 py-2.5 text-sm font-medium text-gray-500 hover:border-cyan-700 hover:text-cyan-400 transition-colors w-full justify-center"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add Webhook
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function WebhookRow({
|
|
wh,
|
|
onEdit,
|
|
onDelete,
|
|
onTest,
|
|
isDeleting,
|
|
isTesting,
|
|
}: {
|
|
wh: WebhookOut;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onTest: () => void;
|
|
isDeleting: boolean;
|
|
isTesting: boolean;
|
|
}) {
|
|
return (
|
|
<div className="rounded-lg border border-gray-800 bg-gray-800/30 p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-sm text-gray-200">{wh.name}</span>
|
|
<span
|
|
className={`text-[10px] font-semibold uppercase rounded-full px-2 py-0.5 ${
|
|
wh.is_active
|
|
? "bg-emerald-900/50 text-emerald-400"
|
|
: "bg-gray-700 text-gray-500"
|
|
}`}
|
|
>
|
|
{wh.is_active ? "active" : "inactive"}
|
|
</span>
|
|
{wh.failure_count > 0 && (
|
|
<span className="text-[10px] font-semibold uppercase rounded-full px-2 py-0.5 bg-red-900/50 text-red-400 flex items-center gap-1">
|
|
<AlertCircle className="h-3 w-3" />
|
|
{wh.failure_count} failures
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mt-0.5 text-xs text-gray-500 truncate">{wh.url}</p>
|
|
<div className="mt-1.5 flex flex-wrap gap-1">
|
|
{wh.events.map((ev) => (
|
|
<span
|
|
key={ev}
|
|
className="text-[10px] rounded-full bg-gray-700 px-2 py-0.5 text-gray-400"
|
|
>
|
|
{ev}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 shrink-0">
|
|
<button
|
|
onClick={onTest}
|
|
disabled={isTesting}
|
|
title="Send test ping"
|
|
className="p-1.5 rounded-lg text-gray-500 hover:text-cyan-400 hover:bg-cyan-900/20 transition-colors disabled:opacity-40"
|
|
>
|
|
{isTesting ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<TestTube className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={onEdit}
|
|
title="Edit"
|
|
className="p-1.5 rounded-lg text-gray-500 hover:text-gray-200 hover:bg-gray-700 transition-colors"
|
|
>
|
|
<Edit2 className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={onDelete}
|
|
disabled={isDeleting}
|
|
title="Delete"
|
|
className="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-900/20 transition-colors disabled:opacity-40"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Notification Preferences Section (all users)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const PREF_DEFS: {
|
|
key: keyof NotificationPreferences;
|
|
label: string;
|
|
description?: string;
|
|
roles: string[]; // roles that see this pref
|
|
}[] = [
|
|
{
|
|
key: "email_on_test_validated",
|
|
label: "Email on test validated",
|
|
description: "Receive an email when a test you're involved with gets validated",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech", "viewer"],
|
|
},
|
|
{
|
|
key: "email_on_test_rejected",
|
|
label: "Email on test rejected",
|
|
description: "Receive an email when a test you submitted gets rejected",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech"],
|
|
},
|
|
{
|
|
key: "email_on_campaign_completed",
|
|
label: "Email on campaign completed",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech"],
|
|
},
|
|
{
|
|
key: "email_on_new_mitre_techniques",
|
|
label: "Email on new MITRE techniques",
|
|
description: "Get notified when the MITRE ATT&CK sync adds new techniques",
|
|
roles: ["admin", "red_lead", "blue_lead"],
|
|
},
|
|
{
|
|
key: "email_on_stale_coverage",
|
|
label: "Email on stale coverage alert",
|
|
description: "Notified when techniques haven't been tested in a long time",
|
|
roles: ["admin", "red_lead", "blue_lead"],
|
|
},
|
|
{
|
|
key: "email_on_assigned_to_campaign",
|
|
label: "Email when assigned to a campaign",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech"],
|
|
},
|
|
{
|
|
key: "email_on_test_state_change",
|
|
label: "Email on test state change",
|
|
description: "Notified when tests move through the validation workflow",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech"],
|
|
},
|
|
{
|
|
key: "email_on_all_team_validations",
|
|
label: "Email on all team validations",
|
|
description: "Lead-level: receive email for every validation in your team",
|
|
roles: ["admin", "red_lead", "blue_lead"],
|
|
},
|
|
{
|
|
key: "email_on_webhook_failures",
|
|
label: "Email on webhook delivery failures",
|
|
roles: ["admin", "red_lead", "blue_lead"],
|
|
},
|
|
{
|
|
key: "email_on_new_users",
|
|
label: "Email on new user registration",
|
|
roles: ["admin"],
|
|
},
|
|
{
|
|
key: "email_on_system_errors",
|
|
label: "Email on system errors",
|
|
description: "Critical errors in background jobs and integrations",
|
|
roles: ["admin"],
|
|
},
|
|
{
|
|
key: "in_app_all",
|
|
label: "In-app notifications",
|
|
description: "Show notification bell alerts inside Aegis",
|
|
roles: ["admin", "red_lead", "blue_lead", "red_tech", "blue_tech", "viewer"],
|
|
},
|
|
];
|
|
|
|
const DEFAULT_PREFS: NotificationPreferences = {
|
|
email_on_test_validated: true,
|
|
email_on_test_rejected: true,
|
|
email_on_campaign_completed: true,
|
|
email_on_new_mitre_techniques: false,
|
|
email_on_stale_coverage: false,
|
|
email_on_assigned_to_campaign: true,
|
|
email_on_test_state_change: true,
|
|
email_on_all_team_validations: false,
|
|
email_on_webhook_failures: true,
|
|
email_on_new_users: false,
|
|
email_on_system_errors: true,
|
|
in_app_all: true,
|
|
};
|
|
|
|
function NotificationSection() {
|
|
const qc = useQueryClient();
|
|
const { user } = useAuth();
|
|
const role = user?.role ?? "viewer";
|
|
|
|
const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
|
|
|
|
const { data: me, isLoading } = useQuery({
|
|
queryKey: ["me-prefs"],
|
|
queryFn: getMe,
|
|
});
|
|
|
|
const [localPrefs, setLocalPrefs] = useState<Partial<NotificationPreferences>>({});
|
|
const [jiraAccountId, setJiraAccountId] = useState<string>("");
|
|
const [jiraIdDirty, setJiraIdDirty] = useState(false);
|
|
|
|
const effectivePrefs: NotificationPreferences = {
|
|
...DEFAULT_PREFS,
|
|
...(me?.notification_preferences ?? {}),
|
|
...localPrefs,
|
|
};
|
|
|
|
const saveMut = useMutation({
|
|
mutationFn: updateMyPreferences,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["me-prefs"] });
|
|
setLocalPrefs({});
|
|
setJiraIdDirty(false);
|
|
setToast({ msg: "Preferences saved", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to save preferences", type: "error" }),
|
|
});
|
|
|
|
const handleSave = () => {
|
|
const payload: Parameters<typeof updateMyPreferences>[0] = {};
|
|
if (Object.keys(localPrefs).length > 0) {
|
|
payload.notification_preferences = {
|
|
...(me?.notification_preferences ?? {}),
|
|
...localPrefs,
|
|
};
|
|
}
|
|
if (jiraIdDirty) {
|
|
payload.jira_account_id = jiraAccountId || null;
|
|
}
|
|
if (Object.keys(payload).length > 0) {
|
|
saveMut.mutate(payload);
|
|
}
|
|
};
|
|
|
|
const isDirty = Object.keys(localPrefs).length > 0 || jiraIdDirty;
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const visiblePrefs = PREF_DEFS.filter((d) => d.roles.includes(role));
|
|
|
|
return (
|
|
<>
|
|
{toast && (
|
|
<Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />
|
|
)}
|
|
<div className="space-y-1">
|
|
{visiblePrefs.map((def) => (
|
|
<ToggleRow
|
|
key={def.key}
|
|
label={def.label}
|
|
description={def.description}
|
|
checked={Boolean(effectivePrefs[def.key])}
|
|
onChange={(v) => setLocalPrefs((prev) => ({ ...prev, [def.key]: v }))}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saveMut.isPending || !isDirty}
|
|
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 disabled:opacity-50 transition-colors"
|
|
>
|
|
{saveMut.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
Save Preferences
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Profile / Jira Section (all users)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ProfileSection() {
|
|
const { data: me, isLoading } = useQuery({
|
|
queryKey: ["me-prefs"],
|
|
queryFn: getMe,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-1">Username</p>
|
|
<p className="text-gray-300 font-medium">{me?.username}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-1">Role</p>
|
|
<p className="text-gray-300 font-medium capitalize">{me?.role?.replace("_", " ")}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-1">Email</p>
|
|
<p className="text-gray-300">{me?.email ?? "—"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-1">Last Login</p>
|
|
<p className="text-gray-300">
|
|
{me?.last_login
|
|
? new Date(me.last_login).toLocaleString("en-US", {
|
|
timeZone: "UTC",
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}) + " UTC"
|
|
: "—"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-800 pt-4">
|
|
<p className="text-sm font-semibold text-gray-300 mb-1">Jira / Tempo</p>
|
|
<p className="text-xs text-gray-500 mb-3">
|
|
Your Atlassian account ID is detected automatically on login using the admin Jira account. No personal tokens required.
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs text-gray-500">Account ID:</span>
|
|
{me?.jira_account_id ? (
|
|
<code className="rounded bg-gray-800 border border-gray-700 px-2 py-1 text-xs text-cyan-300 font-mono">
|
|
{me.jira_account_id}
|
|
</code>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-gray-800 border border-gray-700 px-2 py-0.5 text-[11px] text-gray-500">
|
|
Not detected yet — log out and back in after admin configures Jira
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Jira Admin Config Section (admin only)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function JiraConfigSection() {
|
|
const qc = useQueryClient();
|
|
const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
|
|
const [showAdminToken, setShowAdminToken] = useState(false);
|
|
const [showTempoToken, setShowTempoToken] = useState(false);
|
|
const [jiraTestResult, setJiraTestResult] = useState<{ connectedAs: string; url: string } | null>(null);
|
|
const [jiraTestError, setJiraTestError] = useState<string | null>(null);
|
|
const [tempoTestResult, setTempoTestResult] = useState<string | null>(null);
|
|
const [tempoTestError, setTempoTestError] = useState<string | null>(null);
|
|
|
|
const { data: cfg, isLoading } = useQuery({
|
|
queryKey: ["jira-config"],
|
|
queryFn: getJiraConfig,
|
|
});
|
|
|
|
const [form, setForm] = useState<JiraConfigUpdate>({});
|
|
|
|
const saveMut = useMutation({
|
|
mutationFn: updateJiraConfig,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["jira-config"] });
|
|
setForm({});
|
|
setToast({ msg: "Jira configuration saved", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to save Jira configuration", type: "error" }),
|
|
});
|
|
|
|
const jiraTestMut = useMutation({
|
|
mutationFn: testJiraConnection,
|
|
onSuccess: (data) => {
|
|
if (data.status === "ok") {
|
|
setJiraTestResult({ connectedAs: data.connected_as ?? "", url: data.jira_url ?? "" });
|
|
setJiraTestError(null);
|
|
} else {
|
|
setJiraTestError((data as { message?: string }).message ?? "Connection failed");
|
|
setJiraTestResult(null);
|
|
}
|
|
},
|
|
onError: (err: Error) => {
|
|
setJiraTestError(err.message || "Connection failed");
|
|
setJiraTestResult(null);
|
|
},
|
|
});
|
|
|
|
const tempoTestMut = useMutation({
|
|
mutationFn: testTempoConnection,
|
|
onSuccess: (data) => {
|
|
if (data.status === "ok") {
|
|
setTempoTestResult(data.message ?? "Connected");
|
|
setTempoTestError(null);
|
|
} else {
|
|
setTempoTestError(data.message ?? "Tempo test failed");
|
|
setTempoTestResult(null);
|
|
}
|
|
},
|
|
onError: (err: Error) => {
|
|
setTempoTestError(err.message || "Tempo test failed");
|
|
setTempoTestResult(null);
|
|
},
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{toast && (
|
|
<Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />
|
|
)}
|
|
<div className="space-y-4">
|
|
<ToggleRow
|
|
label="Enable Jira Integration"
|
|
description="Automatically create and update Jira tickets for tests"
|
|
checked={Boolean(form.enabled !== undefined ? form.enabled : cfg?.enabled)}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, enabled: v }))}
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 gap-4 pt-2">
|
|
<div className="col-span-2">
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Jira URL</label>
|
|
<input
|
|
type="text"
|
|
value={String(form.url !== undefined ? form.url : (cfg?.url ?? ""))}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, url: e.target.value }))}
|
|
placeholder="https://yourcompany.atlassian.net"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-600">Base URL of your Jira instance</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Default Project Key</label>
|
|
<input
|
|
type="text"
|
|
value={String(form.project_key !== undefined ? form.project_key : (cfg?.project_key ?? ""))}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, project_key: e.target.value }))}
|
|
placeholder="SEC"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-600">Jira project where test tickets will be created</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Parent Ticket (optional)</label>
|
|
<input
|
|
type="text"
|
|
value={String(form.parent_ticket !== undefined ? form.parent_ticket : (cfg?.parent_ticket ?? ""))}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, parent_ticket: e.target.value }))}
|
|
placeholder="OFS-20795"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-600">Campaigns are created directly under this issue</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Standalone Tests Parent Ticket (optional)</label>
|
|
<input
|
|
type="text"
|
|
value={String(form.parent_ticket_standalone !== undefined ? form.parent_ticket_standalone : (cfg?.parent_ticket_standalone ?? ""))}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, parent_ticket_standalone: e.target.value }))}
|
|
placeholder="OFS-20798"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-600">
|
|
Standalone tests are nested here. Falls back to Campaign Parent if not set.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Admin account (replaces per-user tokens) ───────────── */}
|
|
<div className="mt-2 border-t border-gray-800 pt-4">
|
|
<p className="text-sm font-semibold text-gray-300 mb-1">Admin Jira Account</p>
|
|
<p className="text-xs text-gray-500 mb-4">
|
|
One admin account handles all Jira and Tempo operations. Regular users need zero configuration — their Atlassian account ID is auto-detected on login.
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Admin Email</label>
|
|
<input
|
|
type="email"
|
|
value={String(form.admin_email !== undefined ? form.admin_email : "")}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, admin_email: e.target.value }))}
|
|
placeholder="jira-admin@company.com"
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
{cfg?.admin_email_set ? (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-900/50 px-2 py-0.5 text-[11px] font-medium text-emerald-400">
|
|
<CheckCircle className="h-3 w-3" /> Configured
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-amber-900/50 px-2 py-0.5 text-[11px] font-medium text-amber-400">
|
|
<AlertCircle className="h-3 w-3" /> Not configured
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] text-gray-600">Leave blank to keep current</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-cyan-400">Admin Jira API Token</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showAdminToken ? "text" : "password"}
|
|
value={String(form.admin_api_token !== undefined ? form.admin_api_token : "")}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, admin_api_token: e.target.value }))}
|
|
placeholder={cfg?.admin_email_set ? "Leave blank to keep current token" : "Paste Atlassian API token here"}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 pr-10 text-sm text-gray-200 placeholder-gray-600 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAdminToken(!showAdminToken)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
|
>
|
|
{showAdminToken ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<p className="mt-1 text-[11px] text-gray-600">
|
|
Create at{" "}
|
|
<a
|
|
href="https://id.atlassian.com/manage-profile/security/api-tokens"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-cyan-500 hover:text-cyan-400 underline"
|
|
>
|
|
id.atlassian.com →
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-purple-400">Admin Tempo API Token</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showTempoToken ? "text" : "password"}
|
|
value={String(form.tempo_admin_token !== undefined ? form.tempo_admin_token : "")}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, tempo_admin_token: e.target.value }))}
|
|
placeholder={cfg?.tempo_admin_token_set ? "Leave blank to keep current token" : "Paste Tempo API token here"}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 pr-10 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowTempoToken(!showTempoToken)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
|
>
|
|
{showTempoToken ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
{cfg?.tempo_admin_token_set ? (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-900/50 px-2 py-0.5 text-[11px] font-medium text-emerald-400">
|
|
<CheckCircle className="h-3 w-3" /> Configured
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-amber-900/50 px-2 py-0.5 text-[11px] font-medium text-amber-400">
|
|
<AlertCircle className="h-3 w-3" /> Not configured
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] text-gray-600">
|
|
Jira → Apps → Tempo → Settings → API Integration
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 pt-2">
|
|
<button
|
|
onClick={() => {
|
|
if (Object.keys(form).length > 0) saveMut.mutate(form);
|
|
}}
|
|
disabled={saveMut.isPending || Object.keys(form).length === 0}
|
|
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 disabled:opacity-50 transition-colors"
|
|
>
|
|
{saveMut.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
Save Configuration
|
|
</button>
|
|
</div>
|
|
|
|
{/* ── Test connections ───────────────────────────────────── */}
|
|
<div className="grid grid-cols-2 gap-3 pt-1">
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3 space-y-2">
|
|
<p className="text-xs font-medium text-gray-400">Test Jira connection</p>
|
|
<button
|
|
onClick={() => {
|
|
setJiraTestResult(null);
|
|
setJiraTestError(null);
|
|
jiraTestMut.mutate();
|
|
}}
|
|
disabled={jiraTestMut.isPending || !cfg?.admin_email_set}
|
|
className="flex items-center gap-2 rounded-lg border border-cyan-700 px-3 py-1.5 text-sm font-medium text-cyan-400 hover:bg-cyan-900/30 disabled:opacity-50 transition-colors"
|
|
>
|
|
{jiraTestMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <TestTube className="h-4 w-4" />}
|
|
Test Jira
|
|
</button>
|
|
{jiraTestResult && (
|
|
<div className="flex items-center gap-2 rounded-md bg-emerald-900/30 border border-emerald-800/50 px-3 py-2 text-xs text-emerald-300">
|
|
<CheckCircle className="h-3.5 w-3.5 shrink-0" />
|
|
Connected as: {jiraTestResult.connectedAs}
|
|
</div>
|
|
)}
|
|
{jiraTestError && (
|
|
<div className="flex items-center gap-2 rounded-md bg-red-900/30 border border-red-800/50 px-3 py-2 text-xs text-red-300">
|
|
<XCircle className="h-3.5 w-3.5 shrink-0" />
|
|
{jiraTestError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3 space-y-2">
|
|
<p className="text-xs font-medium text-gray-400">Test Tempo connection</p>
|
|
<button
|
|
onClick={() => {
|
|
setTempoTestResult(null);
|
|
setTempoTestError(null);
|
|
tempoTestMut.mutate();
|
|
}}
|
|
disabled={tempoTestMut.isPending || !cfg?.tempo_admin_token_set}
|
|
className="flex items-center gap-2 rounded-lg border border-purple-700 px-3 py-1.5 text-sm font-medium text-purple-400 hover:bg-purple-900/30 disabled:opacity-50 transition-colors"
|
|
>
|
|
{tempoTestMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <TestTube className="h-4 w-4" />}
|
|
Test Tempo
|
|
</button>
|
|
{tempoTestResult && (
|
|
<div className="flex items-center gap-2 rounded-md bg-emerald-900/30 border border-emerald-800/50 px-3 py-2 text-xs text-emerald-300">
|
|
<CheckCircle className="h-3.5 w-3.5 shrink-0" />
|
|
{tempoTestResult}
|
|
</div>
|
|
)}
|
|
{tempoTestError && (
|
|
<div className="flex items-center gap-2 rounded-md bg-red-900/30 border border-red-800/50 px-3 py-2 text-xs text-red-300">
|
|
<XCircle className="h-3.5 w-3.5 shrink-0" />
|
|
{tempoTestError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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: "manager", label: "Aegis Manager", desc: "Approves campaigns and campaign changes" },
|
|
{ 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
|
|
// ---------------------------------------------------------------------------
|
|
|
|
type Tab = "profile" | "notifications" | "webhooks" | "email" | "jira" | "sso" | "system";
|
|
|
|
export default function SettingsPage() {
|
|
const { user } = useAuth();
|
|
const role = user?.role ?? "viewer";
|
|
const isAdmin = role === "admin";
|
|
const isLead = ["admin", "red_lead", "blue_lead"].includes(role);
|
|
|
|
const [activeTab, setActiveTab] = useState<Tab>("profile");
|
|
|
|
const tabs: { id: Tab; label: string; icon: React.FC<{ className?: string }>; show: boolean }[] =
|
|
[
|
|
{ id: "profile", label: "Profile", icon: User, show: true },
|
|
{ id: "notifications", label: "Notifications", icon: Bell, show: true },
|
|
{
|
|
id: "webhooks",
|
|
label: "Webhooks",
|
|
icon: Webhook,
|
|
show: isLead,
|
|
},
|
|
{ id: "email", label: "Email / SMTP", icon: Mail, 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);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 px-6 py-8">
|
|
<div className="mx-auto max-w-4xl">
|
|
{/* Header */}
|
|
<div className="mb-8 flex items-center gap-3">
|
|
<Settings className="h-7 w-7 text-cyan-400" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Settings</h1>
|
|
<p className="text-sm text-gray-500">
|
|
Manage your preferences, integrations, and system configuration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-6">
|
|
{/* Sidebar tabs */}
|
|
<nav className="w-44 shrink-0 space-y-1">
|
|
{visibleTabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
|
|
activeTab === tab.id
|
|
? "bg-cyan-500/10 text-cyan-400"
|
|
: "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
|
|
}`}
|
|
>
|
|
<tab.icon className="h-4 w-4" />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1">
|
|
{activeTab === "profile" && (
|
|
<Section title="Profile & Jira" icon={User}>
|
|
<ProfileSection />
|
|
</Section>
|
|
)}
|
|
{activeTab === "notifications" && (
|
|
<Section title="Notification Preferences" icon={Bell}>
|
|
<NotificationSection />
|
|
</Section>
|
|
)}
|
|
{activeTab === "webhooks" && isLead && (
|
|
<Section title="Webhook Configuration" icon={Webhook}>
|
|
<WebhooksSection />
|
|
</Section>
|
|
)}
|
|
{activeTab === "email" && isAdmin && (
|
|
<Section title="Email / SMTP Configuration" icon={Mail}>
|
|
<EmailSection />
|
|
</Section>
|
|
)}
|
|
{activeTab === "jira" && isAdmin && (
|
|
<Section title="Jira Integration" icon={Link2}>
|
|
<JiraConfigSection />
|
|
</Section>
|
|
)}
|
|
{activeTab === "sso" && isAdmin && (
|
|
<SsoConfigSection />
|
|
)}
|
|
{activeTab === "system" && isAdmin && (
|
|
<div className="space-y-6">
|
|
<SystemInfoSection />
|
|
<ExportImportSection />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|