cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Harden password reset and email send flows

Browse Source
This commit is contained in:
cesnimda
2026-03-28 14:17:12 +01:00
parent 25ae6b94e9
commit 9f949ee9df
15 changed files with 205 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/App.tsx
+2
View File
@@ -27,6 +27,7 @@ import JobTable from "./components/JobTable";
import type { JobTableColumns } from "./components/JobTable";
import { I18nProvider, useI18n } from "./i18n/I18nProvider";
import LoginPage from "./pages/LoginPage";
import ForgotPasswordPage from "./pages/ForgotPasswordPage";
import ResetPasswordPage from "./pages/ResetPasswordPage";
import RouteErrorPage from "./pages/RouteErrorPage";
import { api } from "./api";
@@ -251,6 +252,7 @@ export default function App() {
const router = useMemo(() => createBrowserRouter([
{ path: "/login", element: <LoginPage />, errorElement: <RouteErrorPage /> },
{ path: "/forgot-password", element: <ForgotPasswordPage />, errorElement: <RouteErrorPage /> },
{ path: "/reset-password", element: <ResetPasswordPage />, errorElement: <RouteErrorPage /> },
{ path: "/*", element: <Shell jobPageSize={jobPageSize} setJobPageSize={setJobPageSize} jobColumns={jobColumns} setJobColumns={setJobColumns} themeMode={themeMode} onThemeModeChange={onThemeModeChange} accentColor={accentColor} onAccentColorChange={onAccentColorChange} onResetAccentColor={onResetAccentColor} />, errorElement: <RouteErrorPage /> },
], { future: { v7_relativeSplatPath: true } }), [jobColumns, jobPageSize, themeMode, accentColor]);
job-tracker-ui/src/api.ts
+2
View File
@@ -6,6 +6,8 @@ export function getApiErrorMessage(error: any, fallback = "Request failed.") {
const data = error?.response?.data;
if (typeof data === "string" && data.trim()) return data.trim();
if (typeof data?.message === "string" && data.message.trim()) return data.message.trim();
if (typeof data?.detail === "string" && data.detail.trim()) return data.detail.trim();
if (typeof data?.title === "string" && data.title.trim()) return data.title.trim();
if (Array.isArray(data?.errors)) {
const first = data.errors.find((value: unknown) => typeof value === "string" && value.trim());
if (first) return first;
job-tracker-ui/src/i18n/translations.ts
+6
View File
@@ -581,6 +581,9 @@ export const translations = {
rememberMeHelpPersistent: "Keeps you signed in on this device until you sign out.",
rememberMeHelpSession: "Keeps you signed in only for this browser session.",
forgotPassword: "Forgot password?",
forgotPasswordTitle: "Request a password reset",
forgotPasswordBody: "Enter your email address and we’ll send you a reset link if the account exists.",
forgotPasswordSubmit: "Send reset link",
passwordResetEnterEmail: "Enter your email first, then request a reset link.",
passwordResetRequestSending: "Sending reset link...",
passwordResetRequestSent: "If that account exists, a reset link has been sent.",
@@ -1413,6 +1416,9 @@ export const translations = {
rememberMeHelpPersistent: "Holder deg innlogget på denne enheten til du logger ut.",
rememberMeHelpSession: "Holder deg innlogget bare i denne nettleserøkten.",
forgotPassword: "Glemt passord?",
forgotPasswordTitle: "Be om tilbakestilling av passord",
forgotPasswordBody: "Skriv inn e-postadressen din, så sender vi en nullstillingslenke hvis kontoen finnes.",
forgotPasswordSubmit: "Send nullstillingslenke",
passwordResetEnterEmail: "Skriv inn e-post først, og be deretter om en nullstillingslenke.",
passwordResetRequestSending: "Sender nullstillingslenke...",
passwordResetRequestSent: "Hvis kontoen finnes, er en nullstillingslenke sendt.",
job-tracker-ui/src/login-page.test.tsx
+6 -6
View File
@@ -8,9 +8,11 @@ import { ToastProvider } from './toast';
import { I18nProvider } from './i18n/I18nProvider';
import { api } from './api';
const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => jest.fn(),
useNavigate: () => mockNavigate,
}));
const mockedApi = api as jest.Mocked<typeof api>;
@@ -43,6 +45,7 @@ describe('LoginPage', () => {
window.localStorage.clear();
window.sessionStorage.clear();
mockedApi.post.mockReset();
mockNavigate.mockReset();
});
afterEach(() => {
@@ -67,16 +70,13 @@ describe('LoginPage', () => {
expect(window.localStorage.getItem('authTokenPersistence')).toBe('session');
});
it('requests a password reset link for the entered email', async () => {
mockedApi.post.mockResolvedValueOnce({ data: {} } as any);
it('opens the separate forgot-password page with the typed email prefilled', async () => {
renderLoginPage();
await screen.findByLabelText('Email');
await userEvent.type(screen.getByLabelText('Email'), 'person@example.com');
await userEvent.click(screen.getByRole('button', { name: 'Forgot password?' }));
await waitFor(() => expect(mockedApi.post).toHaveBeenCalledWith('/auth/request-password-reset', { email: 'person@example.com' }));
expect(await screen.findByText('If that account exists, a reset link has been sent.')).toBeTruthy();
expect(mockNavigate).toHaveBeenCalledWith('/forgot-password?email=person%40example.com');
});
});
job-tracker-ui/src/pages/ForgotPasswordPage.tsx
+82
View File
@@ -0,0 +1,82 @@
import React, { useEffect, useState } from "react";
import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
export default function ForgotPasswordPage() {
const { toast } = useToast();
const { t } = useI18n();
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);
const [submitted, setSubmitted] = useState(false);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
setEmail(params.get("email") || "");
}, []);
return (
<Box
sx={{
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
p: 2,
background:
"radial-gradient(1200px 700px at 20% 0%, rgba(79,140,255,0.14), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(245,158,11,0.10), transparent 55%)",
}}
>
<Paper sx={{ width: "min(520px, 100%)", p: 3 }}>
<Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
{t("forgotPasswordTitle")}
</Typography>
<Typography sx={{ color: "text.secondary", mb: 2 }}>
{t("forgotPasswordBody")}
</Typography>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
if (!email.trim()) {
toast(t("passwordResetEnterEmail"), "info");
return;
}
setLoading(true);
api
.post("/auth/request-password-reset", { email: email.trim() })
.then(() => {
setSubmitted(true);
toast(t("passwordResetRequestSent"), "success");
})
.catch((error: any) => {
toast(getApiErrorMessage(error, t("passwordResetRequestFailed")), "error");
})
.finally(() => setLoading(false));
}}
sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
>
{submitted ? <Alert severity="success">{t("passwordResetRequestSent")}</Alert> : null}
<TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" fullWidth />
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 1 }}>
<Button type="button" variant="outlined" onClick={() => navigate("/login")} disabled={loading}>
{t("backToLogin")}
</Button>
<Button type="submit" variant="contained" disabled={loading}>
{loading ? t("passwordResetRequestSending") : t("forgotPasswordSubmit")}
</Button>
</Box>
</Box>
</Paper>
</Box>
);
}
job-tracker-ui/src/pages/LoginPage.tsx
+3 -23
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from "react";
import React, { useEffect, useState } from "react";
import { Box, Button, Checkbox, FormControlLabel, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
@@ -30,10 +30,8 @@ export default function LoginPage() {
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(() => getRememberMePref());
const [loading, setLoading] = useState(false);
const [resetLoading, setResetLoading] = useState(false);
const nextPath = (location?.state?.from as string | undefined) ?? "/jobs";
const canRequestPasswordReset = useMemo(() => email.trim().length > 0, [email]);
useEffect(() => {
api
@@ -58,23 +56,6 @@ export default function LoginPage() {
}
}
async function requestPasswordReset() {
if (!canRequestPasswordReset) {
toast(t("passwordResetEnterEmail"), "info");
return;
}
setResetLoading(true);
try {
await api.post("/auth/request-password-reset", { email: email.trim() });
toast(t("passwordResetRequestSent"), "success");
} catch (e: any) {
toast(getApiErrorMessage(e, t("passwordResetRequestFailed")), "error");
} finally {
setResetLoading(false);
}
}
const allowReg = cfg?.allowRegistration ?? false;
return (
@@ -116,11 +97,10 @@ export default function LoginPage() {
type="button"
variant="text"
size="small"
onClick={() => void requestPasswordReset()}
disabled={resetLoading}
onClick={() => navigate(`/forgot-password${email.trim() ? `?email=${encodeURIComponent(email.trim())}` : ""}`)}
sx={{ px: 0, minWidth: 0, fontWeight: 700, alignSelf: { xs: "stretch", sm: "auto" } }}
>
{resetLoading ? t("passwordResetRequestSending") : t("forgotPassword")}
{t("forgotPassword")}
</Button>
</Box>