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

webpack/data/login.js

@@ -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', '');

webpack/page/login.js

@@ -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);
 
 };

webpack/scss/global.scss

@@ -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;
 	}

webpack/scss/layout.scss

@@ -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{
 		}
 	}
 }
+
+
+

webpack/vue/login_wrapper.vue

@@ -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>