Skip to content

feat(login-layout): composition LoginLayout générique (React + Angular)#53

Merged
sitle merged 1 commit intomainfrom
feat/login-layout
Apr 29, 2026
Merged

feat(login-layout): composition LoginLayout générique (React + Angular)#53
sitle merged 1 commit intomainfrom
feat/login-layout

Conversation

@sitle
Copy link
Copy Markdown
Member

@sitle sitle commented Apr 29, 2026

Contexte

Quatrième Composition de la roadmap. Page d'authentification générique : logo + carte centrée + slots pour le contenu de connexion. Réutilise `

` pour le formulaire de mot de passe, et peut héberger un `` GOV Connect / Rumia / Microsoft.

API

```tsx
<LoginLayout
logo={}
title="Se connecter"
description="Accédez à votre espace personnel."
cardFooter={Mot de passe oublié ?}
footer={<>© 2026 Polynésie française</>}

... \`\`\`

```html
<ori-login-layout
title="Se connecter"
description="..."
[hasLogo]="true"
[hasCardFooter]="true"
[hasFooter]="true"

<ori-logo slot="logo">

<ng-container slot="cardFooter">…
<ng-container slot="footer">…

```

a11y

  • Titre en `

    ` (page de login = page autonome avec sa propre hiérarchie)

  • Pas de role ARIA dédié sur la carte (c'est un layout, pas une région sémantique)
  • Le contenu projeté gère sa propre accessibilité (Form + FormField pour les inputs)

Choix techniques

  • Volontairement agnostique côté contenu : pas de formulaire pré-rempli, pas de logique de soumission. L'app projette son Form ou son AuthButton.
  • Stories illustrent les 3 cas standards : login email+password (avec Form), connexion fournisseur d'identité (AuthButton), variant minimal sans logo ni footer.

Tests

  • 8 tests Vitest React (170/170 verts)
  • 3 stories par framework (Default, WithAuthProvider, Minimal)
  • Build Angular OK

Roadmap

Item passé à "In progress" sur le board #3 → "Done" au merge. Quatrième Composition sur 6.

Quatrième Composition de la roadmap. Page d'authentification : logo + carte
centrée + slots pour titre, contenu de connexion (formulaire, AuthButton
GOV Connect, …), footer.

Volontairement agnostique côté contenu : le DS pose le layout, l'app
projette ce qu'elle veut (formulaire mot de passe, bouton fournisseur
d'identité, sélecteur d'IdP). Pour brancher GOV Connect / Rumia, glisser
un AuthButton dans le slot principal.

a11y : titre en h1 (page autonome), pas de role ARIA dédié sur la carte
(c'est un layout, pas une région sémantique).

Inclus :
- 8 tests Vitest React (170/170 verts au total)
- 3 stories par framework (Default avec form, WithAuthProvider, Minimal)
- classes .ori-login-layout* dans le plugin Tailwind, max-width 28rem,
  carte avec ombre et bordure
@sitle sitle merged commit c99f70d into main Apr 29, 2026
12 checks passed
@sitle sitle deleted the feat/login-layout branch April 29, 2026 06:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant