From 067ef7de6a3312340ed21aacd0e999fb59c0ef63 Mon Sep 17 00:00:00 2001
From: Guillaume FAUVET <g.fauvet.perso@gmail.com>
Date: Thu, 7 Dec 2017 22:25:58 +0100
Subject: [PATCH] upt: public_html.css.header (add new background-image for
 user authentication) upt: public_html.css.layout (add new css for user
 authentication) upt: view.vue.header (add a button for showing login
 interface) upt: view.vue.wrapper (add a button for showing login interface)
 upt: view.home (add a reference to user authentication css) upt:
 view.vue-config (add boolean gstore.data.loginform to display user
 authentication interface)

---
 public_html/css/header.css |  2 ++
 public_html/css/layout.css | 24 ++++++++++++++++++++++++
 view/home.php              |  1 +
 view/vue-config.js         |  7 +++++--
 view/vue/header.vue        |  4 ++++
 view/vue/wrapper.vue       |  7 ++++---
 6 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/public_html/css/header.css b/public_html/css/header.css
index 190b772..11191b4 100644
--- a/public_html/css/header.css
+++ b/public_html/css/header.css
@@ -115,6 +115,7 @@
 #header-notif .hnotif.message{   background-image: url('/image/header/notif/message.svg@aaaaaa');   }
 #header-notif .hnotif.search{    background-image: url('/image/header/notif/search.svg@aaaaaa');    }
 #header-notif .hnotif.menu{      background-image: url('/image/header/notif/menu.svg@aaaaaa');      }
+#header-notif .hnotif.login{	 background-image: url('/image/header/notif/login.svg@aaaaaa');		}
 
 /* HOVER */
 #header-notif .hnotif:hover{
@@ -127,6 +128,7 @@
 #header-notif .hnotif.message:hover{   background-image: url('/image/header/notif/message.svg@23c795');   }
 #header-notif .hnotif.search:hover{    background-image: url('/image/header/notif/search.svg@ae51da');    }
 #header-notif .hnotif.menu:hover{      background-image: url('/image/header/notif/menu.svg@4a8ad8');      }
+#header-notif .hnotif.login:hover{	 background-image: url('/image/header/notif/login.svg@660088');		  }
 
 
 
diff --git a/public_html/css/layout.css b/public_html/css/layout.css
index 9435521..60b6a1f 100644
--- a/public_html/css/layout.css
+++ b/public_html/css/layout.css
@@ -116,4 +116,28 @@ body{
 
 #WRAPPER #NOTIF-STACK.active{
 	display: block;
+}
+
+/* Login form authentication */
+#WRAPPER #LOGIN-FORM{
+	display: none;
+	position: absolute;
+	top: 4em;
+	left: calc( 100% - 21em );
+	width: 20em;
+	min-height: 2em;
+	height: auto;
+
+	border: 1px solid #ddd;
+	border-radius: 3px;
+
+	background-color: #fff;
+
+	overflow: hidden;
+
+	z-index: 101;
+}
+
+#WRAPPER #LOGIN-FORM.active{
+	display: block;
 }
\ No newline at end of file
diff --git a/view/home.php b/view/home.php
index a50101e..5aeffb4 100755
--- a/view/home.php
+++ b/view/home.php
@@ -19,6 +19,7 @@
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container.css'>
 		<link rel='stylesheet' type='text/css' href='/css/notification-stack.css'>
+        <link rel='stylesheet' type='text/css' href='/css/login-form.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>
diff --git a/view/vue-config.js b/view/vue-config.js
index 58a9eff..512e1cc 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -14,7 +14,7 @@ gstore.add('notif', {
 	event:     { class: 'event',     data: [], count: 0 },
 	inbox:     { class: 'message',   data: [], count: 0 },
 	dashboard: { class: 'menu',      data: [], count: 0 }
-})
+});
 
 // Menu
 gstore.add('menu_item', {
@@ -140,4 +140,7 @@ gstore.add('msg_pending', {
 gstore.add('nstack', false);
 
 // location
-gstore.add('loc', [0, 0]);
\ No newline at end of file
+gstore.add('loc', [0, 0]);
+
+// login form authentication visibility
+gstore.add('loginform', true);
diff --git a/view/vue/header.vue b/view/vue/header.vue
index c5913e4..a5290fe 100644
--- a/view/vue/header.vue
+++ b/view/vue/header.vue
@@ -13,6 +13,7 @@
 		<!-- Header Notif -->
 		<div id='header-notif'>
 			<div v-for='(notif, link) in gstore.notif' @click='show_notif(link)' :class='"hnotif " + notif.class' :data-count='notif.count'></div>
+			<div @click='show_login()' class='hnotif login'></div>
 		</div>
 
 	</div>
@@ -27,6 +28,9 @@ export default {
 	methods: {
 		show_notif(uri){
 			this.gstore.func.nav(this.$router, uri);
+		},
+		show_login() {
+			this.gstore.loginform = !this.gstore.loginform;
 		}
 	}
 }
diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue
index d0c649b..18af9fc 100755
--- a/view/vue/wrapper.vue
+++ b/view/vue/wrapper.vue
@@ -15,7 +15,7 @@
 		<notifstack-comp></notifstack-comp>
 
 		<!-- Login form -->
-		<!-- <loginform-comp></loginform-comp> -->
+		<loginform-comp></loginform-comp>
 
 	</div>
 </template>
@@ -26,7 +26,7 @@
 	import header_vue from './header.vue'
 	import menu_vue   from './menu.vue'
 	import notifstack_vue  from './notification-stack.vue'
-	// import loginform_vue   from './login-form.vue'
+	import loginform_vue   from './login-form.vue'
 
 	export default {
 		name: 'wrapper',
@@ -34,7 +34,8 @@
 		components: {
 			'HeaderComp':     header_vue,
 			'MenuComp':       menu_vue,
-			'NotifstackComp': notifstack_vue
+			'NotifstackComp': notifstack_vue,
+			'LoginformComp': loginform_vue
 		}
 	}