How to Create twig template files in drupal 8 for customizing user login,profile edit and forget password forms?

Question

Earlier we use the below code for creating custom template of user login ,user profile edit and forget password forms:

 function Yourtheme_theme($existing, $type, $theme, $path){
 return array(
 'user_register' => array(
 'render element' => 'form',
 'template' => 'templates/user-register',
),



'user_pass' => array(
  'render element' => 'form',
  'template' => 'templates/user-pass',
),

'user_profile_form' => array(
  // Forms always take the form argument.
  'arguments' => array('form' => NULL),
  'render element' => 'form',
  'template' => 'templates/user-profile-edit',
),
);
}

function Yourtheme_preprocess_user_register(&$variables) {

$variables['rendered'] = drupal_render_children($variables['form']);
}

function Yourtheme_preprocess_user_login(&$variables) {

$variables['rendered'] = drupal_render_children($variables['form']);
}

How to Create same twig template files in drupal 8 for customizing user login,user profile edit and forget password forms?

Answer 1

Using hook_theme_suggestions_alter, you can create whatever template suggestions you like. For example, based on the form id. Just remember, the suggestion has underscores ("_"), but the template file has hyphens ("-").

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

then you would create templates in your theme, such as

form--user-register-form.html.twig

and

form--user-login-form.html.twig

You are doing some non-standard and unnecessary things by rendering the form in a preprocess hook and registering custom theme hooks for your forms. You don't need to create new hooks in hook_theme, you can just use the suggestions, and it will do the rest, after you clear cache.

You can render your elements within the template.

For example, for 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>