Polish settings and auth UX

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
-import { Box, Button, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
+import { Box, Button, Checkbox, FormControlLabel, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
 
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { api } from "../api";
-import { setAuthToken } from "../auth";
+import { setAuthToken, setRememberMePref, getRememberMePref } from "../auth";
 import GoogleAuthCard from "../components/GoogleAuthCard";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
@@ -29,6 +29,8 @@ export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
+  const [rememberMe, setRememberMe] = useState(() => getRememberMePref());
+  const [requestingReset, setRequestingReset] = useState(false);
 
   const nextPath = (location?.state?.from as string | undefined) ?? "/jobs";
 
@@ -44,7 +46,8 @@ export default function LoginPage() {
     try {
       const url = mode === "register" ? "/auth/register" : "/auth/login";
       const res = await api.post<{ accessToken: string; tokenType: string }>(url, { email, password });
-      setAuthToken(res.data.accessToken);
+      setRememberMePref(rememberMe);
+      setAuthToken(res.data.accessToken, { remember: rememberMe });
       toast(t("signedIn"), "success");
       navigate(nextPath, { replace: true });
     } catch (e: any) {
@@ -55,6 +58,24 @@ export default function LoginPage() {
     }
   }
 
+  async function requestPasswordReset() {
+    if (!email.trim()) {
+      toast(t("loginResetEmailRequired"), "error");
+      return;
+    }
+
+    setRequestingReset(true);
+    try {
+      await api.post("/auth/request-password-reset", { email: email.trim() });
+      toast(t("loginResetRequested"), "success");
+    } catch (e: any) {
+      const msg = e?.response?.data || e?.message || t("loginResetRequestFailed");
+      toast(String(msg), "error");
+    } finally {
+      setRequestingReset(false);
+    }
+  }
+
   const allowReg = cfg?.allowRegistration ?? false;
 
   return (
@@ -86,16 +107,25 @@ export default function LoginPage() {
           <Box component="form" onSubmit={(e) => { e.preventDefault(); void submit("login"); }} sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
             <TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" fullWidth />
             <TextField label={t("profileCurrentPassword")} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={allowReg ? "new-password" : "current-password"} type="password" fullWidth />
+            <FormControlLabel
+              control={<Checkbox checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} />}
+              label={t("rememberMe")}
+            />
 
-            <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end", mt: 1 }}>
-              {allowReg && (
-                <Button type="button" variant="outlined" disabled={loading} onClick={() => void submit("register")}>
-                  {t("createAccount")}
-                </Button>
-              )}
-              <Button type="submit" variant="contained" disabled={loading}>
-                {t("signInTitle")}
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mt: 0.5 }}>
+              <Button type="button" variant="text" onClick={() => void requestPasswordReset()} disabled={loading || requestingReset}>
+                {requestingReset ? t("loginRequestingReset") : t("forgotPassword")}
               </Button>
+              <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
+                {allowReg && (
+                  <Button type="button" variant="outlined" disabled={loading} onClick={() => void submit("register")}>
+                    {t("createAccount")}
+                  </Button>
+                )}
+                <Button type="submit" variant="contained" disabled={loading}>
+                  {t("signInTitle")}
+                </Button>
+              </Box>
             </Box>
           </Box>
         )}

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

@@ -1,30 +1,31 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import { Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { api } from "../api";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
 
-function useQuery() {
-  const { search } = useLocation();
-  return useMemo(() => new URLSearchParams(search), [search]);
-}
-
 export default function ResetPasswordPage() {
   const { toast } = useToast();
   const { t } = useI18n();
   const navigate = useNavigate();
-  const q = useQuery();
-
-  const email = q.get("email") || "";
-  const token = q.get("token") || "";
 
+  const [email, setEmail] = useState("");
+  const [token, setToken] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setEmail(params.get("email") || "");
+    setToken(params.get("token") || "");
+  }, []);
+
+  const missingResetInfo = !email || !token;
+
   return (
     <Box
       sx={{
@@ -49,7 +50,7 @@ export default function ResetPasswordPage() {
           component="form"
           onSubmit={(e) => {
             e.preventDefault();
-            if (!email || !token) {
+            if (missingResetInfo) {
               toast(t("missingResetLinkInfo"), "error");
               return;
             }
@@ -68,14 +69,15 @@ export default function ResetPasswordPage() {
           }}
           sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
         >
-          <TextField label={t("profileEmail")} value={email} disabled fullWidth />
+          {missingResetInfo ? <Alert severity="warning">{t("missingResetLinkInfo")}</Alert> : null}
+          <TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} disabled={!missingResetInfo} fullWidth />
           <TextField label={t("profileNewPassword")} type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} 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}>
+            <Button type="submit" variant="contained" disabled={loading || missingResetInfo}>
               {t("updatePassword")}
             </Button>
           </Box>