fix: add new formHeader for login and register (#470)

* fix: add new formHeader for login and register

* fix: translation strings and make small adjustments

* fix: code smell

public/locales/ar/auth.json

@@ -10,13 +10,13 @@
   "PASSWORD_SIGN_IN_METHOD": "تسجيل الدخول عبر كلمة المرور",
   "RESEND_EMAIL_BUTTON": "إعادة إرسال البريد الإلكتروني",
   "SIGN_IN_BUTTON": "تسجيل الدخول",
-  "SIGN_IN_HEADER": "تسجيل الدخول",
+  "LOGIN_TITLE": "تسجيل الدخول",
   "SIGN_IN_LINK_TEXT": "هل لديك حساب؟ اضغط هنا لتسجيل الدخول",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "إذا لم تتلق أي بريد إلكتروني ، فتحقق من البريد المزعج. إذا كنت تستخدم بريدًا إلكترونيًا مؤسساتيًّا (مثل المدرسة أو الشركة) ، فقد يكون قد تم حظره وسيتعيّن عليك الانتظار حتى يتم تحرير البريد الإلكتروني بواسطة نظام البريد المزعج الخاص بك.",
   "SIGN_IN_SUCCESS_TEXT": "يرجى التحقق من الصندوق الوارد في البريد الالكتروني لاسترداد رابط تسجيل الدخول الشخصي للدخول إلى چراسپ . هذا يمكن أن يستغرق عدة دقائق.",
   "SIGN_IN_SUCCESS_TITLE": "مرحبًا بعودتك!",
   "SIGN_UP_BUTTON": "اشتراك",
-  "SIGN_UP_HEADER": "اشتراك",
+  "REGISTER_TITLE": "اشتراك",
   "SIGN_UP_LINK_TEXT": "غير مسجل؟ اضغط هنا للتسجيل",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "قم بتنشيط حفظ الرؤى المستندة إلى البيانات من أجل لوحات معلومات التحليلات المحسنة",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "نقوم بجمع البيانات التحليلية لتحسين تجربة المستخدم الخاصة بك أثناء تصفح Graasp.",

public/locales/de/auth.json

@@ -15,13 +15,13 @@
   "RESEND_EMAIL_BUTTON": "E-Mail wieder senden",
   "SIGN_IN_BUTTON": "Einloggen",
   "SIGN_IN_PASSWORD_BUTTON": "Einloggen",
-  "SIGN_IN_HEADER": "Einloggen",
+  "LOGIN_TITLE": "Einloggen",
   "SIGN_IN_LINK_TEXT": "Sie haben bereits ein Konto? Klicken Sie hier, um sich anzumelden",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Wenn Sie keine E-Mail erhalten haben, überprüfen Sie Ihren Spam-Ordner. Wenn Sie eine institutionelle E-Mail (z. B. eine Schule oder ein Unternehmen) verwendet haben, wurde diese möglicherweise blockiert und Sie müssen warten, bis die E-Mail von Ihrem Spam-System freigegeben wird.",
   "SIGN_IN_SUCCESS_TEXT": "Bitte überprüfen Sie Ihren Emails <bold>{{email}}</bold>, um Ihren persönlichen Login-Link für den Zugriff auf Graasp abzurufen. Dies kann mehrere Minuten dauern.",
   "SIGN_IN_SUCCESS_TITLE": "Willkommen zurück!",
   "SIGN_UP_BUTTON": "Anmelden",
-  "SIGN_UP_HEADER": "Anmelden",
+  "REGISTER_TITLE": "Anmelden",
   "SIGN_UP_LINK_TEXT": "Nicht registriert? Klicken Sie hier, um sich zu registrieren",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Aktivieren Sie die Speicherung datengesteuerter Erkenntnisse für erweiterte Analyse-Dashboards",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Wir sammeln Analysedaten, um Ihre Benutzererfahrung beim Surfen auf Graasp zu verbessern.",

public/locales/en/auth.json

@@ -15,14 +15,14 @@
   "RESEND_EMAIL_BUTTON": "Resend Email",
   "SIGN_IN_BUTTON": "Receive a link to log in",
   "SIGN_IN_PASSWORD_BUTTON": "Log in",
-  "SIGN_IN_HEADER": "Log In",
+  "LOGIN_TITLE": "Log In",
   "SIGN_IN_LINK_TEXT": "Already have an account?",
   "SIGN_IN_LINK_TEXT_BUTTON": "Log in",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "If you did not receive any email, check your spam. If you used an institutional email (ie. school, company), it might have been blocked and will have to wait until the email is released by your spam system.",
   "SIGN_IN_SUCCESS_TEXT": "Please check your inbox <bold>{{email}}</bold> to retrieve your personal login link to access Graasp. This can take several minutes.",
   "SIGN_IN_SUCCESS_TITLE": "Welcome back!",
   "SIGN_UP_BUTTON": "Create my account",
-  "SIGN_UP_HEADER": "Welcome to Graasp!",
+  "REGISTER_TITLE": "Welcome to Graasp!",
   "SIGN_UP_LINK_TEXT": "Create an account",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Activate learning analytics",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "We collect analytic data to improve your user experience while browsing Graasp.",

public/locales/es/auth.json

@@ -11,13 +11,13 @@
   "PASSWORD_SIGN_IN_METHOD": "Contraseña Iniciar sesión",
   "RESEND_EMAIL_BUTTON": "Reenviar email",
   "SIGN_IN_BUTTON": "Iniciar sesión",
-  "SIGN_IN_HEADER": "Iniciar sesión",
+  "LOGIN_TITLE": "Iniciar sesión",
   "SIGN_IN_LINK_TEXT": "¿Ya tienes una cuenta? Clic aquí para ingresar",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Si no recibiste ningún correo electrónico, revisa tu spam. Si utilizó un correo electrónico institucional (es decir, escuela, empresa), es posible que haya sido bloqueado y tendrá que esperar hasta que su sistema de spam libere el correo electrónico.",
   "SIGN_IN_SUCCESS_TEXT": "Revise su bandeja de entrada <bold>{{email}}</bold> para recuperar su enlace de inicio de sesión personal para acceder a Graasp. Esto puede tardar varios minutos.",
   "SIGN_IN_SUCCESS_TITLE": "¡Bienvenido de nuevo!",
   "SIGN_UP_BUTTON": "Inscribirse",
-  "SIGN_UP_HEADER": "Inscribirse",
+  "REGISTER_TITLE": "Inscribirse",
   "SIGN_UP_LINK_TEXT": "¿No registrado? Pulse aquí para registrarse",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Activar el ahorro de información basada en datos para mejorar los paneles de análisis",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Recopilamos datos analíticos para mejorar su experiencia de usuario mientras navega por Graasp.",

public/locales/fr/auth.json

@@ -15,14 +15,14 @@
   "RESEND_EMAIL_BUTTON": "Renvoyer l'e-mail",
   "SIGN_IN_BUTTON": "Se connecter avec un lien",
   "SIGN_IN_PASSWORD_BUTTON": "Se connecter",
-  "SIGN_IN_HEADER": "Connection",
+  "LOGIN_TITLE": "Connection",
   "SIGN_IN_LINK_TEXT": "Vous avez déjà un compte ?",
   "SIGN_IN_LINK_TEXT_BUTTON": "Se connecter",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Si vous n'avez reçu aucun email, vérifiez vos spams. Si vous avez utilisé un email institutionnel (ex : école, entreprise), il est possible qu'il ait été bloqué et vous devrez attendre que l'email soit libéré par votre système de spam.",
   "SIGN_IN_SUCCESS_TEXT": "Veuillez consulter votre boîte de réception <bold>{{email}}</bold> pour récupérer votre lien de connexion personnel pour accéder à Graasp. Cela peut prendre plusieurs minutes.",
   "SIGN_IN_SUCCESS_TITLE": "Content de te revoir!",
   "SIGN_UP_BUTTON": "Créer mon compte",
-  "SIGN_UP_HEADER": "Bienvenue sur Graasp !",
+  "REGISTER_TITLE": "Bienvenue sur Graasp !",
   "SIGN_UP_LINK_TEXT": "Créer un compte",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Activer la collecte des données d'apprentissage",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Nous collectons des données sur votre façon d'utiliser les modules d'apprentissage. Ces données ne sont partagées qu'avec les auteurs des modules.",

public/locales/it/auth.json

@@ -11,13 +11,13 @@
   "PASSWORD_SIGN_IN_METHOD": "Accedi con password",
   "RESEND_EMAIL_BUTTON": "Rinvia l'e-mail",
   "SIGN_IN_BUTTON": "Registrazione",
-  "SIGN_IN_HEADER": "Registrazione",
+  "LOGIN_TITLE": "Registrazione",
   "SIGN_IN_LINK_TEXT": "Hai già un account? Clicca qui per accedere",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Se non hai ricevuto nessuna email, controlla lo spam. Se hai utilizzato un'e-mail istituzionale (es. scuola, azienda), potrebbe essere stata bloccata e dovrai attendere fino a quando l'e-mail non verrà rilasciata dal tuo sistema antispam.",
   "SIGN_IN_SUCCESS_TEXT": "Controlla la tua casella di posta <bold>{{email}}</bold> per recuperare il tuo link di accesso personale per accedere a Graasp. L'operazione può richiedere diversi minuti.",
   "SIGN_IN_SUCCESS_TITLE": "Bentornato!",
   "SIGN_UP_BUTTON": "Iscrizione",
-  "SIGN_UP_HEADER": "Iscrizione",
+  "REGISTER_TITLE": "Iscrizione",
   "SIGN_UP_LINK_TEXT": "Non registrato? Clicca qui per registrarti",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Attivare il salvataggio degli insight guidati dai dati per migliorare i cruscotti analitici",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Raccogliamo dati analitici per migliorare l'esperienza dell'utente durante la navigazione su Graasp.",

src/modules/auth/components/common/FormHeader.tsx

@@ -0,0 +1,19 @@
+import { Stack, Typography, useTheme } from '@mui/material';
+
+import { GraaspLogo } from '@graasp/ui';
+
+type FormHeaderProps = {
+  readonly id?: string;
+  readonly title: string;
+};
+export function FormHeader({ id, title }: FormHeaderProps): JSX.Element {
+  const theme = useTheme();
+  return (
+    <Stack spacing={1}>
+      <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
+      <Typography variant="h4" component="h2" id={id} textAlign="center">
+        {title}
+      </Typography>
+    </Stack>
+  );
+}

src/modules/auth/components/register/Register.tsx

@@ -2,15 +2,14 @@ import { ChangeEventHandler, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { LoadingButton } from '@mui/lab';
-import { FormControl, LinearProgress, Stack, useTheme } from '@mui/material';
+import { FormControl, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 import {
   MAX_USERNAME_LENGTH,
   MIN_USERNAME_LENGTH,
   RecaptchaAction,
 } from '@graasp/sdk';
-import { GraaspLogo } from '@graasp/ui';
 
 import { Link, useLocation, useNavigate } from '@tanstack/react-router';
 
@@ -31,6 +30,7 @@ import { emailValidator, nameValidator } from '~auth/validation';
 
 import { EmailAdornment } from '../common/Adornments';
 import { ErrorDisplay } from '../common/ErrorDisplay';
+import { FormHeader } from '../common/FormHeader';
 import { StyledTextField } from '../common/StyledTextField';
 import { AgreementForm } from '../register/AgreementForm';
 import { EmailInput } from './EmailInput';
@@ -39,7 +39,6 @@ import { EnableAnalyticsForm } from './EnableAnalyticsForm';
 const {
   SIGN_IN_LINK_TEXT,
   SIGN_IN_LINK_TEXT_BUTTON,
-  SIGN_UP_HEADER,
   NAME_FIELD_LABEL,
   SIGN_UP_BUTTON,
   INVITATIONS_LOADING_MESSAGE,
@@ -58,7 +57,6 @@ export function Register({ search }: RegisterProps) {
   const navigate = useNavigate();
   const location = useLocation();
   const { executeCaptcha } = useRecaptcha();
-  const theme = useTheme();
 
   const { isMobile, challenge } = useMobileAppLogin();
 
@@ -160,17 +158,7 @@ export function Register({ search }: RegisterProps) {
 
   return (
     <Stack direction="column" spacing={2}>
-      <Stack spacing={1}>
-        <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
-        <Typography
-          variant="h4"
-          component="h2"
-          id={REGISTER_HEADER_ID}
-          textAlign="center"
-        >
-          {t(SIGN_UP_HEADER)}
-        </Typography>
-      </Stack>
+      <FormHeader id={REGISTER_HEADER_ID} title={t('REGISTER_TITLE')} />
       <FormControl>
         <Stack direction="column" spacing={1}>
           <StyledTextField

src/modules/auth/langs.ts

@@ -15,14 +15,12 @@ export const AUTH = {
   RESEND_EMAIL_BUTTON: 'RESEND_EMAIL_BUTTON',
   SIGN_IN_BUTTON: 'SIGN_IN_BUTTON',
   SIGN_IN_PASSWORD_BUTTON: 'SIGN_IN_PASSWORD_BUTTON',
-  SIGN_IN_HEADER: 'SIGN_IN_HEADER',
   SIGN_IN_LINK_TEXT: 'SIGN_IN_LINK_TEXT',
   SIGN_IN_LINK_TEXT_BUTTON: 'SIGN_IN_LINK_TEXT_BUTTON',
   SIGN_IN_SUCCESS_EMAIL_PROBLEM: 'SIGN_IN_SUCCESS_EMAIL_PROBLEM',
   SIGN_IN_SUCCESS_TEXT: 'SIGN_IN_SUCCESS_TEXT',
   SIGN_IN_SUCCESS_TITLE: 'SIGN_IN_SUCCESS_TITLE',
   SIGN_UP_BUTTON: 'SIGN_UP_BUTTON',
-  SIGN_UP_HEADER: 'SIGN_UP_HEADER',
   SIGN_UP_LINK_TEXT: 'SIGN_UP_LINK_TEXT',
   SIGN_UP_SAVE_ACTIONS_LABEL: 'SIGN_UP_SAVE_ACTIONS_LABEL',
   SIGN_UP_SAVE_ACTIONS_TOOLTIP: 'SIGN_UP_SAVE_ACTIONS_TOOLTIP',

src/routes/auth/login.tsx

@@ -1,8 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Divider, Stack, Typography, useTheme } from '@mui/material';
-
-import { GraaspLogo } from '@graasp/ui';
+import { Divider, Stack } from '@mui/material';
 
 import { createFileRoute } from '@tanstack/react-router';
 import { zodSearchValidator } from '@tanstack/router-zod-adapter';
@@ -13,6 +11,7 @@ import { NS } from '@/config/constants';
 import { LOG_IN_HEADER_ID } from '@/config/selectors';
 
 import { LeftContentContainer } from '~auth/components/LeftContentContainer';
+import { FormHeader } from '~auth/components/common/FormHeader';
 import { MagicLinkLoginForm } from '~auth/components/signIn/MagicLinkLoginForm';
 import { PasswordLoginForm } from '~auth/components/signIn/PasswordLoginForm';
 
@@ -29,17 +28,10 @@ export const Route = createFileRoute('/auth/login')({
 function LoginRoute() {
   const search = Route.useSearch();
   const { t } = useTranslation(NS.Auth);
-  const theme = useTheme();
   return (
     <LeftContentContainer>
       <Stack direction="column" alignItems="center" gap={3}>
-        <Stack spacing={1} id={LOG_IN_HEADER_ID}>
-          <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
-          <Typography textAlign="center" variant="h4" component="h2">
-            {t('SIGN_IN_HEADER')}
-          </Typography>
-        </Stack>
-
+        <FormHeader id={LOG_IN_HEADER_ID} title={t('LOGIN_TITLE')} />
         <Stack
           direction="column"
           alignItems="center"