365 lines
14 KiB
JavaScript
365 lines
14 KiB
JavaScript
$(document).ready(function () {
|
|
|
|
'use strict';
|
|
|
|
let usernameError = true,
|
|
emailError = true,
|
|
passwordError = false,
|
|
passConfirm = true;
|
|
|
|
// Detect browser for css purpose
|
|
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
|
|
$('.form form label').addClass('fontSwitch');
|
|
}
|
|
|
|
// Label effect
|
|
$('input').focus(function () {
|
|
$(this).siblings('label').addClass('active');
|
|
});
|
|
|
|
$('input').change(function () {
|
|
$(this).siblings('label').addClass('active');
|
|
});
|
|
|
|
// Form validation
|
|
$('input').blur(function () {
|
|
|
|
// User Name
|
|
if ($(this).hasClass('name')) {
|
|
if ($(this).val().length === 0) {
|
|
$(this).siblings('span.error').text('Bitte gib deinen gewünschten Nutzernamen ein').fadeIn().parent('.form-group').addClass('hasError');
|
|
usernameError = true;
|
|
} else if ($(this).val().length > 1 && $(this).val().length <= 4) {
|
|
$(this).siblings('span.error').text('Dein Name sollte länger als 4 Zeichen sein').fadeIn().parent('.form-group').addClass('hasError');
|
|
usernameError = true;
|
|
} else if($(this).val().match(/[^A-Za-z0-9._]/g)) {
|
|
$(this).siblings('span.error').text('Dein Name darf ausschließlich Groß- und Kleinbuchstaben, Zahlen sowie Unterstriche und Punkte enthalten.').fadeIn().css('bottom', '-40px').parent('.form-group').addClass('hasError');
|
|
usernameError = true;
|
|
} else {
|
|
$(this).siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
|
|
usernameError = false;
|
|
}
|
|
}
|
|
// Email
|
|
if ($(this).hasClass('email')) {
|
|
if ($(this).val().length == '') {
|
|
$(this).siblings('span.error').text('Bitte gib deine E-Mail Adresse ein, damit wir dein Konto aktivieren können').fadeIn().parent('.form-group').addClass('hasError');
|
|
emailError = true;
|
|
} else {
|
|
$(this).siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
|
|
emailError = false;
|
|
}
|
|
}
|
|
|
|
// PassWord
|
|
if ($(this).hasClass('pass')) {
|
|
var passErrText = "";
|
|
var passOffset = -20;
|
|
var containerBottomMargin = 0;
|
|
passwordError = false;
|
|
if ($(this).val().length < 8) {
|
|
passErrText += 'Dein Passwort sollte min. 8 Zeichen lang sein<br>';
|
|
passwordError = true;
|
|
containerBottomMargin += 5;
|
|
}
|
|
if (!/[a-z]/.test($(this).val())) {
|
|
passErrText += 'Dein Passwort sollte min. 1 Kleinbuchstaben enthalten<br>';
|
|
passOffset -= 17;
|
|
containerBottomMargin += 10;
|
|
passwordError = true;
|
|
}
|
|
if (!/[A-Z]/.test($(this).val())) {
|
|
passErrText += 'Dein Passwort sollte min. 1 Großbuchstaben enthalten<br>';
|
|
passOffset -= 17;
|
|
containerBottomMargin += 15;
|
|
passwordError = true;
|
|
}
|
|
if (!/[0-9]/.test($(this).val())) {
|
|
passErrText += 'Dein Passwort sollte min. 1 Zahl enthalten<br>';
|
|
passOffset -= 17;
|
|
containerBottomMargin += 20;
|
|
passwordError = true;
|
|
}
|
|
if (!/[^A-Za-z0-9]/.test($(this).val())) {
|
|
passErrText += 'Dein Passwort sollte min. 1 Sonderzeichen enthalten';
|
|
passOffset -= 17;
|
|
containerBottomMargin += 25;
|
|
passwordError = true;
|
|
}
|
|
if (!passwordError) {
|
|
$(this).siblings('span.error').css('bottom', '20px').html('').fadeOut().parent('.form-group').removeClass('hasError').css('margin-bottom', '5px');
|
|
passwordError = false;
|
|
} else {
|
|
$(this).siblings('span.error').css('bottom', passOffset).html(passErrText).fadeIn().parent('.form-group').addClass('hasError').css('margin-bottom', containerBottomMargin);
|
|
}
|
|
}
|
|
|
|
// PassWord confirmation
|
|
if ($('.pass').val() !== $('.passConfirm').val()) {
|
|
$('.passConfirm').siblings('.error').text('Passwörter stimmen nicht überein').fadeIn().parent('.form-group').addClass('hasError');
|
|
passConfirm = false;
|
|
} else {
|
|
$('.passConfirm').siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
|
|
passConfirm = false;
|
|
}
|
|
|
|
// label effect
|
|
if ($(this).val().length > 0) {
|
|
$(this).siblings('label').addClass('active');
|
|
} else {
|
|
$(this).siblings('label').removeClass('active');
|
|
}
|
|
});
|
|
|
|
|
|
// form switch
|
|
$('a.switch').click(function (e) {
|
|
$(this).toggleClass('active');
|
|
e.preventDefault();
|
|
|
|
if ($('a.switch').hasClass('active')) {
|
|
$(this).parents('.form-piece').addClass('switched').siblings('.form-piece').removeClass('switched');
|
|
} else {
|
|
$(this).parents('.form-piece').removeClass('switched').siblings('.form-piece').addClass('switched');
|
|
}
|
|
});
|
|
|
|
|
|
// Form submit
|
|
$('form.signup-form').submit(function (event) {
|
|
event.preventDefault();
|
|
|
|
if (usernameError || emailError || passwordError || passConfirm) {
|
|
$('.name, .email, .pass, .passConfirm').blur();
|
|
} else {
|
|
$('.signup, .login').addClass('switched');
|
|
|
|
setTimeout(function () {
|
|
$('.signup, .login').fadeOut();
|
|
}, 700);
|
|
setTimeout(function () {
|
|
$('.brand').addClass('active');
|
|
}, 300);
|
|
setTimeout(function () {
|
|
$('.heading').addClass('active');
|
|
}, 600);
|
|
setTimeout(function () {
|
|
$('.loading-msg i').addClass('active');
|
|
}, 900);
|
|
setTimeout(function () {
|
|
$('.form').fadeOut();
|
|
}, 700);
|
|
|
|
registerAccount($(".name").val(), $(".email").val(), $(".pass").val(), $(".passConfirm").val());
|
|
}
|
|
});
|
|
|
|
// Password form submit
|
|
$('form.password-form').submit(function (event) {
|
|
event.preventDefault();
|
|
|
|
if (passwordError || passConfirm) {
|
|
$('.pass, .passConfirm').blur();
|
|
} else {
|
|
$('.signup').addClass('switched');
|
|
|
|
setTimeout(function () {
|
|
$('.signup, .login').hide();
|
|
}, 700);
|
|
setTimeout(function () {
|
|
$('.brand').addClass('active');
|
|
}, 300);
|
|
setTimeout(function () {
|
|
$('.heading').addClass('active');
|
|
}, 600);
|
|
setTimeout(function () {
|
|
$('.loading-msg i').addClass('active');
|
|
}, 900);
|
|
setTimeout(function () {
|
|
$('.form').hide();
|
|
}, 700);
|
|
|
|
var password = $('.pass').val(),
|
|
passwordCon = $('.passConfirm').val(),
|
|
url = window.location.href;
|
|
|
|
console.log(url);
|
|
|
|
$.ajax({
|
|
url: url,
|
|
method: 'POST',
|
|
data: {
|
|
password: password,
|
|
passwordConfirm: passwordCon
|
|
},
|
|
success: function (data) {
|
|
console.log(data);
|
|
setTimeout(function () {
|
|
$('.loading-msg i').removeClass('active');
|
|
}, 1000);
|
|
setTimeout(function () {
|
|
$('.success-msg a').addClass('active');
|
|
}, 1550);
|
|
setTimeout(function () {
|
|
$('#messages').fadeOut().html(data.message).fadeIn().delay(100);
|
|
}, 1650);
|
|
if(data.type) {
|
|
setTimeout(function () {
|
|
$('.success-msg p').text("Dein Passwort wurde geändert! Du kannst dich nun damit einloggen.").addClass('active text-success');
|
|
}, 1200);
|
|
} else {
|
|
setTimeout(function () {
|
|
$('.success-msg p').text("Es ist ein unbekannter Fehler aufgetreten.").addClass('active text-danger');
|
|
}, 1200);
|
|
}
|
|
},
|
|
error: function (data) {
|
|
// TODO
|
|
console.log(data);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Reload page
|
|
$('a.profile').on('click', function () {
|
|
location.reload(true);
|
|
});
|
|
|
|
$('a.passwordForgot').on('click', function () {
|
|
if ($('#loginname').val().length === 0) {
|
|
$('#loginname').siblings('span.error').text('Bitte gib deinen Nutzernamen oder deine E-Mail-Adresse ein').fadeIn().parent('.form-group').addClass('hasError');
|
|
} else {
|
|
var loginname = $('#loginname').val();
|
|
$.ajax({
|
|
url: '/login/forget',
|
|
method: 'POST',
|
|
data: {
|
|
username: loginname
|
|
},
|
|
beforeSend: function () {
|
|
setTimeout(function () {
|
|
$('.signup, .login').hide();
|
|
}, 700);
|
|
setTimeout(function () {
|
|
$('.brand').addClass('active');
|
|
}, 300);
|
|
setTimeout(function () {
|
|
$('.heading').addClass('active');
|
|
}, 600);
|
|
setTimeout(function () {
|
|
$('.loading-msg i').addClass('active');
|
|
}, 900);
|
|
setTimeout(function () {
|
|
$('.form').hide();
|
|
}, 700);
|
|
},
|
|
success: function (data) {
|
|
setTimeout(function () {
|
|
$('.loading-msg i').removeClass('active');
|
|
}, 1000);
|
|
setTimeout(function () {
|
|
if (data.state) {
|
|
$('.success-msg p').addClass('text-success');
|
|
} else {
|
|
$('.success-msg p').addClass('text-danger');
|
|
}
|
|
$('.success-msg p').html(data.message).addClass('active');
|
|
}, 1200);
|
|
},
|
|
error: function (data) {
|
|
// TODO
|
|
console.log(data);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
function registerAccount(username, email, password, passwordRepeat) {
|
|
$.ajax({
|
|
url: "/login/register",
|
|
method: "POST",
|
|
data: {
|
|
username: username,
|
|
email: email,
|
|
password: password,
|
|
passwordRepeat: passwordRepeat
|
|
},
|
|
success: function (data) {
|
|
console.log(data);
|
|
setTimeout(function () {
|
|
$('.loading-msg i').removeClass('active');
|
|
}, 1000);
|
|
|
|
if(data.state) {
|
|
setTimeout(function () {
|
|
$('.success-msg p').text(data.endMessage).addClass('active');
|
|
$('.success-msg a').show();
|
|
}, 1200);
|
|
|
|
setTimeout(function () {
|
|
$('.success-msg a').addClass('active');
|
|
}, 1550);
|
|
} else {
|
|
setTimeout(() => {
|
|
$('.signup, .login').fadeIn();
|
|
$('.form').fadeIn();
|
|
}, 2200);
|
|
setTimeout(() => {
|
|
$('.signup').removeClass('switched');
|
|
}, 2550);
|
|
|
|
for(let error of data.errors) {
|
|
switch(error) {
|
|
case 'username':
|
|
$('.name').parent().addClass('hasError');
|
|
break;
|
|
case 'email':
|
|
$('.email').parent().addClass('hasError');
|
|
break;
|
|
case 'password':
|
|
$('.pass').parent().addClass('hasError');
|
|
break;
|
|
case 'passwordRepeat':
|
|
$('.passConfirm').parent().addClass('hasError');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
setTimeout(function () {
|
|
let messages = '';
|
|
for(message of data.messages) {
|
|
messages += `<div class="alert alert-${message.type}" role="alert">
|
|
<b>${message.headline}</b> ${message.body}
|
|
</div>`
|
|
}
|
|
$('#messages').fadeOut().html(messages).fadeIn().delay(100);
|
|
}, 1650);
|
|
},
|
|
error: function (data) {
|
|
console.log(data);
|
|
const registerResult = {
|
|
state: false,
|
|
messages: [],
|
|
endMessage: 'Leider ist ein unbekannter Fehler aufgetreten',
|
|
errors: []
|
|
};
|
|
|
|
setTimeout(function () {
|
|
$('.loading-msg i').removeClass('active');
|
|
}, 100);
|
|
setTimeout(function () {
|
|
$('.success-msg p').text(registerResult.endMessage).addClass('active');
|
|
}, 200);
|
|
setTimeout(function () {
|
|
$('.success-msg a').addClass('active');
|
|
}, 550);
|
|
setTimeout(function () {
|
|
// $('#messages').fadeOut().delay(100).html(registerResult.message).fadeIn();
|
|
}, 700);
|
|
}
|
|
});
|
|
}
|