Skip to content

Commit ab98c63

Browse files
garronejgarronej
authored
Merge pull request #16 from ddecrulle/main
feat: Login template according to dsfr model
2 parents 01359ef + 882b4e1 commit ab98c63

File tree

1 file changed

+91
-84
lines changed

1 file changed

+91
-84
lines changed

‎src/login/Template.tsx

Lines changed: 91 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ export default function Template(props: Props) {
6565
}
6666

6767
return (
68-
<div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
68+
<div
69+
//style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
70+
>
6971
<DsfrHeader
7072
brandTop={
7173
<div
@@ -87,95 +89,100 @@ export default function Template(props: Props) {
8789
/>
8890
}
8991
/>
90-
<div
91-
style={{
92-
flex: 1,
93-
margin: "auto",
94-
maxWidth: 1000,
95-
...fr.spacing("padding", { topBottom: "10v" })
96-
}}
97-
className={fr.cx("fr-container")}
98-
>
99-
<header className={kcClsx("kcFormHeaderClass")}>
100-
{(() => {
101-
const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
102-
<h1 id="kc-page-title">{headerNode}</h1>
103-
) : (
104-
<div id="kc-username" className={kcClsx("kcFormGroupClass")}>
105-
<label id="kc-attempted-username">{auth.attemptedUsername}</label>
106-
<a id="reset-login" href={url.loginRestartFlowUrl} aria-label={msgStr("restartLoginTooltip")}>
107-
<div className="kc-login-tooltip">
108-
<i className={kcClsx("kcResetFlowIcon")}></i>
109-
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
110-
</div>
111-
</a>
112-
</div>
113-
);
92+
<main role="main" id="content">
93+
<div className={fr.cx("fr-container", "fr-container--fluid", "fr-my-md-14v")}>
94+
<div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-grid-row--center")}>
95+
<div className={fr.cx("fr-col-12", "fr-col-md-8", "fr-col-lg-6")}>
96+
<div
97+
style={{ backgroundColor: fr.colors.decisions.background.alt.grey.default }}
98+
className={fr.cx("fr-container", "fr-px-md-0", "fr-pt-10v", "fr-pt-md-14v", "fr-pb-6v", "fr-pb-md-10v")}
99+
>
100+
<div className="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
101+
<div className={fr.cx("fr-col-12", "fr-col-md-9", "fr-col-lg-8")}>
102+
{(() => {
103+
const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
104+
<h1 id="kc-page-title">{headerNode}</h1>
105+
) : (
106+
<div id="kc-username">
107+
<label id="kc-attempted-username">{auth.attemptedUsername}</label>
108+
<a id="reset-login" href={url.loginRestartFlowUrl} aria-label={msgStr("restartLoginTooltip")}>
109+
<div className="kc-login-tooltip">
110+
<i className={kcClsx("kcResetFlowIcon")}></i>
111+
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
112+
</div>
113+
</a>
114+
</div>
115+
);
114116

115-
if (displayRequiredFields) {
116-
return (
117-
<div className={kcClsx("kcContentWrapperClass")}>
118-
<div className={clsx(kcClsx("kcLabelWrapperClass"), "subtitle")}>
119-
<span className="subtitle">
120-
<span className="required">*</span>
121-
{msg("requiredFields")}
122-
</span>
123-
</div>
124-
<div className="col-md-10">{node}</div>
125-
</div>
126-
);
127-
}
117+
if (displayRequiredFields) {
118+
return (
119+
<div className={kcClsx("kcContentWrapperClass")}>
120+
<div className={clsx(kcClsx("kcLabelWrapperClass"), "subtitle")}>
121+
<span className="subtitle">
122+
<span className="required">*</span>
123+
{msg("requiredFields")}
124+
</span>
125+
</div>
126+
<div className="col-md-10">{node}</div>
127+
</div>
128+
);
129+
}
128130

129-
return node;
130-
})()}
131-
</header>
132-
<div id="kc-content">
133-
<div id="kc-content-wrapper">
134-
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
135-
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
136-
<Alert
137-
className={fr.cx("fr-mb-4w")}
138-
severity={message.type}
139-
small
140-
description={
141-
<span
142-
className={kcClsx("kcAlertTitleClass")}
143-
dangerouslySetInnerHTML={{
144-
__html: kcSanitize(message.summary)
145-
}}
146-
/>
147-
}
148-
/>
149-
)}
150-
{socialProvidersNode}
151-
{children}
152-
{auth !== undefined && auth.showTryAnotherWayLink && (
153-
<form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
154-
<div className={kcClsx("kcFormGroupClass")}>
155-
<input type="hidden" name="tryAnotherWay" value="on" />
156-
<a
157-
href="#"
158-
id="try-another-way"
159-
onClick={() => {
160-
document.forms["kc-select-try-another-way-form" as never].submit();
161-
return false;
162-
}}
163-
>
164-
{msg("doTryAnotherWay")}
165-
</a>
166-
</div>
167-
</form>
168-
)}
169-
{displayInfo && (
170-
<div id="kc-info" className={kcClsx("kcSignUpClass")}>
171-
<div id="kc-info-wrapper" className={kcClsx("kcInfoAreaWrapperClass")}>
172-
{infoNode}
131+
return node;
132+
})()}
133+
<div id="kc-content">
134+
<div id="kc-content-wrapper">
135+
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
136+
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
137+
<Alert
138+
className={fr.cx("fr-mb-4w")}
139+
severity={message.type}
140+
small
141+
description={
142+
<span
143+
className={kcClsx("kcAlertTitleClass")}
144+
dangerouslySetInnerHTML={{
145+
__html: kcSanitize(message.summary)
146+
}}
147+
/>
148+
}
149+
/>
150+
)}
151+
{socialProvidersNode}
152+
{children}
153+
{auth !== undefined && auth.showTryAnotherWayLink && (
154+
<form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
155+
<div className={kcClsx("kcFormGroupClass")}>
156+
<input type="hidden" name="tryAnotherWay" value="on" />
157+
<a
158+
href="#"
159+
id="try-another-way"
160+
onClick={() => {
161+
document.forms["kc-select-try-another-way-form" as never].submit();
162+
return false;
163+
}}
164+
>
165+
{msg("doTryAnotherWay")}
166+
</a>
167+
</div>
168+
</form>
169+
)}
170+
{displayInfo && (
171+
<div id="kc-info" className={kcClsx("kcSignUpClass")}>
172+
<div id="kc-info-wrapper" className={kcClsx("kcInfoAreaWrapperClass")}>
173+
{infoNode}
174+
</div>
175+
</div>
176+
)}
177+
</div>
178+
</div>
179+
</div>
173180
</div>
174181
</div>
175-
)}
182+
</div>
176183
</div>
177184
</div>
178-
</div>
185+
</main>
179186
<DSFRFooter accessibility="fully compliant" bottomItems={[headerFooterDisplayItem]} />
180187
</div>
181188
);

0 commit comments

Comments
 (0)