Polish settings and auth flows

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

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 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, setRememberMePref, getRememberMePref } from "../auth";
+import { api, getApiErrorMessage } from "../api";
+import { getRememberMePref, setAuthToken, setRememberMePref } from "../auth";
 import GoogleAuthCard from "../components/GoogleAuthCard";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
@@ -28,11 +28,12 @@ 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 [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
@@ -47,32 +48,30 @@ export default function LoginPage() {
       const url = mode === "register" ? "/auth/register" : "/auth/login";
       const res = await api.post<{ accessToken: string; tokenType: string }>(url, { email, password });
       setRememberMePref(rememberMe);
-      setAuthToken(res.data.accessToken, { remember: rememberMe });
+      setAuthToken(res.data.accessToken, rememberMe ? "local" : "session");
       toast(t("signedIn"), "success");
       navigate(nextPath, { replace: true });
     } catch (e: any) {
-      const msg = e?.response?.data || e?.message || t("loginFailed");
-      toast(String(msg), "error");
+      toast(getApiErrorMessage(e, t("loginFailed")), "error");
     } finally {
       setLoading(false);
     }
   }
 
   async function requestPasswordReset() {
-    if (!email.trim()) {
-      toast(t("loginResetEmailRequired"), "error");
+    if (!canRequestPasswordReset) {
+      toast(t("passwordResetEnterEmail"), "info");
       return;
     }
 
-    setRequestingReset(true);
+    setResetLoading(true);
     try {
       await api.post("/auth/request-password-reset", { email: email.trim() });
-      toast(t("loginResetRequested"), "success");
+      toast(t("passwordResetRequestSent"), "success");
     } catch (e: any) {
-      const msg = e?.response?.data || e?.message || t("loginResetRequestFailed");
-      toast(String(msg), "error");
+      toast(getApiErrorMessage(e, t("passwordResetRequestFailed")), "error");
     } finally {
-      setRequestingReset(false);
+      setResetLoading(false);
     }
   }
 
@@ -107,25 +106,37 @@ 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", 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")}
+            <Box sx={{ display: "flex", alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
+              <FormControlLabel
+                control={<Checkbox checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} />}
+                label={t("rememberMe")}
+              />
+              <Button
+                type="button"
+                variant="text"
+                size="small"
+                onClick={() => void requestPasswordReset()}
+                disabled={resetLoading}
+                sx={{ px: 0, minWidth: 0, fontWeight: 700, alignSelf: { xs: "stretch", sm: "auto" } }}
+              >
+                {resetLoading ? t("passwordResetRequestSending") : 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")}
+            </Box>
+
+            <Typography variant="body2" sx={{ color: "text.secondary", mt: -0.5 }}>
+              {rememberMe ? t("rememberMeHelpPersistent") : t("rememberMeHelpSession")}
+            </Typography>
+
+            <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>
-              </Box>
+              )}
+              <Button type="submit" variant="contained" disabled={loading}>
+                {t("signInTitle")}
+              </Button>
             </Box>
           </Box>
         )}