ГлавнаяModxModx регистрация ajax

Урок 26. Создание AJAX формы отправки сообщений. Modx регистрация ajax


[ajaxLogin] Регистрация, Авторизация, Сброс пароля / modx.pro

Компонент ajaxLogin для MODX revolution реализует регистрацию, авторизацию и сброс пароля на сайте через AJAX, содержит в себе один сниппет и кучу чанков. Обязательно должен быть установлен пакет Login, автоматическая загрузка, пока, не реализована. Из пакета Login работает только с тремя сниппетами, это: Login, Register и ForgotPassword.

Все действия происходят в модальном окне, по умолчанию bootstrap3

Должна быть подключена библиотека jQuery.

Сниппет ajaxLogin
Как я выше писал, ajaxLogin содержит в себе кучу чанков, которые все служат для переопределения чанков по умолчанию сниппетов пакета Login, кроме двух — ajaxLoginTpl и ajaxLoginModalTpl. Чанк ajaxLoginTpl разделён на две части сепаратором , и служит для вывода кнопки «Войти» или имени пользователя (fullname), в зависимости от состояния юзера: авторизован/не авторизован, с выпадающим меню-дропдаун (bootstrap), в котором находится ссылка выхода. Можно добавить любые другие ссылки.
Параметры
Примеры
Вот пример кода, которого вполне достаточно для работы этого компонента:[[!ajaxLogin? &resetResourceId = `87` &emailSubject = `Заказан сброс пароля` &usergroups = `Users::Member` &activationEmailSubject = `Спасибо за регистрацию!` &activationResourceId = `84` &successMsg = `На указанный Email мы отправили ссылку, по которой нужно перейти для подтверждения почты.` ]]Как вы понимаете, должны быть созданы ресурсы для сброса пароля и подтверждения Email, с соответствующими вызовами сниппетов: ResetPassword и ConfirmRegister

Компонент в modstore.

modx.pro

ajaxLogin / Пользователи / Дополнения MODX / modstore.pro

Внимание, этот компонент требует версию PHP 5.4 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.

Внимание, этот компонент требует версию MODX не ниже 2.3 !

Компонент ajaxLogin для MODX revolution реализует регистрацию, авторизацию и сброс пароля на сайте через AJAX, содержит в себе один сниппет и кучу чанков. Обязательно должен быть установлен пакет Login, автоматическая загрузка, пока, не реализована. Из пакета Login работает только с тремя сниппетами, это: Login, Register и ForgotPassword.

Все действия происходят в модальном окне, по умолчанию bootstrap3 Должна быть подключена библиотека jQuery.

Сниппет ajaxLogin
Как я выше писал, ajaxLogin содержит в себе кучу чанков, которые все служат для переопределения чанков по умолчанию сниппетов пакета Login, кроме одного — ajaxLoginTpl. Этот чанк разделён на две части сепаратором , и служит для вывода кнопки «Войти» или имени пользователя (fullname), в зависимости от состояния юзера: авторизован/не авторизован, с выпадающим меню-дропдаун (bootstrap), в котором находится ссылка выхода. Можно добавить любые другие ссылки.
Параметры
Примеры
Вот пример кода, которого вполне достаточно для работы этого компонента:[[!ajaxLogin? &resetResourceId = `87` &emailSubject = `Заказан сброс пароля` &usergroups = `Users::Member` &activationEmailSubject = `Спасибо за регистрацию!` &activationResourceId = `84` &successMsg = `На указанный Email мы отправили ссылку, по которой нужно перейти для подтверждения почты.` ]]Как вы понимаете, должны быть созданы ресурсы для сброса пароля и подтверждения Email, с соответствующими вызовами сниппетов: ResetPassword и ConfirmRegister

Обсуждение компонента в сообществе MODX.PRO.

modstore.pro

личный кабинет веб пользователя / Готовые дополнения для MODX / MODX.im

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

Долго разбирался с параметрами аналогичных сниппетов для регистрации, все они в чём то, да не устраивали, чтобы расширить возможности кабинета, приходилось читать простыни кода и запоминать всю логику. Но намучавшись, решил, что своё решение будет намного быстрее сделать, нежели переделать чужое.

Dmi3yy порекомендовал обратить внимание на класс modUsers от Agel_Nash. Из этого класса и позаимствовал некоторые методы, для упрощения работы.

Что может modxAccount. Регистрация пользователя, с использованием всех доступных полей юзера, плюс, можно создавать свои настройки юзера в таблице web_user_settings, добавление аватарки, капча. Восстановление пароля. Личный кабинет. Форма входа.

Регистрация Например поле Адрес, вместо того чтобы предложить юзеру записать весь адрес одной строчкой, можно поставить поля для каждого значения.

<label>Город</label> <input type="text" name="custom_field[address][city]" /> <label>Улица</label> <input type="text" name="custom_field[address][street]" /> <label>Дом</label> <input type="text" name="custom_field[address][house]" /> <label>Квартира</label> <input type="text" name="custom_field[address][flat]" /> далее эти данные запишутся в базу в виде сериализованного массива json строки.

Уровень вложенности можно использовать любой, но разумнее дальше 3-4 ого не залезать.

<input type="text" name="custom_field[1][2][3][4]" />

Все новые данные будут перезаписываться в уже существующие поля, либо добавляться новые, как с адресом. Название address, стоит в исключениях, для того чтобы юзер мог добавить несколько адресов для последующего использования, как например адреса доставки в интернет магазине.

