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

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

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

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>

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]);
+gstore.add('loc', [0, 0]);
+
+// login form authentication visibility
+gstore.add('loginform', true);

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

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