register and login -> BS3

v1.18.x
psychobunny 12 years ago
parent 316077fffb
commit a008cf971d

@ -21,13 +21,13 @@
if(username.value.length < 3) {
username_notify.innerHTML = 'Username too short';
username_notify.className = 'label label-important';
username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
} else if(username.value.length > 13) {
username_notify.innerHTML = 'Username too long';
username_notify.className = 'label label-important';
username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
} else if(!usernamevalid) {
username_notify.innerHTML = 'Invalid username';
username_notify.className = 'label label-important';
username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
} else {
socket.emit('user.exists', {username: username.value});
}
@ -38,7 +38,7 @@
if(!emailvalid) {
email_notify.innerHTML = 'Invalid email address';
email_notify.className = 'label label-important';
email_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
}
else
socket.emit('user.email.exists', { email: emailEl.value });
@ -48,31 +48,35 @@
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.parentNode.className = 'input-group-addon btn-warning label-warning';
} else if(!passwordvalid) {
password_notify.innerHTML = 'Invalid password';
password_notify.className = 'label label-important';
password_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
} else {
password_notify.innerHTML = 'OK!';
password_notify.className = 'label label-success';
password_notify.innerHTML = '<i class="icon icon-ok"></i>';
password_notify.parentNode.className = 'input-group-addon btn-success label-success';
}
if(password.value !== password_confirm.value) {
if(password.value !== password_confirm.value && password_confirm.value.length > 0) {
password_confirm_notify.innerHTML = 'Passwords must match!';
password_confirm_notify.className = 'label label-important';
password_confirm_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
passwordsmatch = false;
} else if (password.value === password_confirm.value && password_confirm.value.length > 0) {
password_confirm_notify.innerHTML = '<i class="icon icon-ok"></i>';
password_confirm_notify.parentNode.className = 'input-group-addon btn-success label-success';
passwordsmatch = true;
}
});
$(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';
password_confirm_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
passwordsmatch = false;
}
else {
password_confirm_notify.innerHTML = 'OK!';
password_confirm_notify.className = 'label label-success';
password_confirm_notify.innerHTML = '<i class="icon icon-ok"></i>';
password_confirm_notify.parentNode.className = 'input-group-addon btn-success label-success';
passwordsmatch = true;
}
});
@ -83,10 +87,10 @@
userexists = data.exists;
if (data.exists === true) {
username_notify.innerHTML = 'Username exists';
username_notify.className = 'label label-important';
username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
} else {
username_notify.innerHTML = 'OK!';
username_notify.className = 'label label-success';
username_notify.innerHTML = '<i class="icon icon-ok"></i>';
username_notify.parentNode.className = 'input-group-addon btn-success label-success';
}
});
@ -95,11 +99,11 @@
if (data.exists === true) {
email_notify.innerHTML = 'Email Address exists';
email_notify.className = 'label label-important';
email_notify.className = 'label label-warning';
}
else {
email_notify.innerHTML = 'OK!';
email_notify.className = 'label label-success';
email_notify.innerHTML = '<i class="icon icon-ok"></i>';
email_notify.parentNode.className = 'input-group-addon btn-success label-success';
}
});
@ -121,7 +125,7 @@
if (username.value.length < 2 || !usernamevalid) {
username_notify.innerHTML = 'Invalid username';
username_notify.className = 'label label-important';
username_notify.className = 'label label-warning';
validated = false;
}

@ -1,29 +1,64 @@
<h1>Login</h1>
<div class="row-fluid">
<div class="well {login_window:spansize}">
<h4>Login via Username &amp; Password</h4>
<div class="alert alert-error" id="error" style="display:none">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Failed Login Attempt</strong> <p></p>
<ol class="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
</li>
<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Login</span>
</li>
</ol>
<div class="row">
<div class="{login_window:spansize}">
<div class="well well-lg">
<div class="alert alert-error" id="error" style="display:none">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Failed Login Attempt</strong> <p></p>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
</div>
</div>
<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
</form>
<div id="login-error-notify" class="alert alert-danger hide">Invalid username/password</div>
</div>
<form>
<label>Username</label><input type="text" placeholder="Enter Username" name="username" id="username" /><br />
<label>Password</label><input type="password" placeholder="Enter Password" name="password" id="password" /><br />
<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
</form>
<div id="login-error-notify" class="alert alert-danger hide">Invalid username/password</div>
</div>
<div class="well span6 {alternate_logins:display}">
<h4>Alternative Logins</h4>
<ul class="alt-logins">
<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
</ul>
<div class="col-md-6 {alternate_logins:display}">
<div class="well well-lg">
<h4>Alternative Logins</h4>
<ul class="alt-logins">
<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
</ul>
</div>
</div>
</div>

@ -1,22 +1,78 @@
<h1>Register</h1>
<div class="row-fluid">
<div class="well {register_window:spansize}">
<form method="post" action="{relative_path}/register">
<label for="email">Email Address</label><input type="email" name="email" placeholder="Enter Email Address" id="email" /> <span id="email-notify" class="label label-important"></span><br />
<label for="username">Username</label><input type="text" name="username" placeholder="Enter Username" id="username" /> <span id="username-notify" class="label label-success"></span> <br />
<label for="password">Password</label><input type="password" name="password" placeholder="Enter Password" id="password" /> <span id="password-notify" class="label label-important"></span> <br />
<label for="password-confirm">Confirm Password</label><input type="password" name="password-confirm" placeholder="Confirm Password" id="password-confirm" /> <span id="password-confirm-notify" class="label label-important"></span> <br />
<input type="hidden" name="_csrf" value="{token}" />
<button class="btn btn-primary" id="register" type="submit">Register Now</button>
</form>
<ol class="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
</li>
<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Register</span>
</li>
</ol>
<div class="row">
<div class="{register_window:spansize}">
<div class="well well-lg">
<form class="form-horizontal" role="form" action="{relative_path}/register" method="post">
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email Address</label>
<div class="col-lg-8">
<div class="input-group">
<input class="form-control" type="text" placeholder="Enter Email Address" name="email" id="email" />
<span class="input-group-addon">
<span id="email-notify"><i class="icon icon-circle-blank"></i></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<div class="input-group">
<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
<span class="input-group-addon">
<span id="username-notify"><i class="icon icon-circle-blank"></i></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<div class="input-group">
<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
<span class="input-group-addon">
<span id="password-notify"><i class="icon icon-circle-blank"></i></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-lg-4 control-label">Confirm Password</label>
<div class="col-lg-8">
<div class="input-group">
<input class="form-control" type="password" placeholder="Confirm Password" name="password-confirm" id="password-confirm" />
<span class="input-group-addon">
<span id="password-confirm-notify"><i class="icon icon-circle-blank"></i></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-8">
<button class="btn btn-primary" id="register" type="submit">Register Now</button>
</div>
</div>
<input type="hidden" name="_csrf" value="{token}" />
</form>
</div>
</div>
<div class="well span6 {alternate_logins:display}">
<h4>Alternative Registration</h4>
<ul class="alt-logins">
<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
</ul>
<div class="col-md-6 {alternate_logins:display}">
<div class="well well-lg">
<h4>Alternative Registration</h4>
<ul class="alt-logins">
<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
</ul>
</div>
</div>
</div>

@ -63,12 +63,12 @@ var user = require('./../user.js'),
if (num_strategies == 0) {
data = {
'login_window:spansize': 'span12',
'login_window:spansize': 'col-md-12',
'alternate_logins:display': 'none'
};
} else {
data = {
'login_window:spansize': 'span6',
'login_window:spansize': 'col-md-6',
'alternate_logins:display': 'block'
}
for (var i=0, ii=num_strategies; i<ii; i++) {
@ -88,12 +88,12 @@ var user = require('./../user.js'),
if (num_strategies == 0) {
data = {
'register_window:spansize': 'span12',
'register_window:spansize': 'col-md-12',
'alternate_logins:display': 'none'
};
} else {
data = {
'register_window:spansize': 'span6',
'register_window:spansize': 'col-md-6',
'alternate_logins:display': 'block'
}
for (var i=0, ii=num_strategies; i<ii; i++) {

Loading…
Cancel
Save