80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
import { Typography, Button, List, Flex, Space } from "antd";
|
|
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
|
import type { KcContext } from "../KcContext";
|
|
import type { I18n } from "../i18n";
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
|
|
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
|
const { url, auth, client } = kcContext;
|
|
const { msg, advancedMsg } = i18n;
|
|
|
|
return (
|
|
<Template
|
|
kcContext={kcContext}
|
|
i18n={i18n}
|
|
doUseDefaultCss={doUseDefaultCss}
|
|
classes={classes}
|
|
displayInfo={false}
|
|
headerNode={
|
|
<>
|
|
{client.attributes.logoUri ? (
|
|
<Space align="start" direction="vertical">
|
|
<img
|
|
src={client.attributes.logoUri}
|
|
alt={client.name || client.clientId}
|
|
style={{ maxHeight: "64px", maxWidth: "100%", marginBottom: "20px" }}
|
|
/>
|
|
<Title level={3}>{msg("loginChooseAuthenticator")}</Title>
|
|
</Space>
|
|
) : (
|
|
<Title level={3}>{msg("loginChooseAuthenticator")}</Title>
|
|
)}
|
|
</>
|
|
}
|
|
>
|
|
<form id="kc-select-credential-form" action={url.loginAction} method="post" style={{ padding: '0 15px'}}>
|
|
<List
|
|
dataSource={auth.authenticationSelections}
|
|
itemLayout="horizontal"
|
|
bordered
|
|
renderItem={authenticationSelection => (
|
|
<List.Item
|
|
style={{
|
|
padding: 0,
|
|
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
htmlType="submit"
|
|
name="authenticationExecution"
|
|
value={authenticationSelection.authExecId}
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
padding: "16px",
|
|
textAlign: "left"
|
|
}}
|
|
>
|
|
<Flex align="start" style={{ width: "100%" }} gap={"middle"}>
|
|
<i className={"icon24 " + authenticationSelection.iconCssClass} />
|
|
<div style={{ flex: 1 }}>
|
|
<Title level={4} style={{ margin: 0 }}>
|
|
{advancedMsg(authenticationSelection.displayName)}
|
|
</Title>
|
|
<Text type="secondary" style={{ wordWrap: "break-word", whiteSpace: "normal" }}>
|
|
{advancedMsg(authenticationSelection.helpText)}
|
|
</Text>
|
|
</div>
|
|
</Flex>
|
|
</Button>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</form>
|
|
</Template>
|
|
);
|
|
}
|