cesnimda
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
|
import { Alert, Box, Button, Typography } from "@mui/material";
|
|
|
|
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;
|
|
id?: string;
|
|
email?: string;
|
|
userName?: string;
|
|
firstName?: string;
|
|
lastName?: string;
|
|
displayName?: string;
|
|
roles?: string[];
|
|
googleLink?: {
|
|
linked: boolean;
|
|
email?: string | null;
|
|
} | null;
|
|
};
|
|
|
|
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(() => {
|
|
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 (
|
|
<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, overflowWrap: "anywhere" }}>
|
|
<Typography sx={{ color: "text.secondary" }}>
|
|
{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" }}>
|
|
{t("authStatusRoles", { roles: me.roles.join(", ") })}
|
|
</Typography>
|
|
) : null}
|
|
{me?.googleLink?.linked ? (
|
|
<Typography sx={{ color: "text.secondary" }}>
|
|
{t("authStatusGoogleLinked", { suffix: me.googleLink.email ? `: ${me.googleLink.email}` : "." })}
|
|
</Typography>
|
|
) : null}
|
|
|
|
<Box sx={{ mt: 1 }}>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => {
|
|
void api.post("/auth/logout").catch(() => undefined).finally(() => {
|
|
setMe(null);
|
|
clearAuthClientState();
|
|
toast(t("signedOut"), "info");
|
|
});
|
|
}}
|
|
>
|
|
{t("signOut")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</PageSection>
|
|
);
|
|
}
|