feat(auth): migrate account security presentation

job-tracker-ui/src/components/AuthStatusCard.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Alert, Box, Button, Typography } from "@mui/material";
 
-import { api } from "../api";
+import { api, getApiErrorMessage } from "../api";
 import { clearAuthClientState } from "../auth";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
+import { PageSection } from "../layout/PageLayout";
 
 type MeResponse = {
   provider?: string;
@@ -26,34 +27,40 @@ export default function AuthStatusCard() {
   const { toast } = useToast();
   const { t } = useI18n();
   const [me, setMe] = useState<MeResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    api.get<MeResponse>("/auth/me")
+      .then((r) => setMe(r.data))
+      .catch((e) => {
+        setMe(null);
+        if (e?.response?.status !== 401) setError(getApiErrorMessage(e, t("profileLoadFailed")));
+      })
+      .finally(() => setLoading(false));
+  }, [t]);
 
   useEffect(() => {
-    const refresh = () => {
-      api
-        .get<MeResponse>("/auth/me")
-        .then((r) => setMe(r.data))
-        .catch(() => setMe(null));
-    };
-
     refresh();
     window.addEventListener("auth-changed", refresh);
     return () => window.removeEventListener("auth-changed", refresh);
-  }, []);
+  }, [refresh]);
 
   const label = useMemo(() => me?.userName || me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.email, [me]);
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("authStatusTitle")}
-      </Typography>
-
-      {!me ? (
+    <PageSection title={t("authStatusTitle")} surface>
+      {loading ? <Typography role="status" color="text.secondary">{t("loading")}</Typography> : error ? (
+        <Alert severity="error" action={<Button color="inherit" onClick={refresh}>{t("retry")}</Button>}>{error}</Alert>
+      ) : !me ? (
         <Typography sx={{ color: "text.secondary" }}>{t("authStatusNotSignedIn")}</Typography>
       ) : (
-        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5, overflowWrap: "anywhere" }}>
           <Typography sx={{ color: "text.secondary" }}>
-            Signed in{label ? ` as ${label}` : ""}{me?.provider ? ` (${me.provider})` : ""}.
+            {label ? t("signedInAs", { name: label }) : t("signedIn")}
+            {me.provider ? ` (${me.provider === "local" ? t("profileLocalAccount") : me.provider === "google" ? t("profileGoogleSession") : t("profileExternalSession")})` : ""}
           </Typography>
           {me?.roles && me.roles.length > 0 ? (
             <Typography sx={{ color: "text.secondary" }}>
@@ -82,6 +89,6 @@ export default function AuthStatusCard() {
           </Box>
         </Box>
       )}
-    </Paper>
+    </PageSection>
   );
 }