KAWWA Markup Pattern Library


Site Utilities

Login Data Component Information

  • Class name: (k-login-data)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

Indicates logged-in user name and offers logout link.

HTML5 Plain Code

COPY
  1. <p class="k-login-data">Welcome, <span id="user-name">John Smith</span> [<strong><a href="#">Logout</a></strong>]</p>

CSS Code

COPY
  1. p.k-login-data {
  2. 	width: 15%;
  3. 	top: 5.1em;
  4. 	right: 4%;
  5. 	font-size: 0.8em;
  6. 	text-align: right;
  7. 	color: #000;
  8. 	padding: 0.8em 0.5em 0 0;
  9. 	border-right: 1px solid #000;
  10. }
  11. 	p.k-login-data a, p.k-login-data a:link, p.k-login-data a:visited {
  12. 	}
  13. 
                                

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:

Tapestry Integration

This component do not have a Tapestry Implementation. Here is just an example in order to explain how to implement it in your own project.

The Template

COPY
  1. <div t:type="if" t:test="loggedUserExists">
  2. 	<p class="k-login-data">
  3. 		Welcome, <span id="user-name">loggedUser?.name</span> 
  4. 		[<strong><a t:type="actionLink" t:id="logout">Logout</a></strong>]
  5. 	</p>
  6. </div>

Java Implementation

COPY
  1. @SessionState
  2. private User loggedUser;
  3. 
                                
  4. @Property
  5. private Boolean loggedUserExists; 
  6. 
                                
  7. @OnEvent(value=EventConstants.ACTION, component="logout")
  8. public void logout(){
  9. 	
  10. 	loggedUser = null;
  11. 	
  12. }

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