[AjaxFormitLogin] AjaxForm на стрероидах и чистом JS

Приветствую, коллеги. Всех с наступающим! В честь этого праздника, я решил сделать сообществу подарок и собрал некоторые свои наработки в пакет. Надеюсь в новом году он кому-нибудь облегчит жизнь. Примеры вызовов можно найти в папке компонента в подпапке templates.

Отличия от AjaxForm:
1. Нет jQuery.
2. Для показа уведомлений используется библиотека IziToast.
3. Принимает параметр clearFieldsOnSuccess, тем самым позволяя управлять очисткой полей при успешной оправке формы.
4. Принимает параметр transmittedParams (значение должно быть валидным JSON), который позволяете передавать в JS кастомные параметры отдельно при успешной, отдельно при неудачной отправке.
5. Позволяет отображать процесс загрузки файлов на сервер, для этого нужно указать параметр showUploadProgress со значением 1.
6. Событие af_complete заменено на afl_complete.
document.addEventListener('afl_complete', e => {
    console.log(e.detail.response); // ответ сервера
    console.log(e.detail.form); // текущая форма
});
7. Изменен формат ответа сервера.
8. Работают редиректы. Для этого необходимо указать параметр redirectTo (абсолютная ссылка или ID ресурса) и, при необходимости изменить стандартное значение в 2с, redirectTimeout (в милисекундах) для задания задержки перед переходом на другую страницу.
9. Добавлен метод помогающий валидировать чекбоксы. Для его работы необходимо проверяемому чекбоксу добавить атрибут data-afl-required, где значением будет ключ указанный в параметре validate, а также нужно добавить скрытое поле с этим именем в форму. Самому чекбоксу имя можно не указывать.
10. Нет поддержки капчи от гугла, но встроена собственная защита от спама по методу Алексея Смирнова. Для активации нужно в вызове указать параметр spamProtection со значением 1.
11. Есть возможность регистрации, авторизации, сброса пароля и редактирования личных данных, при условии установки компонента FormIt.Подробнее о поддерживаемых параметрах можно прочитать в этой заметке
12. При обновлении данных пользователя добавлено системное событие aiOnUserUpdate, которое получает следующие данные $user — объект обновленного пользователя, $profile — его профиль, $data — переданные данные.

Благодарности:
1. @Василий Наумкин за AjaxForm, modExtra и вообще всю базу, которая легла в основу этого компонента.
2. @Баха Волков за код-ревью и подсказки по JS.
3. @Дима Сайт за подсказку по неймингу.
4. @Алексей Смирнов за метод защиты от спама.

Скачать пакет пока можно только с GitHub, как появится в modstore выложу ссылку сюда.
Артур Шевченко
30 декабря 2022, 20:27
modx.pro
2
845
+12
Поблагодарить автора Отправить деньги

Комментарии: 8

Сергей Шлоков
31 декабря 2022, 08:05
0
AjaxForm на стреройдах
Наверно, имелось ввиду «на стероидах»?
R2m0x94 (Vasily)
31 декабря 2022, 15:27
0
Запиши видео в upd поста или полный обзор, хоть посмотреть как работает. Похвастайся :)
    Константин Ильин
    07 января 2023, 14:40
    0
    Артур подскажи пожалуйста, для этого вызова(из примеров взял) получается надо написать плагин который будет сохранять или хук?
    Просто при таком вызове, редактирую fullname сохранить нажал, «Данные сохранены», но они не записались
    {'!AjaxFormitLogin' | snippet : [
            'form' =>  'updateProfileForm',
            'snippet' => 'FormIt',
            'hooks' => 'AjaxIdentification',
            'method' => 'update',
            'successMessage' => 'Данные сохранены.',
            'clearFieldsOnSuccess' => 0,
    
            'validate' => 'email:required:email',
            'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!',
            'email.vTextRequired' => 'Укажите email.'
            ]}
      Артур Шевченко
      09 января 2023, 11:40
      0
      Дополнительно ничего писать не нужно, всё есть в комплекте. Я проверил на чистом сайте, у меня всё из коробки завелось без проблем. Посмотрите может есть какие-то ошибки? Попробуйте установить версию 1.0.2.(доступна по ссылке в конце поста)
        Константин Ильин
        09 января 2023, 13:02
        0
        Хм, походу я криворучко или праздники сказываются, даже авторизация не работает.
        Модхост сейчас поднял
        s31388.h10.modhost.pro/

        Простой пользователь
        test@test.ru
        123123123

        админский
        s31388.h10.modhost.pro/manager/
        s31388
        AzbNTYpnYF11
          Артур Шевченко
          09 января 2023, 13:18
          +1
          Ну так-то, конечно не работает))) Ты указал, что имя пользователя надо брать из поля email, а имя пользователя у тебя не равно email.
            Константин Ильин
            09 января 2023, 13:32
            0
            а, да) Я просто копирнул из примеров) Вызывал сомнение этот параметр, но не трогал)
            Сейчас все норм и сохраняется, а сохраняется наверно потому что, я до этого под админом открывал сайт, т.е. не был авторизирован в контексте)
            Спасибо Артур! буду дальше тестировать :)
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      8