materio-d9/web/modules/custom/materio_user/materio_user.module

<?php

/**
 * @file
 * Contains materio_user.module.
 */

use \Drupal\Core\Form\FormStateInterface;
use \Drupal\Core\Block\BlockPluginInterface;
use \Drupal\Core\Url;
use \Drupal\Core\Link;

/**
 * implements hook_form_FORM_ID_alter()
 *
 */
function materio_user_form_user_login_form_alter(&$form, FormStateInterface $form_state, $form_id) {

  $form['name']['#attributes'] += array(
    "v-model" => "mail",
    // "@keyup.enter" => "login"
  );

  $form['pass']['#attributes'] = array(
    "v-model" => "password",
    // "@keyup.enter" => "login"
  );

  $url = Url::fromRoute('user.pass');
  $form['pass']['#description'] = Link::fromTextAndUrl('Forgot your password?', $url)->toString();
  // "<a href="{{ path('user.pass') }}">{{ 'Forgot your password?'|t }}</a>";

  $form['actions']['submit']['#attributes'] = array(
    "@click.prevent" => "login"
  );

  $form['message'] = array(
    '#markup' => '
      <span class="login-message" v-if="loginMessage">
        {{ loginMessage }}
      </span>
    '
  );

}

function materio_user_form_user_modal_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Drupal::logger('materio_user')->notice(print_r($form['mail'], true));
  // ksm($form);
  $form['account']['mail']['#attributes'] = array(
    "v-model" => "mail",
    "@keyup.enter" => "register",
    "placeholder" => $form['account']['mail']['#title'],
    "title" => $form['account']['mail']['#description']
  );

  // https://drupal.stackexchange.com/a/217112
  // Get default process function array:
  $element_info = element_info('password_confirm');
  $process = $element_info['#process'];
  // Add our process function to the array:
  $process[] = '_materio_user_process_password_confirm';
  $form['account']['pass']['#process'] = $process;

  $form['actions']['submit']['#attributes'] = array(
    "@click.prevent" => "register",
    "@keyup.enter" => "register",
    "ref" => "register"
    // ":class" => "can_register"
  );

}

function _materio_user_process_password_confirm($element){
  // ksm($element);
  $element['pass1']['#description'] = t('Password must contains Lowercase and Uppercase Letters, numbers, and punctuation.');
  $element['pass1']['#attributes'] += array(
    "v-model" => "pass1",
    "placeholder" => $element['pass1']['#title'],
    ":class" => "psswd_class"
  );
  $element['pass2']['#attributes'] += array(
    "v-model" => "pass2",
    "placeholder" => $element['pass2']['#title']

  );
  return $element;
}
/**
 * Returns HTML for a form element.
 * Prepares variables for form element templates.
 *
 * Default template: form-element.html.twig.
 *
 * @param array $variables
 *   An associative array containing:
 *   - element: An associative array containing the properties of the element.
 *     Properties used: #title, #title_display, #description, #id, #required,
 *     #children, #type, #name, #label_for.
 */
// function materio_user_preprocess_form_element(&$vars) {
//   $element = $vars['element'];
//   if($element['#type'] == 'password' && $element['#array_parents'][0] == 'account'){
//     ksm($vars);
//     // $vars['attributes']['placeholder'] = $element['#title'];
//     $vars['element']['#attributes']['placeholder'] = $element['#title'];
//   }
// }



/**
 * implements hook_block_view_BASE_BLOCK_ID_alter()
 *
 * https://www.drupal.org/project/drupal/issues/2626224
 */
function materio_user_block_view_user_login_block_alter(array &$build, BlockPluginInterface $block) {
  $build['#pre_render'][] = '_materio_user_user_login_block_pre_render';
}

function _materio_user_user_login_block_pre_render(array $build){
  $user_links = &$build['content']['user_links'];
  $items = &$user_links['#items'];
  // ksm($items);
  $items['create_account']['#url']->mergeOptions(array(
    "attributes" => array(
      "@click.prevent" => "create_account"
    )
  ));
  $items['request_password']['#url']->mergeOptions(array(
    'attributes' => array(
      "@click.prevent" => "request_password"
    )
  ));
  return $build;
}

function materio_user_entity_type_build(array &$entity_types) {
  // https://drupal.stackexchange.com/a/230547
  $entity_types['user']->setFormClass('modal', 'Drupal\user\RegisterForm');
}