feat(authentication): replace HTML elements with UI components - #1168
feat(authentication): replace HTML elements with UI components#1168sartek430 wants to merge 3 commits into
Conversation
Refactor the OAuth component to use Heading and Link components for better consistency and accessibility. Update the worker setup in the mock service worker to include authentication status handlers.
refactor Authentication, OAuth, SignUp, Error, Dashboard, and Welcome pages to use Heading and Link components for improved consistency and maintainability.
There was a problem hiding this comment.
Pull request overview
Confidence: 97%.
Refactors several frontend pages/components to use shared UI atoms (notably Heading and Link) and adjusts MSW/browser-test authentication defaults to improve consistency and test reliability.
Changes:
- Replaced raw heading tags with the shared
Headingcomponent across multiple pages/components. - Updated OAuth provider links to use the shared
Linkcomponent. - Improved browser-test determinism by registering an auth-status MSW handler by default and setting per-test auth state where needed.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| front/src/pages/Home/Welcome/Welcome.tsx | Uses Heading atom for the page title. |
| front/src/pages/Home/Dashboard/Dashboard.tsx | Minor import ordering cleanup (no functional change). |
| front/src/pages/Home/Dashboard/tests/Dashboard.browser.test.tsx | Ensures auth status is mocked as authenticated for this browser test. |
| front/src/pages/Error/Error.tsx | Uses Heading atom for the error page title. |
| front/src/pages/Authentication/SignUp/SignUp.tsx | Replaces native inputs/button with TextInput and Button components. |
| front/src/pages/Authentication/OAuth/OAuth.tsx | Uses Heading + Link atoms for OAuth provider list. |
| front/src/pages/Authentication/Authentication.tsx | Uses Heading atom for the page title. |
| front/src/components/AuthenticationProtection/AuthenticationProtection.tsx | Simplifies current-route match selection. |
| front/mocks/browser.ts | Registers a default MSW auth-status handler for browser runtime/tests. |
| import { | ||
| getAuthStatus200, | ||
| getAuthStatus401, | ||
| } from "./handlers/authStatusHandlers"; |
There was a problem hiding this comment.
Dans le mock browser il faut laisser le getAuthStatus200 et non le 401 car c'est celui le plus couramment utilisé. (que ce soit pour naviguer en mode mock dans l'appli ou pour les tests d'intégration)
| > | ||
| <label htmlFor="username">{t("username")}</label> | ||
| <input | ||
| <TextInput |
There was a problem hiding this comment.
on utilisera des TextField ici mais on verra ça plus tard, tu peux laisser comme ça
There was a problem hiding this comment.
L'objectif de cette issue n'est pas juste de remplacer les balises temporaires que j'avais mis par des composants du toolkit.
C'est aussi que la partie OAuth ressemble désormais à la maquette 😅
D'ailleurs c'est là que je me rends compte qu'on a pas de variant sur le ClickIcon pour rajouter un encadré.
Si tu veux tu peux faire cette modif et utiliser un ClickIcon avec la propriété as pour que ce soit une balise de lien et tu pourras garder les props que tu as actuellement.
Voici l'attendu :
refactor Authentication, OAuth, SignUp, Error, Dashboard, and Welcome pages to use Heading and Link components for improved consistency and maintainability.