Добавление и ресайз фотографии (аватарки). Как динамически так и при отправке данных пользователя.

Так же есть возможность подключения капчи

Восстановление пароля Пользователю высылается новый сгенерированный пароль, если он не менял его, то можно авторизоваться по старому паролю, а новый удалится.

Личный кабинет Достаточно гибкий для добавления своих возможностей.

Форма входа Стандартные два поля.

Шаблоны Шаблоны для формы в html со вставками php кода, можно использовать php сразу в шаблоне, либо все теги modx.

<input type="text" name="email" value="<?= $email ?>" placeholder="[email protected]"> <? if($error_email) { ?> <div> <?= $error_email ?> </div> <? } ?> либо использовать чанки, подключив их в &tpl=`ваш чанк`<input type="text" name="email" value="[+email+]" placeholder="[email protected]"> <@IF:[+error_email+]> <div> [+error_email+] </div> <@ENDIF> <input type="text" name="custom_field[address][street]" value="[+custom_field.address.street+]"> <@IF:[+error_custom_field.address.street+]> <div> [+error_custom_field.address.street+] </div> <@ENDIF>
Установка
Создаёте документЛичный кабинет с псевдонимом account в нём создаёте дочерние Регистрация — register Профиль — profile Восстановление пароля — forgot псевдонимы страниц, будут определять выбор контроллера для каждой страницы. Далее ставим вызов сниппета на каждой странице.

Личный кабинет — account

[!account? &controller=`account` &controllerRegister=`account/register` &controllerLogin=`account` &controllerForgot=`account/forgot` &controllerProfile=`account/profile` &success=`` &userGroupId=`` !]

Регистрация — register

[!account? &controller=`account/register` &controllerRegister=`account/register` &controllerLogin=`account` &controllerForgot=`account/forgot` &controllerProfile=`account/profile` &success=`` &userGroupId=`` !]

Профиль — profile

[!account? &controller=`account/profile` &controllerRegister=`account/register` &controllerLogin=`account` &controllerForgot=`account/forgot` &controllerProfile=`account/profile` &success=`` &userGroupId=`` !]

Восстановление пароля — forgot

[!account? &controller=`account/forgot` &controllerRegister=`account/register` &controllerLogin=`account` &controllerForgot=`account/forgot` &controllerProfile=`account/profile` &success=`` &userGroupId=`` !]

Вместо псевдонимов контроллеров &controller..., можно поставить id страниц на которых расположен тот или иной вызов сниппета.

&success — перенаправление после удачного действия сниппета.

&userGroupId — id групп, через запятую для нового зарегистрированного пользователя.

В одну строкуПри создании вложенности документов, как указанно выше и используя вложенные URL, вызов сниппета можно сократить до одной строчки [!account?&userGroupId=``!] Так же можно использовать свои шаблоны в чанках либо в файлах[!account? &tpl=`@FILE:assets/snippets/account/view/register.tpl.txt` &userGroupId=`` !]
Сниппет
Затем создаёте сниппет account с кодом<?php require MODX_BASE_PATH.'assets/snippets/account/snippet.account.php'; ?> и копируете папку со сниппетом (ссылка ниже)

Капча для форм использована своя, поскольку стандартная капча перестаёт работать, если закрывать папку manager через .htaccess (ссылка на гит), либо использовать другую которая пишет значение в сессию $_SESSION['veriword']

AjaxДля работы через ajax используется modxLoader, статья на modx.im и код гите
Скачать
Скачать сниппет на гите — modxAccountВ создании сниппета использованы функции из класса modUsers, за последнее исправление в SessionHandler, большое спасибо Pathologic

Свежим взглядом посмотрел DrMorro, после статьи об уязвимостях WebloginPE.

Спасибо Agel_Nash за AJAX финальный метод №4 и подсказки в работе контроллера через ajax и вопросах его безопасности и так же методы из MODxApi и modUsers.

И спасибо Dmi3yy за направления, где и что посмотреть да почитать на данную тему.

Жду ваших комментариев и вопросов по работе сниппета.

UPD: добавлен вывод многомерных массивов в плейсхолдерах чанка шаблона. [+custom_field.address.street+]

UPD: добавлена возможность использования своих шаблонов в чанках или файлах

UPD: замена serialize на json

modx.im

Урок 26. Создание AJAX формы отправки сообщений MODX

Для создания AJAX формы нам понадобится:

Алгоритм работы:

  1. пользователь заполняет поля и нажимает "Отправить"
  2. форма обращается по адресу к ресурсу, где лежит сниппет sendMail
  3. этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender

Создание формы отправки сообщения

Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):

В моём случае эти поля:

Напротив полей, обязательных для заполнения, выставим атрибут required="required", чтобы форма не отправлялась, пока не будут заполнены данные поля.

Создание скрипта обработки формы

Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:

Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 - это ИД ресурса, где содержиться наш обработчик AJAX вызова.

Создание обработчика AJAX запроса

Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:

Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле "Содержимое" новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.

Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа.

Полный код шаблона, который используется в демо, можно просмотреть по этой ссылке

Источники, которые помогли мне в создании урока и дополнительные материалы для изучения:

Форма в Демо не отправляет сообщения А лишь демонстрирует работу скриптов.

Демо AJAX формы

modx.ws

Prostoy-Site | Все права защищены © 2018 | Карта сайта