feat: rework parcours connexion

app/(connected)/(with-sidebar)/PageLayout.tsx

@@ -36,6 +36,7 @@ export default function PageLayout({
       <Footer
         conseiller={conseiller}
         aDesBeneficiaires={portefeuille.length > 0}
+        withPlanDuSite={true}
       />
     </div>
   )

app/(connected)/(with-sidebar)/messagerie/layout.tsx

@@ -28,6 +28,7 @@ export default function LayoutPageMessagerie({
         <Footer
           conseiller={{ structure: conseiller.structure }}
           aDesBeneficiaires={portefeuille.length > 0}
+          withPlanDuSite={true}
         />
       </div>
     </>

app/(connexion)/login/LayoutLoginClient.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import Link from 'next/link'
 import {
   ReadonlyURLSearchParams,
   usePathname,
@@ -10,10 +11,11 @@ import React, { ReactNode, useEffect, useState } from 'react'
 import { MIN_DESKTOP_WIDTH } from 'components/globals'
 import Footer from 'components/layouts/Footer'
 import OnboardingMobileModal from 'components/onboarding/OnboardingMobileModal'
-import { StructureConseiller } from 'interfaces/conseiller'
+import IconComponent, { IconName } from 'components/ui/IconComponent'
 import { trackPage } from 'utils/analytics/matomo'
 import { signin } from 'utils/auth/auth'
 import { LoginErrorMessageProvider } from 'utils/auth/loginErrorMessageContext'
+import { liensFooterLogin } from 'utils/liensFooter'
 
 export default function LayoutLoginClient({
   children,
@@ -28,7 +30,6 @@ export default function LayoutLoginClient({
   const isFromEmail = getIsFromEmail(searchParams)
 
   const pageEstHubLogin = pathname === '/login'
-  const pageEstLoginCEJ = pathname.includes('cej')
 
   useEffect(() => {
     trackPage({
@@ -58,19 +59,28 @@ export default function LayoutLoginClient({
     <>
       <LoginErrorMessageProvider state={[errorMsg, setErrorMsg]}>
         <div className='flex flex-col h-screen w-screen overflow-y-auto'>
-          {children}
+          <div className='grow flex flex-col justify-center bg-primary_lighten'>
+            <div className='max-w-[1020px] bg-white rounded-l p-16 mx-auto relative'>
+              {!pageEstHubLogin && (
+                <Link
+                  href='/login'
+                  className='flex items-center text-s-regular text-content_color underline hover:text-primary'
+                >
+                  <IconComponent
+                    name={IconName.ArrowBackward}
+                    aria-hidden={true}
+                    focusable={false}
+                    className='w-4 h-4 fill-current mr-3'
+                  />
+                  Retour
+                </Link>
+              )}
 
-          {!pageEstHubLogin && (
-            <Footer
-              conseiller={{
-                structure: pageEstLoginCEJ
-                  ? StructureConseiller.MILO
-                  : StructureConseiller.POLE_EMPLOI_BRSA,
-              }}
-              aDesBeneficiaires={null}
-              planDuSiteEstCache={true}
-            />
-          )}
+              {children}
+            </div>
+          </div>
+
+          <Footer liens={liensFooterLogin} />
         </div>
       </LoginErrorMessageProvider>
 

app/(connexion)/login/LoginHubPage.tsx

@@ -1,65 +1,63 @@
 'use client'
 
 import { withTransaction } from '@elastic/apm-rum-react'
-import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import React from 'react'
 
-import IllustrationComponent, {
-  IllustrationName,
-} from 'components/ui/IllustrationComponent'
+import LoginHeader from 'components/LoginHeader'
+import LoginButton from 'components/ui/Button/LoginButton'
+import { IllustrationName } from 'components/ui/IllustrationComponent'
 import FailureAlert from 'components/ui/Notifications/FailureAlert'
+import { signin } from 'utils/auth/auth'
 import { useLoginErrorMessage } from 'utils/auth/loginErrorMessageContext'
 
 function LoginHubPage() {
-  const [errorMsg] = useLoginErrorMessage()
+  const [errorMsg, setErrorMsg] = useLoginErrorMessage()
+  const searchParams = useSearchParams()
+
+  async function handleSignin(provider: string) {
+    await signin(
+      provider,
+      setErrorMsg,
+      searchParams.get('redirectUrl') ?? undefined
+    )
+  }
 
   return (
-    <div className='grow flex flex-col justify-center bg-primary_lighten'>
-      <div className='bg-white rounded-l shadow-m px-12 py-12 mx-auto relative'>
-        <header role='banner' className='mb-6'>
-          <h1 className='text-xl-bold text-primary_darken text-center mb-6'>
-            Connectez-vous à l&apos;espace conseiller
-          </h1>
-          <p className='text-m-regular text-primary_darken text-center'>
-            Sélectionnez votre application
-          </p>
-        </header>
+    <>
+      <LoginHeader
+        title='Bienvenue sur le portail CEJ et Pass emploi'
+        subtitle='À quelle structure appartenez-vous ?'
+      />
 
-        <main role='main' className='flex flex-col gap-4'>
-          {errorMsg && <FailureAlert label={errorMsg} />}
+      <main role='main'>
+        {errorMsg && <FailureAlert label={errorMsg} />}
 
-          <Link
-            className='flex items-center justify-center border-2 border-primary p-2 rounded-base shadow-base hover:bg-primary_lighten'
-            href='/login/cej'
-          >
-            <span className='sr-only'>
-              Se connecter à l’application du contrat d’engagement jeune
-            </span>
-            <IllustrationComponent
-              name={IllustrationName.LogoCEJ}
-              className='m-auto h-[90px] fill-primary_darken'
-              focusable={false}
-              aria-hidden={true}
+        <ul className='m-auto flex flex-col gap-8 max-w-[320px]'>
+          <li>
+            <LoginButton
+              label='Mission locale'
+              illustrationName={IllustrationName.LogoMilo}
+              onClick={() => handleSignin('similo-conseiller')}
             />
-          </Link>
-
-          <Link
-            className='flex items-center justify-center border-2 border-primary p-2 rounded-base shadow-base hover:bg-primary_lighten'
-            href='/login/passemploi'
-          >
-            <span className='sr-only'>
-              Se connecter à l’application pass emploi
-            </span>
-            <IllustrationComponent
-              name={IllustrationName.LogoPassemploi}
-              className='m-auto h-[90px] fill-primary_darken'
-              focusable={false}
-              aria-hidden={true}
+          </li>
+          <li>
+            <LoginButton
+              label='France Travail'
+              illustrationName={IllustrationName.LogoFT}
+              href='/login/france-travail/dispositifs'
+            />
+          </li>
+          <li>
+            <LoginButton
+              label='Conseil départemental'
+              illustrationName={IllustrationName.LogoCD}
+              onClick={() => handleSignin('conseildepartemental-conseiller')}
             />
-          </Link>
-        </main>
-      </div>
-    </div>
+          </li>
+        </ul>
+      </main>
+    </>
   )
 }
 

app/(connexion)/login/france-travail/dispositifs/LoginFranceTravailDispositifsPage.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { withTransaction } from '@elastic/apm-rum-react'
+import { useSearchParams } from 'next/navigation'
+import React from 'react'
+
+import LoginHeader from 'components/LoginHeader'
+import LoginButton from 'components/ui/Button/LoginButton'
+import FailureAlert from 'components/ui/Notifications/FailureAlert'
+import { signin } from 'utils/auth/auth'
+import { useLoginErrorMessage } from 'utils/auth/loginErrorMessageContext'
+
+type LoginFranceTravailDispositifsPageProps = {
+  ssoAvenirProEstActif?: boolean
+}
+
+function LoginFranceTravailDispositifsPage({
+  ssoAvenirProEstActif,
+}: LoginFranceTravailDispositifsPageProps) {
+  const [errorMsg, setErrorMsg] = useLoginErrorMessage()
+  const searchParams = useSearchParams()
+
+  async function handleSignin(provider: string) {
+    await signin(
+      provider,
+      setErrorMsg,
+      searchParams.get('redirectUrl') ?? undefined
+    )
+  }
+
+  return (
+    <>
+      <LoginHeader
+        title='Connexion conseiller France Travail'
+        subtitle='Choisissez le dispositif auquel vous êtes rattaché'
+      />
+
+      <main role='main'>
+        {errorMsg && <FailureAlert label={errorMsg} />}
+        <ul className='grid grid-cols-3 auto-rows-fr gap-8'>
+          <li>
+            <LoginButton
+              label='Contrat d’engagement jeune'
+              prefix='France Travail'
+              onClick={() => handleSignin('pe-conseiller')}
+            />
+          </li>
+          <li>
+            <LoginButton
+              label='RSA rénové'
+              prefix='France Travail'
+              onClick={() => handleSignin('pe-brsa-conseiller')}
+            />
+          </li>
+          <li>
+            <LoginButton
+              label='Accompagnement intensif jeunes'
+              prefix='France Travail'
+              onClick={() => handleSignin('pe-aij-conseiller')}
+            />
+          </li>
+          {ssoAvenirProEstActif && (
+            <li>
+              <LoginButton
+                label='Avenir pro'
+                prefix='France Travail'
+                onClick={() => handleSignin('avenirpro-conseiller')}
+              />
+            </li>
+          )}
+        </ul>
+      </main>
+    </>
+  )
+}
+
+export default withTransaction(
+  LoginFranceTravailDispositifsPage.name,
+  'page'
+)(LoginFranceTravailDispositifsPage)