cesnimda
acf60c2a07
Wave 6. Swaps react-scripts' build/dev tooling for Next.js while keeping the app's actual routing/rendering model unchanged -- the app is almost entirely behind auth with no proven SSR/SEO need, so a real App Router rewrite would touch ~90 files for zero user-visible benefit. - next.config.js: output:'export' (static HTML+JS, same "single index.html served by nginx with try_files fallback" deploy as CRA). - app/layout.tsx + app/page.tsx: root shell ports public/index.html's <head>, mounts the whole existing App tree client-only (ssr:false) since it reads window/localStorage during initial render and Next's static prerender would otherwise execute that on the server. - Renamed src/pages/ -> src/views/ (Next's Pages Router auto-detects any `pages/` dir under the app root and tried to build our React Router page components as its own routes). - REACT_APP_* -> NEXT_PUBLIC_* across code, .env.development, Dockerfile, docker-compose.yml build args. - Replaced the CRA SVGR import (`ReactComponent` from .svg, unsupported under Turbopack) with a small inline JobbjaktMark component. - TypeScript 4.9 -> 5.9 (MUI v8's type-checked build needs syntax 4.9's parser rejects; CRA never hit this because babel doesn't type-check). - Dropped CRA-only files (index.tsx, reportWebVitals, react-app-env.d.ts, public/index.html); kept react-scripts as the Jest test runner only (next/jest migration not needed -- the existing config already works). Verified: `next build` static export succeeds, `next dev` serves the landing page and client-side routes (login etc.) correctly, all 57 frontend tests + 172 backend tests still green. Known caveat: deep-linking straight to a sub-route (e.g. /login) 404s in `next dev` since there's no server route for it -- the app only ever mounts at "/". Production is unaffected: nginx's existing try_files fallback still serves index.html for any path.
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
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>
|
|
);
|
|
}
|