Login or Cancel Application Using Ajax
This section provides you, an easy and complete implementation of login application with features like submit and cancel buttons using the Ajax (DOJO). This application also checks the user validation i.e. the logging user is valid or not.
Lets develop a login application using Ajax with
features like submit and cancel buttons. This login application first
authenticates a user, it asks the login name and password (Both the login name
and password is "Admin") from the user. It displays a welcome
page, when both fields are correctly filled by the user. Otherwise it displays
an error and DEBUG messages (Invalid user name and password! Please try
again! and DEBUG: widget ID collision on ID: ajaxLogin_0).
Create an action mapping in the struts.xml file. Here is the code to be added in the struts.xml:
Develop an action class that handles the login and cancel request and it also checks for the user authentication. If the user name and password is "Admin" then it returns SUCCESS otherwise ERROR strings. Whenever you click the "Cancel" button, it returns the NONE field (NONE field: The action execution was successful but did not show a view).
Here is the code of "Login.java" action class:
Develop a Login or Cancel Form Using Ajax : The GUI of the application consists of a login form (ajaxloginCancel.jsp). This jsp page uses the <s:div> tag, this tag creates a content area that can load its content using Ajax tags, optionally refreshing. Here we also use the <s:submit> tag that is used to update element (s) or submit a form with the help of Ajax. The "Cancel" button calls submit tag to notify an action to perform cancel operation.
Whenever an error occurs then the <s:actionerror> and <s:fielderror> tags execute and the page displays an error message.
Here is the code of ajaxloginCancel.jsp file:
The "ajaxloginsuccess.jsp" page displays the Login Success message (Welcome to Admin) when the user is successfully authenticated.
Here is the code of "ajaxloginsuccess.jsp" file:
Output of the ajax login or cancel application:
When this application executes you get a login page as shown:
If you leave the "Login name" and "password" field empty in the login page then a message is displayed as shown below:
If you leave the "Login name" field empty and just fills the "Password" field in the login page then a message is displayed as shown below:
If you fill the "Login name" field empty and just leaves the "Password" field empty in the login page then a message is displayed as shown below:
If you enter the wrong login name and password in the login page then it displays a message as shown below:
After clicking the "Cancel" button, you get the following:
When you enter the correct login name and password to the login page:
Displays a success message as shown: