esqueleto basico
This commit is contained in:
Sergio
parent
8eb441e5f5
commit
0dc723713d
350 changed files with 90726 additions and 0 deletions
399
bower_components/jbox/Demo/Playground/Playground.Login.js
vendored
Normal file
399
bower_components/jbox/Demo/Playground/Playground.Login.js
vendored
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
|
||||
/* Playground Demo: Login */
|
||||
|
||||
/*
|
||||
|
||||
This playground demo is still in production
|
||||
|
||||
I will improve this shortly and add the options to recover and reset the password
|
||||
|
||||
Let me know if you have questions or ideas how to improve this login modal:
|
||||
|
||||
stephanwagner.me@gmail.com
|
||||
|
||||
*/
|
||||
|
||||
|
||||
// We are ssetting up a global variable where we can adjust html and texts
|
||||
|
||||
var jBoxLogin = {
|
||||
jBox: null,
|
||||
|
||||
|
||||
// The html of each of the content containers
|
||||
|
||||
html: {
|
||||
login: '<div id="LoginContainer-login" class="login-container"><div class="login-body"><input type="text" id="loginUsername" class="login-textfield" placeholder="Username" autocorrect="off" autocapitalize="off" spellcheck="false"><input type="password" id="loginPassword" class="login-textfield" placeholder="Password" autocorrect="off" autocapitalize="off" spellcheck="false"><div class="login-remember"><div class="login-checkbox"><div class="login-checkbox-check"></div></div><div class="login-checkbox-label">Remember me</div><input type="hidden" name="login-remember" value="1"></div><button class="login-button">Login</button></div><div class="login-footer"><span onclick="jBoxLogin.jBox.showContent(\'register\')">Create new account</span><br><span style="display: none" onclick="jBoxLogin.jBox.showContent(\'password-recovery\')">Forgot password?</span></div></div>',
|
||||
register: '<div id="LoginContainer-register" class="login-container"><div class="login-body"><input type="text" id="registerUsername" class="login-textfield" placeholder="Username" maxlength="24" autocorrect="off" autocapitalize="off" spellcheck="false"><input type="text" id="registerEmail" class="login-textfield" placeholder="Email address" maxlength="128" autocorrect="off" autocapitalize="off" spellcheck="false"><div class="login-textfield-wrapper"><input type="password" class="login-textfield" id="registerPassword" placeholder="Password" maxlength="32" autocorrect="off" autocapitalize="off" spellcheck="false"><div class="password-strength" style="display: none"></div></div><button class="login-button">Create account</button></div><div class="login-footer"><span onclick="jBoxLogin.jBox.showContent(\'login\')">Already registered? Login!</span></div></div>',
|
||||
passwordRecovery: '', // TODO '<div id="LoginContainer-password-recovery" class="login-container"><div class="login-body"><input type="text" class="login-textfield" placeholder="Email address" autocorrect="off" autocapitalize="off" spellcheck="false"><button class="login-button">Reset password</button></div><div class="login-footer"><span onclick="jBoxLogin.jBox.showContent(\'login\')">Already registered? Login!</span></div></div>',
|
||||
passwordReset: '' // TODO '<div id="LoginContainer-password-reset" class="login-container"><div class="login-body"><input type="text" placeholder="Recovery Code"><input type="password" placeholder="Password" autocorrect="off" autocapitalize="off" spellcheck="false"><button class="login-button">Reset password</button></div><div class="login-footer"><span onclick="jBoxLogin.jBox.showContent(\'login\')">Already registered? Login!</span></div></div>'
|
||||
},
|
||||
|
||||
|
||||
// Corresponding titles for content elements
|
||||
|
||||
title: {
|
||||
login: 'Login',
|
||||
register: 'Create new account',
|
||||
// TODO passwordRecovery: 'Recover password',
|
||||
// TODO passwordReset: 'Reset password'
|
||||
},
|
||||
|
||||
|
||||
// These tooltips will show when a textelemet gets focus
|
||||
|
||||
textfieldTooltips: {
|
||||
loginUsername: 'For this demo the username is "username"',
|
||||
loginPassword: 'For this demo the password is "password"',
|
||||
registerUsername: 'Choose a unique username',
|
||||
registerEmail: 'Your email address',
|
||||
registerPassword: 'Be tricky, use numbers and special characters'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
// On domready create the login modal
|
||||
|
||||
jBoxLogin.jBox = new jBox('Modal', {
|
||||
|
||||
// Unique id for CSS access
|
||||
id: 'jBoxLogin',
|
||||
|
||||
// Dimensions
|
||||
width: 320, // TODO move to global var
|
||||
height: 350,
|
||||
|
||||
// Attach to elements
|
||||
attach: '#DemoLogin',
|
||||
|
||||
// Create the content with the html provided in global var
|
||||
content: '<div id="LoginWrapper">' + jBoxLogin.html.login + jBoxLogin.html.register + jBoxLogin.html.passwordRecovery + jBoxLogin.html.passwordReset + '</div>',
|
||||
|
||||
// When the jBox is being initialized add internal functions
|
||||
onInit: function () {
|
||||
|
||||
// Internal function to show content
|
||||
this.showContent = function (id, force) {
|
||||
|
||||
// Abort if an ajax call is loading
|
||||
if (!force && $('#LoginWrapper').hasClass('request-running')) return null;
|
||||
|
||||
// Set the title depending on id
|
||||
this.setTitle(jBoxLogin.title[id]);
|
||||
|
||||
// Show content depending on id
|
||||
$('.login-container.active').removeClass('active');
|
||||
$('#LoginContainer-' + id).addClass('active');
|
||||
|
||||
// Remove error tooltips
|
||||
// TODO only loop through active elements or store tooltips in global var rather than on the element
|
||||
$.each(jBoxLogin.textfieldTooltips, function (id, tt) {
|
||||
$('#' + id).data('jBoxTextfieldError') && $('#' + id).data('jBoxTextfieldError').close();
|
||||
});
|
||||
};
|
||||
|
||||
// Initially show content for login
|
||||
this.showContent('login', true);
|
||||
|
||||
// Add focus and blur events to textfields
|
||||
$.each(jBoxLogin.textfieldTooltips, function (id, tt) {
|
||||
|
||||
// Focus an textelement
|
||||
$('#' + id).on('focus', function () {
|
||||
|
||||
// When there is an error tooltip close it
|
||||
$(this).data('jBoxTextfieldError') && $(this).data('jBoxTextfieldError').close();
|
||||
|
||||
// Remove the error state from the textfield
|
||||
$(this).removeClass('textfield-error');
|
||||
|
||||
// Store the tooltip jBox in the elements data
|
||||
if (!$(this).data('jBoxTextfieldTooltip')) {
|
||||
|
||||
// TODO create a small jbox plugin
|
||||
|
||||
$(this).data('jBoxTextfieldTooltip', new jBox('Tooltip', {
|
||||
width: 310, // TODO use modal width - 10
|
||||
theme: 'TooltipSmall',
|
||||
addClass: 'LoginTooltipSmall',
|
||||
target: $(this),
|
||||
position: {
|
||||
x: 'left',
|
||||
y: 'top'
|
||||
},
|
||||
outside: 'y',
|
||||
offset: {
|
||||
y: 6,
|
||||
x: 8
|
||||
},
|
||||
pointer: 'left:17',
|
||||
content: tt,
|
||||
animation: 'move'
|
||||
}));
|
||||
}
|
||||
$(this).data('jBoxTextfieldTooltip').open();
|
||||
|
||||
// Loose focus of textelement
|
||||
}).on('blur', function () {
|
||||
$(this).data('jBoxTextfieldTooltip').close();
|
||||
});
|
||||
});
|
||||
|
||||
// Internal function to show errors
|
||||
this.showError = function (element, message) {
|
||||
|
||||
if (!element.data('errorTooltip')) {
|
||||
|
||||
// TODO add the error class here
|
||||
|
||||
element.data('errorTooltip', new jBox('Tooltip', {
|
||||
width: 310,
|
||||
theme: 'TooltipError',
|
||||
addClass: 'LoginTooltipError',
|
||||
target: element,
|
||||
position: {
|
||||
x: 'left',
|
||||
y: 'top'
|
||||
},
|
||||
outside: 'y',
|
||||
offset: {
|
||||
y: 6
|
||||
},
|
||||
pointer: 'left:9',
|
||||
content: message,
|
||||
animation: 'move'
|
||||
}));
|
||||
}
|
||||
|
||||
element.data('errorTooltip').open();
|
||||
};
|
||||
|
||||
// Internal function to change checkbox state
|
||||
this.toggleCheckbox = function () {
|
||||
// Abort if an ajax call is loading
|
||||
if ($('#LoginWrapper').hasClass('request-running')) return null;
|
||||
|
||||
$('.login-checkbox').toggleClass('login-checkbox-active');
|
||||
};
|
||||
|
||||
// Add checkbox events to checkbox and label
|
||||
$('.login-checkbox, .login-checkbox-label').on('click', function () {
|
||||
this.toggleCheckbox();
|
||||
}.bind(this));
|
||||
|
||||
// Parse an ajax repsonse
|
||||
this.parseResponse = function(response) {
|
||||
try {
|
||||
response = JSON.parse(response.responseText || response);
|
||||
} catch (e) {}
|
||||
return response;
|
||||
};
|
||||
|
||||
// Show a global error
|
||||
this.globalError = function () {
|
||||
new jBox('Notice', {
|
||||
color: 'red',
|
||||
content: 'Oops, something went wrong.',
|
||||
attributes: {
|
||||
x: 'right',
|
||||
y: 'bottom'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Internal function to disable or enable the form while request is running
|
||||
this.startRequest = function() {
|
||||
this.toggleRequest();
|
||||
}.bind(this);
|
||||
|
||||
this.completeRequest = function() {
|
||||
this.toggleRequest(true);
|
||||
}.bind(this);
|
||||
|
||||
this.toggleRequest = function (enable) {
|
||||
$('#LoginWrapper')[enable ? 'removeClass' : 'addClass']('request-running');
|
||||
$('#LoginWrapper button')[enable ? 'removeClass' : 'addClass']('loading-bar');
|
||||
$('#LoginWrapper input, #LoginWrapper button').attr('disabled', enable ? false : 'disabled');
|
||||
}.bind(this);
|
||||
|
||||
// Bind ajax login function to login button
|
||||
$('#LoginContainer-login button').on('click', function () {
|
||||
$.ajax({
|
||||
url: 'https://stephanwagner.me/PlaygroundLogin/login',
|
||||
data: {
|
||||
username: $('#loginUsername').val(),
|
||||
password: $('#loginPassword').val(),
|
||||
remember: $('.login-checkbox').hasClass('login-checkbox-active') ? 1 : 0
|
||||
},
|
||||
method: 'post',
|
||||
beforeSend: function () {
|
||||
this.startRequest();
|
||||
}.bind(this),
|
||||
|
||||
// Ajax call successfull
|
||||
success: function (response) {
|
||||
this.completeRequest();
|
||||
response = this.parseResponse(response);
|
||||
|
||||
// Login successfull
|
||||
if (response.success) {
|
||||
|
||||
this.close();
|
||||
|
||||
new jBox('Notice', {
|
||||
color: 'green',
|
||||
content: 'You are now logged in',
|
||||
attributes: {
|
||||
x: 'right',
|
||||
y: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Redirect or own login behavior here
|
||||
|
||||
|
||||
// Login failed
|
||||
} else {
|
||||
// Shake submit button
|
||||
this.animate('shake', {element: $('#LoginContainer-login button')});
|
||||
|
||||
if (response.errors) {
|
||||
// Show error on textfields, for login no error tooltips neccessary, username or password is wrong
|
||||
$('#loginUsername, #loginPassword').addClass('textfield-error');
|
||||
} else {
|
||||
// Backend error
|
||||
this.globalError();
|
||||
}
|
||||
}
|
||||
}.bind(this),
|
||||
|
||||
// Ajax call failed
|
||||
error: function () {
|
||||
this.completeRequest();
|
||||
this.animate('shake', {element: $('#LoginContainer-login button')});
|
||||
this.globalError();
|
||||
}.bind(this)
|
||||
});
|
||||
|
||||
}.bind(this));
|
||||
|
||||
// Bind ajax register function to register button
|
||||
$('#LoginContainer-register button').on('click', function () {
|
||||
$.ajax({
|
||||
url: 'https://stephanwagner.me/PlaygroundLogin/register',
|
||||
data: {
|
||||
username: $('#registerUsername').val(),
|
||||
email: $('#registerEmail').val(),
|
||||
password: $('#registerPassword').val()
|
||||
},
|
||||
method: 'post',
|
||||
beforeSend: function () {
|
||||
this.startRequest();
|
||||
}.bind(this),
|
||||
|
||||
success: function (response) {
|
||||
this.completeRequest();
|
||||
response = this.parseResponse(response);
|
||||
|
||||
// Registration successfull
|
||||
if (response.success) {
|
||||
|
||||
this.close();
|
||||
|
||||
new jBox('Notice', {
|
||||
color: 'green',
|
||||
content: 'Your account was created',
|
||||
attributes: {
|
||||
x: 'right',
|
||||
y: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Redirect or own register behavior here
|
||||
|
||||
|
||||
// Registration failed
|
||||
} else {
|
||||
// Shake submit button
|
||||
this.animate('shake', {element: $('#LoginContainer-register button')});
|
||||
|
||||
if (response.errors) {
|
||||
|
||||
// Loop through errors and open tooltips
|
||||
$.each(response.errors, function (id, error) {
|
||||
|
||||
// TODO Only one tooltip at a time
|
||||
|
||||
var id_selector = 'register' + (id).substr(0,1).toUpperCase() + (id).substr(1);
|
||||
|
||||
$('#' + id_selector).addClass('textfield-error');
|
||||
|
||||
if (!$('#' + id_selector).data('jBoxTextfieldError')) {
|
||||
$('#' + id_selector).data('jBoxTextfieldError', new jBox('Tooltip', {
|
||||
width: 310,
|
||||
theme: 'TooltipError',
|
||||
addClass: 'LoginTooltipError',
|
||||
target: $('#' + id_selector),
|
||||
position: {
|
||||
x: 'left',
|
||||
y: 'top'
|
||||
},
|
||||
outside: 'y',
|
||||
offset: {
|
||||
y: 6,
|
||||
x: 8
|
||||
},
|
||||
pointer: 'left:17',
|
||||
//content: error,
|
||||
animation: 'move'
|
||||
}));
|
||||
}
|
||||
|
||||
$('#' + id_selector).data('jBoxTextfieldError').setContent(error).open();
|
||||
|
||||
});
|
||||
|
||||
// Backend error
|
||||
} else {
|
||||
this.globalError();
|
||||
}
|
||||
}
|
||||
}.bind(this),
|
||||
|
||||
// Ajax call failed
|
||||
error: function () {
|
||||
this.completeRequest();
|
||||
this.animate('shake', {element: $('#RegisterContainer-login button')});
|
||||
this.globalError();
|
||||
}.bind(this)
|
||||
});
|
||||
|
||||
}.bind(this));
|
||||
|
||||
},
|
||||
onOpen: function () {
|
||||
|
||||
// Go back to login when we open the modal
|
||||
this.showContent('login', true);
|
||||
|
||||
},
|
||||
onClose: function () {
|
||||
|
||||
// TODO reset form completely
|
||||
// TODO only close jBox with close button, not on overlay click
|
||||
|
||||
// Remove error tooltips
|
||||
// TODO Better to reset the form, this loop is also in showContent
|
||||
$.each(jBoxLogin.textfieldTooltips, function (id, tt) {
|
||||
$('#' + id).data('jBoxTextfieldError') && $('#' + id).data('jBoxTextfieldError').close();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue