Added custom radius, tweaked design to look more like website.
This commit is contained in:
parent
6950f5f258
commit
f7789858fa
@ -104,7 +104,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
token: {
|
||||
colorPrimary: "rgba(212, 0, 255, 1)",
|
||||
colorLink: "#6E00FF",
|
||||
colorLinkHover: "#b175ff"
|
||||
colorLinkHover: "#b175ff",
|
||||
borderRadius: 15
|
||||
},
|
||||
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm
|
||||
}}
|
||||
@ -119,17 +120,19 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
<Content
|
||||
style={{
|
||||
background: "#f5f5f5",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
|
||||
}}
|
||||
><Card style={{ borderRadius: isMobile ? "0px" : "20px", width: isMobile ? "100vw" : "500px", zIndex: 1, height: isMobile ? "100vh" : "unset", padding: "40px", boxShadow: "0px 5px 15px 5px rgb(0 0 0 / 25%)", paddingRight: "20px"
|
||||
|
||||
>
|
||||
<Flex vertical align="center" justify="center" style={{width: '100vw', height: "var(--unit-100vh)"}} gap={'50px'}>
|
||||
{!isMobile && <img src="https://cdn.tombutcher.work/logos/logo-horizontal.svg" alt="Logo" style={{ height: "65px", padding: "0 30px", zIndex: 1 }} /> }
|
||||
<Card style={{ borderRadius: isMobile ? "0px" : "20px", width: isMobile ? "100vw" : "450px", zIndex: 1, height: isMobile ? "100vh" : "unset", padding: "30px 15px", boxShadow: "0px 5px 15px 5px rgb(0 0 0 / 10%)",
|
||||
}} variant="borderless" styles={{body: {
|
||||
padding: 0
|
||||
}}}><div style={{ height: "100%" }}>
|
||||
<div style={{height: "100%", marginRight: "20px"}}>
|
||||
<div style={{height: "100%", margin: "0 15px"}}>
|
||||
{isMobile && <><img src="https://cdn.tombutcher.work/logos/logo-auth.png" alt="Logo" style={{ width: "70%", margin: "0" }} /> <Divider style={{ margin: "24px 0" }} /></>}
|
||||
|
||||
<img src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png" alt="Logo" style={{ width: "100%", margin: "0" }} /> <Divider style={{ margin: "24px 0" }} />
|
||||
|
||||
|
||||
|
||||
@ -165,14 +168,15 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
|
||||
if (displayRequiredFields) {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
|
||||
{node}
|
||||
<div style={{ marginBottom: "12px" }}>
|
||||
<Text type="secondary">
|
||||
<span style={{ color: "#ff4d4f" }}>*</span> {msg("requiredFields")}
|
||||
</Text>
|
||||
</div>
|
||||
{node}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -198,7 +202,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ overflowY: "auto", height: isMobile ? "100%" : "unset", maxHeight: isMobile ? "100%" : "calc(100vh / 2.25)", paddingRight: "20px" }}>
|
||||
<div style={{ overflowY: "auto", height: isMobile ? "100%" : "unset", maxHeight: isMobile ? "100%" : "calc(100vh / 2.25)", padding: "0 15px" }}>
|
||||
{children}
|
||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||
<form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
|
||||
@ -220,7 +224,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
</div>
|
||||
|
||||
{enabledLanguages.length > 1 && (
|
||||
<div style={{ marginRight: "20px"}}>
|
||||
<div style={{ margin: "0 15px"}}>
|
||||
<Divider style={{ margin: "24px 0" }} />
|
||||
<Dropdown menu={languageItems} trigger={["click"]}>
|
||||
<Button style={{ width: "100%", textAlign: "left" }}>
|
||||
@ -232,7 +236,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
</Dropdown>
|
||||
</div>
|
||||
)}
|
||||
</div></Card></Content>
|
||||
</div></Card></Flex></Content>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
@ -124,7 +124,6 @@ a.ant-typography,
|
||||
border-style: solid;
|
||||
border-color: #d9d9d9;
|
||||
padding: 4px 11px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
line-height: 1.5714285714285714;
|
||||
border-width: 1px;
|
||||
@ -213,3 +212,7 @@ input:-webkit-autofill:active {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.ant-alert {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@ -282,7 +282,7 @@ h2 span * {
|
||||
font-family: "Grold-Rounded-Slim" !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 38px;
|
||||
font-size: 40px;
|
||||
line-height: 0.9px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
|
||||
|
||||
<List
|
||||
dataSource={logout.clients}
|
||||
bordered
|
||||
renderItem={client => (
|
||||
<List.Item>
|
||||
<Typography.Text>{client.name}</Typography.Text>
|
||||
|
||||
@ -5,7 +5,7 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
|
||||
import type { KcContext } from "../KcContext";
|
||||
import type { I18n } from "../i18n";
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
|
||||
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
||||
@ -38,10 +38,10 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
|
||||
|
||||
return (
|
||||
<Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("saml.post-form.title")}>
|
||||
<Flex align="middle" justify="start" style={{ marginBottom: 24 }} gap={"middle"}>
|
||||
<Flex align="middle" justify="start" gap={"middle"}>
|
||||
<Spin indicator={antIcon} />
|
||||
|
||||
<Paragraph style={{ margin: 0 }}>{msg("saml.post-form.message")}</Paragraph>
|
||||
<Text style={{ margin: 0 }}>{msg("saml.post-form.message")}</Text>
|
||||
</Flex>
|
||||
|
||||
<form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement} style={{ display: "none" }}>
|
||||
@ -49,7 +49,7 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
|
||||
{samlPost.SAMLResponse && <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />}
|
||||
{samlPost.relayState && <input type="hidden" name="RelayState" value={samlPost.relayState} />}
|
||||
<noscript>
|
||||
<Paragraph>{msg("saml.post-form.js-disabled")}</Paragraph>
|
||||
<Text>{msg("saml.post-form.js-disabled")}</Text>
|
||||
<input type="submit" value={msgStr("doContinue")} />
|
||||
</noscript>
|
||||
</form>
|
||||
|
||||
@ -38,11 +38,12 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
|
||||
<List
|
||||
dataSource={auth.authenticationSelections}
|
||||
itemLayout="horizontal"
|
||||
bordered
|
||||
renderItem={authenticationSelection => (
|
||||
<List.Item
|
||||
style={{
|
||||
padding: 0,
|
||||
borderBottom: "none"
|
||||
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
|
||||
@ -78,7 +78,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
|
||||
<Title level={3}>{msg("webauthn-login-title")}</Title>
|
||||
</Space>
|
||||
) : (
|
||||
null
|
||||
<Title level={3}>{msg("webauthn-login-title")}</Title>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user