accept-invite-portlet/src/main/webapp/WEB-INF/jsp/view.jsp

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="javax.portlet.*"%>
<%@ page import="org.gcube.common.portal.*"%>
<%@ page import=" org.gcube.portal.invites.InvitesManager"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme"%>

<portlet:defineObjects />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<portlet:resourceURL id="findState" var="findState"></portlet:resourceURL>

<script type="text/javascript">
$(document).ready(function(){
	
	$( "#createAccountButton" ).click(function() {
		var firstnameBox =  $.trim( $('#firstname').val() )
	    if (firstnameBox == "") {
	    	$('#labelFirstName').css("color","red");
	    	$('#labelFirstName').text("First Name (This field is required)");
	    } else {
	    	$('#labelFirstName').css("color","#555");
	    	$('#labelFirstName').text("First Name (Required)");
	    }
		var lastnameBox =  $.trim( $('#lastname').val() )
	    if (lastnameBox == "") {
	    	$('#labelLastName').css("color","red");
	    	$('#labelLastName').text("Last Name (This field is required)");
	    } else {
	    	$('#labelLastName').css("color","#555");
	    	$('#labelLastName').text("Last Name (Required)");
	    }
		
		var passwd1 = $('#password');
		var labelPwd1 =  $('#labelPwd1');
		var passwd2 = $('#repassword');
		var labelPwd2 =  $('#labelPwd2');
				
		labelPwd1.addClass( passwd1.val().length === 0 ? 'has-error' : 'has-success' );
		labelPwd2.addClass( passwd2.val().length === 0 ? 'has-error' : 'has-success' );
		
		var nomatch =  $('#labelPasswordDontMatch');
		
		if (passwd1.val() !== passwd2.val()) {
			nomatch.css("display","block");
			nomatch.css("color","red");
			labelPwd1.addClass( passwd1.val() !== passwd2.val() ? 'has-error' : 'has-success' )
			.removeClass( passwd1.val() === passwd2.val() ? 'has-error' : 'has-success' );
			labelPwd2.addClass( passwd1.val() !== passwd2.val() ? 'has-error' : 'has-success' )
			.removeClass( passwd1.val() === passwd2.val() ? 'has-error' : 'has-success' );
			return;
		} 
		else {
			nomatch.css("display","none");
		}
				
		var shortpwd =  $('#labelPasswordTooShort');
		
		if (passwd1.val().length > 0 && passwd1.val().length < 8) {
			shortpwd.css("display","block");
			shortpwd.css("color","red");
			labelPwd1.addClass(passwd1.val().length < 8 ? 'has-error' : 'has-success' )
			.removeClass(passwd1.val().length < 8  ? 'has-error' : 'has-success' );
			labelPwd2.addClass(passwd2.val().length < 8  ? 'has-error' : 'has-success' )
			.removeClass(passwd2.val().length < 8  ? 'has-error' : 'has-success' );
			return;
		} 
		else {
			shortpwd.css("display","none");
		}	

		
		
	});
		
	$( "#country" ).change(function() {
		  $.ajax({
		        url: "${findState}" ,
		        type: 'POST',
		        datatype:'json',
		        data: { 
		                countryName: $("#country").val() 
			      },
		            success: function(data){
		            var content= JSON.parse(data);
		            $('#state').html('');// to clear the previous option
		            $.each(content, function(i, state) {
		                $('#state').append($('<option>').text(state.name).attr('value', state.stateId));
		            });
		        }
		    });
	  }); 
	});
</script>
<b>Change the Country State Change By Ajax</b> <br><br>
Country:
<select id="country" name="country">
<option value="select">Select Country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>

<br><br>
State:
<select id="state" name="state">
</select>
<h1>
	Hello
	<c:out escapeXml="true" value="${invitedUser.firstName}" />!<br>
</h1>

<p class="lead">
	You have recently received an invitation from
	<c:out escapeXml="true" value="${inviteInstance.senderFullName}" />
	to join the <a
		href="/web<c:out escapeXml="true" value="${vreFriendlyURL}" />"
		target="_blank"><c:out escapeXml="true" value="${vreName}" /></a>
	Virtual Research Environment.
	<c:choose>
		<c:when test="${empty invitedUser}">
			<br />
			<span style="font-style: italic;">Please note</span>: the invite is valid for your email <a
				href="mailto:<c:out escapeXml="true" value="${inviteInstance.invitedEmail}" />">
				<c:out escapeXml="true" value="${inviteInstance.invitedEmail}" />
			</a> only. To accept the invite, please fill in the information below:
        <br />

			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span4">
						<fieldset>
							<label>Email (Not editable)</label> <input type="text" name="email"
								value="${inviteInstance.invitedEmail}" readonly style="color: #999;"/>
							<label id="labelFirstName">First Name (Required)</label>
							<input type="text" id="firstname" />
							<label id="labelLastName">Last Name (Required)</label>
							<input type="text" id="lastname" />
						</fieldset>
					</div>
					<div class="span4">
						<fieldset>
							<label id="labelPwd1">Password</label>
							<input type="password" id="password"  />
							<label id="labelPwd2">Confirm Password</label>
							<input type="password" id="repassword"/>
							<label style="display: none" id="labelPasswordDontMatch">Passwords don't match</label>
							<label style="display: none" id="labelPasswordTooShort">Passwords must be at least 8 chars length</label>
							<div style="margin-top: 20px;">
							<button class="btn-primary btn-large" type="button" id="createAccountButton">Continue</button>
							</div>
						</fieldset>
					</div>
				</div>
			</div>

		</c:when>
		<c:otherwise>
    This invite is valid for your email <a
				href="mailto:<c:out escapeXml="true" value="${inviteInstance.invitedEmail}" />">
				<c:out escapeXml="true" value="${inviteInstance.invitedEmail}" />
			</a> only, you will be asked to enter your password associated to it on this portal. 
 
 <%
				String exploreURL = request.getAttribute("landingPage") + "/explore?" + InvitesManager.SITEID_ATTR
								+ "=" + request.getAttribute("groupId");
			%>
			<p class="lead">
				<button class="btn btn-large btn-primary"
					onclick="window.location.href='<%=exploreURL%>'" type="button">
					Accept invite on
					<c:out escapeXml="true" value="${vreName}" />
				</button>
			</p>
		</c:otherwise>
	</c:choose>

</p>

<br>
<c:out escapeXml="true" value="${inviteInstance} " />