Localize kanban, auth, backup, and admin utilities

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

@@ -5,6 +5,7 @@ import { Box, Button, Paper, Typography } from "@mui/material";
 import { api } from "../api";
 import { clearAuthToken, getAuthToken } from "../auth";
 import { useToast } from "../toast";
+import { useI18n } from "../i18n/I18nProvider";
 
 type MeResponse = {
   provider?: string;
@@ -23,6 +24,7 @@ type MeResponse = {
 
 export default function AuthStatusCard() {
   const { toast } = useToast();
+  const { t } = useI18n();
   const token = getAuthToken();
   const [me, setMe] = useState<MeResponse | null>(null);
 
@@ -42,11 +44,11 @@ export default function AuthStatusCard() {
   return (
     <Paper sx={{ mt: 2, p: 2 }}>
       <Typography variant="h6" sx={{ mb: 1 }}>
-        Authentication
+        {t("authStatusTitle")}
       </Typography>
 
       {!token ? (
-        <Typography sx={{ color: "text.secondary" }}>Not signed in.</Typography>
+        <Typography sx={{ color: "text.secondary" }}>{t("authStatusNotSignedIn")}</Typography>
       ) : (
         <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
           <Typography sx={{ color: "text.secondary" }}>
@@ -54,12 +56,12 @@ export default function AuthStatusCard() {
           </Typography>
           {me?.roles && me.roles.length > 0 ? (
             <Typography sx={{ color: "text.secondary" }}>
-              Roles: {me.roles.join(", ")}
+              {t("authStatusRoles", { roles: me.roles.join(", ") })}
             </Typography>
           ) : null}
           {me?.googleLink?.linked ? (
             <Typography sx={{ color: "text.secondary" }}>
-              Google linked{me.googleLink.email ? `: ${me.googleLink.email}` : "."}
+              {t("authStatusGoogleLinked", { suffix: me.googleLink.email ? `: ${me.googleLink.email}` : "." })}
             </Typography>
           ) : null}
 
@@ -69,10 +71,10 @@ export default function AuthStatusCard() {
               onClick={() => {
                 clearAuthToken();
                 setMe(null);
-                toast("Signed out.", "info");
+                toast(t("signedOut"), "info");
               }}
             >
-              Sign out
+              {t("signOut")}
             </Button>
           </Box>
         </Box>