Create Login Component in AEM using HTL

The aim of this tutorial is to create Login component in AEM Using HTL (formally know as Sightly) and Bootstrap Framework. I have decided to use Bootstrap as it provides a very rich collection of responsive components , which will save my time from writing css and js for this component and we can focus on functionality of this component.

Lets take the use case for build this component:- You are building a website for a social networking site  or a restricted user site and you want to restrict unauthorized users from accessing it, for that you are asked to build a login component which will authorize your users.

  • Users that are  available only on publish instance are authorized to access the website.
  • Login component should have Remember Me functionality to remember user name.(Using cookies)
  • Heading, SubHeading, Logo and alt text of logo should be configurable.

Pre-requisite:- 

Integrate Bootstrap Library files in AEM:-

  • Go to http://getbootstrap.com/getting-started/#download and download bootstrap files.
  • Extract it at your local file system.
    extract_bootstrap_files
  • Login to CRXDE and create a client library folder under /etc/clientlibs/your-project/ or /etc/design/your-project/. If you have created a design page for your project.
    create_clientlibs_folder_bootstrap
  • Assign categories property to it.(For example:- training.boot.foundation)
  • Add required bootstrap library files to this folder, either using webdav or any third party software like netdrive. I am going to copy and paste only minified files as we are not going to change these files in future.
  • Create css.txt under css folder and add below css files to it.
#base=css
bootstrap.min.css
bootstrap-theme.min.css
bootstrap-theme.min.css
bootstrap.min.css.map
  • Create js.txt under js folder and add below js files to it.
#base=js
bootstrap.min.js
  • Save your changes.Your structure should look like below screenshot.

integrate-bootstrap-clientlibs-aem

Note :- For Practice if you don’t want to download bootstrap libraries, then you can also use out of the box library files that are available with sample code under /etc/clientlibs/social/thirdparty

Once successfully integrated you can choose any bootstrap ooob component from http://getbootstrap.com/components/ and use it in aem. It save ton of coding effort for front end developers and fully responsive.

Create Login component using HTL (formerly known as Sightly):-

  • Go to /apps/aemcqtutorials/components/content and create a new component.(For example :- login)
  • Create a cq:dialog inside login component with below structure.
    login_component_dialog_structure
  • Under Item node create 4 new nodes as shown below:-
    dialog_items_login_aem
  • Double click login.html and paste below code.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='training.boot.foundation,training.login'}"/>

<form class="form-signin">
	  <img src="${properties.file}" alt="${properties.alt}" class="img-rounded">
        
<h2 class="form-signin-heading">${properties.title || "Please Enter Title"}</h2>


<h4 class="form-signin-heading"><small>${properties.subheading || "Please enter sub heading"}</small></h4>

        <label for="inputEmail" class="sr-only">User Name</label>
        <input type="TEXT" id="userId" class="form-control" placeholder="User Name" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        
<div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me" id="rememberMe"> Remember me
          </label>
        </div>

        <button class="btn btn-lg btn-primary btn-block" id="loginButton" >Sign in</button>
        
<div id="errordiv"></div>

        <span><input type="hidden" id="url" value= "${currentPage.path}/j_security_check" /></span>
      </form>


Note:- In above code i have create a hidden field (url) that consist url to hit default login servlet of aem

  • Go to /etc/clientlibs/aemcq5tutorials and create a new folder to store component specific js.
  • Create below folder structure to hold component specific client libraries.
    login-component-js
  • Double click login.js and below code to it.
$(function() {
checkCookie();

$("#inputPassword").keyup(function(event){
if(event.keyCode == 13){
$("#loginButton").click();
}
})

$("#loginButton").click(function(e){

e.preventDefault();
if($('#rememberCheckbox').is(":checked")) {
user = $("#userId").val();
if (user != "" && user != null) {
setCookie("usr_c",user,30);
}
}

var valid = validateForm();
if(valid){
$.ajax({type: "POST",
url: $('#url').val(),
data: { j_username: $("#userId").val(), j_password: $("#inputPassword").val(),j_validate: "true" },
success:function(data,textStatus,jqXHR ){;
window.location.href=getRedirectPath();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#errordiv").val("Invalid User Name or Password");
}});
} else{
$("#errordiv").val("Invalid User Name or Password");
}
});
});

//Function to redirect to homepage after login
var getRedirectPath = function () {
return "/content/geometrixx-gov/en.html";
}

// Function for setting cookies at login page
var setCookie = function (cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// Function for getting cookies at login page
var getCookie = function (cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

// Function for checking cookies at login page
var checkCookie = function () {
var user=getCookie("usr_c");
if (user != "") {
$("#userId").val(user);
}
}

// Function for validating Login form
var validateForm = function() {
var valid = false;
if(($("#userId").val().length >0) || ($("#inputPassword").val().length >0)){
valid = true;
}
return valid;
}

Note:- In above code i am redirection the user to geometrix homepage, if he is authorized else. Move back to login page. If user is using remember me functionality then cookies will be created with name usr_c and can be viewed under browser cookies section.

Congratulation you have successfully created your login component in aem using htl.

Testing Login Component :-

  • Go to Sites create a new page using existing templates.
  • Drag and drop Login component from side rail to parsys.
    test-login-component-aem
  • Configure the dialog properties.

configure_dialog_properties

Either activate the page or switch to preview mode :-

Login_component_aem_6.2

You have successfully create and configured login component in aem using htl, that consist of remember me functionality. Apart from it you came to know how to integrate bootstrap framework with aem.

 

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.