Polish settings and admin system pages
This commit is contained in:
@@ -1,14 +1,26 @@
|
||||
import React from 'react';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
|
||||
import AdminSystemPage from './pages/AdminSystemPage';
|
||||
import { I18nProvider } from './i18n/I18nProvider';
|
||||
import { api } from './api';
|
||||
|
||||
jest.mock('./api', () => ({
|
||||
api: {
|
||||
get: jest.fn(),
|
||||
post: jest.fn(),
|
||||
put: jest.fn(),
|
||||
patch: jest.fn(),
|
||||
delete: jest.fn(),
|
||||
interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } },
|
||||
},
|
||||
getApiErrorMessage: (error: any, fallback?: string) => fallback || 'Request failed.',
|
||||
}));
|
||||
|
||||
const mockedApi = api as jest.Mocked<typeof api>;
|
||||
|
||||
describe('AdminSystemPage', () => {
|
||||
it('renders AI service health, latency, and OCR readiness', async () => {
|
||||
beforeEach(() => {
|
||||
mockedApi.get.mockImplementation((url: string) => {
|
||||
if (url === '/admin/system') {
|
||||
return Promise.resolve({
|
||||
@@ -54,9 +66,45 @@ describe('AdminSystemPage', () => {
|
||||
},
|
||||
} as any);
|
||||
}
|
||||
if (url === '/admin/system/email-settings') {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
enabled: true,
|
||||
host: 'smtp.example.test',
|
||||
port: 587,
|
||||
user: 'mailer@example.test',
|
||||
from: 'noreply@example.test',
|
||||
fromName: 'Jobbjakt',
|
||||
enableSsl: true,
|
||||
timeoutMs: 15000,
|
||||
usesOverrides: false,
|
||||
hasPassword: true,
|
||||
},
|
||||
} as any);
|
||||
}
|
||||
return Promise.resolve({ data: {} } as any);
|
||||
});
|
||||
mockedApi.put.mockResolvedValue({
|
||||
data: {
|
||||
enabled: true,
|
||||
host: 'smtp.changed.test',
|
||||
port: 2525,
|
||||
user: 'mailer@example.test',
|
||||
from: 'noreply@example.test',
|
||||
fromName: 'Jobbjakt',
|
||||
enableSsl: true,
|
||||
timeoutMs: 15000,
|
||||
usesOverrides: true,
|
||||
hasPassword: true,
|
||||
},
|
||||
} as any);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders AI service health, latency, and OCR readiness', async () => {
|
||||
render(
|
||||
<I18nProvider>
|
||||
<AdminSystemPage />
|
||||
@@ -64,7 +112,7 @@ describe('AdminSystemPage', () => {
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('AI service')).toBeTruthy();
|
||||
expect(screen.getByText('Production')).toBeTruthy();
|
||||
});
|
||||
|
||||
expect(screen.getByText(/25.8 ms probe/i)).toBeTruthy();
|
||||
@@ -72,4 +120,27 @@ describe('AdminSystemPage', () => {
|
||||
expect(screen.getByText('OCR avg latency')).toBeTruthy();
|
||||
expect(screen.getByText('88.4 ms')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('loads and saves smtp settings from the settings tab', async () => {
|
||||
render(
|
||||
<I18nProvider>
|
||||
<AdminSystemPage />
|
||||
</I18nProvider>,
|
||||
);
|
||||
|
||||
expect(await screen.findByText('AI service')).toBeTruthy();
|
||||
fireEvent.click(screen.getByRole('tab', { name: /settings/i }));
|
||||
|
||||
const hostInput = await screen.findByLabelText(/host/i);
|
||||
fireEvent.change(hostInput, { target: { value: 'smtp.changed.test' } });
|
||||
fireEvent.change(screen.getByLabelText(/port/i), { target: { value: '2525' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: /save settings/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockedApi.put).toHaveBeenCalledWith('/admin/system/email-settings', expect.objectContaining({
|
||||
host: 'smtp.changed.test',
|
||||
port: 2525,
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -28,8 +28,8 @@ export default function BackupCard() {
|
||||
link.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||||
toast(t("backupDownloaded"), "success");
|
||||
} catch {
|
||||
toast(t("backupFailed"), "error");
|
||||
} catch (error: any) {
|
||||
toast(getApiErrorMessage(error, t("backupFailed")), "error");
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
|
||||
@@ -222,22 +222,33 @@ export default function DashboardView() {
|
||||
<Box>
|
||||
<SectionCard
|
||||
sx={{
|
||||
background: theme.palette.mode === "dark"
|
||||
? `radial-gradient(circle at top left, ${alpha(theme.palette.primary.main, 0.26)}, transparent 35%), linear-gradient(135deg, rgba(15,23,42,0.94), rgba(15,23,42,0.78))`
|
||||
: `radial-gradient(circle at top left, ${alpha(theme.palette.primary.main, 0.18)}, transparent 35%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96))`,
|
||||
backgroundColor: "background.paper",
|
||||
borderColor: theme.palette.mode === "dark" ? alpha(theme.palette.primary.main, 0.22) : "divider",
|
||||
boxShadow: theme.palette.mode === "dark"
|
||||
? `0 20px 48px ${alpha(theme.palette.common.black, 0.34)}`
|
||||
: "0 18px 50px rgba(15, 23, 42, 0.06)",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background: theme.palette.mode === 'dark'
|
||||
? `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.14)}, transparent 42%)`
|
||||
: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)}, transparent 42%)`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "flex-start" }}>
|
||||
<Box sx={{ maxWidth: 760 }}>
|
||||
<Typography variant="overline" sx={{ color: theme.palette.mode === "dark" ? alpha(theme.palette.primary.light, 0.95) : "primary.main", fontWeight: 800 }}>
|
||||
<Typography variant="overline" sx={{ color: theme.palette.primary.main, fontWeight: 800 }}>
|
||||
{t("dashboardHeroLabel")}
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5, letterSpacing: -0.6, color: theme.palette.mode === "dark" ? "common.white" : "text.primary" }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5, letterSpacing: -0.6, color: "text.primary" }}>
|
||||
{t("dashboardOverviewTitle")}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.82) : "text.secondary", mt: 1.25, maxWidth: 680 }}>
|
||||
<Typography variant="body1" sx={{ color: "text.secondary", mt: 1.25, maxWidth: 680 }}>
|
||||
{t("dashboardOverviewBody")}
|
||||
</Typography>
|
||||
|
||||
|
||||
@@ -137,8 +137,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
|
||||
onSignedIn?.();
|
||||
}
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data || e?.message || t("googleAuthFailed");
|
||||
toast(String(msg), "error");
|
||||
toast(getApiErrorMessage(e, t("googleAuthFailed")), "error");
|
||||
} finally {
|
||||
setWorking(false);
|
||||
}
|
||||
@@ -250,3 +249,10 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
raphy>
|
||||
) : null}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||
|
||||
import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
|
||||
|
||||
import { api } from "../api";
|
||||
import { api, getApiErrorMessage } from "../api";
|
||||
import { useToast } from "../toast";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function RulesSettingsCard() {
|
||||
})
|
||||
.catch((e: any) => {
|
||||
setS(null);
|
||||
setLoadError(String(e?.response?.data || e?.message || t("rulesLoadFailed")));
|
||||
setLoadError(getApiErrorMessage(e, t("rulesLoadFailed")));
|
||||
});
|
||||
}, [t]);
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
Box,
|
||||
@@ -9,9 +9,11 @@ import {
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Popover,
|
||||
Select,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
@@ -43,7 +45,39 @@ function TabPanel({ value, index, children }: { value: number; index: number; ch
|
||||
return <Box sx={{ mt: 2 }}>{children}</Box>;
|
||||
}
|
||||
|
||||
const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d"];
|
||||
const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d", "#8b5cf6", "#f97316"];
|
||||
const NOTIFICATION_PREFS_KEY = "settings.notificationPrefs";
|
||||
|
||||
type NotificationPrefs = {
|
||||
emailFollowUpReminders: boolean;
|
||||
emailGhostedJobAlerts: boolean;
|
||||
inAppReminderHighlights: boolean;
|
||||
};
|
||||
|
||||
function loadNotificationPrefs(): NotificationPrefs {
|
||||
try {
|
||||
const raw = window.localStorage.getItem(NOTIFICATION_PREFS_KEY);
|
||||
if (!raw) {
|
||||
return {
|
||||
emailFollowUpReminders: true,
|
||||
emailGhostedJobAlerts: true,
|
||||
inAppReminderHighlights: true,
|
||||
};
|
||||
}
|
||||
return {
|
||||
emailFollowUpReminders: true,
|
||||
emailGhostedJobAlerts: true,
|
||||
inAppReminderHighlights: true,
|
||||
...JSON.parse(raw),
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
emailFollowUpReminders: true,
|
||||
emailGhostedJobAlerts: true,
|
||||
inAppReminderHighlights: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default function SettingsView({
|
||||
pageSize,
|
||||
@@ -59,8 +93,32 @@ export default function SettingsView({
|
||||
const navigate = useNavigate();
|
||||
const [tab, setTab] = useState(0);
|
||||
const { language, setLanguage, t } = useI18n();
|
||||
const [accentAnchor, setAccentAnchor] = useState<HTMLElement | null>(null);
|
||||
const [accentDraft, setAccentDraft] = useState(accentColor);
|
||||
const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs>(() => loadNotificationPrefs());
|
||||
|
||||
const accentOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentColor), [accentColor]);
|
||||
const accentDraftOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentDraft), [accentDraft]);
|
||||
|
||||
useEffect(() => {
|
||||
setAccentDraft(accentOk ? accentColor : "#15803d");
|
||||
}, [accentColor, accentOk]);
|
||||
|
||||
useEffect(() => {
|
||||
window.localStorage.setItem(NOTIFICATION_PREFS_KEY, JSON.stringify(notificationPrefs));
|
||||
}, [notificationPrefs]);
|
||||
|
||||
const applyAccent = () => {
|
||||
if (!accentDraftOk) return;
|
||||
onAccentColorChange(accentDraft);
|
||||
setAccentAnchor(null);
|
||||
};
|
||||
|
||||
const resetAccent = () => {
|
||||
onResetAccentColor();
|
||||
setAccentDraft("#15803d");
|
||||
setAccentAnchor(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper sx={{ mt: 0, p: 2 }}>
|
||||
@@ -99,40 +157,70 @@ export default function SettingsView({
|
||||
</FormControl>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
|
||||
<FormControl sx={{ width: 160 }}>
|
||||
<Typography variant="caption" sx={{ mb: 0.75 }}>{t("settingsAccent")}</Typography>
|
||||
<input
|
||||
aria-label={t("settingsAccent")}
|
||||
type="color"
|
||||
value={accentOk ? accentColor : "#15803d"}
|
||||
onChange={(e) => onAccentColorChange(e.target.value)}
|
||||
style={{ width: 160, height: 56, border: "none", background: "transparent", padding: 0 }}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button variant="outlined" onClick={onResetAccentColor}>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ mb: 0.75, display: "block" }}>{t("settingsAccent")}</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e) => setAccentAnchor(e.currentTarget)}
|
||||
sx={{ gap: 1.25, justifyContent: "flex-start", minWidth: 180 }}
|
||||
>
|
||||
<Box sx={{ width: 20, height: 20, borderRadius: 999, bgcolor: accentOk ? accentColor : "#15803d", border: "1px solid", borderColor: "divider" }} />
|
||||
{accentOk ? accentColor.toUpperCase() : "#15803D"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Button variant="outlined" onClick={resetAccent}>
|
||||
{t("settingsReset")}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 2 }}>
|
||||
<Popover
|
||||
open={Boolean(accentAnchor)}
|
||||
anchorEl={accentAnchor}
|
||||
onClose={() => setAccentAnchor(null)}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
||||
>
|
||||
<Box sx={{ p: 2, width: 280, display: "grid", gap: 1.5 }}>
|
||||
<Typography sx={{ fontWeight: 900 }}>{t("settingsAccent")}</Typography>
|
||||
<input
|
||||
aria-label={t("settingsAccent")}
|
||||
type="color"
|
||||
value={accentDraftOk ? accentDraft : "#15803d"}
|
||||
onChange={(e) => setAccentDraft(e.target.value)}
|
||||
style={{ width: "100%", height: 52, border: "none", background: "transparent", padding: 0, cursor: "pointer" }}
|
||||
/>
|
||||
<TextField
|
||||
label={t("settingsAccent")}
|
||||
value={accentDraft}
|
||||
onChange={(e) => setAccentDraft(e.target.value)}
|
||||
error={!accentDraftOk}
|
||||
helperText={accentDraftOk ? t("settingsAccentHelp") : t("settingsAccentInvalid")}
|
||||
fullWidth
|
||||
/>
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
{ACCENTS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => onAccentColorChange(c)}
|
||||
onClick={() => setAccentDraft(c)}
|
||||
title={c}
|
||||
aria-label={`${t("settingsAccent")} ${c}`}
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 999,
|
||||
border: c.toLowerCase() === accentColor.toLowerCase() ? "2px solid rgba(255,255,255,0.85)" : "1px solid rgba(148,163,184,0.35)",
|
||||
border: c.toLowerCase() === accentDraft.toLowerCase() ? "2px solid rgba(15,23,42,0.9)" : "1px solid rgba(148,163,184,0.35)",
|
||||
background: c,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
|
||||
<Button variant="text" onClick={() => setAccentAnchor(null)}>{t("cancel")}</Button>
|
||||
<Button variant="contained" onClick={applyAccent} disabled={!accentDraftOk}>{t("save")}</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Popover>
|
||||
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1 }}>
|
||||
{t("settingsSavedPerUser")}
|
||||
@@ -213,36 +301,35 @@ export default function SettingsView({
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tab} index={1}>
|
||||
<Box sx={{ display: "grid", gap: 2 }}>
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsFollowUpsTitle")}</Typography>
|
||||
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsFollowUpsBody")}</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
<Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
|
||||
<Button variant="text" onClick={() => navigate("/jobs")}>{t("settingsReviewJobs")}</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
<RulesSettingsCard />
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tab} index={2}>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsTitle")}</Typography>
|
||||
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsNotificationsBody")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsNotificationsDelivery")}</Typography>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsWhatYouGetTitle")}</Typography>
|
||||
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsNotificationsWhatYouGetBody")}</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
<Typography sx={{ color: "text.secondary", mb: 2 }}>{t("settingsNotificationsBody")}</Typography>
|
||||
<Box sx={{ display: "grid", gap: 1 }}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={notificationPrefs.emailFollowUpReminders} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailFollowUpReminders: e.target.checked }))} />}
|
||||
label={t("settingsNotificationsFollowUpReminders")}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={notificationPrefs.emailGhostedJobAlerts} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailGhostedJobAlerts: e.target.checked }))} />}
|
||||
label={t("settingsNotificationsGhostedJobs")}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={notificationPrefs.inAppReminderHighlights} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, inAppReminderHighlights: e.target.checked }))} />}
|
||||
label={t("settingsNotificationsInAppReminders")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1.5 }}>
|
||||
{t("settingsNotificationsDelivery")}
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1.5 }}>
|
||||
<Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
|
||||
<Button variant="text" onClick={() => navigate("/admin/system")}>{t("settingsCheckSystemStatus")}</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tab} index={3}>
|
||||
|
||||
@@ -145,15 +145,18 @@ export const translations = {
|
||||
settingsColumnDateApplied: "Date applied",
|
||||
settingsColumnDays: "Days",
|
||||
settingsColumnJobUrl: "Job URL",
|
||||
settingsFollowUpsTitle: "Follow-up rules",
|
||||
settingsFollowUpsBody: "Set when applied, offer, and feedback stages should surface follow-up work or be treated as ghosted. These rules drive the reminder inbox and the job table flags.",
|
||||
settingsFollowUpsTitle: "Follow-up rules by scenario",
|
||||
settingsFollowUpsBody: "Set when applied, offer, and feedback scenarios should surface follow-up work or be treated as ghosted.",
|
||||
settingsOpenReminderInbox: "Open reminders",
|
||||
settingsReviewJobs: "Review jobs",
|
||||
settingsNotificationsTitle: "Email notifications",
|
||||
settingsNotificationsBody: "Notifications are sent via SMTP. Configure the API with `Email:*` settings or env vars like `EMAIL_SMTP_HOST`, then Jobbjakt can deliver password reset and reminder emails.",
|
||||
settingsNotificationsDelivery: "Use the system status page to confirm SMTP is configured before testing outbound email.",
|
||||
settingsNotificationsWhatYouGetTitle: "What gets sent",
|
||||
settingsNotificationsWhatYouGetBody: "Right now the app sends password reset mail and can surface reminder-driven follow-up workflows. Gmail OAuth stays separate from SMTP delivery.",
|
||||
settingsNotificationsTitle: "Notification settings",
|
||||
settingsNotificationsBody: "Choose which reminders should show up in your workflow. SMTP delivery can be checked from the system page.",
|
||||
settingsNotificationsDelivery: "SMTP delivery and test mail live under Admin → System → Settings.",
|
||||
settingsNotificationsFollowUpReminders: "Email reminders for follow-ups",
|
||||
settingsNotificationsGhostedJobs: "Email alerts for ghosted jobs",
|
||||
settingsNotificationsInAppReminders: "Highlight reminders in the app",
|
||||
settingsAccentHelp: "Drag in the color picker, then save when it looks right.",
|
||||
settingsAccentInvalid: "Use a full hex color like #15803D.",
|
||||
settingsCheckSystemStatus: "Check system status",
|
||||
profileTitle: "Profile",
|
||||
profileHeadlinePlaceholder: "Add a short headline to personalize your account view.",
|
||||
@@ -527,6 +530,8 @@ export const translations = {
|
||||
adminAuditActions: "Actions",
|
||||
adminAuditNoEvents: "No events.",
|
||||
adminSystemEnvironment: "Environment",
|
||||
adminSystemStatusTab: "Status",
|
||||
adminSystemSettingsTab: "Settings",
|
||||
adminSystemDatabase: "Database",
|
||||
adminSystemConnected: "Connected",
|
||||
adminSystemOffline: "Offline",
|
||||
@@ -539,6 +544,16 @@ export const translations = {
|
||||
adminSystemDatabaseStorage: "Database and storage",
|
||||
adminSystemRuntimeAuth: "Runtime and auth",
|
||||
adminSystemEmailConfig: "Email configuration",
|
||||
adminSystemEmailSettingsTitle: "SMTP settings",
|
||||
adminSystemEmailSettingsBody: "Update the effective SMTP settings used for password resets, reminders, and admin test email delivery.",
|
||||
adminSystemUsername: "SMTP username",
|
||||
adminSystemPassword: "SMTP password",
|
||||
adminSystemPasswordStored: "A password is already stored. Leave this blank to keep it.",
|
||||
adminSystemPasswordMissing: "No SMTP password stored yet.",
|
||||
adminSystemTimeoutMs: "Timeout (ms)",
|
||||
adminSystemClearStoredPassword: "Clear stored password",
|
||||
adminSystemSaveSettings: "Save settings",
|
||||
adminSystemSaving: "Saving...",
|
||||
adminSystemSummarizerRuntime: "AI runtime",
|
||||
adminSystemSmtpTest: "SMTP test email",
|
||||
adminSystemSmtpTestBody: "Send a quick delivery check using the configured SMTP settings. Leave the recipient blank to use your admin email.",
|
||||
@@ -585,7 +600,7 @@ export const translations = {
|
||||
signedInAs: "Signed in as {name}.",
|
||||
unlinkGoogle: "Unlink Google",
|
||||
backupTitle: "Data safety",
|
||||
backupBody: "One-click encrypted backup (Windows DPAPI).",
|
||||
backupBody: "One-click encrypted backup of your current data.",
|
||||
backupPreparing: "Preparing...",
|
||||
backupDownload: "Download encrypted backup",
|
||||
backupDownloaded: "Backup downloaded.",
|
||||
@@ -863,7 +878,7 @@ export const translations = {
|
||||
jobDetailsNoReadiness: "No readiness analysis available yet.",
|
||||
jobDetailsNoHistory: "No history yet.",
|
||||
jobDetailsNothingHighlighted: "Nothing highlighted yet.",
|
||||
rulesTitle: "Follow-up + Ghosting Rules",
|
||||
rulesTitle: "Follow-up rules by scenario",
|
||||
rulesBody: "Set how long to wait before a follow-up is due and when a thread should be treated as ghosted.",
|
||||
rulesLoading: "Loading your follow-up settings…",
|
||||
rulesLoadFailed: "Could not load your follow-up settings.",
|
||||
@@ -1420,7 +1435,7 @@ export const translations = {
|
||||
signedInAs: "Logget inn som {name}.",
|
||||
unlinkGoogle: "Koble fra Google",
|
||||
backupTitle: "Datasikkerhet",
|
||||
backupBody: "Kryptert sikkerhetskopi med ett klikk (Windows DPAPI).",
|
||||
backupBody: "Kryptert sikkerhetskopi av gjeldende data med ett klikk.",
|
||||
backupPreparing: "Forbereder...",
|
||||
backupDownload: "Last ned kryptert sikkerhetskopi",
|
||||
backupDownloaded: "Sikkerhetskopi lastet ned.",
|
||||
@@ -1698,7 +1713,7 @@ export const translations = {
|
||||
jobDetailsNoReadiness: "Ingen beredskapsanalyse tilgjengelig ennå.",
|
||||
jobDetailsNoHistory: "Ingen historikk ennå.",
|
||||
jobDetailsNothingHighlighted: "Ingenting fremhevet ennå.",
|
||||
rulesTitle: "Regler for oppfølging og ghosting",
|
||||
rulesTitle: "Oppfølgingsregler per scenario",
|
||||
rulesBody: "Velg hvor lenge du vil vente før oppfølging forfaller, og når en tråd skal regnes som ghostet.",
|
||||
rulesLoading: "Laster inn oppfølgingsinnstillingene dine…",
|
||||
rulesLoadFailed: "Kunne ikke laste oppfølgingsinnstillingene dine.",
|
||||
|
||||
@@ -7,8 +7,12 @@ import {
|
||||
Chip,
|
||||
Paper,
|
||||
Stack,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
Typography,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
} from "@mui/material";
|
||||
|
||||
import { api, getApiErrorMessage } from "../api";
|
||||
@@ -43,6 +47,19 @@ type AiServiceMetrics = {
|
||||
lastError?: string | null;
|
||||
};
|
||||
|
||||
type EditableEmailSettings = {
|
||||
enabled: boolean;
|
||||
host: string;
|
||||
port: number;
|
||||
user: string;
|
||||
from: string;
|
||||
fromName: string;
|
||||
enableSsl: boolean;
|
||||
timeoutMs: number;
|
||||
usesOverrides: boolean;
|
||||
hasPassword: boolean;
|
||||
};
|
||||
|
||||
type SystemStatus = {
|
||||
environment: string;
|
||||
contentRoot: string;
|
||||
@@ -121,9 +138,14 @@ function DetailRow({ label, value }: { label: string; value: React.ReactNode })
|
||||
|
||||
export default function AdminSystemPage() {
|
||||
const { t } = useI18n();
|
||||
const [tab, setTab] = useState(0);
|
||||
const [status, setStatus] = useState<SystemStatus | null>(null);
|
||||
const [emailSettings, setEmailSettings] = useState<EditableEmailSettings | null>(null);
|
||||
const [smtpPassword, setSmtpPassword] = useState("");
|
||||
const [clearPassword, setClearPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [runningProbe, setRunningProbe] = useState(false);
|
||||
const [savingSettings, setSavingSettings] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [testEmailTo, setTestEmailTo] = useState("");
|
||||
const [testEmailSubject, setTestEmailSubject] = useState("Jobbjakt SMTP test");
|
||||
@@ -134,11 +156,18 @@ export default function AdminSystemPage() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await api.get<SystemStatus>("/admin/system");
|
||||
setStatus(res.data);
|
||||
const [statusRes, emailRes] = await Promise.all([
|
||||
api.get<SystemStatus>("/admin/system"),
|
||||
api.get<EditableEmailSettings>("/admin/system/email-settings"),
|
||||
]);
|
||||
setStatus(statusRes.data);
|
||||
setEmailSettings(emailRes.data);
|
||||
setSmtpPassword("");
|
||||
setClearPassword(false);
|
||||
} catch (e: any) {
|
||||
setError(getApiErrorMessage(e, "Failed to load system status."));
|
||||
setStatus(null);
|
||||
setEmailSettings(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -170,6 +199,7 @@ export default function AdminSystemPage() {
|
||||
subject: testEmailSubject.trim() || null,
|
||||
message: testEmailMessage.trim() || null,
|
||||
});
|
||||
setError(null);
|
||||
} catch (e: any) {
|
||||
setError(getApiErrorMessage(e, "Failed to send test email."));
|
||||
} finally {
|
||||
@@ -177,6 +207,33 @@ export default function AdminSystemPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const saveEmailSettings = async () => {
|
||||
if (!emailSettings) return;
|
||||
setSavingSettings(true);
|
||||
try {
|
||||
const res = await api.put<EditableEmailSettings>("/admin/system/email-settings", {
|
||||
enabled: emailSettings.enabled,
|
||||
host: emailSettings.host,
|
||||
port: Number(emailSettings.port) || 587,
|
||||
user: emailSettings.user,
|
||||
password: smtpPassword.trim() || null,
|
||||
clearPassword,
|
||||
from: emailSettings.from,
|
||||
fromName: emailSettings.fromName,
|
||||
enableSsl: emailSettings.enableSsl,
|
||||
timeoutMs: Number(emailSettings.timeoutMs) || 15000,
|
||||
});
|
||||
setEmailSettings(res.data);
|
||||
setSmtpPassword("");
|
||||
setClearPassword(false);
|
||||
await load();
|
||||
} catch (e: any) {
|
||||
setError(getApiErrorMessage(e, "Failed to save email settings."));
|
||||
} finally {
|
||||
setSavingSettings(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
|
||||
@@ -209,10 +266,17 @@ export default function AdminSystemPage() {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{error ? <Alert severity="error">{error}</Alert> : null}
|
||||
{status?.database.warning ? <Alert severity={status.database.canConnect ? "warning" : "error"}>{status.database.warning}</Alert> : null}
|
||||
{status?.ai.lastError ? <Alert severity={status.ai.healthy ? "warning" : "error"}>{status.ai.lastError}</Alert> : null}
|
||||
<Tabs value={tab} onChange={(_, value) => setTab(value)}>
|
||||
<Tab label={t("adminSystemStatusTab")} />
|
||||
<Tab label={t("adminSystemSettingsTab")} />
|
||||
</Tabs>
|
||||
|
||||
{error ? <Alert severity="error">{error}</Alert> : null}
|
||||
{status?.database.warning && tab === 0 ? <Alert severity={status.database.canConnect ? "warning" : "error"}>{status.database.warning}</Alert> : null}
|
||||
{status?.ai.lastError && tab === 0 ? <Alert severity={status.ai.healthy ? "warning" : "error"}>{status.ai.lastError}</Alert> : null}
|
||||
|
||||
{tab === 0 ? (
|
||||
<>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(4, 1fr)" }, gap: 2 }}>
|
||||
<SummaryCard
|
||||
title={t("adminSystemEnvironment")}
|
||||
@@ -308,23 +372,6 @@ export default function AdminSystemPage() {
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
<Paper sx={{ p: 2, borderRadius: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSmtpTest")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>
|
||||
{t("adminSystemSmtpTestBody")}
|
||||
</Typography>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
|
||||
<TextField label={t("adminSystemRecipientEmail")} value={testEmailTo} onChange={(e) => setTestEmailTo(e.target.value)} placeholder={t("adminSystemRecipientPlaceholder")} />
|
||||
<TextField label={t("adminSystemSubject")} value={testEmailSubject} onChange={(e) => setTestEmailSubject(e.target.value)} />
|
||||
<TextField label={t("adminSystemMessage")} multiline minRows={3} value={testEmailMessage} onChange={(e) => setTestEmailMessage(e.target.value)} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
|
||||
<Button variant="contained" disabled={sendingTestEmail} onClick={() => void sendTestEmail()}>
|
||||
{sendingTestEmail ? t("adminSystemSending") : t("adminSystemSendTestEmail")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ p: 2, borderRadius: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSummarizerTelemetry")}</Typography>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(8, 1fr)" }, gap: 2 }}>
|
||||
@@ -346,6 +393,53 @@ export default function AdminSystemPage() {
|
||||
<Chip label={status?.ai.ocrAvailable ? `OCR ${status.ai.ocrLanguages || "enabled"}` : t("adminSystemOcrUnavailable")} variant="outlined" size="small" />
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
) : (
|
||||
<Box sx={{ display: "grid", gap: 2 }}>
|
||||
<Paper sx={{ p: 2, borderRadius: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemEmailSettingsTitle")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("adminSystemEmailSettingsBody")}</Typography>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={Boolean(emailSettings?.enabled)} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, enabled: e.target.checked } : prev)} />}
|
||||
label={t("adminSystemEnabled")}
|
||||
sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }}
|
||||
/>
|
||||
<TextField label={t("adminSystemHost")} value={emailSettings?.host ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, host: e.target.value } : prev)} fullWidth />
|
||||
<TextField label={t("adminSystemPort")} type="number" value={emailSettings?.port ?? 587} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, port: Number(e.target.value) } : prev)} fullWidth />
|
||||
<TextField label={t("adminSystemUsername")} value={emailSettings?.user ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, user: e.target.value } : prev)} fullWidth />
|
||||
<TextField label={t("adminSystemPassword")} type="password" value={smtpPassword} onChange={(e) => { setSmtpPassword(e.target.value); if (e.target.value.trim()) setClearPassword(false); }} helperText={emailSettings?.hasPassword ? t("adminSystemPasswordStored") : t("adminSystemPasswordMissing")} fullWidth />
|
||||
<TextField label={t("adminSystemFrom")} value={emailSettings?.from ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, from: e.target.value } : prev)} fullWidth />
|
||||
<TextField label={t("adminSystemFromName")} value={emailSettings?.fromName ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, fromName: e.target.value } : prev)} fullWidth />
|
||||
<TextField label={t("adminSystemTimeoutMs")} type="number" value={emailSettings?.timeoutMs ?? 15000} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, timeoutMs: Number(e.target.value) } : prev)} fullWidth />
|
||||
<FormControlLabel control={<Checkbox checked={Boolean(emailSettings?.enableSsl)} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, enableSsl: e.target.checked } : prev)} />} label={t("adminSystemSsl")} />
|
||||
<FormControlLabel control={<Checkbox checked={clearPassword} onChange={(e) => { setClearPassword(e.target.checked); if (e.target.checked) setSmtpPassword(""); }} />} label={t("adminSystemClearStoredPassword")} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
|
||||
<Button variant="contained" disabled={savingSettings || !emailSettings} onClick={() => void saveEmailSettings()}>
|
||||
{savingSettings ? t("adminSystemSaving") : t("adminSystemSaveSettings")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ p: 2, borderRadius: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSmtpTest")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>
|
||||
{t("adminSystemSmtpTestBody")}
|
||||
</Typography>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
|
||||
<TextField label={t("adminSystemRecipientEmail")} value={testEmailTo} onChange={(e) => setTestEmailTo(e.target.value)} placeholder={t("adminSystemRecipientPlaceholder")} />
|
||||
<TextField label={t("adminSystemSubject")} value={testEmailSubject} onChange={(e) => setTestEmailSubject(e.target.value)} />
|
||||
<TextField label={t("adminSystemMessage")} multiline minRows={3} value={testEmailMessage} onChange={(e) => setTestEmailMessage(e.target.value)} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
|
||||
<Button variant="contained" disabled={sendingTestEmail} onClick={() => void sendTestEmail()}>
|
||||
{sendingTestEmail ? t("adminSystemSending") : t("adminSystemSendTestEmail")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -79,8 +79,7 @@ export default function AdminUsersPage() {
|
||||
await api.post(`/users/${u.id}/send-password-reset`);
|
||||
toast(t("adminUsersResetSent"), "success");
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data || e?.message || t("adminUsersResetFailed");
|
||||
toast(String(msg), "error");
|
||||
toast(getApiErrorMessage(e, t("adminUsersResetFailed")), "error");
|
||||
}
|
||||
}, [t, toast]);
|
||||
|
||||
@@ -216,3 +215,9 @@ export default function AdminUsersPage() {
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
pography>
|
||||
) : null}
|
||||
</Paper>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
import SettingsView from './components/SettingsView';
|
||||
import { I18nProvider } from './i18n/I18nProvider';
|
||||
import { ToastProvider } from './toast';
|
||||
import { api } from './api';
|
||||
|
||||
jest.mock('./api', () => ({
|
||||
api: {
|
||||
get: jest.fn(),
|
||||
post: jest.fn(),
|
||||
put: jest.fn(),
|
||||
patch: jest.fn(),
|
||||
delete: jest.fn(),
|
||||
interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } },
|
||||
},
|
||||
getApiErrorMessage: (error: any, fallback?: string) => fallback || 'Request failed.',
|
||||
}));
|
||||
|
||||
jest.mock('./components/ImportExportJobs', () => () => <div>Import Export Stub</div>);
|
||||
jest.mock('./components/GoogleAuthCard', () => () => <div>Google Auth Stub</div>);
|
||||
jest.mock('./components/BackupCard', () => () => <div>Backup Stub</div>);
|
||||
jest.mock('./components/AuthStatusCard', () => () => <div>Auth Status Stub</div>);
|
||||
|
||||
const mockedApi = api as jest.Mocked<typeof api>;
|
||||
|
||||
function renderView(onAccentColorChange = jest.fn()) {
|
||||
return {
|
||||
onAccentColorChange,
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<ToastProvider>
|
||||
<I18nProvider>
|
||||
<SettingsView
|
||||
pageSize={20}
|
||||
onPageSizeChange={jest.fn()}
|
||||
columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }}
|
||||
onColumnsChange={jest.fn()}
|
||||
themeMode="dark"
|
||||
onThemeModeChange={jest.fn()}
|
||||
accentColor="#15803d"
|
||||
onAccentColorChange={onAccentColorChange}
|
||||
onResetAccentColor={jest.fn()}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</ToastProvider>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockedApi.get.mockImplementation((url: string) => {
|
||||
if (url === '/rules') {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
id: 1,
|
||||
appliedFollowUpDays: 14,
|
||||
appliedGhostDays: 30,
|
||||
offerFollowUpDays: 7,
|
||||
offerGhostDays: 14,
|
||||
feedbackFollowUpDays: 7,
|
||||
feedbackGhostDays: 14,
|
||||
},
|
||||
} as any);
|
||||
}
|
||||
return Promise.resolve({ data: {} } as any);
|
||||
});
|
||||
window.localStorage.clear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('settings view uses one follow-up section, one notification section, and staged accent apply', async () => {
|
||||
const { onAccentColorChange } = renderView();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /#15803D/i }));
|
||||
const accentInput = (await screen.findAllByLabelText('Accent'))[1] as HTMLInputElement;
|
||||
fireEvent.change(accentInput, { target: { value: '#2563eb' } });
|
||||
expect(onAccentColorChange).not.toHaveBeenCalled();
|
||||
fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
|
||||
expect(onAccentColorChange).toHaveBeenCalledWith('#2563eb');
|
||||
|
||||
fireEvent.click(screen.getByRole('tab', { name: /follow-ups/i }));
|
||||
expect(await screen.findByText(/follow-up rules by scenario/i)).toBeInTheDocument();
|
||||
expect(screen.queryAllByText(/open reminders/i)).toHaveLength(0);
|
||||
|
||||
fireEvent.click(screen.getByRole('tab', { name: /notifications/i }));
|
||||
expect(screen.getByText(/notification settings/i)).toBeInTheDocument();
|
||||
expect(screen.getAllByText(/check system status/i).length).toBe(1);
|
||||
expect(screen.getByLabelText(/email reminders for follow-ups/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/email alerts for ghosted jobs/i)).toBeInTheDocument();
|
||||
});
|
||||
Reference in New Issue
Block a user