xAjaxLogin

Sign-in via AJAX dynamic forms

xAjaxLogin add an interactive dimension for front-end user identification and prevent login attempts from bots.

Overview

xAjaxLogin allow AJAX front-end login and prevent bots to submit login forms. When the 'Login' button is clicked a modal window with a login form appears on screen. The login form doesn't exists in code on page load. The form results from a response from the server and is integrated in the modal window.

In the event that a user or a bot tries to access the form without going through the ajax method, a 401 error is returned. The login/identification form is therefore inaccessible without human action.

Get xAjaxLogin Demo

Dependencies

Login

xAjaxLogin uses Login extra for MODX. If Login is not installed, its installation will be proposed during the installation of xAjaxLogin.

jQuery

xAjaxLogin uses jQuery JavaScript library. If jQuery is not installed, an option will allow you to include it.

Event trigger class

The class triggering the modal window display is .cmd-xmodallogin (cf. xalpLoginTpl chunk).

Basic use

[[!xAjaxLogin]]

For xAjaxLoginPro (xFrontUser extra):

[[!xAjaxLoginPro]]

Advanced use with all available options

[[!xAjaxLogin?
    &showstatus=`0`
    &header=`0`
    &loginResourceId=`1`
    &logoutResourceId=`1`
    &loginTpl=`xalLoginTpl`
    &logoutTpl=`xalLogoutTpl`
    &loginTplPanel=`xalLoginTplPanel`
    &height=`500`
    &width=`350`
    &cypher=`1`
    &logo=`/assets/components/xajaxlogin/images/modx-stacked-color.png`
    &incJquery=`0`
    &incJspanel=`1`
]]

All options are read in cascade:

Default
Snippet properties (override default)
Snippet options (override properties)

Then, in a multi-context use, you should use snippet options.

Snippet options

xAjaxLoginPro only

Option	Values	Default / Notes
header	0\|1	Show modal window header. Default: No (false).
loginResourceId	A resource ID	Resource ID for redirection after successful login. Default: current page ID.
logoutResourceId	A resource ID	Resource ID for redirection after logout.
loginRegisterId	A resource ID	Resource ID for register link/page.
loginForgotId	A resource ID	Resource ID for forgot username or password link/page.
logo	Image path	Add logo to the Login modal window (path). Default: `/assets/components/xajaxlogin/images/modx-stacked-color.png`
showstatus	0\|1	Show additional infos and status. Default: Yes (true)
width	number	Modal window width. Default: 350
height	number	Modal window height. Default: 500.
loginTpl	chunk	Chunk template for login (if logged out). Default: xalLoginTpl.
loginTplPanel	chunk	Chunk template for modal window content. Default: xalLoginTplPanel.
logoutTpl	chunk	Chunk template for logout (if logged in). Default: xalLogoutTpl.
cypher	0\|1	Encrypt posted data (username and password). Default: Yes (true).
incJquery	0\|1	Include jQuery. Set to 1 if your template/website doesn't embed jQuery. Default: No (false).
incJspanel	0\|1	Include jsPanel. Set to 1 if your template/website doesn't embed jsPanel by default. Default: Yes (true).
notifmode	nerver\|always\|userchoice	Send email notification to user on connections.
snd	Path	Sound notification. Examples: `/assets/components/xfrontuser/snd/sample1.mp3`, `/assets/components/xfrontuser/snd/sample2.mp3`

xAjaxLoginPro only

xAjaxLoginPro is a part of xFrontUser extra.

Demo

In this demo, redirect page for login and logout is the current resouce.

Note: loginRegisterId and loginForgotId options are not set in this demo. This page will be reloaded after login (by default).

[[!xAjaxLogin? &cypher=`1`]]

Credentials

username: demo
password: JmYYtT3M

Get xAjaxLogin

Option Cypher

This option (enabled by default) encrypt posted data making it impossible to read data posted in the console of the browser's development tools.

In the same way if a software or browser extension records logs and posted data, the reading of the data (username and password) will be impossible.

If your website cannot use https it adds a security layer; if your website use https it will add an additional encryption layer (SSL/TLS encryption of encrypted form data).

With &cypher=`0`:

With &cypher=`1` or without this option:

Requirements

PHP 5.4+ or higher, PHP7 supported
PHP with OpenSSL Support: http://php.net/manual/en/openssl.installation.php

If your hosting doesn't meet these requirements, disable this option:

[[!xAjaxLogin? &cypher=`0`]]

Contexts

xAjaxLogin works in all contexts other than the default context.