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) {
var atPosition = email.indexOf("@");
var dotPosition = email.lastIndexOf(".");
return !(atPosition < 1 || ( dotPosition - atPosition < 2 ));
};
var validatePassword = function (psswd, conPass) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers
if ((psswd.length < 5) || (psswd.length > 15)) {
error = "The password is of wrong length. Should be between 5 and 15 characters. \n";
$('.wr-validation-summary strong').text(error);
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (illegalChars.test(psswd)) {
error = "The password contains illegal characters.\n";
$('.wr-validation-summary strong').text(error);
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if ((psswd.search(/[a-zA-Z]+/) == -1) || (psswd.search(/[0-9]+/) == -1)) {
error = "The password must contain at least one numeral and one character.\n";
$('.wr-validation-summary strong').text(error);
$('.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;
}
};
$(function () {
$("button#add-user-btn").click(function () {
//e.preventDefault();
var username = $("input#user_name").val();
var firstname = $("input#first_name").val();
var lastname = $("input#last_name").val();
var emailAddress = $("input#email").val();
var password = $("input#password").val();
var passwordConfirm = $("input#password_confirmation").val();
// var userRoles = $("select#roles").val();
if (!firstname) {
$('.wr-validation-summary strong').text("Firstname is a required field. It cannot be empty.");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!lastname) {
$('.wr-validation-summary strong').text("Lastname is a required field. It cannot be empty.");
$('.wr-validation-summary').removeClass("hidden");
return false;
} else if (!username) {
$('span.wr-validation-summary strong').text("Username is a required field. It cannot be empty.");
$('.wr-validation-summary').removeClass("hidden");
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 {
$(document).ready(function(){
$("#registerForm").validate({
onfocusout: false,
rules: {
first_name: {
required: true
},
last_name: {
required: true
},
user_name: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
password_confirmation: {
required: true,
equalTo: "#password"
}
},
messages: {
first_name: {
required: "Firstname is a required field. This cannot be empty."
},
last_name: {
required: "Lastname is a required field. This cannot be empty."
},
user_name: {
required: "Username is a required field. This cannot be empty.",
minlength: ""
},
email: {
required: "Email is a required field. This cannot be empty.",
email: "Email is not valid. Please enter a correct email address."
},
password: {
required: "Please enter a user login password",
minlength: "Password should be between 5 and 30 characters."
},
password_confirmation: {
required: "Please enter a user login password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
var addUserFormData = {};
addUserFormData.username = username;
addUserFormData.firstname = firstname;
addUserFormData.lastname = lastname;
addUserFormData.emailAddress = emailAddress;
addUserFormData.password = password;
addUserFormData.username = $("input#user_name").val();
addUserFormData.firstname = $("input#first_name").val();
addUserFormData.lastname = $("input#last_name").val();
addUserFormData.emailAddress = $("input#email").val();
addUserFormData.password = $("input#password").val();
addUserFormData.userRoles = null;
var context = $(".form-login-box").attr("action");
var addUserAPI = context + "/api/user/register";
$.ajax({
@ -104,42 +68,39 @@ $(function () {
data: JSON.stringify(addUserFormData),
success: function (data) {
if (data == 200) {
$('.wr-validation-summary strong').text("Successfully Submitted.");
$('.wr-validation-summary strong').removeClass("label-danger");
$('.wr-validation-summary strong').addClass("label-success");
$('.wr-validation-summary strong').html("<i class=\"icon fw fw-ok\"></i> Successfully Submitted.");
$('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary').addClass("alert-success");
} else if (data == 201) {
$('.wr-validation-summary strong').text("User created. You will be redirected to login page");
$('.wr-validation-summary strong').removeClass("label-danger");
$('.wr-validation-summary strong').addClass("label-success");
$('.wr-validation-summary strong').html("<i class=\"icon fw fw-ok\"></i> User created " +
"succssfully. You will be redirected to login page.");
$('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary').addClass("alert-success");
setTimeout(function () {
window.location = context + "/login";
}, 2000);
} else if (data == 400) {
$('.wr-validation-summary strong').text("Exception at backend.");
$('.wr-validation-summary strong').removeClass("label-danger");
$('.wr-validation-summary strong').addClass("label-warning");
$('.wr-validation-summary strong').html("<i class=\"icon fw fw-error\"></i> Exception at backend.");
$('.wr-validation-summary').removeClass("alert-danger");
$('.wr-validation-summary').addClass("alert-warning");
} else if (data == 403) {
$('.wr-validation-summary strong').text("Action not permitted.");
$('.wr-validation-summary strong').html("Action not permitted.");
} else if (data == 409) {
$('.wr-validation-summary strong').text("User exists.");
$('.wr-validation-summary strong').removeClass("label-default");
$('.wr-validation-summary strong').addClass("label-success");
$('.wr-validation-summary strong').html("<i class=\"icon fw fw-info\"></i> User name already exists.");
$('.wr-validation-summary').removeClass("alert-default");
$('.wr-validation-summary').addClass("alert-success");
}
$('.wr-validation-summary').removeClass("hidden");
$('#password').val('');
$('#password_confirmation').val('');
// return true;
},
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");
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">
<p class="page-sub-title">Register</p>
<p>Create new account on IoT Server</p>
<!-- validation -->
<span class="wr-validation-summary hidden center-block col-centered">
<strong class="label label-danger col-centered"></strong>
</span>
<p>Create new account on IoT Server (All fields are required.)</p>
<hr/>
<form method="POST" class="form-login-box" action="{{@app.context}}">
<label class="wr-input-label">First Name</label>
<div class="wr-input-control">
<input type="text right" id="first_name" placeholder="First Name">
<!-- validation -->
<div class="wr-validation-summary hidden alert alert-danger">
<strong></strong>
<button type="button" class="close" aria-label="close" data-dismiss="alert"><span aria-hidden="true">
<i class="fw fw-cancel"></i></span></button>
</div>
<form method="POST" class="form-login-box" action="{{@app.context}}" id="registerForm">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" id="first_name" placeholder="First Name" class="form-control" name="first_name">
</div>
<label class="wr-input-label">Last Name</label>
<div class="wr-input-control">
<input type="text right" id="last_name" placeholder="Last Name">
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" id="last_name" placeholder="Last Name" class="form-control" name="last_name">
</div>
<label class="wr-input-label">Username</label>
<div class="wr-input-control">
<input type="text right" id="user_name" placeholder="Username ">
<div class="form-group">
<label for="user_name">Username</label>
<input type="text" id="user_name" placeholder="Username" class="form-control" name="user_name">
</div>
<label class="wr-input-label">Email</label>
<div class="wr-input-control">
<input type="text right" id="email" placeholder="Email">
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Email" class="form-control" name="email">
</div>
<label class="wr-input-label">Password</label>
<div class="wr-input-control">
<input type="password" id="password" placeholder="Password">
<div class="form-group">
<label for="password" >Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" name="password">
</div>
<label class="wr-input-label">Confirm Password</label>
<div class="wr-input-control">
<input type="password" id="password_confirmation" placeholder="Confirm Password">
<div class="form-group">
<label for="password_confirmation">Confirm Password</label>
<input type="password" id="password_confirmation" placeholder="Confirm Password" class="form-control"
name="password_confirmation">
</div>
<div class="wr-input-label">
<input type="checkbox" name="Agree" id="t_and_c" value="Bike"> <span class="italic">
I Agree by Clicking register, you agree to the Terms and Conditions set out by this site</span>
</div>
<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" onclick="document.location.href='{{@app.context}}/login';">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&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';">Cancel</button>
</div>
</form>

Loading…
Cancel
Save