Merge pull request #64 from dakshika/ui-fixes

Rewrite user create logic with jquery validation lib
Ruwan 9 years ago
commit c585da6cb5

@ -1,100 +1,64 @@
var emailIsValid = function (email) { $(document).ready(function(){
var atPosition = email.indexOf("@"); $("#registerForm").validate({
var dotPosition = email.lastIndexOf("."); onfocusout: false,
return !(atPosition < 1 || ( dotPosition - atPosition < 2 )); rules: {
}; first_name: {
required: true
var validatePassword = function (psswd, conPass) { },
var error = ""; last_name: {
var illegalChars = /[\W_]/; // allow only letters and numbers required: true
},
if ((psswd.length < 5) || (psswd.length > 15)) { user_name: {
error = "The password is of wrong length. Should be between 5 and 15 characters. \n"; required: true,
$('.wr-validation-summary strong').text(error); minlength: 3
$('.wr-validation-summary').removeClass("hidden"); },
return false; email: {
required: true,
} else if (illegalChars.test(psswd)) { email: true
error = "The password contains illegal characters.\n"; },
$('.wr-validation-summary strong').text(error); password: {
$('.wr-validation-summary').removeClass("hidden"); required: true,
return false; minlength: 5
},
} else if ((psswd.search(/[a-zA-Z]+/) == -1) || (psswd.search(/[0-9]+/) == -1)) { password_confirmation: {
error = "The password must contain at least one numeral and one character.\n"; required: true,
$('.wr-validation-summary strong').text(error); equalTo: "#password"
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (psswd != conPass) {
error = "The password and confirm-password should match.\n";
$('.wr-validation-summary strong').text(error);
$('.wr-validation-summary').removeClass("hidden");
// return false;
} else {
return true;
} }
},
}; messages: {
first_name: {
$(function () { required: "Firstname is a required field. This cannot be empty."
$("button#add-user-btn").click(function () { },
//e.preventDefault(); last_name: {
var username = $("input#user_name").val(); required: "Lastname is a required field. This cannot be empty."
var firstname = $("input#first_name").val(); },
var lastname = $("input#last_name").val(); user_name: {
var emailAddress = $("input#email").val(); required: "Username is a required field. This cannot be empty.",
var password = $("input#password").val(); minlength: ""
var passwordConfirm = $("input#password_confirmation").val(); },
email: {
// var userRoles = $("select#roles").val(); required: "Email is a required field. This cannot be empty.",
email: "Email is not valid. Please enter a correct email address."
if (!firstname) { },
$('.wr-validation-summary strong').text("Firstname is a required field. It cannot be empty."); password: {
$('.wr-validation-summary').removeClass("hidden"); required: "Please enter a user login password",
return false; minlength: "Password should be between 5 and 30 characters."
} else if (!lastname) { },
$('.wr-validation-summary strong').text("Lastname is a required field. It cannot be empty."); password_confirmation: {
$('.wr-validation-summary').removeClass("hidden"); required: "Please enter a user login password",
return false; equalTo: "Please enter the same password as above"
} else if (!username) { }
$('span.wr-validation-summary strong').text("Username is a required field. It cannot be empty."); },
$('.wr-validation-summary').removeClass("hidden"); submitHandler: function(form) {
return false;
} else if (!emailAddress) {
$('.wr-validation-summary strong').text("Email is a required field. It cannot be empty.");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!emailIsValid(emailAddress)) {
$('.wr-validation-summary strong').text("Email is not valid. Please enter a correct email address.");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!password) {
$('.wr-validation-summary strong').text("Please enter a user login password.");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!passwordConfirm) {
$('.wr-validation-summary strong').text("Please re-type password");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!validatePassword(password, passwordConfirm)) {
return false;
} else if (!$('#t_and_c').is(':checked')) {
$('.wr-validation-summary strong').text("Please accept our terms and conditions");
$('.wr-validation-summary').removeClass("hidden");
} else {
var addUserFormData = {}; var addUserFormData = {};
addUserFormData.username = username; addUserFormData.username = $("input#user_name").val();
addUserFormData.firstname = firstname; addUserFormData.firstname = $("input#first_name").val();
addUserFormData.lastname = lastname; addUserFormData.lastname = $("input#last_name").val();
addUserFormData.emailAddress = emailAddress; addUserFormData.emailAddress = $("input#email").val();
addUserFormData.password = password; addUserFormData.password = $("input#password").val();
addUserFormData.userRoles = null; addUserFormData.userRoles = null;
var context = $(".form-login-box").attr("action"); var context = $(".form-login-box").attr("action");
var addUserAPI = context + "/api/user/register"; var addUserAPI = context + "/api/user/register";
$.ajax({ $.ajax({
@ -104,42 +68,39 @@ $(function () {
data: JSON.stringify(addUserFormData), data: JSON.stringify(addUserFormData),
success: function (data) { success: function (data) {
if (data == 200) { if (data == 200) {
$('.wr-validation-summary strong').text("Successfully Submitted."); $('.wr-validation-summary strong').html("<i class=\"icon fw fw-ok\"></i> Successfully Submitted.");
$('.wr-validation-summary strong').removeClass("label-danger"); $('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary strong').addClass("label-success"); $('.wr-validation-summary').addClass("alert-success");
} else if (data == 201) { } else if (data == 201) {
$('.wr-validation-summary strong').text("User created. You will be redirected to login page"); $('.wr-validation-summary strong').html("<i class=\"icon fw fw-ok\"></i> User created " +
$('.wr-validation-summary strong').removeClass("label-danger"); "succssfully. You will be redirected to login page.");
$('.wr-validation-summary strong').addClass("label-success"); $('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary').addClass("alert-success");
setTimeout(function () { setTimeout(function () {
window.location = context + "/login"; window.location = context + "/login";
}, 2000); }, 2000);
} else if (data == 400) { } else if (data == 400) {
$('.wr-validation-summary strong').text("Exception at backend."); $('.wr-validation-summary strong').html("<i class=\"icon fw fw-error\"></i> Exception at backend.");
$('.wr-validation-summary strong').removeClass("label-danger"); $('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary strong').addClass("label-warning"); $('.wr-validation-summary').addClass("alert-warning");
} else if (data == 403) { } else if (data == 403) {
$('.wr-validation-summary strong').text("Action not permitted."); $('.wr-validation-summary strong').html("Action not permitted.");
} else if (data == 409) { } else if (data == 409) {
$('.wr-validation-summary strong').text("User exists."); $('.wr-validation-summary strong').html("<i class=\"icon fw fw-info\"></i> User name already exists.");
$('.wr-validation-summary strong').removeClass("label-default"); $('.wr-validation-summary').removeClass("alert-default");
$('.wr-validation-summary strong').addClass("label-success"); $('.wr-validation-summary').addClass("alert-success");
} }
$('.wr-validation-summary').removeClass("hidden"); $('.wr-validation-summary').removeClass("hidden");
$('#password').val(''); $('#password').val('');
$('#password_confirmation').val(''); $('#password_confirmation').val('');
// return true;
}, },
error: function (err) { error: function (err) {
$('.wr-validation-summary strong').text("An unexpected error occurred."); $('.wr-validation-summary strong').html("<i class=\"icon fw fw-error\"></i> An unexpected error occurred.");
$('.wr-validation-summary').removeClass("hidden"); $('.wr-validation-summary').removeClass("hidden");
return false; return false;
} }
}); });
} }
return false;
}); });
}); });

@ -1,61 +1,52 @@
{{unit "uuf.unit.lib.form-validation"}}
<div class="container col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel"> <div class="container col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel">
<p class="page-sub-title">Register</p> <p class="page-sub-title">Register</p>
<p>Create new account on IoT Server</p> <p>Create new account on IoT Server (All fields are required.)</p>
<!-- validation -->
<span class="wr-validation-summary hidden center-block col-centered">
<strong class="label label-danger col-centered"></strong>
</span>
<hr/> <hr/>
<!-- validation -->
<form method="POST" class="form-login-box" action="{{@app.context}}"> <div class="wr-validation-summary hidden alert alert-danger">
<label class="wr-input-label">First Name</label> <strong></strong>
<button type="button" class="close" aria-label="close" data-dismiss="alert"><span aria-hidden="true">
<div class="wr-input-control"> <i class="fw fw-cancel"></i></span></button>
<input type="text right" id="first_name" placeholder="First Name">
</div> </div>
<form method="POST" class="form-login-box" action="{{@app.context}}" id="registerForm">
<label class="wr-input-label">Last Name</label> <div class="form-group">
<label for="first_name">First Name</label>
<div class="wr-input-control"> <input type="text" id="first_name" placeholder="First Name" class="form-control" name="first_name">
<input type="text right" id="last_name" placeholder="Last Name">
</div> </div>
<label class="wr-input-label">Username</label> <div class="form-group">
<label for="last_name">Last Name</label>
<div class="wr-input-control"> <input type="text" id="last_name" placeholder="Last Name" class="form-control" name="last_name">
<input type="text right" id="user_name" placeholder="Username ">
</div> </div>
<label class="wr-input-label">Email</label> <div class="form-group">
<label for="user_name">Username</label>
<div class="wr-input-control"> <input type="text" id="user_name" placeholder="Username" class="form-control" name="user_name">
<input type="text right" id="email" placeholder="Email">
</div> </div>
<label class="wr-input-label">Password</label> <div class="form-group">
<label for="email">Email</label>
<div class="wr-input-control"> <input type="text" id="email" placeholder="Email" class="form-control" name="email">
<input type="password" id="password" placeholder="Password">
</div> </div>
<label class="wr-input-label">Confirm Password</label> <div class="form-group">
<label for="password" >Password</label>
<div class="wr-input-control"> <input type="password" id="password" placeholder="Password" class="form-control" name="password">
<input type="password" id="password_confirmation" placeholder="Confirm Password">
</div> </div>
<div class="wr-input-label"> <div class="form-group">
<input type="checkbox" name="Agree" id="t_and_c" value="Bike"> <span class="italic"> <label for="password_confirmation">Confirm Password</label>
I Agree by Clicking register, you agree to the Terms and Conditions set out by this site</span> <input type="password" id="password_confirmation" placeholder="Confirm Password" class="form-control"
name="password_confirmation">
</div> </div>
<div class="wr-input-control"> <div class="wr-input-control">
<button class="wr-btn" id="add-user-btn">&nbsp;&nbsp;&nbsp;&nbsp;Register&nbsp;&nbsp;&nbsp;&nbsp;</button> <button class="wr-btn" id="add-user-btn" type="submit">Register</button>
<button class="wr-btn" onclick="document.location.href='{{@app.context}}/login';">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;</button> <button class="wr-btn" onclick="document.location.href='{{@app.context}}/login';">Cancel</button>
</div> </div>
</form> </form>

Loading…
Cancel
Save