From cc55073107348a6795af49850da571dddb0feffd Mon Sep 17 00:00:00 2001 From: Baris Soner Usakli Date: Wed, 28 Aug 2013 13:47:52 -0400 Subject: [PATCH] issue #224 --- public/src/forum/register.js | 220 +++++++++++++--------------- public/src/utils.js | 4 +- public/templates/admin/settings.tpl | 8 + public/templates/register.tpl | 32 +++- src/install.js | 4 + src/routes/api.js | 9 +- src/websockets.js | 8 +- 7 files changed, 157 insertions(+), 128 deletions(-) diff --git a/public/src/forum/register.js b/public/src/forum/register.js index 7818025be0..62d4b32fef 100644 --- a/public/src/forum/register.js +++ b/public/src/forum/register.js @@ -1,157 +1,147 @@ (function() { - var username = document.getElementById('username'), - password = document.getElementById('password'), - password_confirm = document.getElementById('password-confirm'), - register = document.getElementById('register'), - emailEl = document.getElementById('email'), - username_notify = document.getElementById('username-notify'), - email_notify = document.getElementById('email-notify'), - password_notify = document.getElementById('password-notify'), - password_confirm_notify = document.getElementById('password-confirm-notify'), - usernamevalid = false; - emailexists = false, - emailvalid = false, - userexists = false, - passwordsmatch = false, - passwordvalid = false; + var username = $('#username'), + password = $('#password'), + password_confirm = $('#password-confirm'), + register = $('#register'), + emailEl = $('#email'), + username_notify = $('#username-notify'), + email_notify = $('#email-notify'), + password_notify = $('#password-notify'), + password_confirm_notify = $('#password-confirm-notify'), + validationError = false; - $(username).on('keyup change', function() { - usernamevalid = utils.isUserNameValid(username.value); + function showError(element, msg) { + element.html(msg); + element.attr('class', 'alert alert-error'); + element.show(); + validationError = true; + } + + function showSuccess(element, msg) { + element.html(msg); + element.attr('class', 'alert alert-success'); + element.show(); + } - - if(username.value.length < 3) { - username_notify.innerHTML = 'Username too short'; - username_notify.className = 'label label-important'; - } else if(username.value.length > 13) { - username_notify.innerHTML = 'Username too long'; - username_notify.className = 'label label-important'; - } else if(!usernamevalid) { - username_notify.innerHTML = 'Invalid username'; - username_notify.className = 'label label-important'; - } else { - socket.emit('user.exists', {username: username.value}); + function validateEmail() { + if(!emailEl.val()) { + validationError = true; + email_notify.hide(); + return; } + + if(!utils.isEmailValid(emailEl.val())) { + showError(email_notify, 'Invalid email address.'); + } + else + socket.emit('user.email.exists', { email: emailEl.val() }); + } + + emailEl.on('blur', function() { + validateEmail(); }); - $(emailEl).on('keyup change', function() { - emailvalid = utils.isEmailValid(email.value); + function validateUsername() { + if(!username.val()) { + validationError = true; + username_notify.hide(); + return; + } - if(!emailvalid) { - email_notify.innerHTML = 'Invalid email address'; - email_notify.className = 'label label-important'; + if(username.val().length < config.minimumUsernameLength) { + showError(username_notify, 'Username too short!'); + } else if(username.val().length > config.maximumUsernameLength) { + showError(username_notify, 'Username too long!'); + } else if(!utils.isUserNameValid(username.val())) { + showError(username_notify, 'Invalid username!'); + } else { + socket.emit('user.exists', {username: username.val()}); } - else - socket.emit('user.email.exists', { email: emailEl.value }); + } + + username.on('blur', function() { + validateUsername(); }); - $(password).on('keyup', function() { - passwordvalid = utils.isPasswordValid(password.value); - if (password.value.length < 6) { - password_notify.innerHTML = 'Password too short'; - password_notify.className = 'label label-important'; - } else if(!passwordvalid) { - password_notify.innerHTML = 'Invalid password'; - password_notify.className = 'label label-important'; - } else { - password_notify.innerHTML = 'OK!'; - password_notify.className = 'label label-success'; + function validatePassword() { + if(!password.val()){ + validationError = true; + password_notify.hide(); + return; } - if(password.value !== password_confirm.value) { - password_confirm_notify.innerHTML = 'Passwords must match!'; - password_confirm_notify.className = 'label label-important'; - passwordsmatch = false; + if (password.val().length < config.minimumPasswordLength) { + showError(password_notify, 'Password too short!'); + } else if(password.val().length > config.maximumPasswordLength) { + showError(password_notify, 'Password too long!'); + } else if(!utils.isPasswordValid(password.val())) { + showError(password_notify, 'Invalid password!'); + } else { + showSuccess(password_notify, 'OK!'); + } + + if(password.val() !== password_confirm.val() && password_confirm.val() !== '') { + showError(password_confirm_notify, 'Passwords must match!'); } + } + + $(password).on('blur', function() { + validatePassword(); }); - $(password_confirm).on('keyup', function() { - if(password.value !== password_confirm.value) { - password_confirm_notify.innerHTML = 'Passwords must match!'; - password_confirm_notify.className = 'label label-important'; - passwordsmatch = false; + function validatePasswordConfirm() { + if(!password.val() || password_notify.hasClass('alert-error')) { + password_confirm_notify.hide(); + return; } - else { - password_confirm_notify.innerHTML = 'OK!'; - password_confirm_notify.className = 'label label-success'; - passwordsmatch = true; + + if(password.val() !== password_confirm.val()) { + showError(password_confirm_notify, 'Passwords must match!'); + } else { + showSuccess(password_confirm_notify, 'OK!'); } + } + + $(password_confirm).on('blur', function() { + validatePasswordConfirm(); }); ajaxify.register_events(['user.exists', 'user.email.exists']); socket.on('user.exists', function(data) { - userexists = data.exists; if (data.exists === true) { - username_notify.innerHTML = 'Username exists'; - username_notify.className = 'label label-important'; + showError(username_notify, 'Username already taken!'); } else { - username_notify.innerHTML = 'OK!'; - username_notify.className = 'label label-success'; + showSuccess(username_notify, 'OK!'); } }); socket.on('user.email.exists', function(data) { - emailexists = data.exists; - if (data.exists === true) { - email_notify.innerHTML = 'Email Address exists'; - email_notify.className = 'label label-important'; - } - else { - email_notify.innerHTML = 'OK!'; - email_notify.className = 'label label-success'; + showError(email_notify, 'Email address already taken!'); + } else { + showSuccess(email_notify, 'OK!'); } }); // Alternate Logins - var altLoginEl = document.querySelector('.alt-logins'); - altLoginEl.addEventListener('click', function(e) { - var target; - switch(e.target.nodeName) { - case 'LI': target = e.target; break; - case 'I': target = e.target.parentNode; break; - } - if (target) { - document.location.href = target.getAttribute('data-url'); - } + $('.alt-logins li').on('click', function(e) { + document.location.href = $(this).attr('data-url'); }); function validateForm() { - var validated = true; + validationError = false; - if (username.value.length < 2 || !usernamevalid) { - username_notify.innerHTML = 'Invalid username'; - username_notify.className = 'label label-important'; - validated = false; - } + validateEmail(); + validateUsername(); + validatePassword(); + validatePasswordConfirm(); - if (password.value.length < 5) { - password_notify.innerHTML = 'Password too short'; - validated = false; - } - - if(password.value !== password_confirm.value) { - password_confirm_notify.innerHTML = 'Passwords must match!'; - } - - if (!emailvalid) { - email_notify.innerHTML = 'Invalid email address'; - validated = false; - } - - if(emailexists) { - email_notify.innerHTML = 'Email Address exists'; - validated = false; - } - - if(userexists || !passwordsmatch || !passwordvalid) - validated = false; - - return validated; + return validationError; } - register.addEventListener('click', function(e) { - if (!validateForm()) e.preventDefault(); - }, false); + register.on('click', function(e) { + if (validateForm()) e.preventDefault(); + }); }()); diff --git a/public/src/utils.js b/public/src/utils.js index b3d3f756f4..790fc9754c 100644 --- a/public/src/utils.js +++ b/public/src/utils.js @@ -91,11 +91,11 @@ }, isUserNameValid: function(name) { - return (name && name !== "" && (/^[a-zA-Z0-9 _-]{3,14}$/.test(name))); + return (name && name !== "" && (/^[a-zA-Z0-9 _-]+$/.test(name))); }, isPasswordValid: function(password) { - return password && password.indexOf(' ') === -1 && password.length > 5; + return password && password.indexOf(' ') === -1; }, // Blatently stolen from: http://phpjs.org/functions/strip_tags/ diff --git a/public/templates/admin/settings.tpl b/public/templates/admin/settings.tpl index ca92b0faf3..1d3bc5311a 100644 --- a/public/templates/admin/settings.tpl +++ b/public/templates/admin/settings.tpl @@ -50,6 +50,14 @@ +
+

