From 8b7802150a62b2d653385f5208d4d3f7b922ceeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bitard=20Micha=C3=ABl?= Date: Thu, 28 Aug 2025 15:45:32 +0200 Subject: [PATCH 1/4] add franceconnect-particulier to franceConnect button --- src/login/pages/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index aa0c5496..4f87d9f2 100644 --- a/src/login/pages/Login.tsx +++ b/src/login/pages/Login.tsx @@ -56,7 +56,7 @@ export default function Login(props: PageProps; } - if (p.providerId === "franceconnect") { + if (p.providerId === "franceconnect" || p.providerId === 'franceconnect-particulier') { return ; } From d00e902fce4ed7f1f51a18756afcadccb6ce8753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bitard=20Micha=C3=ABl?= Date: Mon, 1 Sep 2025 14:25:19 +0200 Subject: [PATCH 2/4] add separator + france connect mandatory text --- src/login/pages/Login.tsx | 23 ++++++++++++++++++----- src/login/pages/login.css | 21 +++++++++++++++++++++ 2 files changed, 39 insertions(+), 5 deletions(-) create mode 100644 src/login/pages/login.css diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index 4f87d9f2..f5d4d979 100644 --- a/src/login/pages/Login.tsx +++ b/src/login/pages/Login.tsx @@ -9,7 +9,7 @@ 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" export default function Login(props: PageProps, I18n>) { const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; @@ -50,14 +50,18 @@ export default function Login(props: PageProps
-
    +
    {social.providers.map((...[p]) => { if (p.providerId === "agentconnect" || p.providerId === "proconnect") { return ; } if (p.providerId === "franceconnect" || p.providerId === 'franceconnect-particulier') { - return ; + + return <> +

    FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne.

    + + ; } return ( @@ -94,8 +98,17 @@ export default function Login(props: PageProps ); - })} -
+ }).map((value, index)=>{ + if (index >= 1){ + return <> +
OU
+ {value} + + } + return value + }) + } + )} diff --git a/src/login/pages/login.css b/src/login/pages/login.css new file mode 100644 index 00000000..bf264a3d --- /dev/null +++ b/src/login/pages/login.css @@ -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: .50em; +} + +.separator:not(:empty)::after { + margin-left: .50em; +} \ No newline at end of file From 6f195c75988b6e03516154648590a571efb45371 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bitard=20Micha=C3=ABl?= Date: Mon, 1 Sep 2025 14:29:54 +0200 Subject: [PATCH 3/4] run prettier --- src/login/pages/Login.tsx | 123 ++++++++++++++++++++------------------ src/login/pages/login.css | 20 +++---- 2 files changed, 75 insertions(+), 68 deletions(-) diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index f5d4d979..a973e437 100644 --- a/src/login/pages/Login.tsx +++ b/src/login/pages/Login.tsx @@ -9,7 +9,7 @@ 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" +import "./login.css"; export default function Login(props: PageProps, I18n>) { const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; @@ -23,7 +23,7 @@ export default function Login(props: PageProps
- {social.providers.map((...[p]) => { - if (p.providerId === "agentconnect" || p.providerId === "proconnect") { - return ; - } - - if (p.providerId === "franceconnect" || p.providerId === 'franceconnect-particulier') { + {social.providers + .map((...[p]) => { + if (p.providerId === "agentconnect" || p.providerId === "proconnect") { + return ; + } - return <> -

FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne.

- - ; - } + if (p.providerId === "franceconnect" || p.providerId === "franceconnect-particulier") { + return ( + <> +

+ FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à + vos services en ligne. +

+ + + ); + } - return ( - - ); - }).map((value, index)=>{ - if (index >= 1){ - return <> -
OU
- {value} - - } - return value - }) - } + return ( + + ); + }) + .map((value, index) => { + if (index >= 1) { + return ( + <> +
OU
+ {value} + + ); + } + return value; + })}
)} @@ -116,7 +123,7 @@ export default function Login(props: PageProps
- {social?.providers !== undefined && social.providers.length !== 0 &&

{msg("or-login-with-email")}

} + {social?.providers !== undefined && social.providers.length !== 0 &&

{msg("or-login-with-email")}

} {realm.password && (
Date: Mon, 1 Sep 2025 15:00:10 +0200 Subject: [PATCH 4/4] align items --- src/login/pages/Login.stories.tsx | 27 +++++++++++ src/login/pages/Login.tsx | 79 +++++++++++++++++-------------- 2 files changed, 71 insertions(+), 35 deletions(-) diff --git a/src/login/pages/Login.stories.tsx b/src/login/pages/Login.stories.tsx index d7a842ee..f14cfd13 100644 --- a/src/login/pages/Login.stories.tsx +++ b/src/login/pages/Login.stories.tsx @@ -138,6 +138,33 @@ export const WithFranceConnectAndProConnectProviders: Story = { ) }; +export const WithFranceConnectNotOnFirstPosition: Story = { + render: () => ( + + ) +}; + export const WithGitHub: Story = { render: () => ( , I18n>) { const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; @@ -52,12 +53,15 @@ export default function Login(props: PageProps
{social.providers - .map((...[p]) => { + .map((p, index) => { if (p.providerId === "agentconnect" || p.providerId === "proconnect") { return ; } - if (p.providerId === "franceconnect" || p.providerId === "franceconnect-particulier") { + if (franceConnectProviderIds.includes(p.providerId)) { + if (index !== 0) { + throw new Error('Le bouton FranceConnect doit être le premier bouton de connexion'); + } return ( <>

@@ -70,42 +74,47 @@ export default function Login(props: PageProps { - 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} - +

+ +
); }) .map((value, index) => { - if (index >= 1) { + if (index >= 1 && franceConnectProviderIds.includes(social.providers?.[0].providerId ?? '')) { return ( <>
OU