From 42827b19fb9c69381cf805f89ebb73a238a4f15c Mon Sep 17 00:00:00 2001 From: Bakhtovar Gulomov Date: Fri, 12 May 2023 00:28:22 +0700 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8F=20afl?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/ajaxformItlogin/events.md | 27 --- .../hooks/ajaxidentification.md | 152 -------------- docs/components/ajaxformItlogin/index.md | 195 ------------------ .../ajaxformItlogin/scripts-and-styles.md | 71 ------- docs/components/ajaxformItlogin/settings.md | 12 -- .../snippets/aflactivateuser.md | 16 -- .../snippets/ajaxformitlogin.md | 84 -------- .../snippets/custom-snippets.md | 18 -- .../validators/aflcheckpasslength.md | 12 -- .../validators/aflpasswordconfirm.md | 12 -- .../validators/aflrequiredif.md | 14 -- .../validators/afluserexists.md | 12 -- .../validators/aflusernotexists.md | 12 -- 13 files changed, 637 deletions(-) delete mode 100644 docs/components/ajaxformItlogin/events.md delete mode 100644 docs/components/ajaxformItlogin/hooks/ajaxidentification.md delete mode 100644 docs/components/ajaxformItlogin/index.md delete mode 100644 docs/components/ajaxformItlogin/scripts-and-styles.md delete mode 100644 docs/components/ajaxformItlogin/settings.md delete mode 100644 docs/components/ajaxformItlogin/snippets/aflactivateuser.md delete mode 100644 docs/components/ajaxformItlogin/snippets/ajaxformitlogin.md delete mode 100644 docs/components/ajaxformItlogin/snippets/custom-snippets.md delete mode 100644 docs/components/ajaxformItlogin/validators/aflcheckpasslength.md delete mode 100644 docs/components/ajaxformItlogin/validators/aflpasswordconfirm.md delete mode 100644 docs/components/ajaxformItlogin/validators/aflrequiredif.md delete mode 100644 docs/components/ajaxformItlogin/validators/afluserexists.md delete mode 100644 docs/components/ajaxformItlogin/validators/aflusernotexists.md diff --git a/docs/components/ajaxformItlogin/events.md b/docs/components/ajaxformItlogin/events.md deleted file mode 100644 index 116e9dbd..00000000 --- a/docs/components/ajaxformItlogin/events.md +++ /dev/null @@ -1,27 +0,0 @@ -# Системные события - -Компонент вызывает всего два системных события и оба они связаны с процессом регистрации пользователя. - -## OnUserActivate - -Срабатывает при успешной активации пользователя. - -### Параметры OnUserActivate - -1. `$user` - объект пользователя. -2. `$profile` - объект профиля пользователя. -3. `$data` - все данные пользователя в виде массива. - -## aiOnUserUpdate - -Срабатывает при обновлении данных пользователя через форму в личном кабинете. - -### Параметры aiOnUserUpdate - -1. `$user` - объект пользователя. -2. `$profile` - объект профиля пользователя. -3. `$data` - все данные переданные в масcиве $_POST. - -::: warning -Не пытайтесь что-то вернуть из ваших плагинов на эти события, так как результаты вызовов этих событий никак не обрабатываются, события инициализируются только для возможности сделать что-то с пользователем и его профилем ПОСЛЕ обновления и активации. -::: diff --git a/docs/components/ajaxformItlogin/hooks/ajaxidentification.md b/docs/components/ajaxformItlogin/hooks/ajaxidentification.md deleted file mode 100644 index 03e311dd..00000000 --- a/docs/components/ajaxformItlogin/hooks/ajaxidentification.md +++ /dev/null @@ -1,152 +0,0 @@ -# AjaxIdentification - -Хук использующийся для работы с пользователями: регистрации, авторизации, восстановления доступа, выхода из аккаунта, редактирования личных данных. - -[[toc]] - -## Примеры использования - -### Регистрация пользователя - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflRegisterForm', - 'snippet' => 'FormIt', - 'hooks' => 'AjaxIdentification,FormItSaveForm,FormItAutoResponder', - 'method' => 'register', - 'successMessage' => 'Вы успешно зарегистрированы. Подтвердите email для активации учётной записи.', - 'customValidators' => 'aflUserExists,aflCheckPassLength,aflPasswordConfirm', - 'formName' => 'Регистрация по email', - - 'fiarSubject' => 'Активация пользователя', - 'fiarFrom' => 'email@domain.ru', - 'fiarTpl' => 'aflActivateEmail', - - 'activation' => 1, - 'autoLogin' => 0, - 'redirectId' => '', - 'authenticateContexts' => '', - 'passwordField' => '', - 'usernameField' => 'email', - 'usergroupsField' => '', - 'moderate' => '', - 'redirectTimeout' => 3000, - 'usergroups' => 2, - 'activationResourceId' => 1, - 'extendedFieldPrefix' => 'extended_', - 'activationUrlTime' => 10800, - 'validate' => 'email:required:aflUserExists,password:aflCheckPassLength=^8^,password_confirm:aflPasswordConfirm=^password^,politics:minValue=^1^', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - 'spamProtection' => 1, - - 'politics.vTextMinValue' => 'Примите наши условия.', - 'phone.vTextRequired' => 'Укажите телефон.', - 'password.vTextRequired' => 'Придумайте пароль.', - 'password.vTextMinLength' => 'Пароль должен быть не менее 8 символов.', - 'fullname.vTextRequired' => 'Укажите ФИО.', - 'fullname.vTextMinLength' => 'Слишком короткое ФИО.', - 'username.vTextAflUserExists' => 'Этот телефон уже используется. Укажите другой номер.', - 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', -]} -``` - -### Авторизация пользователя - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflLoginForm', - 'snippet' => 'FormIt', - 'successMessage' => 'Вы успешно авторизованы и будете перенаправлены в личный кабинет.', - 'validate' => 'email:required,password:required', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - 'hooks' => 'AjaxIdentification', - - 'method' => 'login', - - 'redirectTo' => 5, - 'redirectTimeout' => 3000, - 'usernameField' => 'email', - 'spamProtection' => 1, - - 'email.vTextRequired' => 'Укажите email.', - 'password.vTextRequired' => 'Введите пароль.', - 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', -]} -``` - -### Редактирование данных пользователя - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflUpdateProfileForm', - 'snippet' => 'FormIt', - 'hooks' => 'AjaxIdentification', - 'method' => 'update', - 'successMessage' => 'Данные сохранены.', - 'clearFieldsOnSuccess' => 0, - - 'validate' => 'email:required:email', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - 'email.vTextRequired' => 'Укажите email.', -]} -``` - -Пароль удобнее всего обновлять отдельно от остальных жанных, чтобы он постоянно не перезаписывался. - -```fenom - {'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflUpdatePassForm', - 'snippet' => 'FormIt', - 'hooks' => 'AjaxIdentification', - 'method' => 'update', - 'successMessage' => 'Пароль изменён.', - - 'validate' => 'password:required:minLength=^8^:regexp=^/\A[\da-zA-Z!#\?&]*$/^,password_confirm:password_confirm=^password^', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - - 'password.vTextRequired' => 'Придумайте пароль.', - 'password.vTextRegexp' => 'Пароль может содержать только цифры, латинские буквы и символы !,#,?,&', - 'password.vTextMinLength' => 'Пароль должен быть не менее 8 символов.', -]} -``` - -### Выход из аккаунта пользователя - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflLogoutForm', - 'snippet' => 'FormIt', - 'hooks' => 'AjaxIdentification', - 'method' => 'logout', - 'successMessage' => 'До новых встреч!', - 'redirectTo' => 1, - 'validationErrorMessage' => '', -]} -``` - -### Восстановление пароля пользователя - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflForgotForm', - 'snippet' => 'FormIt', - 'hooks' => 'AjaxIdentification,FormItSaveForm,FormItAutoResponder', - 'method' => 'forgot', - 'successMessage' => 'Новый пароль отправлен на ваш email', - 'customValidators' => 'aflUserNotExists', - 'formName' => 'Забыли пароль', - 'spamProtection' => 1, - - 'usernameField' => 'email', - 'validate' => 'email:required:aflUserNotExists', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - - 'fiarSubject' => 'Восстановление пароля', - 'fiarFrom' => 'email@domain.ru', - 'fiarTpl' => 'aflResetPassEmail', - - 'email.vTextRequired' => 'Укажите email.', - 'email.vTextAflUserNotExists' => 'Пользователь не найден', - 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', -]} -``` diff --git a/docs/components/ajaxformItlogin/index.md b/docs/components/ajaxformItlogin/index.md deleted file mode 100644 index facf147f..00000000 --- a/docs/components/ajaxformItlogin/index.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -name: AjaxFormItLogin -description: Современная и функциональная замена AjaxForm -author: shevartv -modstore: https://modstore.pro/packages/users/ajaxformitlogin -repository: https://github.com/ShevArtV/ajaxformitlogin - -items: [ - { text: 'Системные настройки', link: 'settings' }, - { text: 'Скрипты и Стили', link: 'scripts-and-styles' }, - { text: 'Системные события', link: 'events' }, - { - text: 'Сниппеты', - items: [ - { text: 'AjaxFormitLogin', link: 'snippets/ajaxformitlogin' }, - { text: 'aflActivateUser', link: 'snippets/aflactivateuser' }, - { text: 'Кастомные сниппеты', link: 'snippets/custom-snippets' }, - ], - }, - { - text: 'Хуки', - items: [ - { text: 'AjaxIdentification', link: 'hooks/ajaxidentification' }, - ], - }, - { - text: 'Валидаторы', - items: [ - { text: 'aflCheckPassLength', link: 'validators/aflcheckpasslength' }, - { text: 'aflPasswordConfirm', link: 'validators/aflpasswordconfirm' }, - { text: 'aflRequiredIf', link: 'validators/aflrequiredif' }, - { text: 'aflUserExists', link: 'validators/afluserexists' }, - { text: 'aflUserNotExists', link: 'validators/aflusernotexists' }, - ], - }, -] ---- - -# AjaxFormItLogin - -AjaxFormItLogin это современный вариант всеми любимого компонента AjaxForm. -Обладает всеми возможностями прародителя и имеет ряд дополнительных функций. - -## Особенности - -1. Нет зависимости от jQuery. -2. Для показа уведомлений используется библиотека [IziToast](https://izitoast.marcelodolza.com/). -3. Принимает параметр `clearFieldsOnSuccess`, тем самым позволяя управлять очисткой полей при успешной оправке формы. -4. Принимает параметр `transmittedParams` (значение должно быть валидным JSON), который позволяете передавать в JS кастомные параметры отдельно при успешной, отдельно при - неудачной отправке. -5. Позволяет отображать процесс загрузки файлов на сервер, для этого нужно указать параметр `showUploadProgress` со значением 1. -6. Событие af_complete заменено на afl_complete. - - ```js - document.addEventListener('afl_complete', e => { - console.log(e.detail.response); // ответ сервера - console.log(e.detail.form); // текущая форма - }); - ``` - -7. Изменен формат ответа сервера. `e.detail.response.data` теперь содержит параметр `errors` - объект с ошибками валидации, если они есть и форма не отправлена, а также пользовательские параметры указанные в вызове конкретной формы в параметре `transmittedParams`. В этом параметре следует передавать либо JSON, либо массив с обоими или одним из ключей `success` и/или `error`. В каждый из ключей нужно передать строку с именами параметров вызова сниппета AjaxFormItLogin разделенными запятыми, которые должны быть проброшены в JS. В случае же успешной отправки формы в ответе будут содержаться параметры `e.detail.response.data.redirectTimeout` и `e.detail.response.data.redirectUrl`. -8. Работают редиректы. Для этого необходимо указать в вызове сниппета параметр redirectTo (абсолютная ссылка или ID ресурса) и, при необходимости изменить стандартное значение в 2с, redirectTimeout (в миллисекундах) для задания задержки перед переходом на другую страницу. -9. Добавлен метод помогающий валидировать чекбоксы. Для его работы необходимо проверяемому чекбоксу добавить атрибут data-afl-required, где значением будет ключ указанный в параметре validate, а также нужно добавить скрытое поле с этим именем в форму. Самому чекбоксу имя можно не указывать. -10. Нет поддержки капчи от гугла, но встроена собственная защита от спама по методу [Алексея Смирнова](https://modx.pro/users/alexij). Для активации нужно в вызове указать параметр `spamProtection` со значением 1. По умолчанию включена. -11. Есть возможность регистрации, авторизации, сброса пароля и редактирования личных данных, при условии установки компонента FormIt. Подробнее о поддерживаемых параметрах можно прочитать [в этой заметке](https://modx.pro/solutions/22936). -12. При обновлении данных пользователя добавлено системное событие aiOnUserUpdate, которое получает следующие данные $user - объект обновленного пользователя, $profile - его профиль, $data - переданные данные. -13. Есть автоматическая отправка целей в Яндекс.Метрику. Чтобы это работало нужно установить системную настройку `afl_metrics` в значение `ДА`. Указать в системной настройке `afl_counter_id` идентификатор используемого на сайте счётчика метрики. Вставить код самого счётчика на сайт. Добавить в вызов сниппета параметр `ym_goal`, в котором нужно указать имя JS цели из Яндекс.Метрики, а так же параметр `transmittedParams` со значением `['success' => 'ym_goal']`. -14. Возможность использовать для обработки форм своих сниппетов никуда не делать. Изменился только объект, к которому надо обращаться и форматы ответа. Например сниппет `MySnippet`, который проверяет заполнено ли поле name, может выглядеть так: - -```php -error('Ошибки в форме', array( - 'errors' => array( - 'name' => 'Вы не заполнили имя' - ) - )); -} -else { - return $AjaxFormItLogin->success('Форма прошла проверку', array('name' => 'Имя заполнено корректно.')); -} -``` - -Вызов будет таким - -```fenom -{'!AjaxFormItLogin' | snippet: [ - 'snippet' => 'MySnippet', - 'tpl' => 'myTpl', -]} -``` - -## Быстрый старт - -1. Установите компонент AjaxFormItLogin из репозитория . При этом если у Вас не установлен компонент FormIt, он будет автоматически скачан и установлен. -2. Скопируйте всё содержимое между html тегами `
`, включая и эти теги, в чанк. Запомните название этого чанка (для примера будем использовать) оно нам понадобится. -3. Замените скопированную форму (только не в созданном чанке, а на исходной странице) на следующий один из следующих вызовов: - - :::code-group - - ```modx - [[!AjaxFormitLogin? - &form=`aflExampleForm` - &emailTo=`name@domain.ru` - &emailFrom=`noreply@domain.ru` - &emailSubject=`Тема письма` - &emailTpl=`aflExampleEmail` - &validate=`email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^` - ]] - ``` - - ```fenom - {'!AjaxFormItLogin' | snippet: [ - 'form' => 'aflExampleForm', 'hooks' => 'FormItSaveForm,email', - 'emailTo' => 'почта@получателя', - 'emailFrom' => 'почта_от_которой@придет_письмо', - 'emailSubject' => 'Тема письма', - 'emailTpl' => 'aflExampleEmail', - 'validate' => 'email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^', - ]} - ``` - - ::: - - ::: tip - Более подробно о параметрах отправки писем, хуках, валидации читайте в документации компонента [FormIt](https://docs.modx.com/current/ru/extras/formit) так как AjaxFormItLogin поддерживает все параметры этого компонента. - ::: - - Приведу пример того, как должна выглядеть форма: - - ```html -
-
- - - -
-
- - - -
-
- - - -
-
- - - - -
- - -
- ``` - - ::: danger - Для вывода ошибок валидации нет необходимости, добавлять в форму блоки с классами `error_имяполя`. Если этого не сделать, то сообщение с ошибкой будет выведено как всплывающее уведомление с текстом формата `имя_поля: текст сообщения`. Если вместо имени поля вы хотите показывать другой текст, укажите в вызове сниппета AjaxFormitLogin параметр `aliases` и параметр `transmittedParams`. `aliases` должен содержать строку вида `имяполя==Выводимый текст, имя_дргого_поля==Какой-то текст`. - Параметр `transmittedParams` должен содержать следующее значение `['error' => 'aliases']`. - ::: - - Так же обратите внимание на вот этот блок: - - ```html - - - ``` - - Тут нам нужно, чтобы пользователь обязательно прожал чекбокс, для этого мы проверяем в параметре вызова `validate`, чтобы значение в поле `name="politics"` было больше 0. поля. - -4. Создайте чанк письма (aflExampleEmail или любое другое имя). Можно использовать этот - - :::code-group - - ```modx - [[+name:isnot=``:then=`

Имя: [[+name]]

`]] - [[+phone:isnot=``:then=`

Телефон: [[+phone]]

`]] - [[+email:isnot=``:then=`

Email: [[+email]]

`]] - ``` - - ```fenom - {$name ? '

Имя: ' ~ $name ~ '

' : ''} - {$phone ? '

Телефон: ' ~ $phone ~ '

' : ''} - {$email ? '

Email: ' ~ $email ~ '

' : ''} - ``` - - ::: - -::: danger -В примере я использую чанки, хранящиеся в базе данных, однако компонент позволяет использовать и файловые чанки. Более того я рекомендую использовать именно их и парсер из компонента pdoTools. Теперь ваша форма будет сохранять данные в админке и отправлять данные на вашу почту. -::: - -Примеры всех вариантов вызовов `AjaxFormitLogin` и чанков можно найти в папках `core/components/ajaxformitlogin/elements/templates/` и `public_html/core/components/ajaxformitlogin/elements/chunks/`. diff --git a/docs/components/ajaxformItlogin/scripts-and-styles.md b/docs/components/ajaxformItlogin/scripts-and-styles.md deleted file mode 100644 index b369547a..00000000 --- a/docs/components/ajaxformItlogin/scripts-and-styles.md +++ /dev/null @@ -1,71 +0,0 @@ -# Скрипты и cтили - -::: info -**Стили** - компонент не использует своих стилей, кроме тех, что идут в комплекте с библиотекой показа уведомлений IziToast. -::: - -::: info -**Скрипты JavaScript** - компонент использует JS написанный в формате модуля по стандарту ES6. Это означает, что скрипты подключаются вне основного потока и оказывают минимальное влияние на общую скорость загрузки всей страницы. А формат модуля даёт вам широкие возможности по кастомизации скриптов. Далее рассмотрим возможные варианты работы с JS данного компонента. -::: - -## Обработка результатов отправки формы - -Для этого существует событие `afl_complete` - -```js -document.addEventListener('afl_complete', e => { - console.log(e.detail.response); // ответ сервера - console.log(e.detail.form); // текущая форма -}); -``` - -`e.detail.response` содержит параметры `success` (true или false); `message` - сообщение об ошибке или успехе из параметров вызова сниппета `successMessage` или `validationErrorMessage`, если иное не задано в хуках; `data` - массив данных с сервера, при этом в `data.errors` - список ошибок валидации, `data.redirectUrl` - ссылка на страницу переадресации, `data.redirectTimeout` - задержка перед переадресацией; так же в `e.detail.response.data` будут те параметры, которые вы передадите в вызове через `transmittedParams`. -Обнулив значение в `data.redirectUrl` вы можете отменить переадресацию. -Обнулив значение в `e.detail.response.message` вы можете отменить показ стандартного уведомления и показать своё. - -## Обработка результатов инициализации всех форм - -После инициализации всех форм на странице вызывается событие `afl_init` в котором нет параметров. Поймать его можно так - -```js -document.addEventListener('afl_init', e => { - console.log(window.aflForms); // список всех инициализированных форм -}); -``` - -### Обработка загрузки файлов - -По умолчанию обрабатывается один файл. Обработка производится тремя методами `onUploadProgress`, `onUploadFinished`, `onUploadError`. Каждый из них принимает на вход объект события и форму. Вы можете переопределить все или некоторые из этих методов, расширив класс `AjaxFormitLogin` и создав новый файл подключения, вместо стандартного `assets/components/ajaxformitlogin/js/default.js`. - -### Использование библиотеки IziToast - -Для этого необязательно использовать сниппеты входящие в состав пакета, как того требует AjaxForm. -Предположим, что ваш JS лежит в assets/js/add_scripts.js. Тогда внутри этого файла нужно вставить следующий код - -```js -import AflIziToast from './../components/ajaxformitlogin/js/modules/aflizitoast.class.js'; - -const Notify = new AflIziToast({ - "jsPath": "assets/components/ajaxformitlogin/js/lib/izitoast/iziToast.min.js", - "cssPath": "assets/components/ajaxformitlogin/css/lib/izitoast/iziToast.min.css", - "handlerClassName": "iziToast", - "handlerOptions": { - "timeout": 2000, - "position": "topCenter" - } -}); - -// далее вам будут доступны три метода показа уведомлений -Notify.success('Сообщение об успехе!'); -Notify.error('Сообщение о неудаче.'); -Notify.info('Информационное сообщение.'); -``` - -При подключении своих скриптов укажите тегу script атрибут `type="module"`. - -## Подключение своей библиотеки уведомлений - -1. Создайте свой JS класс расширяющий стандартный класс `AflNotify`, пример расширения можно посмотреть в файле - `assets/components/ajaxformitlogin/js/modules/aflizitoast.class.js`. -2. Затем нужно изменить системные настройки `ajaxformitlogin_notify_classname` - указать имя созданного класса, `ajaxformitlogin_notify_classname` - указать путь к файлу класса относительно файла основного класса компонента `assets/components/ajaxformitlogin/js/modules/ajaxformitlogin.class.js`. -3. Добавьте в файл `assets/components/ajaxformitlogin/js/message_settings.json` настройки своего класса уведомлений. Если настроек нет - укажите пустой объект. diff --git a/docs/components/ajaxformItlogin/settings.md b/docs/components/ajaxformItlogin/settings.md deleted file mode 100644 index c11f11eb..00000000 --- a/docs/components/ajaxformItlogin/settings.md +++ /dev/null @@ -1,12 +0,0 @@ -# Системные настройки - -## Настройки - -| Параметр | По умолчанию | Описание | -| ------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **ajaxformitlogin_counter_id** | | ID счётчика метрики. Укажите это значение, если хотите чтобы работала отправка целей в Яндекс.Метрику | -| **ajaxformitlogin_frontend_js** | `[[+assetsUrl]]js/default.js` | Путь к основным JS скриптам. Понимает плейсхолдер `[[+assetsUrl]]` | -| **ajaxformitlogin_metrics** | `Нет` | Определяет будут ли отправляться цели в Яндекс.Метрику. При значении `Да` и пустом ID счётчика работать не будет. | -| **ajaxformitlogin_notify_classname** | `AflIziToast` | Имя класса управления библиотекой уведомлений. | -| **ajaxformitlogin_notify_classpath** | `./aflizitoast.class.js` | Путь к классу управления библиотекой уведомлений. Указывается относительно файла с основным JS классом, по умолчанию лежит `assets/components/ajaxformitlogin/js/modules/ajaxformitlogin.class.js` | -| **ajaxformitlogin_notify_js** | `assets/components/ajaxformitlogin/js/message_settings.json` | Путь к настройкам библиотеки уведомлений | diff --git a/docs/components/ajaxformItlogin/snippets/aflactivateuser.md b/docs/components/ajaxformItlogin/snippets/aflactivateuser.md deleted file mode 100644 index 3379648d..00000000 --- a/docs/components/ajaxformItlogin/snippets/aflactivateuser.md +++ /dev/null @@ -1,16 +0,0 @@ -# aflActivateUser - -Сниппет активации аккаунта пользователя. Если ссылка активации просрочена - профиль будет удалён. - -Этот сниппет не принимает никаких параметров. - -## Пример использования - -```fenom -{set $user = '!aflActivateUser' | snippet} -{if $user} -

Уважаемый, {$user.username}, Ваш аккаунт успешно активирован!

-{/if} -``` - -В случае успешной активации будет возвращён массив со всеми данными пользователя, если активация будет неудачной - вернётся false. diff --git a/docs/components/ajaxformItlogin/snippets/ajaxformitlogin.md b/docs/components/ajaxformItlogin/snippets/ajaxformitlogin.md deleted file mode 100644 index 68bc0ad9..00000000 --- a/docs/components/ajaxformItlogin/snippets/ajaxformitlogin.md +++ /dev/null @@ -1,84 +0,0 @@ -# AjaxFormitLogin - -Сниппет для вывода формы. - -## Параметры - -| Параметр | По умолчанию | Описание | -| ------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **form** | `aflExampleForm` | Чанк формы | -| **snippet** | `FormIt` | Сниппет, который будет обрабатывать форму | -| **hooks** | `FormItSaveForm,email` | Хуки, которые будут использованы для обработки формы. | -| **emailTo** | | Email получателя | -| **emailFrom** | | Email отправителя. При использовании SMTP нужно указывать email пользователя SMTP. | -| **emailSubject** | | Тема письма. | -| **emailTpl** | `aflExampleEmail` | Чанк письма. | -| **successMessage** | `Форма успешно отправлена! Менеджер свяжется с Вами в течение 5 минут.` | Уведомление об успешной отправке формы. | -| **clearFieldsOnSuccess** | `1` | Указывает JS очищать ли поля после отправки формы. | -| **transmittedParams** | `["success" => "", "error" => "aliases"]` | Список параметров для передачи в JS. | -| **aliases** | `email==Email` | Список псевдонимов полей для показа уведомлений об ошибках в них. | -| **validate** | `email:required:email` | Список полей и их валидаторов. | -| **showUploadProgress** | `1` | Указывает JS показывать ли процесс загрузки файлов. | -| **spamProtection** | `1` | Активирует встроенную защиту от спама. | -| **redirectTimeout** | `2000` | Задержка перед переадресацией в миллисекундах. | -| **redirectTo** | | ID страницы переадресации или ссылка на страницу. | -| **autoLogin** | | Авторизовывать ли пользователя автоматически после регистрации учётной записи. | -| **passwordField** | `password` | Имя поля содержащего пароль. | -| **usernameField** | `username` | Имя поля содержащего имя пользователя. | -| **activation** | | Нужна ли активация, если да - на email пользователя будет выслано письмо с ссылкой на страницу активации. | -| **moderate** | | Нужна ли модерация. Если нужна - профиль пользователя будет заблокирован пока модератор его не разблокирует. | -| **activationResourceId** | | ID ресурса, на который будет отправлен пользователь для активации аккаунта. | -| **usergroupsField** | | Поле со списком групп разделенных запятыми, в которые нужно добавить пользователя при регистрации. Можно указать так же уровень доступа (Member или SuperUser) и rank: group_id:pemission_id:rank, например `2:1:0`. Можно указать только два первых параметра или только ID группы. | -| **authenticateContexts** | | Поле со списком контекстов разделенных запятыми, в которых нужно авторизовать пользователя. | -| **rememberme** | | Запоминать ли пользователя. | -| **activationUrlTime** | `10800` | Время действия ссылки на активацию в секундах. | -| **method** | | Метод класса AjaxIdentification (register, login, logout, forgot, update). | - -::: tip -Bы так же можете использовать любые [параметры спиппета FormIt](https://docs.modx.com/current/ru/extras/formit). -::: - -Как видно из таблицы по умолчанию сниппет настроен на отправку форм и сохранение их данных в админке. - -## Пример использования - -Минимальный вызов должен выглядеть так: - -```fenom -{'!AjaxFormitLogin' | snippet: [ - 'emailTo' => 'name@domain.ru', - 'emailFrom' => 'noreply@domain.ru', - 'emailSubject' => 'Тема письма', -]} -``` - -и обязательно должен вызываться некешированным. В чанк формы вы можете передавать какие угодно данные, указывая их как параметры сниппета. Так же любые данные можно -передавать в JS через параметр `transmittedParams`. -А оптимальный вызов такой: - -```fenom -{'!AjaxFormitLogin' | snippet : [ - 'form' => 'aflExampleForm', - 'snippet' => 'FormIt', - 'hooks' => 'FormItSaveForm,email', - 'emailTo' => 'shev.art.v@yandex.ru', - 'emailFrom' => 'noreply@art-sites.ru', - 'emailSubject' => 'Тестовая форма', - 'emailTpl' => 'aflExampleEmail', - 'successMessage' => 'Форма успешно отправлена! Менеджер свяжется с Вами в течение 5 минут.', - 'clearFieldsOnSuccess' => 1, - 'transmittedParams' => ["success" => 'ym_goal', "error" => 'aliases'], - 'aliases' => 'email==Email,phone==Телефон,name==Имя,politics==Правила сервиса', - 'showUploadProgress' => 1, - 'spamProtection' => 1, - 'ym_goal' => 'TEST_GOAL', - - 'validate' => 'email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^', - 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', - 'email.vTextRequired' => 'Укажите email.', - 'fullname.vTextRequired' => 'Укажите ФИО.', - 'fullname.vTextMinLength' => 'Слишком короткое ФИО.', - 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', - 'politics.vTextMinValue' => 'Примите наши условия.', -]} -``` diff --git a/docs/components/ajaxformItlogin/snippets/custom-snippets.md b/docs/components/ajaxformItlogin/snippets/custom-snippets.md deleted file mode 100644 index b7358116..00000000 --- a/docs/components/ajaxformItlogin/snippets/custom-snippets.md +++ /dev/null @@ -1,18 +0,0 @@ -# Кастомные сниппеты - -## Написание своих сниппетов для AjaxFormitLogin - -Как и в случае с `AjaxForm` вам доступна возможность использовать для обработки форм, любые сниппеты, в том числе и написанные вами. В кастомных сниппетах доступен -объект `AjaxFormitLogin` с помощью которого можно возвращать сообщения об успехе или неудаче. Например так: - -```php - 18) { - return $AjaxFormitLogin->success('Взрослый', array('age' => (int)$_POST['age'])); -} else { - return $AjaxFormitLogin->error('Малыш', array('errors' => ['age' => 'Ваш возраст слишком мал.'])); -} -``` - -Вы можете возвращать любую информацию из своего сниппета, но чтобы работал штатный механизм отображения ошибок, в ответе обязательно должен присутствовать массив `errors`, -состоящий из пар имя поля - текст сообщения об ошибке. diff --git a/docs/components/ajaxformItlogin/validators/aflcheckpasslength.md b/docs/components/ajaxformItlogin/validators/aflcheckpasslength.md deleted file mode 100644 index 2f378f09..00000000 --- a/docs/components/ajaxformItlogin/validators/aflcheckpasslength.md +++ /dev/null @@ -1,12 +0,0 @@ -# aflCheckPassLength - -Сниппет для проверки длины пароля. Используйте именно его, а не стандартный валидатор `minLength`, так как в компоненте доступна автоматическая генерация пароля, если пользователь его не укажет. При использовании `minLength` и пустом поле с паролем будет возвращаться ошибка валидации, в то время как `aflCheckPassLength` проверяет длину только в случае, когда пароль задан. При этом в качестве параметра можно передать минимальную длину, если этого не сделать будет взято значение системной настройки `password_min_length` или `8`. - -## Пример использования - -```fenom -... -'customValidators' => 'aflCheckPassLength', -'validate' => 'password:aflCheckPassLength=^10^', -... -``` diff --git a/docs/components/ajaxformItlogin/validators/aflpasswordconfirm.md b/docs/components/ajaxformItlogin/validators/aflpasswordconfirm.md deleted file mode 100644 index 50daeb4d..00000000 --- a/docs/components/ajaxformItlogin/validators/aflpasswordconfirm.md +++ /dev/null @@ -1,12 +0,0 @@ -# aflPasswordConfirm - -Сниппет для проверки совпадения паролей. Используйте именно его, а не стандартный валидатор `password_confirm`, так как в компоненте доступна автоматическая генерация пароля, если пользователь его не укажет. При использовании `password_confirm` и пустом поле с паролем будет возвращаться ошибка валидации, в то время как `aflPasswordConfirm` проверяет длину только в случае, когда пароль задан. При этом в качестве параметра **НУЖНО** передать имя поля с паролем. - -## Пример использования - -```fenom -... -'customValidators' => 'aflPasswordConfirm', -'validate' => 'password_confirm:aflPasswordConfirm=^password^', -... -``` diff --git a/docs/components/ajaxformItlogin/validators/aflrequiredif.md b/docs/components/ajaxformItlogin/validators/aflrequiredif.md deleted file mode 100644 index 95ee152b..00000000 --- a/docs/components/ajaxformItlogin/validators/aflrequiredif.md +++ /dev/null @@ -1,14 +0,0 @@ -# aflRequiredIf - -Позволяет делать проверяемое поле обязательным в зависимости от значения в другом поле. - -## Пример использования - -```fenom -... -'customValidators' => 'aflRequiredIf', -'validate' => 'ogrn:aflRequiredIf=^legal_form|2^', -... -``` - -В примере поле с именем `ogrn` будет обязательным, если поле именем `legal_form` имеет значение `2`. diff --git a/docs/components/ajaxformItlogin/validators/afluserexists.md b/docs/components/ajaxformItlogin/validators/afluserexists.md deleted file mode 100644 index 4a86065c..00000000 --- a/docs/components/ajaxformItlogin/validators/afluserexists.md +++ /dev/null @@ -1,12 +0,0 @@ -# aflUserExists - -Сниппет проверяет существование пользователя с таким username на сайте. Возвращает ошибку если пользователь **НАЙДЕН**. Используется при регистрации пользователя на сайте. - -## Пример использования - -```fenom -... -'customValidators' => 'aflUserExists', -'validate' => 'email:required:aflUserExists', -... -``` diff --git a/docs/components/ajaxformItlogin/validators/aflusernotexists.md b/docs/components/ajaxformItlogin/validators/aflusernotexists.md deleted file mode 100644 index 78535d3f..00000000 --- a/docs/components/ajaxformItlogin/validators/aflusernotexists.md +++ /dev/null @@ -1,12 +0,0 @@ -# aflUserNotExists - -Сниппет проверяет существование пользователя с таким username на сайте. Возвращает ошибку, если пользователь **НЕ НАЙДЕН**. Используется при восстановлении доступа на сайт. - -## Пример использования - -```fenom -... -'customValidators' => 'aflUserNotExists', -'validate' => 'email:required:aflUserNotExists', -... -``` From d7f9667da8f44ac7edc809a71079c17f36e1660e Mon Sep 17 00:00:00 2001 From: Bakhtovar Gulomov Date: Fri, 12 May 2023 00:29:52 +0700 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8E=20afl=20=D0=BF=D0=BE=20=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BE=D0=BC=D1=83=20=D0=BF=D1=83=D1=82=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/ajaxformitlogin/events.md | 27 +++ .../hooks/ajaxidentification.md | 152 ++++++++++++++ docs/components/ajaxformitlogin/index.md | 195 ++++++++++++++++++ .../ajaxformitlogin/scripts-and-styles.md | 71 +++++++ docs/components/ajaxformitlogin/settings.md | 12 ++ .../snippets/aflactivateuser.md | 16 ++ .../snippets/ajaxformitlogin.md | 84 ++++++++ .../snippets/custom-snippets.md | 18 ++ .../validators/aflcheckpasslength.md | 12 ++ .../validators/aflpasswordconfirm.md | 12 ++ .../validators/aflrequiredif.md | 14 ++ .../validators/afluserexists.md | 12 ++ .../validators/aflusernotexists.md | 12 ++ 13 files changed, 637 insertions(+) create mode 100644 docs/components/ajaxformitlogin/events.md create mode 100644 docs/components/ajaxformitlogin/hooks/ajaxidentification.md create mode 100644 docs/components/ajaxformitlogin/index.md create mode 100644 docs/components/ajaxformitlogin/scripts-and-styles.md create mode 100644 docs/components/ajaxformitlogin/settings.md create mode 100644 docs/components/ajaxformitlogin/snippets/aflactivateuser.md create mode 100644 docs/components/ajaxformitlogin/snippets/ajaxformitlogin.md create mode 100644 docs/components/ajaxformitlogin/snippets/custom-snippets.md create mode 100644 docs/components/ajaxformitlogin/validators/aflcheckpasslength.md create mode 100644 docs/components/ajaxformitlogin/validators/aflpasswordconfirm.md create mode 100644 docs/components/ajaxformitlogin/validators/aflrequiredif.md create mode 100644 docs/components/ajaxformitlogin/validators/afluserexists.md create mode 100644 docs/components/ajaxformitlogin/validators/aflusernotexists.md diff --git a/docs/components/ajaxformitlogin/events.md b/docs/components/ajaxformitlogin/events.md new file mode 100644 index 00000000..116e9dbd --- /dev/null +++ b/docs/components/ajaxformitlogin/events.md @@ -0,0 +1,27 @@ +# Системные события + +Компонент вызывает всего два системных события и оба они связаны с процессом регистрации пользователя. + +## OnUserActivate + +Срабатывает при успешной активации пользователя. + +### Параметры OnUserActivate + +1. `$user` - объект пользователя. +2. `$profile` - объект профиля пользователя. +3. `$data` - все данные пользователя в виде массива. + +## aiOnUserUpdate + +Срабатывает при обновлении данных пользователя через форму в личном кабинете. + +### Параметры aiOnUserUpdate + +1. `$user` - объект пользователя. +2. `$profile` - объект профиля пользователя. +3. `$data` - все данные переданные в масcиве $_POST. + +::: warning +Не пытайтесь что-то вернуть из ваших плагинов на эти события, так как результаты вызовов этих событий никак не обрабатываются, события инициализируются только для возможности сделать что-то с пользователем и его профилем ПОСЛЕ обновления и активации. +::: diff --git a/docs/components/ajaxformitlogin/hooks/ajaxidentification.md b/docs/components/ajaxformitlogin/hooks/ajaxidentification.md new file mode 100644 index 00000000..03e311dd --- /dev/null +++ b/docs/components/ajaxformitlogin/hooks/ajaxidentification.md @@ -0,0 +1,152 @@ +# AjaxIdentification + +Хук использующийся для работы с пользователями: регистрации, авторизации, восстановления доступа, выхода из аккаунта, редактирования личных данных. + +[[toc]] + +## Примеры использования + +### Регистрация пользователя + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflRegisterForm', + 'snippet' => 'FormIt', + 'hooks' => 'AjaxIdentification,FormItSaveForm,FormItAutoResponder', + 'method' => 'register', + 'successMessage' => 'Вы успешно зарегистрированы. Подтвердите email для активации учётной записи.', + 'customValidators' => 'aflUserExists,aflCheckPassLength,aflPasswordConfirm', + 'formName' => 'Регистрация по email', + + 'fiarSubject' => 'Активация пользователя', + 'fiarFrom' => 'email@domain.ru', + 'fiarTpl' => 'aflActivateEmail', + + 'activation' => 1, + 'autoLogin' => 0, + 'redirectId' => '', + 'authenticateContexts' => '', + 'passwordField' => '', + 'usernameField' => 'email', + 'usergroupsField' => '', + 'moderate' => '', + 'redirectTimeout' => 3000, + 'usergroups' => 2, + 'activationResourceId' => 1, + 'extendedFieldPrefix' => 'extended_', + 'activationUrlTime' => 10800, + 'validate' => 'email:required:aflUserExists,password:aflCheckPassLength=^8^,password_confirm:aflPasswordConfirm=^password^,politics:minValue=^1^', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + 'spamProtection' => 1, + + 'politics.vTextMinValue' => 'Примите наши условия.', + 'phone.vTextRequired' => 'Укажите телефон.', + 'password.vTextRequired' => 'Придумайте пароль.', + 'password.vTextMinLength' => 'Пароль должен быть не менее 8 символов.', + 'fullname.vTextRequired' => 'Укажите ФИО.', + 'fullname.vTextMinLength' => 'Слишком короткое ФИО.', + 'username.vTextAflUserExists' => 'Этот телефон уже используется. Укажите другой номер.', + 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', +]} +``` + +### Авторизация пользователя + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflLoginForm', + 'snippet' => 'FormIt', + 'successMessage' => 'Вы успешно авторизованы и будете перенаправлены в личный кабинет.', + 'validate' => 'email:required,password:required', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + 'hooks' => 'AjaxIdentification', + + 'method' => 'login', + + 'redirectTo' => 5, + 'redirectTimeout' => 3000, + 'usernameField' => 'email', + 'spamProtection' => 1, + + 'email.vTextRequired' => 'Укажите email.', + 'password.vTextRequired' => 'Введите пароль.', + 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', +]} +``` + +### Редактирование данных пользователя + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflUpdateProfileForm', + 'snippet' => 'FormIt', + 'hooks' => 'AjaxIdentification', + 'method' => 'update', + 'successMessage' => 'Данные сохранены.', + 'clearFieldsOnSuccess' => 0, + + 'validate' => 'email:required:email', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + 'email.vTextRequired' => 'Укажите email.', +]} +``` + +Пароль удобнее всего обновлять отдельно от остальных жанных, чтобы он постоянно не перезаписывался. + +```fenom + {'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflUpdatePassForm', + 'snippet' => 'FormIt', + 'hooks' => 'AjaxIdentification', + 'method' => 'update', + 'successMessage' => 'Пароль изменён.', + + 'validate' => 'password:required:minLength=^8^:regexp=^/\A[\da-zA-Z!#\?&]*$/^,password_confirm:password_confirm=^password^', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + + 'password.vTextRequired' => 'Придумайте пароль.', + 'password.vTextRegexp' => 'Пароль может содержать только цифры, латинские буквы и символы !,#,?,&', + 'password.vTextMinLength' => 'Пароль должен быть не менее 8 символов.', +]} +``` + +### Выход из аккаунта пользователя + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflLogoutForm', + 'snippet' => 'FormIt', + 'hooks' => 'AjaxIdentification', + 'method' => 'logout', + 'successMessage' => 'До новых встреч!', + 'redirectTo' => 1, + 'validationErrorMessage' => '', +]} +``` + +### Восстановление пароля пользователя + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflForgotForm', + 'snippet' => 'FormIt', + 'hooks' => 'AjaxIdentification,FormItSaveForm,FormItAutoResponder', + 'method' => 'forgot', + 'successMessage' => 'Новый пароль отправлен на ваш email', + 'customValidators' => 'aflUserNotExists', + 'formName' => 'Забыли пароль', + 'spamProtection' => 1, + + 'usernameField' => 'email', + 'validate' => 'email:required:aflUserNotExists', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + + 'fiarSubject' => 'Восстановление пароля', + 'fiarFrom' => 'email@domain.ru', + 'fiarTpl' => 'aflResetPassEmail', + + 'email.vTextRequired' => 'Укажите email.', + 'email.vTextAflUserNotExists' => 'Пользователь не найден', + 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', +]} +``` diff --git a/docs/components/ajaxformitlogin/index.md b/docs/components/ajaxformitlogin/index.md new file mode 100644 index 00000000..facf147f --- /dev/null +++ b/docs/components/ajaxformitlogin/index.md @@ -0,0 +1,195 @@ +--- +name: AjaxFormItLogin +description: Современная и функциональная замена AjaxForm +author: shevartv +modstore: https://modstore.pro/packages/users/ajaxformitlogin +repository: https://github.com/ShevArtV/ajaxformitlogin + +items: [ + { text: 'Системные настройки', link: 'settings' }, + { text: 'Скрипты и Стили', link: 'scripts-and-styles' }, + { text: 'Системные события', link: 'events' }, + { + text: 'Сниппеты', + items: [ + { text: 'AjaxFormitLogin', link: 'snippets/ajaxformitlogin' }, + { text: 'aflActivateUser', link: 'snippets/aflactivateuser' }, + { text: 'Кастомные сниппеты', link: 'snippets/custom-snippets' }, + ], + }, + { + text: 'Хуки', + items: [ + { text: 'AjaxIdentification', link: 'hooks/ajaxidentification' }, + ], + }, + { + text: 'Валидаторы', + items: [ + { text: 'aflCheckPassLength', link: 'validators/aflcheckpasslength' }, + { text: 'aflPasswordConfirm', link: 'validators/aflpasswordconfirm' }, + { text: 'aflRequiredIf', link: 'validators/aflrequiredif' }, + { text: 'aflUserExists', link: 'validators/afluserexists' }, + { text: 'aflUserNotExists', link: 'validators/aflusernotexists' }, + ], + }, +] +--- + +# AjaxFormItLogin + +AjaxFormItLogin это современный вариант всеми любимого компонента AjaxForm. +Обладает всеми возможностями прародителя и имеет ряд дополнительных функций. + +## Особенности + +1. Нет зависимости от jQuery. +2. Для показа уведомлений используется библиотека [IziToast](https://izitoast.marcelodolza.com/). +3. Принимает параметр `clearFieldsOnSuccess`, тем самым позволяя управлять очисткой полей при успешной оправке формы. +4. Принимает параметр `transmittedParams` (значение должно быть валидным JSON), который позволяете передавать в JS кастомные параметры отдельно при успешной, отдельно при + неудачной отправке. +5. Позволяет отображать процесс загрузки файлов на сервер, для этого нужно указать параметр `showUploadProgress` со значением 1. +6. Событие af_complete заменено на afl_complete. + + ```js + document.addEventListener('afl_complete', e => { + console.log(e.detail.response); // ответ сервера + console.log(e.detail.form); // текущая форма + }); + ``` + +7. Изменен формат ответа сервера. `e.detail.response.data` теперь содержит параметр `errors` - объект с ошибками валидации, если они есть и форма не отправлена, а также пользовательские параметры указанные в вызове конкретной формы в параметре `transmittedParams`. В этом параметре следует передавать либо JSON, либо массив с обоими или одним из ключей `success` и/или `error`. В каждый из ключей нужно передать строку с именами параметров вызова сниппета AjaxFormItLogin разделенными запятыми, которые должны быть проброшены в JS. В случае же успешной отправки формы в ответе будут содержаться параметры `e.detail.response.data.redirectTimeout` и `e.detail.response.data.redirectUrl`. +8. Работают редиректы. Для этого необходимо указать в вызове сниппета параметр redirectTo (абсолютная ссылка или ID ресурса) и, при необходимости изменить стандартное значение в 2с, redirectTimeout (в миллисекундах) для задания задержки перед переходом на другую страницу. +9. Добавлен метод помогающий валидировать чекбоксы. Для его работы необходимо проверяемому чекбоксу добавить атрибут data-afl-required, где значением будет ключ указанный в параметре validate, а также нужно добавить скрытое поле с этим именем в форму. Самому чекбоксу имя можно не указывать. +10. Нет поддержки капчи от гугла, но встроена собственная защита от спама по методу [Алексея Смирнова](https://modx.pro/users/alexij). Для активации нужно в вызове указать параметр `spamProtection` со значением 1. По умолчанию включена. +11. Есть возможность регистрации, авторизации, сброса пароля и редактирования личных данных, при условии установки компонента FormIt. Подробнее о поддерживаемых параметрах можно прочитать [в этой заметке](https://modx.pro/solutions/22936). +12. При обновлении данных пользователя добавлено системное событие aiOnUserUpdate, которое получает следующие данные $user - объект обновленного пользователя, $profile - его профиль, $data - переданные данные. +13. Есть автоматическая отправка целей в Яндекс.Метрику. Чтобы это работало нужно установить системную настройку `afl_metrics` в значение `ДА`. Указать в системной настройке `afl_counter_id` идентификатор используемого на сайте счётчика метрики. Вставить код самого счётчика на сайт. Добавить в вызов сниппета параметр `ym_goal`, в котором нужно указать имя JS цели из Яндекс.Метрики, а так же параметр `transmittedParams` со значением `['success' => 'ym_goal']`. +14. Возможность использовать для обработки форм своих сниппетов никуда не делать. Изменился только объект, к которому надо обращаться и форматы ответа. Например сниппет `MySnippet`, который проверяет заполнено ли поле name, может выглядеть так: + +```php +error('Ошибки в форме', array( + 'errors' => array( + 'name' => 'Вы не заполнили имя' + ) + )); +} +else { + return $AjaxFormItLogin->success('Форма прошла проверку', array('name' => 'Имя заполнено корректно.')); +} +``` + +Вызов будет таким + +```fenom +{'!AjaxFormItLogin' | snippet: [ + 'snippet' => 'MySnippet', + 'tpl' => 'myTpl', +]} +``` + +## Быстрый старт + +1. Установите компонент AjaxFormItLogin из репозитория . При этом если у Вас не установлен компонент FormIt, он будет автоматически скачан и установлен. +2. Скопируйте всё содержимое между html тегами `
`, включая и эти теги, в чанк. Запомните название этого чанка (для примера будем использовать) оно нам понадобится. +3. Замените скопированную форму (только не в созданном чанке, а на исходной странице) на следующий один из следующих вызовов: + + :::code-group + + ```modx + [[!AjaxFormitLogin? + &form=`aflExampleForm` + &emailTo=`name@domain.ru` + &emailFrom=`noreply@domain.ru` + &emailSubject=`Тема письма` + &emailTpl=`aflExampleEmail` + &validate=`email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^` + ]] + ``` + + ```fenom + {'!AjaxFormItLogin' | snippet: [ + 'form' => 'aflExampleForm', 'hooks' => 'FormItSaveForm,email', + 'emailTo' => 'почта@получателя', + 'emailFrom' => 'почта_от_которой@придет_письмо', + 'emailSubject' => 'Тема письма', + 'emailTpl' => 'aflExampleEmail', + 'validate' => 'email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^', + ]} + ``` + + ::: + + ::: tip + Более подробно о параметрах отправки писем, хуках, валидации читайте в документации компонента [FormIt](https://docs.modx.com/current/ru/extras/formit) так как AjaxFormItLogin поддерживает все параметры этого компонента. + ::: + + Приведу пример того, как должна выглядеть форма: + + ```html +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + +
+ + +
+ ``` + + ::: danger + Для вывода ошибок валидации нет необходимости, добавлять в форму блоки с классами `error_имяполя`. Если этого не сделать, то сообщение с ошибкой будет выведено как всплывающее уведомление с текстом формата `имя_поля: текст сообщения`. Если вместо имени поля вы хотите показывать другой текст, укажите в вызове сниппета AjaxFormitLogin параметр `aliases` и параметр `transmittedParams`. `aliases` должен содержать строку вида `имяполя==Выводимый текст, имя_дргого_поля==Какой-то текст`. + Параметр `transmittedParams` должен содержать следующее значение `['error' => 'aliases']`. + ::: + + Так же обратите внимание на вот этот блок: + + ```html + + + ``` + + Тут нам нужно, чтобы пользователь обязательно прожал чекбокс, для этого мы проверяем в параметре вызова `validate`, чтобы значение в поле `name="politics"` было больше 0. поля. + +4. Создайте чанк письма (aflExampleEmail или любое другое имя). Можно использовать этот + + :::code-group + + ```modx + [[+name:isnot=``:then=`

Имя: [[+name]]

`]] + [[+phone:isnot=``:then=`

Телефон: [[+phone]]

`]] + [[+email:isnot=``:then=`

Email: [[+email]]

`]] + ``` + + ```fenom + {$name ? '

Имя: ' ~ $name ~ '

' : ''} + {$phone ? '

Телефон: ' ~ $phone ~ '

' : ''} + {$email ? '

Email: ' ~ $email ~ '

' : ''} + ``` + + ::: + +::: danger +В примере я использую чанки, хранящиеся в базе данных, однако компонент позволяет использовать и файловые чанки. Более того я рекомендую использовать именно их и парсер из компонента pdoTools. Теперь ваша форма будет сохранять данные в админке и отправлять данные на вашу почту. +::: + +Примеры всех вариантов вызовов `AjaxFormitLogin` и чанков можно найти в папках `core/components/ajaxformitlogin/elements/templates/` и `public_html/core/components/ajaxformitlogin/elements/chunks/`. diff --git a/docs/components/ajaxformitlogin/scripts-and-styles.md b/docs/components/ajaxformitlogin/scripts-and-styles.md new file mode 100644 index 00000000..b369547a --- /dev/null +++ b/docs/components/ajaxformitlogin/scripts-and-styles.md @@ -0,0 +1,71 @@ +# Скрипты и cтили + +::: info +**Стили** - компонент не использует своих стилей, кроме тех, что идут в комплекте с библиотекой показа уведомлений IziToast. +::: + +::: info +**Скрипты JavaScript** - компонент использует JS написанный в формате модуля по стандарту ES6. Это означает, что скрипты подключаются вне основного потока и оказывают минимальное влияние на общую скорость загрузки всей страницы. А формат модуля даёт вам широкие возможности по кастомизации скриптов. Далее рассмотрим возможные варианты работы с JS данного компонента. +::: + +## Обработка результатов отправки формы + +Для этого существует событие `afl_complete` + +```js +document.addEventListener('afl_complete', e => { + console.log(e.detail.response); // ответ сервера + console.log(e.detail.form); // текущая форма +}); +``` + +`e.detail.response` содержит параметры `success` (true или false); `message` - сообщение об ошибке или успехе из параметров вызова сниппета `successMessage` или `validationErrorMessage`, если иное не задано в хуках; `data` - массив данных с сервера, при этом в `data.errors` - список ошибок валидации, `data.redirectUrl` - ссылка на страницу переадресации, `data.redirectTimeout` - задержка перед переадресацией; так же в `e.detail.response.data` будут те параметры, которые вы передадите в вызове через `transmittedParams`. +Обнулив значение в `data.redirectUrl` вы можете отменить переадресацию. +Обнулив значение в `e.detail.response.message` вы можете отменить показ стандартного уведомления и показать своё. + +## Обработка результатов инициализации всех форм + +После инициализации всех форм на странице вызывается событие `afl_init` в котором нет параметров. Поймать его можно так + +```js +document.addEventListener('afl_init', e => { + console.log(window.aflForms); // список всех инициализированных форм +}); +``` + +### Обработка загрузки файлов + +По умолчанию обрабатывается один файл. Обработка производится тремя методами `onUploadProgress`, `onUploadFinished`, `onUploadError`. Каждый из них принимает на вход объект события и форму. Вы можете переопределить все или некоторые из этих методов, расширив класс `AjaxFormitLogin` и создав новый файл подключения, вместо стандартного `assets/components/ajaxformitlogin/js/default.js`. + +### Использование библиотеки IziToast + +Для этого необязательно использовать сниппеты входящие в состав пакета, как того требует AjaxForm. +Предположим, что ваш JS лежит в assets/js/add_scripts.js. Тогда внутри этого файла нужно вставить следующий код + +```js +import AflIziToast from './../components/ajaxformitlogin/js/modules/aflizitoast.class.js'; + +const Notify = new AflIziToast({ + "jsPath": "assets/components/ajaxformitlogin/js/lib/izitoast/iziToast.min.js", + "cssPath": "assets/components/ajaxformitlogin/css/lib/izitoast/iziToast.min.css", + "handlerClassName": "iziToast", + "handlerOptions": { + "timeout": 2000, + "position": "topCenter" + } +}); + +// далее вам будут доступны три метода показа уведомлений +Notify.success('Сообщение об успехе!'); +Notify.error('Сообщение о неудаче.'); +Notify.info('Информационное сообщение.'); +``` + +При подключении своих скриптов укажите тегу script атрибут `type="module"`. + +## Подключение своей библиотеки уведомлений + +1. Создайте свой JS класс расширяющий стандартный класс `AflNotify`, пример расширения можно посмотреть в файле + `assets/components/ajaxformitlogin/js/modules/aflizitoast.class.js`. +2. Затем нужно изменить системные настройки `ajaxformitlogin_notify_classname` - указать имя созданного класса, `ajaxformitlogin_notify_classname` - указать путь к файлу класса относительно файла основного класса компонента `assets/components/ajaxformitlogin/js/modules/ajaxformitlogin.class.js`. +3. Добавьте в файл `assets/components/ajaxformitlogin/js/message_settings.json` настройки своего класса уведомлений. Если настроек нет - укажите пустой объект. diff --git a/docs/components/ajaxformitlogin/settings.md b/docs/components/ajaxformitlogin/settings.md new file mode 100644 index 00000000..c11f11eb --- /dev/null +++ b/docs/components/ajaxformitlogin/settings.md @@ -0,0 +1,12 @@ +# Системные настройки + +## Настройки + +| Параметр | По умолчанию | Описание | +| ------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **ajaxformitlogin_counter_id** | | ID счётчика метрики. Укажите это значение, если хотите чтобы работала отправка целей в Яндекс.Метрику | +| **ajaxformitlogin_frontend_js** | `[[+assetsUrl]]js/default.js` | Путь к основным JS скриптам. Понимает плейсхолдер `[[+assetsUrl]]` | +| **ajaxformitlogin_metrics** | `Нет` | Определяет будут ли отправляться цели в Яндекс.Метрику. При значении `Да` и пустом ID счётчика работать не будет. | +| **ajaxformitlogin_notify_classname** | `AflIziToast` | Имя класса управления библиотекой уведомлений. | +| **ajaxformitlogin_notify_classpath** | `./aflizitoast.class.js` | Путь к классу управления библиотекой уведомлений. Указывается относительно файла с основным JS классом, по умолчанию лежит `assets/components/ajaxformitlogin/js/modules/ajaxformitlogin.class.js` | +| **ajaxformitlogin_notify_js** | `assets/components/ajaxformitlogin/js/message_settings.json` | Путь к настройкам библиотеки уведомлений | diff --git a/docs/components/ajaxformitlogin/snippets/aflactivateuser.md b/docs/components/ajaxformitlogin/snippets/aflactivateuser.md new file mode 100644 index 00000000..3379648d --- /dev/null +++ b/docs/components/ajaxformitlogin/snippets/aflactivateuser.md @@ -0,0 +1,16 @@ +# aflActivateUser + +Сниппет активации аккаунта пользователя. Если ссылка активации просрочена - профиль будет удалён. + +Этот сниппет не принимает никаких параметров. + +## Пример использования + +```fenom +{set $user = '!aflActivateUser' | snippet} +{if $user} +

Уважаемый, {$user.username}, Ваш аккаунт успешно активирован!

+{/if} +``` + +В случае успешной активации будет возвращён массив со всеми данными пользователя, если активация будет неудачной - вернётся false. diff --git a/docs/components/ajaxformitlogin/snippets/ajaxformitlogin.md b/docs/components/ajaxformitlogin/snippets/ajaxformitlogin.md new file mode 100644 index 00000000..68bc0ad9 --- /dev/null +++ b/docs/components/ajaxformitlogin/snippets/ajaxformitlogin.md @@ -0,0 +1,84 @@ +# AjaxFormitLogin + +Сниппет для вывода формы. + +## Параметры + +| Параметр | По умолчанию | Описание | +| ------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **form** | `aflExampleForm` | Чанк формы | +| **snippet** | `FormIt` | Сниппет, который будет обрабатывать форму | +| **hooks** | `FormItSaveForm,email` | Хуки, которые будут использованы для обработки формы. | +| **emailTo** | | Email получателя | +| **emailFrom** | | Email отправителя. При использовании SMTP нужно указывать email пользователя SMTP. | +| **emailSubject** | | Тема письма. | +| **emailTpl** | `aflExampleEmail` | Чанк письма. | +| **successMessage** | `Форма успешно отправлена! Менеджер свяжется с Вами в течение 5 минут.` | Уведомление об успешной отправке формы. | +| **clearFieldsOnSuccess** | `1` | Указывает JS очищать ли поля после отправки формы. | +| **transmittedParams** | `["success" => "", "error" => "aliases"]` | Список параметров для передачи в JS. | +| **aliases** | `email==Email` | Список псевдонимов полей для показа уведомлений об ошибках в них. | +| **validate** | `email:required:email` | Список полей и их валидаторов. | +| **showUploadProgress** | `1` | Указывает JS показывать ли процесс загрузки файлов. | +| **spamProtection** | `1` | Активирует встроенную защиту от спама. | +| **redirectTimeout** | `2000` | Задержка перед переадресацией в миллисекундах. | +| **redirectTo** | | ID страницы переадресации или ссылка на страницу. | +| **autoLogin** | | Авторизовывать ли пользователя автоматически после регистрации учётной записи. | +| **passwordField** | `password` | Имя поля содержащего пароль. | +| **usernameField** | `username` | Имя поля содержащего имя пользователя. | +| **activation** | | Нужна ли активация, если да - на email пользователя будет выслано письмо с ссылкой на страницу активации. | +| **moderate** | | Нужна ли модерация. Если нужна - профиль пользователя будет заблокирован пока модератор его не разблокирует. | +| **activationResourceId** | | ID ресурса, на который будет отправлен пользователь для активации аккаунта. | +| **usergroupsField** | | Поле со списком групп разделенных запятыми, в которые нужно добавить пользователя при регистрации. Можно указать так же уровень доступа (Member или SuperUser) и rank: group_id:pemission_id:rank, например `2:1:0`. Можно указать только два первых параметра или только ID группы. | +| **authenticateContexts** | | Поле со списком контекстов разделенных запятыми, в которых нужно авторизовать пользователя. | +| **rememberme** | | Запоминать ли пользователя. | +| **activationUrlTime** | `10800` | Время действия ссылки на активацию в секундах. | +| **method** | | Метод класса AjaxIdentification (register, login, logout, forgot, update). | + +::: tip +Bы так же можете использовать любые [параметры спиппета FormIt](https://docs.modx.com/current/ru/extras/formit). +::: + +Как видно из таблицы по умолчанию сниппет настроен на отправку форм и сохранение их данных в админке. + +## Пример использования + +Минимальный вызов должен выглядеть так: + +```fenom +{'!AjaxFormitLogin' | snippet: [ + 'emailTo' => 'name@domain.ru', + 'emailFrom' => 'noreply@domain.ru', + 'emailSubject' => 'Тема письма', +]} +``` + +и обязательно должен вызываться некешированным. В чанк формы вы можете передавать какие угодно данные, указывая их как параметры сниппета. Так же любые данные можно +передавать в JS через параметр `transmittedParams`. +А оптимальный вызов такой: + +```fenom +{'!AjaxFormitLogin' | snippet : [ + 'form' => 'aflExampleForm', + 'snippet' => 'FormIt', + 'hooks' => 'FormItSaveForm,email', + 'emailTo' => 'shev.art.v@yandex.ru', + 'emailFrom' => 'noreply@art-sites.ru', + 'emailSubject' => 'Тестовая форма', + 'emailTpl' => 'aflExampleEmail', + 'successMessage' => 'Форма успешно отправлена! Менеджер свяжется с Вами в течение 5 минут.', + 'clearFieldsOnSuccess' => 1, + 'transmittedParams' => ["success" => 'ym_goal', "error" => 'aliases'], + 'aliases' => 'email==Email,phone==Телефон,name==Имя,politics==Правила сервиса', + 'showUploadProgress' => 1, + 'spamProtection' => 1, + 'ym_goal' => 'TEST_GOAL', + + 'validate' => 'email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^', + 'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!', + 'email.vTextRequired' => 'Укажите email.', + 'fullname.vTextRequired' => 'Укажите ФИО.', + 'fullname.vTextMinLength' => 'Слишком короткое ФИО.', + 'secret.vTextContains' => 'Кажется Вы робот. Если это не так, обновите страницу.', + 'politics.vTextMinValue' => 'Примите наши условия.', +]} +``` diff --git a/docs/components/ajaxformitlogin/snippets/custom-snippets.md b/docs/components/ajaxformitlogin/snippets/custom-snippets.md new file mode 100644 index 00000000..b7358116 --- /dev/null +++ b/docs/components/ajaxformitlogin/snippets/custom-snippets.md @@ -0,0 +1,18 @@ +# Кастомные сниппеты + +## Написание своих сниппетов для AjaxFormitLogin + +Как и в случае с `AjaxForm` вам доступна возможность использовать для обработки форм, любые сниппеты, в том числе и написанные вами. В кастомных сниппетах доступен +объект `AjaxFormitLogin` с помощью которого можно возвращать сообщения об успехе или неудаче. Например так: + +```php + 18) { + return $AjaxFormitLogin->success('Взрослый', array('age' => (int)$_POST['age'])); +} else { + return $AjaxFormitLogin->error('Малыш', array('errors' => ['age' => 'Ваш возраст слишком мал.'])); +} +``` + +Вы можете возвращать любую информацию из своего сниппета, но чтобы работал штатный механизм отображения ошибок, в ответе обязательно должен присутствовать массив `errors`, +состоящий из пар имя поля - текст сообщения об ошибке. diff --git a/docs/components/ajaxformitlogin/validators/aflcheckpasslength.md b/docs/components/ajaxformitlogin/validators/aflcheckpasslength.md new file mode 100644 index 00000000..2f378f09 --- /dev/null +++ b/docs/components/ajaxformitlogin/validators/aflcheckpasslength.md @@ -0,0 +1,12 @@ +# aflCheckPassLength + +Сниппет для проверки длины пароля. Используйте именно его, а не стандартный валидатор `minLength`, так как в компоненте доступна автоматическая генерация пароля, если пользователь его не укажет. При использовании `minLength` и пустом поле с паролем будет возвращаться ошибка валидации, в то время как `aflCheckPassLength` проверяет длину только в случае, когда пароль задан. При этом в качестве параметра можно передать минимальную длину, если этого не сделать будет взято значение системной настройки `password_min_length` или `8`. + +## Пример использования + +```fenom +... +'customValidators' => 'aflCheckPassLength', +'validate' => 'password:aflCheckPassLength=^10^', +... +``` diff --git a/docs/components/ajaxformitlogin/validators/aflpasswordconfirm.md b/docs/components/ajaxformitlogin/validators/aflpasswordconfirm.md new file mode 100644 index 00000000..50daeb4d --- /dev/null +++ b/docs/components/ajaxformitlogin/validators/aflpasswordconfirm.md @@ -0,0 +1,12 @@ +# aflPasswordConfirm + +Сниппет для проверки совпадения паролей. Используйте именно его, а не стандартный валидатор `password_confirm`, так как в компоненте доступна автоматическая генерация пароля, если пользователь его не укажет. При использовании `password_confirm` и пустом поле с паролем будет возвращаться ошибка валидации, в то время как `aflPasswordConfirm` проверяет длину только в случае, когда пароль задан. При этом в качестве параметра **НУЖНО** передать имя поля с паролем. + +## Пример использования + +```fenom +... +'customValidators' => 'aflPasswordConfirm', +'validate' => 'password_confirm:aflPasswordConfirm=^password^', +... +``` diff --git a/docs/components/ajaxformitlogin/validators/aflrequiredif.md b/docs/components/ajaxformitlogin/validators/aflrequiredif.md new file mode 100644 index 00000000..95ee152b --- /dev/null +++ b/docs/components/ajaxformitlogin/validators/aflrequiredif.md @@ -0,0 +1,14 @@ +# aflRequiredIf + +Позволяет делать проверяемое поле обязательным в зависимости от значения в другом поле. + +## Пример использования + +```fenom +... +'customValidators' => 'aflRequiredIf', +'validate' => 'ogrn:aflRequiredIf=^legal_form|2^', +... +``` + +В примере поле с именем `ogrn` будет обязательным, если поле именем `legal_form` имеет значение `2`. diff --git a/docs/components/ajaxformitlogin/validators/afluserexists.md b/docs/components/ajaxformitlogin/validators/afluserexists.md new file mode 100644 index 00000000..4a86065c --- /dev/null +++ b/docs/components/ajaxformitlogin/validators/afluserexists.md @@ -0,0 +1,12 @@ +# aflUserExists + +Сниппет проверяет существование пользователя с таким username на сайте. Возвращает ошибку если пользователь **НАЙДЕН**. Используется при регистрации пользователя на сайте. + +## Пример использования + +```fenom +... +'customValidators' => 'aflUserExists', +'validate' => 'email:required:aflUserExists', +... +``` diff --git a/docs/components/ajaxformitlogin/validators/aflusernotexists.md b/docs/components/ajaxformitlogin/validators/aflusernotexists.md new file mode 100644 index 00000000..78535d3f --- /dev/null +++ b/docs/components/ajaxformitlogin/validators/aflusernotexists.md @@ -0,0 +1,12 @@ +# aflUserNotExists + +Сниппет проверяет существование пользователя с таким username на сайте. Возвращает ошибку, если пользователь **НЕ НАЙДЕН**. Используется при восстановлении доступа на сайт. + +## Пример использования + +```fenom +... +'customValidators' => 'aflUserNotExists', +'validate' => 'email:required:aflUserNotExists', +... +```