Clear error messages before submitting login request
Clear error messages before submitting login request

/* /*
* GitPHP javascript login popup * GitPHP javascript login popup
* *
* @author Christopher Han <xiphux@gmail.com> * @author Christopher Han <xiphux@gmail.com>
* @copyright Copyright (c) 2012 Christopher Han * @copyright Copyright (c) 2012 Christopher Han
* @package GitPHP * @package GitPHP
* @subpackage Javascript * @subpackage Javascript
*/ */
   
define(['jquery', 'modules/geturl', 'modules/resources', 'qtip'], function($, url, resources) { define(['jquery', 'modules/geturl', 'modules/resources', 'qtip'], function($, url, resources) {
return function(element) { return function(element) {
$(element).qtip({ $(element).qtip({
content: { content: {
text: function(api) { text: function(api) {
var container = $(document.createElement('div')); var container = $(document.createElement('div'));
var loginError = $(document.createElement('div')).addClass('loginError').addClass('error').css('padding-top', '0px'); var loginError = $(document.createElement('div')).addClass('loginError').addClass('error').css('padding-top', '0px');
var loginDiv = $(document.createElement('div')).addClass('loginForm'); var loginDiv = $(document.createElement('div')).addClass('loginForm');
var loginForm = $(document.createElement('form')) var loginForm = $(document.createElement('form'))
   
container.append(loginDiv); container.append(loginDiv);
loginDiv.append(loginForm); loginDiv.append(loginForm);
loginForm.append(loginError); loginForm.append(loginError);
   
var usernameDiv = $(document.createElement('div')).addClass('field'); var usernameDiv = $(document.createElement('div')).addClass('field');
var usernameLabel = $(document.createElement('label')).attr('for', 'username').text(resources.UsernameLabel); var usernameLabel = $(document.createElement('label')).attr('for', 'username').text(resources.UsernameLabel);
var usernameField = $(document.createElement('input')).attr('type', 'text').attr('name', 'username'); var usernameField = $(document.createElement('input')).attr('type', 'text').attr('name', 'username');
usernameDiv.append(usernameLabel); usernameDiv.append(usernameLabel);
usernameDiv.append(usernameField); usernameDiv.append(usernameField);
loginForm.append(usernameDiv); loginForm.append(usernameDiv);
   
var passwordDiv = $(document.createElement('div')).addClass('field'); var passwordDiv = $(document.createElement('div')).addClass('field');
var passwordLabel = $(document.createElement('label')).attr('for', 'password').text(resources.PasswordLabel); var passwordLabel = $(document.createElement('label')).attr('for', 'password').text(resources.PasswordLabel);
var passwordField = $(document.createElement('input')).attr('type', 'password').attr('name', 'password'); var passwordField = $(document.createElement('input')).attr('type', 'password').attr('name', 'password');
passwordDiv.append(passwordLabel); passwordDiv.append(passwordLabel);
passwordDiv.append(passwordField); passwordDiv.append(passwordField);
loginForm.append(passwordDiv); loginForm.append(passwordDiv);
   
var loginButton = $(document.createElement('input')).attr('type', 'submit').attr('value', resources.Login); var loginButton = $(document.createElement('input')).attr('type', 'submit').attr('value', resources.Login);
loginForm.append(loginButton); loginForm.append(loginButton);
   
loginForm.bind('submit', function(event) { loginForm.bind('submit', function(event) {
var username = $('input[name=username]', this).val(); var username = $('input[name=username]', this).val();
var password = $('input[name=password]', this).val(); var password = $('input[name=password]', this).val();
var errorContainer = $('.loginError', this); var errorContainer = $('.loginError', this);
if (!username) { if (!username) {
errorContainer.text(resources.UsernameIsRequired); errorContainer.text(resources.UsernameIsRequired);
return false; return false;
} }
if (!password) { if (!password) {
errorContainer.text(resources.PasswordIsRequired); errorContainer.text(resources.PasswordIsRequired);
return false; return false;
} }
  errorContainer.text('');
var inputs = $('input', this); var inputs = $('input', this);
$.ajax({ $.ajax({
url: url + '?a=login&o=js', url: url + '?a=login&o=js',
data: { data: {
a: 'login', a: 'login',
o: 'js', o: 'js',
username: username, username: username,
password: password password: password
}, },
type: 'post', type: 'post',
dataType: 'json', dataType: 'json',
success: function(data, status, jqXHR) { success: function(data, status, jqXHR) {
if (data) { if (data) {
if (data.success === true) { if (data.success === true) {
window.location.reload(); window.location.reload();
} else if (data.message) { } else if (data.message) {
errorContainer.text(data.message); errorContainer.text(data.message);
} else { } else {
errorContainer.text(resources.AnErrorOccurredWhileLoggingIn); errorContainer.text(resources.AnErrorOccurredWhileLoggingIn);
} }
} else { } else {
errorContainer.text(resources.AnErrorOccurredWhileLoggingIn); errorContainer.text(resources.AnErrorOccurredWhileLoggingIn);
} }
}, },
error: function(jqXHR, message) { error: function(jqXHR, message) {
errorContainer.text(resources.AnErrorOccurredWhileLoggingIn); errorContainer.text(resources.AnErrorOccurredWhileLoggingIn);
}, },
beforeSend: function() { beforeSend: function() {
inputs.attr('disabled', 'disabled'); inputs.attr('disabled', 'disabled');
}, },
complete: function() { complete: function() {
inputs.removeAttr('disabled'); inputs.removeAttr('disabled');
} }
}); });
   
return false; return false;
}); });
   
return container; return container;
}, },
title: { title: {
text: resources.LoginTitle, text: resources.LoginTitle,
button: true button: true
} }
}, },
position: { position: {
my: 'center', my: 'center',
at: 'center', at: 'center',
target: $(window) target: $(window)
}, },
show: { show: {
event: 'click', event: 'click',
modal: { modal: {
on: true on: true
} }
}, },
hide: { hide: {
event: false event: false
}, },
style: { style: {
classes: 'ui-tooltip-light ui-tooltip-shadow' classes: 'ui-tooltip-light ui-tooltip-shadow'
}, },
events: { events: {
visible: function(event, api) { visible: function(event, api) {
$('input[name=username]', this).focus(); $('input[name=username]', this).focus();
} }
} }
}); });
$(element).click(function(event) { $(element).click(function(event) {
return false; return false;
}); });
}; };
}); });
   
comments