[scss.global] updated BUTTONs to be more readable | [webpack.login] now works with API for CAS login
This commit is contained in:
parent
0a8a8dc802
commit
b1c6ab5a0d
|
@ -1,3 +1,12 @@
|
|||
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');
|
||||
|
||||
/* (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', '');
|
|
@ -28,16 +28,30 @@ window.pop = { closed: false };
|
|||
|
||||
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 ){
|
||||
|
||||
// TODO: notify FAILURE
|
||||
|
||||
}else
|
||||
document.location = '/';
|
||||
/* (2) Stop interval that checks if window closed */
|
||||
clearInterval(window.popint);
|
||||
|
||||
|
||||
} }, 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);
|
||||
|
||||
};
|
||||
|
|
|
@ -115,21 +115,21 @@ input[type=submit].neutral{
|
|||
padding: .5em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px dashed $form-neutral-color;
|
||||
border: 1px solid $form-neutral-color;
|
||||
|
||||
background: $bg-color center center no-repeat;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $form-neutral-color;
|
||||
color: darken($form-neutral-color, 15%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: color .2s ease-in-out,
|
||||
border-color .2s ease-in-out,
|
||||
border-color .1s ease-in-out,
|
||||
background .2s ease-in-out;
|
||||
|
||||
&:hover, &:focus{
|
||||
color: darken($form-neutral-color, 10%);
|
||||
color: darken($form-neutral-color, 35%);
|
||||
border-color: $primary-color;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
|
@ -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{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
|
@ -72,3 +108,6 @@ body{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -3,7 +3,8 @@
|
|||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue