web-dev-qa-db-fra.com

Comment personnaliser le formulaire de connexion utilisateur?

J'essaie de personnaliser le formulaire de connexion utilisateur dans /user/login page et je veux utiliser un hook_form_alter fonction pour ajouter un style génial et un espace réservé à chacun des champs du formulaire de connexion utilisateur et supprimer ou masquer:
"Entrez votre admin nom d'utilisateur" et "Entrez le mot de passe qui accompagne votre nom d'utilisateur" des expressions de description sous chacun des thèmes.
Pour résoudre ce problème, j'ai ajouté quelque chose comme le code ci-dessous à mon ThemeName.theme :

function ThemeName_form_alter(&$form, $form_state, $form_id) {
  if ( $form['#form_id'] == 'user_login_form' ) {
    $form['actions']['submit']['#attributes']['class'][] = 'button glow button-primary expanded';
    $form['keys']['#attributes']['placeholder']['name'] = t('User name');
    $form['keys']['#attributes']['placeholder']['password'] = t('Password');
  }
}

J'essaie de nombreuses façons différentes mais je ne peux obtenir aucun résultat. enfin je veux réaliser quelque chose comme l'image ci-dessous:
enter image description here

J'ai lu ces pages mais ne semble pas fonctionner en Drupal 8:
Comment modifier les champs du formulaire d'inscription utilisateur et du formulaire de connexion utilisateur?
Modification de la page d'enregistrement utilisateur par défaut
Personnaliser le bloc de connexion utilisateur

8formstheming
7
Mojtaba Reyhani

Vous pouvez ajouter des espaces réservés dans hook_form_alter ().

/**
 * Implements hook_form_alter().
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 * @param $form_id
 */
function ThemeName_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if ($form_id == 'user_login_form' ) {
    // Add placeholders.
    $form['name']['#attributes']['placeholder'] = t('User name');
    $form['pass']['#attributes']['placeholder'] = t('Password');
  }
}

Utilisez les fonctions module Devel pour imprimer le formulaire en utilisant kint, de cette façon, vous pouvez voir visiblement la structure entière du tableau $ form.

9
Jeff Burnz

https://www.drupal.org/project/simplelogin

C'est un module simple pour personnaliser les pages Drupal Login, Password et Register avec des images d'arrière-plan.

Les administrateurs peuvent permettre aux utilisateurs de joindre leurs propres images d'arrière-plan/leur propre couleur d'arrière-plan à la connexion utilisateur, au mot de passe et aux pages d'enregistrement. Meilleures fonctionnalités, y compris personnaliser la couleur d'arrière-plan, les paramètres d'image.

Caractéristiques: Design épuré et personnalisé, Personnaliser la couleur d'arrière-plan, la couleur du lien, soumettre la couleur du bouton, Personnaliser les paramètres de l'image, Opacité de l'image d'arrière-plan, Supprimer les fichiers Css indésirables des pages simplelogin, Largeur du wrapper des pages de connexion, Adaptatif au mobile,

1
Satheesh kumar