tombutcher.work/2025-tombutcher-auth
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/login/Template.tsx
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,43 +163,38 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
)} )}
<div style={{ marginBottom: "10px" }}> <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) ? ( const node =
<Flex gap={"large"} align="center" style={{ paddingBottom: "8px" }}> auth !== undefined && auth.showUsername && !auth.showResetCredentials ? (
<Title level={2} style={{ marginBottom: "0", flexGrow: 1 }}> <Card
{headerNode} style={{ display: "flex", alignItems: "center", marginBottom: "24px", marginTop: "8px" }}
</Title> styles={{ body: { padding: "8px 12px" } }}
{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" }}>
<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>
<Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
{msg("restartLoginTooltip")}
</Link>
</Flex> </Flex>
<Button </Card>
type="link" ) : null;
href={url.loginRestartFlowUrl}
title={msgStr("restartLoginTooltip")}
style={{ marginLeft: "12px" }}
>
{msg("restartLoginTooltip")}
</Button>
</div>
<Divider />
</>
);
if (displayRequiredFields) { if (displayRequiredFields) {
return ( return (

11
src/login/pages/WebauthnAuthenticate.stories.tsx
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
}
}}
/>
)
}; };
/** /**