align items

Author: MichaelBitard

src/login/pages/Login.stories.tsx

@@ -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

src/login/pages/Login.tsx

@@ -10,6 +10,7 @@ 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;
 
@@ -52,12 +53,15 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                             <hr />
                             <div>
                                 {social.providers
-                                    .map((...[p]) => {
+                                    .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" || 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 (
                                                 <>
                                                     <p className={fr.cx("fr-text--light")}>
@@ -70,42 +74,47 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                         }
 
                                         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>
+                                            <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) {
+                                        if (index >= 1 && franceConnectProviderIds.includes(social.providers?.[0].providerId ?? '')) {
                                             return (
                                                 <>
                                                     <div className="separator">OU</div>