Remplacer le modèle de formulaire de connexion utilisateur

Question

J'essaie de personnaliser ma page de connexion utilisateur dans mon thème personnalisé à l'aide du fichier de modèle page--user--login.html.twig, mais j'ai des problèmes pour accéder aux différents éléments du formulaire. Tous les aspects du formulaire se trouvent dans page.content, mais j'aimerais modifier le contenu qui est en cours de sortie.

Pour un exemple simple, le thème de base a le nom d'utilisateur et le mot de passe empilés verticalement, où je voudrais ajuster cela pour utiliser bootstrap afin qu'ils soient empilés horizontalement sur grand écran et verticalement sur mobile.

Dans Drupal 7, nous avions un formélément dans le fichier modèle qui me permettait de rendre certains éléments de formulaire séparément, comme:

<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['name']); ?> </div> <div class="col-sm-12 col-lg-6"> <?php print drupal_render($form['pass']); ?>
</div>

Existe-t-il un équivalent pour Drupal 8?

J'ai essayé de créer un fichier modèle pour le formulaire ( form--user-login.html.twiget form--user-login-form.html.twig) pour voir si je pouvais modifier le modèle de formulaire lui-même au lieu de la page sur laquelle le formulaire existe, mais je n'ai pas eu de chance avec cela.

Je préférerais remplacer le thème de connexion actuel au lieu de créer une toute nouvelle page et un nouveau formulaire et devoir ajouter toutes les configurations nécessaires pour qu'un utilisateur atterrit sur la bonne page de connexion, mais je n'ai pas encore trouvé de moyen de le faire, merci en avance.

Answer 1

si vous avez remplacé correctement elementcontiendra tous les éléments dans form--user-login.html.twig,

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>

si le modèle n'est pas valide, vous devriez essayer de l'ajouter.

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) { if ($hook == 'form' & !empty($variables['element']['#id'])) { $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

puis créez form--user-login-form.html.twigdans votre thème.

n'oubliez pas de vider le cache.