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( $ ) {
|
||||
'use strict';
|
||||
|
||||
// Active header on scroll (970 Design - task 3)
|
||||
const header = $('.header');
|
||||
// QSS Login
|
||||
let form = $('.login-form'),
|
||||
loader = $('.loader-wrapper'),
|
||||
message = $('.message'),
|
||||
logout = $('.button-logout'),
|
||||
token = sessionStorage.getItem('token');
|
||||
|
||||
$(window).scroll(function() {
|
||||
let scroll = window.pageYOffset;
|
||||
|
||||
if (scroll > 100) {
|
||||
header.addClass('active');
|
||||
} else {
|
||||
header.removeClass('active');
|
||||
// Check if token exists
|
||||
if (token) {
|
||||
form.hide();
|
||||
message.html('You are still logged in successfully, Q person!');
|
||||
logout.fadeIn();
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile navigation toggle
|
||||
$(document).ready(function($) {
|
||||
let toggleMobileNav = function() {
|
||||
let menu = $('.menu'),
|
||||
mobileNav = $('.mobile-nav'),
|
||||
menuOpen = false;
|
||||
form.submit(function(e) {
|
||||
e.preventDefault();
|
||||
let email = $('#email').val(),
|
||||
password = $('#password').val();
|
||||
|
||||
// Check if .mobile-nav is visible
|
||||
if (mobileNav.is(':visible')) {
|
||||
mobileNav.click(function() {
|
||||
if (!menuOpen) {
|
||||
menu.slideDown();
|
||||
menuOpen = true;
|
||||
mobileNav.addClass('active');
|
||||
} else {
|
||||
menu.slideUp();
|
||||
menuOpen = false;
|
||||
mobileNav.removeClass('active');
|
||||
// validate user input
|
||||
if (!email || !password) {
|
||||
console.error('Email and password are required.');
|
||||
message.html('Please enter your email and password.');
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
$(document).click(function(event) {
|
||||
if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) {
|
||||
if (menuOpen) {
|
||||
menu.slideUp();
|
||||
menuOpen = false;
|
||||
mobileNav.removeClass('active');
|
||||
}
|
||||
$.ajax({
|
||||
url: 'https://symfony-skeleton.q-tests.com/api/v2/token',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({ email: email, password: password }),
|
||||
dataType: 'json',
|
||||
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();
|
||||
$(window).resize(toggleMobileNav);
|
||||
logout.click(function() {
|
||||
sessionStorage.removeItem('token');
|
||||
message.html('You have been logged out.');
|
||||
logout.hide();
|
||||
form.fadeIn();
|
||||
setTimeout(function() {
|
||||
message.html('');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
||||
Loading…
Reference in new issue