feat(auth): migrate public authentication presentation

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

@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, 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";
+import AuthPageFrame from "../layout/AuthPageFrame";
 
 export default function ResetPasswordPage() {
   const { toast } = useToast();
@@ -19,6 +20,9 @@ export default function ResetPasswordPage() {
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<{ newPassword?: string; confirmPassword?: string }>({});
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const confirmPasswordRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -29,25 +33,7 @@ export default function ResetPasswordPage() {
   const missingResetInfo = !email || !token;
 
   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: 4, borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
-        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
-          {t("resetPasswordTitle")}
-        </Typography>
-        <Typography sx={{ color: "text.secondary", mb: 2 }}>
-          {t("resetPasswordBody")}
-        </Typography>
-
+    <AuthPageFrame title={t("resetPasswordTitle")} description={t("resetPasswordBody")}>
         <Box
           component="form"
           onSubmit={(e) => {
@@ -60,8 +46,12 @@ export default function ResetPasswordPage() {
             if (!newPassword || newPassword.length < 8) errors.newPassword = t("passwordTooShort");
             if (confirmPassword !== newPassword) errors.confirmPassword = t("passwordsDoNotMatch");
             setFieldErrors(errors);
-            if (Object.keys(errors).length > 0) return;
+            if (Object.keys(errors).length > 0) {
+              (errors.newPassword ? passwordRef : confirmPasswordRef).current?.focus();
+              return;
+            }
 
+            setSubmitError(null);
             setLoading(true);
             api
               .post("/auth/reset-password", { email, token, newPassword })
@@ -70,13 +60,14 @@ export default function ResetPasswordPage() {
                 navigate("/login", { replace: true });
               })
               .catch((e2: any) => {
-                toast(getApiErrorMessage(e2, t("resetFailed")), "error");
+                setSubmitError(getApiErrorMessage(e2, t("resetFailed")));
               })
               .finally(() => setLoading(false));
           }}
           sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
         >
           {missingResetInfo ? <Alert severity="warning">{t("missingResetLinkInfo")}</Alert> : null}
+          {submitError ? <Alert severity="error">{submitError}</Alert> : null}
           <TextField label={t("profileEmail")} type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!missingResetInfo} fullWidth />
           <TextField
             label={t("profileNewPassword")}
@@ -84,6 +75,7 @@ export default function ResetPasswordPage() {
             value={newPassword}
             onChange={(e) => { setNewPassword(e.target.value); setFieldErrors((f) => ({ ...f, newPassword: undefined, confirmPassword: undefined })); }}
             autoComplete="new-password"
+            inputRef={passwordRef}
             error={Boolean(fieldErrors.newPassword)}
             helperText={fieldErrors.newPassword || t("passwordTooShort")}
             fullWidth
@@ -94,21 +86,22 @@ export default function ResetPasswordPage() {
             value={confirmPassword}
             onChange={(e) => { setConfirmPassword(e.target.value); setFieldErrors((f) => ({ ...f, confirmPassword: undefined })); }}
             autoComplete="new-password"
+            inputRef={confirmPasswordRef}
             error={Boolean(fieldErrors.confirmPassword)}
             helperText={fieldErrors.confirmPassword}
             fullWidth
           />
 
-          <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 1 }}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-end", gap: 1, mt: 1, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
             <Button type="button" variant="outlined" onClick={() => navigate("/login")} disabled={loading}>
               {t("backToLogin")}
             </Button>
-            <Button type="submit" variant="contained" disabled={loading || missingResetInfo}>
+            <Button type="submit" variant="contained" disabled={loading || missingResetInfo} aria-busy={loading}>
               {t("updatePassword")}
             </Button>
           </Box>
+          {loading ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary">{t("saving")}</Typography> : null}
         </Box>
-      </Paper>
-    </Box>
+    </AuthPageFrame>
   );
 }