From 227b05a61e31fbc95c11185cc76f3552ea46ed3a Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Fri, 24 Apr 2026 17:11:37 -0400
Subject: [PATCH] refactor(auth): extract shared page header into
 AuthPageHeader component

- add AuthPageHeader component to centralize title/description markup
- replace inline header divs in LoginPage, RegisterPage, LogoutPage, ForgotPasswordPage, ResetPasswordPage, and ConfirmEmailPage with AuthPageHeader
---
 src/features/auth/components/AuthPageHeader.js       | 10 ++++++++++
 src/features/auth/pages/ConfirmEmailPage.client.js   | 10 ++--------
 src/features/auth/pages/ForgotPasswordPage.client.js | 10 ++--------
 src/features/auth/pages/LoginPage.client.js          | 10 ++--------
 src/features/auth/pages/LogoutPage.client.js         | 10 ++--------
 src/features/auth/pages/RegisterPage.client.js       | 10 ++--------
 src/features/auth/pages/ResetPasswordPage.client.js  | 10 ++--------
 7 files changed, 22 insertions(+), 48 deletions(-)
 create mode 100644 src/features/auth/components/AuthPageHeader.js

diff --git a/src/features/auth/components/AuthPageHeader.js b/src/features/auth/components/AuthPageHeader.js
new file mode 100644
index 0000000..e0814be
--- /dev/null
+++ b/src/features/auth/components/AuthPageHeader.js
@@ -0,0 +1,10 @@
+export default function AuthPageHeader({ title, description }) {
+  return (
+    <div className="text-center mb-6 flex flex-col gap-1">
+      <h1 className="text-[22px] font-bold text-neutral-900 dark:text-white">{title}</h1>
+      {description && (
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">{description}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/auth/pages/ConfirmEmailPage.client.js b/src/features/auth/pages/ConfirmEmailPage.client.js
index 3659b90..d84002e 100644
--- a/src/features/auth/pages/ConfirmEmailPage.client.js
+++ b/src/features/auth/pages/ConfirmEmailPage.client.js
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { Card } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token }) {
   const [error, setError] = useState('');
@@ -80,14 +81,7 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Vérification de l'e-mail
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Nous vérifions votre adresse e-mail...
-        </p>
-      </div>
+      <AuthPageHeader title="Vérification de l'e-mail" description="Nous vérifions votre adresse e-mail..." />
 
       {isLoading && (
         <div className="flex flex-col items-center py-10">
diff --git a/src/features/auth/pages/ForgotPasswordPage.client.js b/src/features/auth/pages/ForgotPasswordPage.client.js
index 79a79a5..188f0c3 100644
--- a/src/features/auth/pages/ForgotPasswordPage.client.js
+++ b/src/features/auth/pages/ForgotPasswordPage.client.js
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { Card, Input, Button } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser = null }) {
   const [error, setError] = useState('');
@@ -45,14 +46,7 @@ export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser =
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Mot de passe oublié
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.
-        </p>
-      </div>
+      <AuthPageHeader title="Mot de passe oublié" description="Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe." />
 
       {currentUser && (
         <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-500/10 dark:border-blue-500/20">
diff --git a/src/features/auth/pages/LoginPage.client.js b/src/features/auth/pages/LoginPage.client.js
index b7b2996..f64fd82 100644
--- a/src/features/auth/pages/LoginPage.client.js
+++ b/src/features/auth/pages/LoginPage.client.js
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, Input, Button } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, redirectAfterLogin = '/', currentUser = null }) {
   const [error, setError] = useState('');
@@ -67,14 +68,7 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Connexion
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Veuillez vous connecter pour continuer.
-        </p>
-      </div>
+      <AuthPageHeader title="Connexion" description="Veuillez vous connecter pour continuer." />
 
       {currentUser && (
         <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-500/10 dark:border-blue-500/20">
diff --git a/src/features/auth/pages/LogoutPage.client.js b/src/features/auth/pages/LogoutPage.client.js
index 4a36efe..47fa54d 100644
--- a/src/features/auth/pages/LogoutPage.client.js
+++ b/src/features/auth/pages/LogoutPage.client.js
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, Button } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function LogoutPage({ onLogout, onSetSessionCookie }) {
   const [error, setError] = useState('');
@@ -42,14 +43,7 @@ export default function LogoutPage({ onLogout, onSetSessionCookie }) {
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Prêt à vous déconnecter ?
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Cela mettra fin à votre session et vous déconnectera de votre compte.
-        </p>
-      </div>
+      <AuthPageHeader title="Prêt à vous déconnecter ?" description="Cela mettra fin à votre session et vous déconnectera de votre compte." />
 
       {success && (
         <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-500/10 dark:border-green-500/20">
diff --git a/src/features/auth/pages/RegisterPage.client.js b/src/features/auth/pages/RegisterPage.client.js
index 5e7fc86..771e6e5 100644
--- a/src/features/auth/pages/RegisterPage.client.js
+++ b/src/features/auth/pages/RegisterPage.client.js
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { Card, Input, Button, PasswordStrengthIndicator } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function RegisterPage({ onSubmit, onNavigate, currentUser = null }) {
   const [error, setError] = useState('');
@@ -97,14 +98,7 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Créer un compte
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Inscrivez-vous pour commencer.
-        </p>
-      </div>
+      <AuthPageHeader title="Créer un compte" description="Inscrivez-vous pour commencer." />
 
       {currentUser && (
         <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-500/10 dark:border-blue-500/20">
diff --git a/src/features/auth/pages/ResetPasswordPage.client.js b/src/features/auth/pages/ResetPasswordPage.client.js
index bdfce3f..14387ac 100644
--- a/src/features/auth/pages/ResetPasswordPage.client.js
+++ b/src/features/auth/pages/ResetPasswordPage.client.js
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { Card, Input, Button, PasswordStrengthIndicator } from '@zen/core/shared/components';
+import AuthPageHeader from '../components/AuthPageHeader.js';
 
 export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }) {
   const [error, setError] = useState('');
@@ -65,14 +66,7 @@ export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }
 
   return (
     <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Réinitialiser le mot de passe
-        </h1>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Saisissez votre nouveau mot de passe ci-dessous.
-        </p>
-      </div>
+      <AuthPageHeader title="Réinitialiser le mot de passe" description="Saisissez votre nouveau mot de passe ci-dessous." />
 
       {error && !success && (
         <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">