[scss.global] updated BUTTONs to be more readable | [webpack.login] now works with API for CAS login

This commit is contained in:
xdrm-brackets 2018-03-03 16:21:41 +01:00
parent 0a8a8dc802
commit b1c6ab5a0d
5 changed files with 76 additions and 13 deletions

View File

@ -1,3 +1,12 @@
gstore.add('popup_click', function(){ gstore.add('popup_click', function(){
/* (1) Open popup */
window.pop = window.open('https://sso.univ-pau.fr/cas/login?service=http://ptut.com:8080/api/v/1.0/cas', '_blank', 'location=no,height=1024,width=1024,scrollbars=yes,status=no'); window.pop = window.open('https://sso.univ-pau.fr/cas/login?service=http://ptut.com:8080/api/v/1.0/cas', '_blank', 'location=no,height=1024,width=1024,scrollbars=yes,status=no');
/* (2) If popup closed -> abort */
window.popint = setInterval(function(){ window.pop.closed && window.cas_callback(null); }, 500);
}); });
gstore.add('login_class', 'neutral');
gstore.add('login_error_text', '');

View File

@ -28,16 +28,30 @@ window.pop = { closed: false };
window.cas_callback = function(cas_login){ window.cas_callback = function(cas_login){
setTimeout( function(){ if( window.pop.closed ){ /* (1) Wait 1ms for popup to really be closed */
setTimeout( function(){ if( window.pop.closed ){
if( cas_login === null ){ /* (2) Stop interval that checks if window closed */
clearInterval(window.popint);
// TODO: notify FAILURE
}else
document.location = '/';
} }, 1); /* (3) If no login -> error */
if( cas_login === null ){
gstore.get.login_error_text = 'Erreur de connexion. Veuillez réessayer.';
gstore.get.login_class = 'invalid';
setTimeout(function(){ gstore.get.login_class = 'neutral'; }, 1500);
/* (4) If login -> reload page */
}else{
gstore.get.login_error_text = 'Vous êtes connectés. Vous allez être redirigé.';
gstore.get.login_class = 'valid';
setTimeout(function(){ document.location = '/'; }, 1500);
}
} }, 1);
}; };

View File

@ -115,21 +115,21 @@ input[type=submit].neutral{
padding: .5em 1em; padding: .5em 1em;
border-radius: 3px; border-radius: 3px;
border: 1px dashed $form-neutral-color; border: 1px solid $form-neutral-color;
background: $bg-color center center no-repeat; background: $bg-color center center no-repeat;
text-transform: uppercase; text-transform: uppercase;
color: $form-neutral-color; color: darken($form-neutral-color, 15%);
cursor: pointer; cursor: pointer;
transition: color .2s ease-in-out, transition: color .2s ease-in-out,
border-color .2s ease-in-out, border-color .1s ease-in-out,
background .2s ease-in-out; background .2s ease-in-out;
&:hover, &:focus{ &:hover, &:focus{
color: darken($form-neutral-color, 10%); color: darken($form-neutral-color, 35%);
border-color: $primary-color; border-color: $primary-color;
background-color: #fff; background-color: #fff;
} }

View File

@ -32,6 +32,42 @@ body{
} }
#WRAPPER.login{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
#LOGIN_REDIRECT{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
span{
display: block;
text-align: center;
margin: 1em;
color: $form-invalid-color;
&.valid{ color: $form-valid-color; }
opacity: 0;
transition: opacity .2s ease-in-out;
&.invalid, &.valid{
opacity: 1;
}
}
}
}
#cont404{ #cont404{
display: flex; display: flex;
position: fixed; position: fixed;
@ -72,3 +108,6 @@ body{
} }
} }
} }

View File

@ -3,7 +3,8 @@
<div id='LOGIN_REDIRECT'> <div id='LOGIN_REDIRECT'>
<button class='valid' @click='gstore.popup_click'>Login button</button> <button :class='gstore.login_class' @click='gstore.popup_click'>Me connecter</button>
<span :class='gstore.login_class'>{{ gstore.login_error_text }}</span>
</div> </div>