From 119eaa09d1ac91d2ac54557800b89b1c2db987de Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 4 Aug 2025 02:12:27 +0100
Subject: [PATCH] Immutable username is now always visible

---
 src/login/Template.tsx                        | 55 +++++++++----------
 .../pages/WebauthnAuthenticate.stories.tsx    | 11 +++-
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index da51fc1..1e0de6e 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -11,7 +11,7 @@ import { GlobalOutlined } from "@ant-design/icons";
 import ParticlesBackground from "./ParticlesBackground";
 
 const { Content } = Layout;
-const { Title, Text } = Typography;
+const { Title, Text, Link } = Typography;
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -163,43 +163,38 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                     )}
 
                                     <div style={{ marginBottom: "10px" }}>
+                                        <Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}>
+                                            <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}>
+                                                {headerNode}
+                                            </Title>
+                                            {client.attributes.logoUri && (
+                                                <img
+                                                    src={client.attributes.logoUri}
+                                                    alt={client.name || client.clientId}
+                                                    style={{ maxHeight: "64px", maxWidth: "100%", marginBottom: "5px" }}
+                                                />
+                                            )}
+                                        </Flex>
                                         {(() => {
-                                            const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
-                                                <Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}>
-                                                    <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}>
-                                                        {headerNode}
-                                                    </Title>
-                                                    {client.attributes.logoUri && (
-                                                        <img
-                                                            src={client.attributes.logoUri}
-                                                            alt={client.name || client.clientId}
-                                                            style={{ maxHeight: "64px", maxWidth: "100%", marginBottom: "5px" }}
-                                                        />
-                                                    )}
-                                                </Flex>
-                                            ) : (
-                                                <>
-                                                    <div style={{ display: "flex", alignItems: "center", marginBottom: "24px" }}>
+                                            const node =
+                                                auth !== undefined && auth.showUsername && !auth.showResetCredentials ? (
+                                                    <Card
+                                                        style={{ display: "flex", alignItems: "center", marginBottom: "24px", marginTop: "8px" }}
+                                                        styles={{ body: { padding: "8px 12px" } }}
+                                                    >
                                                         <Flex gap={"small"}>
                                                             <img
                                                                 src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
                                                                 width={14}
-                                                                style={{ marginTop: "3px" }}
+                                                                style={{ marginTop: "0px" }}
                                                             />
                                                             <Text strong>{auth.attemptedUsername}</Text>
+                                                            <Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
+                                                                {msg("restartLoginTooltip")}
+                                                            </Link>
                                                         </Flex>
-                                                        <Button
-                                                            type="link"
-                                                            href={url.loginRestartFlowUrl}
-                                                            title={msgStr("restartLoginTooltip")}
-                                                            style={{ marginLeft: "12px" }}
-                                                        >
-                                                            {msg("restartLoginTooltip")}
-                                                        </Button>
-                                                    </div>
-                                                    <Divider />
-                                                </>
-                                            );
+                                                    </Card>
+                                                ) : null;
 
                                             if (displayRequiredFields) {
                                                 return (
diff --git a/src/login/pages/WebauthnAuthenticate.stories.tsx b/src/login/pages/WebauthnAuthenticate.stories.tsx
index 8366038..dcbd150 100644
--- a/src/login/pages/WebauthnAuthenticate.stories.tsx
+++ b/src/login/pages/WebauthnAuthenticate.stories.tsx
@@ -13,7 +13,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                auth: {
+                    attemptedUsername: "max.mustermann@mail.com",
+                    showUsername: true
+                }
+            }}
+        />
+    )
 };
 
 /**