User Settings

+
+ Minimum Username Length

+ Maximum Username Length

+
+
+

Post Settings

diff --git a/public/templates/register.tpl b/public/templates/register.tpl index 0656336f43..29eb260ddd 100644 --- a/public/templates/register.tpl +++ b/public/templates/register.tpl @@ -1,13 +1,31 @@

Register

- -
-
-
-
- - + +
+ + + + Your email won't be shown to the public unless you want. + + + + + A unique username. {minimumUsernameLength}-{maximumUsernameLength} characters. Others can mention you with @username. + + + + + {minimumPasswordLength}-{maximumPasswordLength} characters. + + + + + + +
+ +
diff --git a/src/install.js b/src/install.js index 1afd20ad69..6431b0a689 100644 --- a/src/install.js +++ b/src/install.js @@ -88,6 +88,10 @@ var async = require('async'), meta.configs.set('postDelay', 10000); meta.configs.set('minimumPostLength', 8); meta.configs.set('minimumTitleLength', 3); + meta.configs.set('minimumUsernameLength', 2); + meta.configs.set('maximumUsernameLength', 16); + meta.configs.set('minimumPasswordLength', 6); + meta.configs.set('maximumPasswordLength', 16); meta.configs.set('imgurClientID', ''); install.save(server_conf, client_conf, callback); diff --git a/src/routes/api.js b/src/routes/api.js index cca3522fa3..88cc74495b 100644 --- a/src/routes/api.js +++ b/src/routes/api.js @@ -22,6 +22,10 @@ var user = require('./../user.js'), config['minimumTitleLength'] = meta.config['minimumTitleLength']; config['minimumPostLength'] = meta.config['minimumPostLength']; config['imgurClientIDSet'] = !!meta.config['imgurClientID']; + config['minimumUsernameLength'] = meta.config['minimumUsernameLength']; + config['maximumUsernameLength'] = meta.config['maximumUsernameLength']; + config['minimumPasswordLength'] = meta.config['minimumPasswordLength']; + config['maximumPasswordLength'] = meta.config['maximumPasswordLength']; res.json(200, config); }); @@ -97,7 +101,10 @@ var user = require('./../user.js'), } data.token = res.locals.csrf_token; - + data.minimumUsernameLength = meta.config['minimumUsernameLength']; + data.maximumUsernameLength = meta.config['maximumUsernameLength']; + data.minimumPasswordLength = meta.config['minimumPasswordLength']; + data.maximumPasswordLength = meta.config['maximumPasswordLength']; res.json(data); }); diff --git a/src/websockets.js b/src/websockets.js index c98ec013f5..c62f51e7e1 100644 --- a/src/websockets.js +++ b/src/websockets.js @@ -217,9 +217,11 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }), }); socket.on('user.exists', function(data) { - user.exists(utils.slugify(data.username), function(exists){ - socket.emit('user.exists', {exists: exists}); - }); + if(data.username) { + user.exists(utils.slugify(data.username), function(exists){ + socket.emit('user.exists', {exists: exists}); + }); + } }); socket.on('user.count', function(data) {