parent
419a246bbc
commit
120dbe1fc8
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -1,58 +1,68 @@
|
|||||||
(function( $ ) {
|
(function( $ ) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Active header on scroll (970 Design - task 3)
|
// QSS Login
|
||||||
const header = $('.header');
|
let form = $('.login-form'),
|
||||||
|
loader = $('.loader-wrapper'),
|
||||||
|
message = $('.message'),
|
||||||
|
logout = $('.button-logout'),
|
||||||
|
token = sessionStorage.getItem('token');
|
||||||
|
|
||||||
$(window).scroll(function() {
|
// Check if token exists
|
||||||
let scroll = window.pageYOffset;
|
if (token) {
|
||||||
|
form.hide();
|
||||||
if (scroll > 100) {
|
message.html('You are still logged in successfully, Q person!');
|
||||||
header.addClass('active');
|
logout.fadeIn();
|
||||||
} else {
|
|
||||||
header.removeClass('active');
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Mobile navigation toggle
|
form.submit(function(e) {
|
||||||
$(document).ready(function($) {
|
e.preventDefault();
|
||||||
let toggleMobileNav = function() {
|
let email = $('#email').val(),
|
||||||
let menu = $('.menu'),
|
password = $('#password').val();
|
||||||
mobileNav = $('.mobile-nav'),
|
|
||||||
menuOpen = false;
|
|
||||||
|
|
||||||
// Check if .mobile-nav is visible
|
// validate user input
|
||||||
if (mobileNav.is(':visible')) {
|
if (!email || !password) {
|
||||||
mobileNav.click(function() {
|
console.error('Email and password are required.');
|
||||||
if (!menuOpen) {
|
message.html('Please enter your email and password.');
|
||||||
menu.slideDown();
|
return;
|
||||||
menuOpen = true;
|
|
||||||
mobileNav.addClass('active');
|
|
||||||
} else {
|
|
||||||
menu.slideUp();
|
|
||||||
menuOpen = false;
|
|
||||||
mobileNav.removeClass('active');
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
$(document).click(function(event) {
|
$.ajax({
|
||||||
if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) {
|
url: 'https://symfony-skeleton.q-tests.com/api/v2/token',
|
||||||
if (menuOpen) {
|
type: 'POST',
|
||||||
menu.slideUp();
|
data: JSON.stringify({ email: email, password: password }),
|
||||||
menuOpen = false;
|
dataType: 'json',
|
||||||
mobileNav.removeClass('active');
|
contentType: 'application/json',
|
||||||
}
|
beforeSend: function(){
|
||||||
|
loader.fadeIn();
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
// store token in session for one day
|
||||||
|
let token = response.token,
|
||||||
|
expiresAt = new Date().getTime() + (24 * 60 * 60 * 1000);
|
||||||
|
sessionStorage.setItem('token', token);
|
||||||
|
sessionStorage.setItem('expiresAt', expiresAt);
|
||||||
|
loader.fadeOut();
|
||||||
|
form.hide();
|
||||||
|
message.html('Logged in successful, welcome Q person!');
|
||||||
|
logout.fadeIn();
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
console.error(error);
|
||||||
|
loader.fadeOut();
|
||||||
|
message.html('Connection failed, try different credentials.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
});
|
||||||
menu.show();
|
|
||||||
mobileNav.off("click");
|
|
||||||
$(document).off("click", "**");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleMobileNav();
|
logout.click(function() {
|
||||||
$(window).resize(toggleMobileNav);
|
sessionStorage.removeItem('token');
|
||||||
|
message.html('You have been logged out.');
|
||||||
|
logout.hide();
|
||||||
|
form.fadeIn();
|
||||||
|
setTimeout(function() {
|
||||||
|
message.html('');
|
||||||
|
}, 3000);
|
||||||
});
|
});
|
||||||
|
|
||||||
})( jQuery );
|
})( jQuery );
|
||||||
|
|||||||
Loading…
Reference in new issue