Skip to content

add franceconnect-particulier to franceConnect button #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add franceconnect-particulier to franceConnect button #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b78021
add franceconnect-particulier to franceConnect button
MichaelBitard Aug 28, 2025
d00e902
add separator + france connect mandatory text
MichaelBitard Sep 1, 2025
6f195c7
run prettier
MichaelBitard Sep 1, 2025
9f9c047
align items
MichaelBitard Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/login/pages/Login.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,33 @@ export const WithFranceConnectAndProConnectProviders: Story = {
)
};

export const WithFranceConnectNotOnFirstPosition: Story = {
render: () => (
<KcPageStory
kcContext={{
social: {
displayInfo: true,
providers: [
{
loginUrl: "proConnect",
alias: "Pro Connect",
providerId: "agentconnect", // NOTE: It is still agentconnect, pro connect is a rebrand of agentconnect.
displayName: "Pro Connect",
iconClasses: ""
},{
loginUrl: "france-connect",
alias: "france-connect",
providerId: "franceconnect",
displayName: "France Connect",
iconClasses: ""
},
]
}
}}
/>
)
};

export const WithGitHub: Story = {
render: () => (
<KcPageStory
Expand Down
123 changes: 76 additions & 47 deletions src/login/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useState } from "react";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";

import "./login.css";
const franceConnectProviderIds = ["franceconnect", "franceconnect-particulier"];
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

Expand All @@ -23,7 +24,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
const { msg, msgStr } = i18n;

const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);

return (
<Template
kcContext={kcContext}
Expand All @@ -50,60 +51,88 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
{realm.password && social?.providers !== undefined && social.providers.length !== 0 && (
<div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
<hr />
<ul>
{social.providers.map((...[p]) => {
if (p.providerId === "agentconnect" || p.providerId === "proconnect") {
return <ProConnectButton key={p.alias} style={{ textAlign: "center" }} url={p.loginUrl} />;
}
<div>
{social.providers
.map((p, index) => {
if (p.providerId === "agentconnect" || p.providerId === "proconnect") {
return <ProConnectButton key={p.alias} style={{ textAlign: "center" }} url={p.loginUrl} />;
}

if (p.providerId === "franceconnect") {
return <FranceConnectButton key={p.alias} style={{ textAlign: "center" }} url={p.loginUrl} />;
}
if (franceConnectProviderIds.includes(p.providerId)) {
if (index !== 0) {
throw new Error('Le bouton FranceConnect doit être le premier bouton de connexion');
}
return (
<>
<p className={fr.cx("fr-text--light")}>
FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à
vos services en ligne.
</p>
<FranceConnectButton key={p.alias} style={{ textAlign: "center" }} url={p.loginUrl} />
</>
);
}

return (
<Button
className={fr.cx("fr-m-1w")}
key={p.alias}
iconId={(() => {
switch (p.providerId) {
case "github":
return "ri-github-fill";
case "google":
return "ri-google-fill";
case "facebook":
return "ri-facebook-fill";
case "microsoft":
return "ri-microsoft-fill";
case "twitter":
return "ri-twitter-fill";
case "instagram":
return "ri-instagram-fill";
case "linkedin":
return "ri-linkedin-fill";
case "stackoverflow":
return "ri-stack-overflow-fill";
case "gitlab":
return "ri-gitlab-fill";
}
return "ri-external-link-line";
})()}
linkProps={{
href: p.loginUrl
}}
>
{p.displayName}
</Button>
);
})}
</ul>
return (
<div style={{
display: 'flex',
justifyContent: 'center'
}}>
<Button
className={fr.cx("fr-m-1w")}
key={p.alias}
iconId={(() => {
switch (p.providerId) {
case "github":
return "ri-github-fill";
case "google":
return "ri-google-fill";
case "facebook":
return "ri-facebook-fill";
case "microsoft":
return "ri-microsoft-fill";
case "twitter":
return "ri-twitter-fill";
case "instagram":
return "ri-instagram-fill";
case "linkedin":
return "ri-linkedin-fill";
case "stackoverflow":
return "ri-stack-overflow-fill";
case "gitlab":
return "ri-gitlab-fill";
}
return "ri-external-link-line";
})()}
linkProps={{
href: p.loginUrl
}}
>
{p.displayName}
</Button>
</div>
);
})
.map((value, index) => {
if (index >= 1 && franceConnectProviderIds.includes(social.providers?.[0].providerId ?? '')) {
return (
<>
<div className="separator">OU</div>
{value}
</>
);
}
return value;
})}
</div>
</div>
)}
</>
}
>
<div id="kc-form">
<div id="kc-form-wrapper">
{social?.providers !== undefined && social.providers.length !== 0 && <h2>{msg("or-login-with-email")}</h2>}
{social?.providers !== undefined && social.providers.length !== 0 && <h2>{msg("or-login-with-email")}</h2>}
{realm.password && (
<form
id="kc-form-login"
Expand Down
21 changes: 21 additions & 0 deletions src/login/pages/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.separator {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 1rem;
}

.separator::before,
.separator::after {
content: "";
flex: 1;
border-bottom: 1px solid var(--border-default-grey);
}

.separator:not(:empty)::before {
margin-right: 0.5em;
}

.separator:not(:empty)::after {
margin-left: 0.5em;
}