cesnimda
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import React, { useEffect, useMemo, useState } from "react";
|
|
|
|
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;
|
|
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 token = getAuthToken();
|
|
const [me, setMe] = useState<MeResponse | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
setMe(null);
|
|
return;
|
|
}
|
|
api
|
|
.get<MeResponse>("/auth/me")
|
|
.then((r) => setMe(r.data))
|
|
.catch(() => setMe(null));
|
|
}, [token]);
|
|
|
|
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>
|
|
|
|
{!token ? (
|
|
<Typography sx={{ color: "text.secondary" }}>{t("authStatusNotSignedIn")}</Typography>
|
|
) : (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
|
|
<Typography sx={{ color: "text.secondary" }}>
|
|
Signed in{label ? ` as ${label}` : ""}{me?.provider ? ` (${me.provider})` : ""}.
|
|
</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={() => {
|
|
clearAuthToken();
|
|
setMe(null);
|
|
toast(t("signedOut"), "info");
|
|
}}
|
|
>
|
|
{t("signOut")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
);
|
|
}
|