kitos
519ddfb7a0
- SystemConfig model + migration b033 for runtime key-value config - GET/PATCH /system/email-config + POST /system/email-test (admin only) - email_service reads SMTP config from DB (overrides .env) - Webhooks now accessible to red_lead/blue_lead + admin - GET /users/me already existed; /users/me/preferences already working - SettingsPage with 4 role-aware tabs: * Profile & Jira: jira_account_id, user info * Notifications: role-specific email/in-app toggles (12 prefs) * Webhooks: full CRUD + test ping (leads + admin) * Email/SMTP: enable toggle, server config, test email (admin only) - Added /settings route (all authenticated users) - Settings link added to Sidebar
1004 lines
33 KiB
TypeScript
1004 lines
33 KiB
TypeScript
import { useState } 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,
|
|
} from "lucide-react";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import {
|
|
getEmailConfig,
|
|
updateEmailConfig,
|
|
sendTestEmail,
|
|
getWebhooks,
|
|
createWebhook,
|
|
updateWebhook,
|
|
deleteWebhook,
|
|
testWebhook,
|
|
getMe,
|
|
updateMyPreferences,
|
|
type EmailConfigUpdate,
|
|
type WebhookCreate,
|
|
type WebhookOut,
|
|
type NotificationPreferences,
|
|
} 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 qc = useQueryClient();
|
|
const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
|
|
|
|
const { data: me, isLoading } = useQuery({
|
|
queryKey: ["me-prefs"],
|
|
queryFn: getMe,
|
|
});
|
|
|
|
const [jiraAccountId, setJiraAccountId] = useState<string>("");
|
|
const [dirty, setDirty] = useState(false);
|
|
|
|
// Sync from server on load
|
|
if (me && !dirty && jiraAccountId === "" && me.jira_account_id) {
|
|
setJiraAccountId(me.jira_account_id ?? "");
|
|
}
|
|
|
|
const saveMut = useMutation({
|
|
mutationFn: updateMyPreferences,
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["me-prefs"] });
|
|
setDirty(false);
|
|
setToast({ msg: "Profile settings saved", type: "success" });
|
|
},
|
|
onError: () => setToast({ msg: "Failed to save", 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-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-medium text-gray-300 mb-3">Jira Integration</p>
|
|
<div>
|
|
<label className="mb-1 block text-xs font-medium text-gray-400">
|
|
Jira Account ID
|
|
</label>
|
|
<input
|
|
value={jiraAccountId}
|
|
onChange={(e) => {
|
|
setJiraAccountId(e.target.value);
|
|
setDirty(true);
|
|
}}
|
|
placeholder="e.g. 5abcdef1234567890abcdef1"
|
|
className="w-full max-w-sm 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">
|
|
Your Atlassian account ID used to link Aegis items to Jira. Find it in your Jira profile URL.
|
|
</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<button
|
|
onClick={() => saveMut.mutate({ jira_account_id: jiraAccountId || null })}
|
|
disabled={saveMut.isPending || !dirty}
|
|
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
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main SettingsPage
|
|
// ---------------------------------------------------------------------------
|
|
|
|
type Tab = "profile" | "notifications" | "webhooks" | "email";
|
|
|
|
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 },
|
|
];
|
|
|
|
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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|