From b1c6ab5a0da6244c768c74cdb7d66e6b6795ac65 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sat, 3 Mar 2018 16:21:41 +0100
Subject: [PATCH] [scss.global] updated BUTTONs to be more readable |
 [webpack.login] now works with API for CAS login

---
 webpack/data/login.js         |  9 ++++++++
 webpack/page/login.js         | 30 ++++++++++++++++++++-------
 webpack/scss/global.scss      |  8 +++----
 webpack/scss/layout.scss      | 39 +++++++++++++++++++++++++++++++++++
 webpack/vue/login_wrapper.vue |  3 ++-
 5 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/webpack/data/login.js b/webpack/data/login.js
index 7fd98d3..e54a387 100644
--- a/webpack/data/login.js
+++ b/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', '');
\ No newline at end of file
diff --git a/webpack/page/login.js b/webpack/page/login.js
index 5544c00..c7833de 100644
--- a/webpack/page/login.js
+++ b/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);
 
 };
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index c8243f3..c043dce 100644
--- a/webpack/scss/global.scss
+++ b/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;
 	}
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index e9a3938..a450118 100644
--- a/webpack/scss/layout.scss
+++ b/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{
 		}
 	}
 }
+
+
+
diff --git a/webpack/vue/login_wrapper.vue b/webpack/vue/login_wrapper.vue
index 8649491..fdb149b 100644
--- a/webpack/vue/login_wrapper.vue
+++ b/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>