2025-tombutcher-auth/src/login/pages/FrontchannelLogout.tsx
2025-04-07 00:16:14 +01:00

51 lines
1.8 KiB
TypeScript

import { useEffect } from "react";
import { Button, List, Typography, Space } from "antd";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
const { Title, Paragraph } = Typography;
export default function FrontchannelLogout(props: PageProps<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { logout } = kcContext;
const { msg, msgStr } = i18n;
useEffect(() => {
if (logout.logoutRedirectUri) {
window.location.replace(logout.logoutRedirectUri);
}
}, []);
return (
<Template
kcContext={kcContext}
i18n={i18n}
doUseDefaultCss={doUseDefaultCss}
classes={classes}
documentTitle={msgStr("frontchannel-logout.title")}
headerNode={<Title level={3}>{msg("frontchannel-logout.title")}</Title>}
>
<Space direction="vertical" style={{ width: "100%" }}>
<Paragraph>{msg("frontchannel-logout.message")}</Paragraph>
<List
dataSource={logout.clients}
renderItem={client => (
<List.Item>
<Typography.Text>{client.name}</Typography.Text>
<iframe src={client.frontChannelLogoutUrl} style={{ display: "none" }} />
</List.Item>
)}
/>
{logout.logoutRedirectUri && (
<Button type="primary" id="continue" href={logout.logoutRedirectUri}>
{msg("doContinue")}
</Button>
)}
</Space>
</Template>
);
}