First of all, i don’t know if someone actually needs that tutorial or i’m taking Cpt. Obvious duty.
Prerequisites:
- modx revolution
- jquery 1.4
- jquery ui
- snippets (installed via package manager):
[list]
[li]If
- Login
[/li]
[li]general knowledge of modx/js/xhtml[/li]
[/list]
Ok, so you installed Revolution, praised package management possibilities, installed snippets you need to build your site, read documentation (which is two step closer to perfectness comparing to old evo docs). What’s next? Right, you started to build your site.
Login is a security Extra for MODx Revolution, that allows for front-end login capabilities, as well as profile updating, registration, and forgot password functionality.
We definitely need this one if our site is supposed to have some visitor interaction (comments, access to members-only area, etc).
And it’s nice usability feature to have ajax login (Login docs
http://rtfm.modx.com/display/ADDON/Login have no corresponding section) so i had to switch on my brain and think. I decided to use jquery (i like it a lot) and jquery ui (the task could be done via pure jquery but i decided to use jq.ui to get familiar with it). So enough of chit-chat and let’s get straight to the business.
Step 1a: templating
In your template paste following snippet call somewhere in <head> section:
[[!If?
&subject=`[[!+modx.user.id]]`
&operator=`EQ`
&operand=``
&then=`
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/login.js"></script>
<link rel="stylesheet" href="assets/css/blitzer/jquery-ui-1.8.6.custom.css" />
` &debug=`0`
&else=``
]]
you should go to
http://jqueryui.com/themeroller/ and choose preferred theme and then upload it to your assets folder.
Step 1b: templating
Somewhere in your template put Login call.
[[!If?
&subject=`[[+modx.user.id]]`
&operator=`EQ`
&operand=``
&then=`[[!Login? &tplType=`modChunk`]]`
&else=``
]]
</body>
</html>
somewhere in your template put
<a href="#" id="login-button">Login</a>
$(document).ready(function() {
// following is copy from jq.ui demo with some customizations
var name = $( ".loginUsername" ),
password = $( ".loginPassword" ),
allFields = $( [] ).add( name ).add( password ),
tips = $( ".loginMessage" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( ".loginForm" ).dialog({
autoOpen: false,
height: 250,
width: 300,
modal: true,
buttons: {
"Login": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 5, 16 );
// bValid = bValid && checkLength( email, "email", 6, 80 );
bValid = bValid && checkLength( password, "password", 5, 16 );
//bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
//bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
//bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( bValid ) {
var form = $('.loginForm form');
$.post('/login.html', form.serialize(), function(data){
try {
var jsd = $.parseJSON(data);
} catch (e) {
$('.loginForm').html(data);
}
window.location = jsd.redirect;
$( this ).dialog( "close" );
});
}
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#login-button" )
.click(function(e) {
e.preventDefault();
$( ".loginForm" ).dialog( "open" );
});
});
$.post('[[~114]]', form.serialize(), function(data){
// instead of physical
$.post('/login.html', form.serialize(), function(data){
anyone with some knowledge of js and jq after reading login.js code should understand how it works. I just reiterate for those that learning. Basically, this script creates dialog widget, so when user clicks element with id="login-button" it opens modal dialog window with login form. When user clicks enter button, it prevents form submitting and submits it via ajax to another modx resource with another Login call.
Create new resource with blank template, name it "login" and put following code:
[[!Login? &tplType=`modChunk` &loginResourceId=`23`]]
Create another resource with blank template (i called it login-success but whatever works for you) and put there
{"redirect":"[[++site_url]][[~7]]"}
PS This tutorial is not perfect so i would appreciate to get some feedback on it.
PPS And forgive me some language quirks, i’m not native English-speaker
