Comment personnaliser les pages de connexion et d'inscription dans Drupal avec le module Gin Login

Ce guide vous accompagne dans la configuration et la personnalisation du module Gin Login pour Drupal 11, de la configuration de base aux remplacements de gabarits avancés. Vous apprendrez comment ajouter une image de marque personnalisée, ajuster les mises en page et créer une expérience d'authentification soignée qui correspond au design de votre site.

Prérequis

Avant de commencer, vous aurez besoin de :

• Une installation de Drupal 11 (Gin Login fonctionne aussi avec Drupal 9 et 10)
• Un accès à Composer pour installer les modules
• Les permissions d'administrateur pour installer des modules et configurer des thèmes
• Une compréhension de base de l'interface d'administration de Drupal

Optionnel mais utile :

• Un logo personnalisé et des images d'arrière-plan prêts à téléverser (format PNG, JPG ou SVG)
• Les couleurs de votre marque en format hexadécimal pour la personnalisation des boutons et des champs
• Des connaissances de base en CSS si vous prévoyez ajouter des styles personnalisés

Nous avons constaté qu'avoir vos éléments de marque préparés à l'avance fait gagner beaucoup de temps pendant la configuration. Les équipes sous-estiment souvent à quel point une page de connexion bien marquée améliore la confiance et la perception des utilisateurs.

Mise en œuvre étape par étape pour la personnalisation de la connexion Drupal

Étape 1 : Installer les composants requis

D'abord, installez le thème d'administration Gin et le module Gin Login en utilisant Composer :

composer require drupal/gin drupal/gin_login

Si vous rencontrez des problèmes de dépendances, spécifiez les versions explicitement :

composer require drupal/gin:^4.0 drupal/gin_login:^2.0

Après l'installation, activez les deux composants par l'interface d'administration de Drupal :

• Naviguez vers Apparence (/admin/appearance)
• Trouvez le thème Gin et cliquez sur « Installer et définir par défaut » pour le thème d'administration
• Allez dans Extensions (/admin/modules)
• Recherchez « Gin Login » et cochez la case
• Cliquez sur « Installer » au bas de la page

Étape 2 : Accéder à la configuration de Gin Login

Une fois installé, la page de configuration devient disponible à :
Configuration → Interface utilisateur → Paramètres Gin Login
(/admin/config/user-interface/gin-login)

La page de paramètres présente plusieurs options de personnalisation organisées en sections logiques. Prenez un moment pour explorer chaque section avant d'apporter des modifications.

Étape 3 : Configurer l'image de marque de base

Commencez par les éléments essentiels de l'image de marque :

Téléversement du logo :

• Cliquez sur « Choisir un fichier » sous la section Logo
• Sélectionnez votre fichier de logo (recommandé : PNG transparent, largeur maximale de 300px)
• Le logo apparaît automatiquement sur toutes les pages d'authentification

Configuration de l'arrière-plan :
Vous avez trois options pour les arrière-plans :

