KAWWA Markup Pattern Library


Site Utilities

Login Form Component Information

  • Class name: (k-login)
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

Login form may appear directly on a page or it may appear in a collapsible form, opened by clicking on the "Please, sign-in" link.

If you want the login form to appear opened on a page, simply remove the class "collapsible" from the form tag.

HTML5 Plain Code

COPY
  1. <form id="login" class="k-login" method="post" action="">
  2. 	<fieldset>
  3. 		<legend>Sign in</legend>
  4.        	<p><label for="userid-tag">User identifier</label> 
  5.        		<input type="text" id="userid-tag" name="userid-tag" /></p>
  6.        	<p><label for="password-tag">Password</label> 
  7.        		<input type="password" id="password-tag" name="password-tag" title="Password must include at least one digit and one special character" /> 
  8. 			<span class="lost-password"><a href="#">Forgot your password?</a></span></p>
  9. 		<p><input type="submit" value="ok" /></p>
  10.     </fieldset>
  11. 	<p class="to-register">
  12.        	<strong>Not registered yet ?</strong> &raquo; <a href="#">Register now</a></p>
  13. </form>

CSS Code

COPY
  1. form.k-login {color: #050505; background: #FFF;}
  2. 
                                
  3. 	form.k-login fieldset {padding: 0; margin: 0;}
  4. 	form.k-login fieldset p {padding: 0.5em 1em;}
  5. 
                                
  6. 	form.k-login input[type=submit] {margin-top: 1em;}
  7. 
                                
  8. .lost-password {display: block; font-size: 80%;}
  9. 
                                
  10. p.to-register {
  11.     color: #FFF;
  12.     background: #808080;
  13.     padding: 0.5em 4%;
  14. }
  15. 
                                
  16. 	p.to-register a, p.to-register a:link, p.to-register a:visited {
  17. 		color: #FFF;
  18. 		background: #808080;
  19. 	}
  20. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Simple Tapestry Integration

You may want to create an internationalized web site, here is an example of a properties file :


password-required=Password must include at least one digit and one special character
register=Not registered yet ?: >> Register now
forgotten-password=Forgot your password?
sign-in=Sign in
submit-label=OK
please-sign-in=Please, sign in

The Template

COPY
  1. <t:kawwa2.CollapsiblePanel id="loginLink" t:header="please-sign-in">
  2. 	<form t:type="form" t:id="loginForm" class="k-login collapsible">
  3. 		<fieldset>
  4. 			<legend>${message:sign-in}</legend>
  5. 			<t:errors/>
  6. 	       	<p><t:label t:for="login" /> 
  7. 	       		<input t:type="textField" t:id="login"/></p>
  8. 	       	<p><t:label t:for="password" /> 
  9. 	       		<input t:type="passwordfield" t:id="password" class="k-field-comment" /> 
  10. 				<span class="lost-password">
  11. 					<a t:type="pagelink" t:page="collapsible">${message:forgotten-password}</a>
  12. 				</span>
  13. 			</p>
  14. 			<p><input t:type="submit" value="${message:submit-label}" /></p>
  15. 	    </fieldset>
  16. 		<p class="to-register">
  17. 			<a t:type="pagelink" t:page="mainnav">
  18. 	       		<t:outputraw t:value="message:register"/>
  19. 			</a>
  20. 		</p>
  21. 	</form>
  22. </t:kawwa2.CollapsiblePanel>

Java Implementation

COPY
  1. @Property
  2. @Validate(value="required")
  3. private String login;
  4. 
                                
  5. @Property
  6. @Validate(value="required")
  7. private String password;
  8. 
                                
  9. @Component(id="loginForm")
  10. private Form loginForm;
  11. 
                                
  12. @Inject
  13. private Messages messages;
  14. 
                                
  15. /*@Inject
  16. private your.business.package.UserManager userManager;*/
  17. 
                                
  18. @OnEvent(value=EventConstants.VALIDATE, component="loginForm")
  19. public void validation(){
  20. 	//Test the values of login and password, or pass the values to your UserManager
  21. 	//if(!userManager.successfullyAuthenticates(login, password)){
  22. 	if(!"tapestry".equals(login) || !"tapestry".equals(password)){
  23. 		String errorMessage = "Wrong login or password";
  24. 		if(messages.contains("wrong-login-password"))
  25. 			errorMessage = messages.get("wrong-login-password");
  26. 		loginForm.recordError(errorMessage);
  27. 	}
  28. }
  29. 
                                
  30. /*
  31.  * This method is only called if you've NOT used the "recordError" method exposed by the Form component
  32.  */
  33. @OnEvent(value=EventConstants.SUCCESS, component="loginForm")
  34. public void loggingSuccess(){
  35. 	//save the user in the session
  36. }
  37. 
                                
  38. /*
  39.  * This method is only called if you've used the "recordError" method exposed by the Form component 
  40.  */
  41. @OnEvent(value=EventConstants.FAILURE, component="loginForm")
  42. public void loggingFailure(){
  43. 	//increment a persistent counter to limit the number of tries
  44. }
  45. 
                                
  46. /*
  47.  * This method is always called 
  48.  */
  49. @OnEvent(value=EventConstants.SUBMIT, component="loginForm")
  50. public void loggingSubmit(){
  51. 	//
  52. }

Advanced Tapestry Integration Based On Tapestry Security

Tynamo's tapestry-security is a comprehensive security module that provides tight integration with Apache Shiro, an established, high-performing and easy-to-use security framework for Tapestry applications.This project comes with a variety of components allowing you to easily get informations about the connected user.You only need to add the following dependency to your project, and then configure cautiously your project as explained in the guide.


<dependency>
<groupId>org.tynamo</groupId>
<artifactId>tapestry-security</artifactId>
<version>0.4.0</version>
</dependency>

Here is a list of components you can find in this project :

  • Authenticated
  • NotAuthenticated
  • User
  • Guest
  • HasAnyRoles
  • HasPermission
  • HasRole
  • LacksPermission
  • LacksRole
  • LoginForm
  • LoginLink

NB: please note that the LoginForm component used in the template below isn't "kawwa2 compliant", you may prefer to use the form exposed at the top of the page, in the Simple Tapestry Implementation.

The Template

COPY
  1. <t:security.notauthenticated>
  2. 	<t:security.loginform />
  3. </t:security.notauthenticated>
  4. 
                                
  5. <t:security.authenticated>
  6. 	Welcome ${currentUser.displayableName}! <t:actionlink t:id="logout">Logout</t:actionlink>
  7. 	<div>
  8. 		<t:security.haspermission permission="admin">
  9. 			Can you feel the power of admin rights !?<br/>
  10. 			<t:actionlink t:id="boom">This button will make the web site explose.</t:actionlink>
  11. 		</t:security.haspermission>
  12. 		<t:security.lackspermission permission="admin">
  13. 			Sorry, as a stupid local user you can't do high level actions.
  14. 		</t:security.lackspermission>
  15. 	</div>
  16. </t:security.authenticated>

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce