2018-10-16 16:28:42 +00:00
$ ( 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 ;
$ . ajax ( {
url : url ,
method : 'POST' ,
data : {
password : password ,
passwordConfirm : passwordCon
} ,
success : function ( 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
}
} ) ;
}
} ) ;
// 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 ( {
2018-10-17 11:56:22 +00:00
url : '/login/forget' ,
2018-10-16 16:28:42 +00:00
method : 'POST' ,
data : {
username : loginname
} ,
beforeSend : function ( ) {
setTimeout ( function ( ) {
$ ( '.brand' ) . addClass ( 'active' ) ;
} , 300 ) ;
setTimeout ( function ( ) {
$ ( '.heading' ) . addClass ( 'active' ) ;
} , 600 ) ;
2018-10-28 16:36:46 +00:00
setTimeout ( function ( ) {
$ ( '.signup, .login, .form' ) . hide ( ) ;
} , 700 ) ;
2018-10-16 16:28:42 +00:00
setTimeout ( function ( ) {
$ ( '.loading-msg i' ) . addClass ( 'active' ) ;
} , 900 ) ;
} ,
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' ) ;
2018-10-28 16:36:46 +00:00
$ ( '.success-msg a' ) . text ( 'Zurück' ) . addClass ( 'active' ) . click ( function ( e ) {
e . preventDefault ( ) ;
setTimeout ( ( ) => {
$ ( '.brand' ) . removeClass ( 'active' ) ;
} , 300 ) ;
setTimeout ( ( ) => {
$ ( '.heading' ) . removeClass ( 'active' ) ;
} , 600 ) ;
setTimeout ( ( ) => {
$ ( '.signup, .login, .form' ) . show ( ) ;
} , 700 ) ;
setTimeout ( ( ) => {
$ ( '.success-msg p' ) . removeClass ( 'text-danger text-success active' ) ;
$ ( this ) . removeClass ( 'active' ) ;
} , 900 ) ;
} ) ;
2018-10-16 16:28:42 +00:00
} , 1200 ) ;
} ,
error : function ( data ) {
// TODO
}
} ) ;
}
} ) ;
} ) ;
function registerAccount ( username , email , password , passwordRepeat ) {
$ . ajax ( {
2018-10-17 11:56:22 +00:00
url : "/login/register" ,
2018-10-16 16:28:42 +00:00
method : "POST" ,
data : {
username : username ,
email : email ,
password : password ,
passwordRepeat : passwordRepeat
} ,
success : function ( 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 > $ { m e s s a g e . b o d y }
< / d i v > `
}
$ ( '#messages' ) . fadeOut ( ) . html ( messages ) . fadeIn ( ) . delay ( 100 ) ;
} , 1650 ) ;
} ,
error : function ( 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 ) ;
}
} ) ;
}