• Couleur unie : Entrez un code hexadécimal (p. ex., #1e3a5f)
• Image personnalisée : Téléversez votre propre arrière-plan (minimum 1920x1080 recommandé)
• Fonds d'écran aléatoires : Activez la fonction de rotation de fonds d'écran intégrée

Disposition du formulaire :
Choisissez entre :

• Centré : Le formulaire apparaît au milieu de l'écran
• Aligné à gauche : Le formulaire est positionné à gauche avec l'arrière-plan à droite

Étape 4 : Appliquer le schéma de couleurs

Le module Gin Login respecte les couleurs de votre marque à travers plusieurs paramètres :

/* Ces paramètres se traduisent en variables CSS que vous pouvez référencer */
--gin-color-primary: #0074bd;  /* Arrière-plans des boutons */
--gin-color-primary-hover: #005a94;  /* États de survol des boutons */
--gin-color-focus: #0074bd;  /* Contours de focus */

Définissez ces couleurs dans la section « Couleurs de marque » de la page de configuration. Les changements s'appliquent immédiatement à :

• Boutons de soumission
• Liens
• États de focus des champs de formulaire
• Indicateurs de chargement

Étape 5 : Ajouter du CSS personnalisé pour les ajustements fins

Pour des ajustements spécifiques au-delà des options standards, utilisez le champ CSS personnalisé :

/* Arrondir les coins du formulaire de connexion */
.gin-login__form {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Ajuster la taille du logo */
.gin-login__logo img {
  max-width: 200px;
  height: auto;
}

/* Personnaliser les champs de saisie */
.gin-login__form input[type="text"],
.gin-login__form input[type="password"] {
  border: 2px solid #e0e0e0;
  padding: 12px;
  font-size: 16px;
}

/* Styliser le bouton de soumission */
.gin-login__form .button--primary {
  padding: 14px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

Étape 6 : Implémenter des personnalisations avancées

Pour des modifications plus profondes, vous travaillerez avec des remplacements de gabarits et des modules personnalisés.

Méthode de remplacement de gabarit :

1. Copiez le fichier de gabarit depuis :

modules/contrib/gin_login/templates/gin-login-page.html.twig

2. Placez-le dans votre thème personnalisé :

themes/custom/votretheme/templates/gin-login-page.html.twig

3. Modifiez la structure du gabarit :

{# Ajouter un message de bienvenue personnalisé #}


  
{{ 'Bienvenue sur notre plateforme'|t }}
  
{{ 'Veuillez vous connecter pour continuer'|t }}



{# Rendu original du formulaire #}
{{ form }}

Méthode de module personnalisé :

Créez un module personnalisé pour modifier le formulaire de connexion par programmation :

// Dans le fichier monmodule.module

/**
 * Implements hook_form_FORM_ID_alter() pour user_login_form.
 */
function monmodule_form_user_login_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  // Ajouter du texte d'espace réservé
  $form['name']['#attributes']['placeholder'] = t('Courriel ou nom d'utilisateur');
  $form['pass']['#attributes']['placeholder'] = t('Mot de passe');
  
  // Ajouter une validation personnalisée
  $form['#validate'][] = 'monmodule_user_login_validate';
  
  // Ajouter une classe personnalisée
  $form['#attributes']['class'][] = 'formulaire-connexion-marque';
}

/**
 * Validation personnalisée pour le formulaire de connexion.
 */
function monmodule_user_login_validate(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {
  $username = $form_state->getValue('name');
  
  // Exemple : Bloquer certains domaines
  if (strpos($username, '@domaine-bloque.com') !== false) {
    $form_state->setErrorByName('name', t('Accès refusé pour ce domaine.'));
  }
}

Erreurs courantes à éviter

Notre expérience montre que les développeurs rencontrent souvent ces problèmes lors de la personnalisation des pages de connexion :

1. Oublier de vider le cache
Après avoir apporté des modifications de configuration ou ajouté du CSS personnalisé, videz toujours le cache de Drupal :

drush cr

Sans cette étape, vos changements pourraient ne pas apparaître.

2. Utiliser des images de faible résolution
Les images d'arrière-plan devraient être d'au moins 1920x1080 pixels. Les images plus petites paraîtront pixellisées sur les écrans haute résolution. De même, les logos devraient être exportés en résolution 2x pour les écrans Retina.

3. Ignorer la réactivité mobile
Testez vos personnalisations sur les appareils mobiles. Le module Gin Login est réactif par défaut, mais le CSS personnalisé pourrait briser cela. Utilisez des requêtes médias :

@media (max-width: 768px) {
  .gin-login__form {
    padding: 20px;
    margin: 10px;
  }
}

4. Trop remplacer
Le module Gin Login gère les fonctionnalités d'accessibilité comme les états de focus et les étiquettes ARIA. Lors de l'ajout de CSS personnalisé, évitez de supprimer ces éléments importants :

/* Mauvais - supprime l'indication de focus */
.gin-login__form input:focus {
  outline: none;
}

/* Bon - personnalise tout en maintenant l'accessibilité */
.gin-login__form input:focus {
  outline: 2px solid #0074bd;
  outline-offset: 2px;
}

5. Ne pas tester toutes les pages d'authentification
N'oubliez pas de vérifier :

• /user/login - Page de connexion
• /user/register - Page d'inscription
• /user/password - Page de réinitialisation du mot de passe
• /user/logout - Confirmation de déconnexion

Chaque page devrait refléter vos personnalisations de manière cohérente.

Tests et vérification

Après avoir mis en œuvre vos personnalisations, parcourez cette liste de vérification :

Tests visuels

• Vérifiez toutes les pages d'authentification dans les états déconnecté et connecté
• Testez sur plusieurs navigateurs (Chrome, Firefox, Safari, Edge)
• Vérifiez la réactivité mobile en utilisant les outils de développement du navigateur ou de vrais appareils
• Confirmez que le mode sombre fonctionne s'il est activé (Gin prend en charge le mode sombre automatique)

Tests fonctionnels

• Complétez un flux de connexion complet du début à la fin
• Testez la fonctionnalité de réinitialisation du mot de passe
• Essayez d'enregistrer un nouveau compte si l'inscription est activée
• Vérifiez que les messages de validation du formulaire s'affichent correctement

Tests d'accessibilité

• Naviguez en utilisant seulement le clavier (touches Tab, Entrée, Échap)
• Testez avec un lecteur d'écran si possible
• Vérifiez les ratios de contraste des couleurs (devraient être d'au moins 4,5:1 pour le texte normal)
• Vérifiez que les indicateurs de focus sont visibles sur tous les éléments interactifs

Tests de performance

• Vérifiez la taille des fichiers d'images (les arrière-plans devraient être de moins de 500Ko)
• Testez la vitesse de chargement de la page en utilisant les outils de développement du navigateur
• Vérifiez que le CSS ne bloque pas le rendu de la page

Voici un script de test simple que vous pouvez ajouter à votre module personnalisé :

/**
 * Tester que les personnalisations de la page de connexion fonctionnent.
 */
function monmodule_test_personnalisations_connexion() {
  $tests = [];
  
  // Vérifier si le thème Gin est activé
  $admin_theme = \Drupal::config('system.theme')->get('admin');
  $tests['theme_gin'] = ($admin_theme === 'gin');
  
  // Vérifier si le module Gin Login est activé
  $module_handler = \Drupal::moduleHandler();
  $tests['gin_login_active'] = $module_handler->moduleExists('gin_login');
  
  // Vérifier si un logo personnalisé existe
  $config = \Drupal::config('gin_login.settings');
  $logo_path = $config->get('logo.path');
  $tests['logo_personnalise'] = !empty($logo_path);
  
  // Afficher les résultats
  foreach ($tests as $test => $result) {
    $status = $result ? 'RÉUSSI' : 'ÉCHEC';
    \Drupal::messenger()->addMessage(t('@test: @status', [
      '@test' => $test,
      '@status' => $status,
    ]));
  }
}

Conclusion

Le module Gin Login offre une façon pratique de créer des pages d'authentification professionnelles et marquées dans Drupal sans développement personnalisé extensif. En suivant ce guide, vous avez appris comment installer, configurer et personnaliser le module pour correspondre aux exigences de votre marque.

Les points clés à retenir sont : commencez par les options de configuration intégrées avant d'écrire du code personnalisé, testez toujours vos changements sur différents appareils et navigateurs, et maintenez les normes d'accessibilité même lors de l'application de styles personnalisés. Le travail avec des équipes nous a appris qu'une expérience de connexion bien marquée a un impact significatif sur la perception et la confiance des utilisateurs.

Si vous prévoyez mettre en œuvre des pages de connexion personnalisées pour plusieurs sites Drupal ou avez besoin d'aide pour créer une expérience d'authentification cohérente à travers vos propriétés numériques, nous pouvons vous aider à développer une configuration réutilisable qui accélère les déploiements futurs tout en maintenant vos normes de marque. Contactez-nous pour discuter de vos exigences d'authentification spécifiques et de la meilleure façon de les mettre en œuvre en utilisant Gin Login ou des approches de développement personnalisées.