Immutable username is now always visible
Some checks failed
tombutcher.work/tombutcher-auth/pipeline/head There was a failure building this commit
ci / test (push) Has been cancelled
ci / Check if version upgrade (push) Has been cancelled
ci / create_github_release (push) Has been cancelled

This commit is contained in:
Tom Butcher 2025-08-04 02:12:27 +01:00
parent 5073fd3b77
commit 119eaa09d1
2 changed files with 35 additions and 31 deletions

View File

@ -11,7 +11,7 @@ import { GlobalOutlined } from "@ant-design/icons";
import ParticlesBackground from "./ParticlesBackground"; import ParticlesBackground from "./ParticlesBackground";
const { Content } = Layout; const { Content } = Layout;
const { Title, Text } = Typography; const { Title, Text, Link } = Typography;
export default function Template(props: TemplateProps<KcContext, I18n>) { export default function Template(props: TemplateProps<KcContext, I18n>) {
const { const {
@ -163,8 +163,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
)} )}
<div style={{ marginBottom: "10px" }}> <div style={{ marginBottom: "10px" }}>
{(() => {
const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
<Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}> <Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}>
<Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}> <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}>
{headerNode} {headerNode}
@ -177,29 +175,26 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
/> />
)} )}
</Flex> </Flex>
) : ( {(() => {
<> const node =
<div style={{ display: "flex", alignItems: "center", marginBottom: "24px" }}> auth !== undefined && auth.showUsername && !auth.showResetCredentials ? (
<Card
style={{ display: "flex", alignItems: "center", marginBottom: "24px", marginTop: "8px" }}
styles={{ body: { padding: "8px 12px" } }}
>
<Flex gap={"small"}> <Flex gap={"small"}>
<img <img
src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"} src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
width={14} width={14}
style={{ marginTop: "3px" }} style={{ marginTop: "0px" }}
/> />
<Text strong>{auth.attemptedUsername}</Text> <Text strong>{auth.attemptedUsername}</Text>
</Flex> <Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
<Button
type="link"
href={url.loginRestartFlowUrl}
title={msgStr("restartLoginTooltip")}
style={{ marginLeft: "12px" }}
>
{msg("restartLoginTooltip")} {msg("restartLoginTooltip")}
</Button> </Link>
</div> </Flex>
<Divider /> </Card>
</> ) : null;
);
if (displayRequiredFields) { if (displayRequiredFields) {
return ( return (

View File

@ -13,7 +13,16 @@ export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Default: Story = { export const Default: Story = {
render: () => <KcPageStory /> render: () => (
<KcPageStory
kcContext={{
auth: {
attemptedUsername: "max.mustermann@mail.com",
showUsername: true
}
}}
/>
)
}; };
/** /**