fix(i18n): preserve public auth commands and feedback across language changes

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

@@ -15,9 +15,13 @@ export default function VerifyEmailPage({ emailChange = false }: { emailChange?:
   const navigate = useNavigate();
 
   const [status, setStatus] = useState<Status>("verifying");
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [verificationError, setVerificationError] = useState<unknown>(null);
+  const [missingLink, setMissingLink] = useState(false);
 
   useEffect(() => {
+    setStatus("verifying");
+    setMissingLink(false);
+    setVerificationError(null);
     const params = new URLSearchParams(window.location.search);
     const userId = params.get("userId") || "";
     const email = params.get("email") || "";
@@ -25,18 +29,21 @@ export default function VerifyEmailPage({ emailChange = false }: { emailChange?:
 
     if (!userId || !token || (emailChange && !email)) {
       setStatus("error");
-      setErrorMessage(t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo"));
+      setMissingLink(true);
       return;
     }
 
+    let active = true;
     api
       .post(emailChange ? "/auth/email-change/confirm" : "/auth/verify-email", emailChange ? { userId, email, token } : { userId, token })
-      .then(() => setStatus("success"))
-      .catch((e: any) => {
+      .then(() => { if (active) setStatus("success"); })
+      .catch((cause: unknown) => {
+        if (!active) return;
         setStatus("error");
-        setErrorMessage(getApiErrorMessage(e, t("verifyEmailFailed")));
+        setVerificationError(cause);
       });
-  }, [emailChange, t]);
+    return () => { active = false; };
+  }, [emailChange]);
 
   return (
     <AuthPageFrame title={t(emailChange ? "confirmEmailChangeTitle" : "verifyEmailTitle")}>
@@ -48,7 +55,7 @@ export default function VerifyEmailPage({ emailChange = false }: { emailChange?:
             </Box>
           )}
           {status === "success" && <Alert severity="success" role="status">{t(emailChange ? "confirmEmailChangeSuccess" : "verifyEmailSuccess")}</Alert>}
-          {status === "error" && <Alert severity="error">{errorMessage}</Alert>}
+          {status === "error" && <Alert severity="error">{missingLink ? t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo") : getApiErrorMessage(verificationError, t("verifyEmailFailed"))}</Alert>}
 
           <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-end", mt: 1, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
             <Button variant="contained" onClick={() => navigate("/login")}>