Harden password reset and email send flows

job-tracker-ui/src/pages/ForgotPasswordPage.tsx

@@ -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

@@ -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>