[СДЕЛАЙ САМ] Ajax Регистрация, Авторизация, Сброс пароля, Редактирование профиля

Задача: сделать ajax регистрацию, авторизацию, сброс пароля и редактирование пользователя, используя минимум сторонних компонентов.

ИСПОЛЬЗУЙТЕ КОМПОНЕНТ SENDIT

Почему минимум? Ну часть из тех компонентов, что реализуют подобный функционал, платная (Office, ajaxLogin) и бюджеты есть не всегда на них есть. Некоторые (ajaxLogin) в данный момент не доступны из-за смерти автора. Общий недостаток большинства компонентов это то, что они загружают дополнительные скрипты и стили, что порой приводит к необходимости дополнительно оптимизировать сайт. Компонент Login не работает по ajax. Однако это можно обойти , но runSnippet запустит много всего и не факт что это всё нужно в данный момент. Поэтому предлагаю своё решение.
Нам понадобится:
1. AjaxForm;
2. FormIt;
3. Этот репозиторий.

Порядок действий:
1. Скопировать core/elements/snippets/ajaxidentification.class.php.
2. Создать в админке сниппеты
2.1 AjaxIdentification (код лежит в core/elements/snippets/hooks/AjaxIdentification.php);
2.2 userExists (код лежит в core/elements/snippets/validators/userExists.php);
2.3 userNotExists (код лежит в core/elements/snippets/validators/userNotExists.php;
2.4 ActivateUser (код лежит в core/elements/snippets/ActivateUser.php) // этот можно вызывать прям из файла если хотите.
3. В вывоз AjaxForm в параметр hooks первым значением добавить AjaxIdentification, сюда же добавить параметр method ( register — регистрация, login — авторизация, forgot — восстановление доступа, update — обновление данных).
4. В js на событие af_complete добавить редирект на нужные страницы. Ссылки можно получать
из мета-тегов с именами типа loginSuccessUrl.
Всё. Далее немного потока сознания и пояснений.


Делать редирект после регистрации или авторизации, передавая ссылку через мета-тег, мне кажется неудобным. Поскольку AjaxForm, к сожалению, не предоставляет простого способа изменить класс обработчик, как это сделано в miniShop2, нужно немного подправить исходники. А именно нужно заменить в ajaxform.class.php метод handleFormit() на код приведённый ниже

public function handleFormIt(array $scriptProperties = array())
    {
        $plPrefix = isset($scriptProperties['placeholderPrefix'])
            ? $scriptProperties['placeholderPrefix']
            : 'fi.';

        $errors = array();
        foreach ($scriptProperties['fields'] as $k => $v) {
            if (isset($this->modx->placeholders[$plPrefix . 'error.' . $k])) {
                $errors[$k] = $this->modx->placeholders[$plPrefix . 'error.' . $k];
            }
        }

        if (!empty($this->modx->placeholders[$plPrefix . 'error.recaptcha'])) {
            $errors['recaptcha'] = $this->modx->placeholders[$plPrefix . 'error.recaptcha'];
        }

        if (!empty($this->modx->placeholders[$plPrefix . 'error.recaptchav2_error'])) {
            $errors['recaptcha'] = $this->modx->placeholders[$plPrefix . 'error.recaptchav2_error'];
        }

        if (!empty($errors)) {
            $message = !empty($this->modx->placeholders[$plPrefix . 'validation_error_message'])
                ? $this->modx->placeholders[$plPrefix . 'validation_error_message']
                : 'af_err_has_errors';
            $status = 'error';
        } else {
            $message = isset($scriptProperties['successMessage'])
                ? $scriptProperties['successMessage']
                : 'af_success_submit';
            $status = 'success';
            
            // вот что я добавил
            if($scriptProperties['redirectId']){
                $redirectUrl = $this->modx->makeUrl($scriptProperties['redirectId'], '', '', 'full');
                $errors['redirectUrl'] = $redirectUrl;
                $errors['redirectTimeout'] = $scriptProperties['redirectTimeout'] ?: 2000;
            }
        }
        return $this->$status($message, $errors);
    }

Эта манипуляция позволит в js на событие af_complete в массиве response.data получить два параметра redirectUrl (ссылка для перехода) и redirectTimeout (время задержки до перехода для функции setTimeout). Сами данные мы будем передавать через вызов AjaxForm в параметрах redirectId (id ресурса для перехода) и redirectTimeout.

Теперь немного о классе AjaxIdentification. Я хотел использовать процессоры и только их, но так и не смог решить проблему с правами доступа для процессора security/user/update.Поэтому метод update работает без процессора.

Поля extended должны иметь в имени префикс extended_ или любой другой, но тогда в вызов нужно добавить параметр extendedFieldPrefix со значением префикса.

Если требуется ручная проверка аккаунта перед предоставлением доступа, укажите в вывозе параметр moderate со значением true.

Если требуется подтверждение почты и активация пользователя только после этого укажите параметр activation=1, при этом в $_POST должен быть указан email, а параметр moderate должен быть false. Так же в вызов нужно добавить второй хук FormItAutoResponder. Время действия ссылки можно передать в параметре activationUrlTime в секундах. По умолчанию 10800 секунд или 3 часа. Значение id ресурса на который будет вести ссылка активации из письма можно передать в параметре activationResourceId, по умолчанию 1.

Плавно переходим к сниппету ActivateUser. Его нужно вызывать на странице активации. Он вернёт true если пользователь активирован и false в противном случае. Дальнейшие действия на ваше усмотрение.

Далее два валидатора, которые применяются к полю из которого берётся username ( параметр usernameField, по умолчанию username):
1. userExists возвращает true если пользователь НЕ существует. Этот валидатор используется при регистрации.
2. userNotExists возвращает true если пользователь существует. Это валидатор используется при восстановлении пароля, чтобы не отправлять письмо несуществующим пользователя.

Ещё немного о параметрах.
'authenticateContexts' — список контекстов разделённых запятыми в которые нужно авторизовать пользователя.
'passwordField' — имя поля с паролем, по умолчанию password.
'autoLogin' — если true и не нужна активация и модерация пользователь после регистрации будет авторизован, по умолчанию false.
'usergroups' — список id групп разделенный запятыми, в которые следует добавить пользователя при регистрации.
'usergroupsField' — позволяет пользователю самостоятельно выбрать группы, если данный параметр указан, предыдущий будет проигнорирован.
В двух последних параметрах допустима запись вида '2:1:0,3:1:1', где первое число это id группы, второе id роли ( по умолчанию 0 — superuser, 1 — member), третье rank — не знаю для чего, но в процессоре было, я оставил.

В репозитории есть примеры всех вызовов и чанков, в том числе и писем.

Напоследок, сам репозиторий это форк с AjaxForm из которого я выпилил jQuery, переписал весь js и ещё кое-что. Кому интересно читайте тут .

[[!AjaxLogin_vectorserver? &snippet=`Login`]]

[[!AjaxLogin_vectorserver? &snippet=`Login` &id=`q`]]

[[!AjaxLogin_vectorserver? &snippet=`Register` &id=`123`]]

<?php
/* @global $modx*/
/** @var TYPE_NAME $scriptproperties */
/** @var TYPE_NAME $snippet */

/** @var TYPE_NAME $id */
$id = $id??$modx->resource-id;
$uniqid = "form_".md5($snippet.$id);
$url = $modx->resource->uri;


$js = "<script>
    let $uniqid = document.getElementById('{$uniqid}').getElementsByTagName('form')[0];
    if($uniqid){
        $uniqid.addEventListener('submit', (e) => {
            
        
            fetch($uniqid.action, {
               method: 'POST',
               body: new FormData($uniqid)
            }).then(function (response) {
                // The API call was successful!
                return response.text();
            }).then(function (data) {
                // This is the HTML from our response
                var parser = new DOMParser();
                var doc = parser.parseFromString(data, \"text/html\");
                $uniqid.innerHTML = doc.getElementById('{$uniqid}').innerHTML;
            }).catch(function (err) {
                // There was an error
                console.warn('Something went wrong.', err);
            });;
        
         // on form submission, prevent default
        e.preventDefault();
      });
    }
  
</script>";

$runSnippet = "<div id='{$uniqid}' class='AjaxLogin_vectorserver'>{$modx->runSnippet($snippet)}</div>\n{$js}";
return $runSnippet;