Как вызывать модальную форму авторизации в Drupal 8 и 9

Простота есть необходимое условие прекрасного.

Лев Николаевич Толстой

Давайте научимся вызывать модальную форму авторизации пользователя на сайте используя уже встроенные в Drupal функционал. Да несмотря на обилие сторонних модулей типа Ajax Login, Fancy Login, Login Popap и прочих, тот же результат вполне возможно получить парой строчек кода в теме оформления сайта!

Подключаем Core Drupal Dialog Ajax

Для этого открываем файл your_theme.libraries.yml (your_theme замените на название используемой у Вас на сайте темы оформления) и добавьте в секцию JS зависимость core/drupal.dialog.ajax. Результат должен быть похож на такой код:

global-js: # в Вашей теме может иметь другое название
  js: # ищите именно эту строку
    js/scripts.js: {} # в таком виде "ваша папка со скриптами/ваш скрипт"
  dependencies: # если в Вашей теме оформления этого нет то добавьте
    - core/jquery
    - core/drupal
    - core/drupal.dialog.ajax # именно здесь подключаем модальные окна Drupal

Подключаем форму авторизации к ссылке в темплейте

Теперь подключив core/drupal.dialog.ajax Вы можете привязать форму авторизации пользователя к любой ссылке в ваших темплейтах. Например у меня это привязано к ссылке ЛК в меню которое находиться в шапке сайта, сделано это следующим образом:

<a href="/user/login" class="use-ajax user-login-form" data-dialog-type="modal" data-dialog-options="{&quot;dialogClass&quot;:&quot;login-modal&quot;}">
    <span id="login-link">ЛК</span>
</a>

Где в class Вы видите use-ajax и user-login-form - они обязательны и указывают Drupal, что ссылка использует Ajax и вызывает форму авторизации user_login_form.

Затем в data-dialog-type указываем modal, указываем Drupal какой тип диалога будем вызывать, и это тоже обязательно.

И в конце я для себя передаю в конструктор модального окна инструкцию, в которой прошу Drupal назначить мой класс login-modal, с помощью которого я смогу через CSS оформить модельное окно как мне пожелается не затронув при этом другие!

Для этого в  data-dialog-options я задаю {"dialogClass":"login-modal"}, но в HTML нужно знаки ковычек в правильном формате, так что в итоге получаем такую строку {"dialogClass":"login-modal"}

Оформление модального окна в CSS

Теперь у нас есть возможность полностью настроить внешний вид модального окна с помощью CSS, я например вынес эти инструкции с отдельный файл modals.css и подлючил его в your_theme.libraries.yml

global-css:
  css:
    theme:
      css/style.css: {}
      css/modals.css: {}

А в самом modals.css уже использовал мой класс login-modal для перехвата и замены правил оформления элементов. Приведу краткий пример:

.login-modal.ui-dialog {
  /* ваши инструкции */
}

.login-modal .ui-dialog-titlebar {
  /* ваши инструкции */
}

.login-modal .ui-dialog-titlebar-close {
  /* ваши инструкции */
}