specter/CyTube
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #674 from Xaekai/channel.registration

Browse source 
Touch up validations on account pages
This commit is contained in:
Calvin Montgomery 2017-06-05 18:40:50 -07:00 committed by GitHub
parent d0712d007e 699aa2abe1
commit 07c801a12d
3 changed files with 82 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/web/pug.js
View file

@ -13,6 +13,7 @@ function merge(locals, res) {
siteTitle: Config.get("html-template.title"),
siteDescription: Config.get("html-template.description"),
siteAuthor: "Calvin 'calzoneman' 'cyzon' Montgomery",
domain: res.req.host,
loginDomain: Config.get("https.enabled") ? Config.get("https.full-address")
: Config.get("http.full-address"),
csrfToken: typeof res.req.csrfToken === 'function' ? res.req.csrfToken() : '',

46
templates/account-channels.pug
View file

@ -55,9 +55,49 @@ html(lang="en")
input(type="hidden", name="_csrf", value=csrfToken)
input(type="hidden", name="action", value="new_channel")
.form-group
label.control-label(for="channelname") Channel Name
input#channelname.form-control(type="text", name="name")
button.btn.btn-primary.btn-block(type="submit") Register
label.control-label(for="channelname") Channel URL
.input-group
span.input-group-addon #{domain}/r/
input#channelname.form-control(type="text", name="name", maxlength="30", onkeyup="checkChannel()")
p#validate_channel.text-danger.pull-right
button#register.btn.btn-primary.btn-block(type="submit") Register
include footer
+footer()
script( type='text/javascript').
function checkChannel(){
function nameIsInvalid(id){
if(/\s/.test(id)){
return 'Channel URL may not contain spaces';
}
if(id === ''){
return 'Channel URL must not be empty';
}
if(!/^[\w-]{1,30}$/.test(id)){
return 'Channel URL may only consist of a-z, A-Z, 0-9, - and _';
}
return false;
}
var box = $("#channelname");
var value = box.val();
var lastkey = Date.now();
box.data("lastkey", lastkey);
setTimeout(function () {
if (box.data("lastkey") !== lastkey || box.val() !== value) {
return;
}
if(nameIsInvalid(value)){
$('#validate_channel').text(nameIsInvalid(value))
.parent().addClass('has-error').removeClass('has-success');
$('#register').addClass('disabled');
} else {
$('#validate_channel').text('')
.parent().addClass('has-success').removeClass('has-error');
$('#register').removeClass('disabled');
}
}, 200);
}

69
templates/register.pug
View file

@ -32,16 +32,20 @@ html(lang="en")
input(type="hidden", name="_csrf", value=csrfToken)
.form-group
label.control-label(for="username") Username
input#username.form-control(type="text", name="name")
input#username.form-control(type="text", name="name", onkeyup="checkUsername()", maxlength="20")
p#validate_username.text-danger.pull-right
.form-group
label.control-label(for="password") Password
input#password.form-control(type="password", name="password", onkeyup="checkPasswords()")
p#validate_password.text-danger.pull-right
.form-group
label.control-label(for="password_confirm") Confirm Password
input#password_confirm.form-control(type="password", onkeyup="checkPasswords()")
p#validate_confirm.text-danger.pull-right
.form-group
label.control-label(for="email") Email (optional)
input#email.form-control(type="email", name="email")
p#validate_email.text-danger.pull-right
p
| Providing an email address is optional and will allow you to recover your account via email if you forget your password.
strong   If you do not provide an email address, you will not be able to recover a lost account!
@ -62,52 +66,55 @@ html(lang="en")
return valid;
}
function checkUsername() {
var name = $("#username").val();
$("#usernameerror").remove();
function stateError(text){
target.parent()
.addClass("has-error")
.removeClass("has-success");
$("#validate_username").text(text);
}
var target = $("#username");
var name = target.val();
if (name === "") {
$("#username").parent().addClass("has-error");
$("<p/>").addClass("text-danger")
.attr("id", "usernameerror")
.text("Username must not be empty")
.insertAfter($("#username"));
stateError('Username must not be empty')
return false;
} else if (!(/^[-\w\u00c0-\u00ff]{1,20}$/).test(name)) {
$("#username").parent().addClass("has-error");
$("<p/>").addClass("text-danger")
.attr("id", "usernameerror")
.text("Username must consist of 1-20 characters a-Z, A-Z, 0-9 " +
", -, or _.")
.insertAfter($("#username"));
stateError("Username must consist of 1-20 characters" +
" a-Z, A-Z, 0-9, -, or _.");
return false;
} else {
$("#username").parent().removeClass("has-error")
target.parent()
.removeClass("has-error")
.addClass("has-success");
$("#validate_username").text('');
}
}
function checkPasswords() {
var pw = $("#password").val();
var pwc = $("#password_confirm").val();
$("#passwordempty").remove();
$("#passwordmismatch").remove();
function stateError(text, target, validator){
target.parent()
.addClass("has-error")
.removeClass("has-success");
$(`#${validator}`).text(text);
}
var target = $("#password");
var target2 = $("#password_confirm");
var pw = target.val();
var pwc = target2.val();
$("#validate_password").text('');
$("#validate_confirm").text('');
if (pw === "") {
$("#password").parent().addClass("has-error");
$("<p/>").addClass("text-danger")
.attr("id", "passwordempty")
.text("Password must not be empty")
.insertAfter($("#password"));
stateError('Password must not be empty', target, 'validate_password')
return false;
} else {
$("#password").parent().removeClass("has-error")
target.parent()
.removeClass("has-error")
.addClass("has-success");
if (pw !== pwc) {
$("#password_confirm").parent().addClass("has-error");
$("<p/>").addClass("text-danger")
.attr("id", "passwordmismatch")
.text("Passwords do not match")
.insertAfter($("#password_confirm"));
stateError('Passwords do not match', target2, 'validate_confirm')
return false;
} else {
$("#password_confirm").parent().removeClass("has-error")
target2.parent()
.removeClass("has-error")
.addClass("has-success");
}
}