upt: public_html.css.layout (css for sign up form)

upt: public_html.css.login-form (add new css for sign up button)
upt: view.vue.header (close sign up form on menu click)
upt: view.vue.login-form (add sign up button in the login form authentication)
upt: view.vue.wrapper (add new popup for sign up)
upt: view.home (add reference css for sign up)
upt: view.vue-config (add gstore.add.signupform for popup sign up visibility)

public_html/css/layout.css

@@ -141,3 +141,27 @@ body{
 #WRAPPER #LOGIN-FORM.active{
 	display: block;
 }
+
+/* Sign up form authentication */
+#WRAPPER #SIGNUP-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 #SIGNUP-FORM.active{
+	display: block;
+}

public_html/css/login-form.css

@@ -64,41 +64,62 @@
 	border-color: #ff0000;
 }
 
-#LOGIN-FORM > .body > form > #btn-connection{
+#LOGIN-FORM > .body > form #btn-connection,
+#LOGIN-FORM > .body > form #btn-signup{
+	border-width: 2px;
+
+	padding: 6px;
+	margin: 8px auto 0 auto;
+
+	font-weight: bold;
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out,
+				color            .2s ease-in-out;
+}
+
+#LOGIN-FORM > .body > form #btn-connection{
 	color: #21bb89;
     background-color: #fff;
     border-color: #21bb89;
-    border-width: 2px;
-
-    padding: 6px;
-    margin: 8px auto 0 auto;
-
-    font-weight: bold;
-	cursor: pointer;
-
-    transition: background-color .2s ease-in-out,
-                color            .2s ease-in-out;
 }
 
-#LOGIN-FORM > .body > form > #btn-connection:hover{
+#LOGIN-FORM > .body > form #btn-connection:hover{
     color: #fff;
     background-color: #21bb89;
 }
 
+#LOGIN-FORM > .body > form #btn-signup{
+	color: #660088;
+	background-color: #fff;
+	border-color: #660088;
+}
+
+#LOGIN-FORM > .body > form #btn-signup:hover{
+	color: #fff;
+	background-color: #660088;
+}
+
+#LOGIN-FORM > .body > form #btn-connection + span{
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
 
 
 #LOGIN-FORM > .body > form > #msg-err{
     color: #ff0000;
+	font-size: 0.85em;
 }
 
 #LOGIN-FORM > .body > form,
 #LOGIN-FORM > .body > form > input,
-#LOGIN-FORM > .body > form > button {
+#LOGIN-FORM > .body > form button {
 	font-family: inherit;
 }
 
 #LOGIN-FORM > .body > form > input,
-#LOGIN-FORM > .body > form > button {
+#LOGIN-FORM > .body > form button {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;

view/home.php

@@ -20,6 +20,7 @@
 		<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'>
+        <link rel='stylesheet' type='text/css' href='/css/signup-form.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>

view/vue-config.js

@@ -144,3 +144,6 @@ gstore.add('loc', [0, 0]);
 
 // login form authentication visibility
 gstore.add('loginform', false);
+
+// sign up form visibility
+gstore.add('signupform', false);

view/vue/header.vue

@@ -30,7 +30,8 @@ export default {
 			this.gstore.func.nav(this.$router, uri);
 		},
 		show_login() {
-			this.gstore.loginform = !this.gstore.loginform;
+            this.gstore.signupform = false;
+            this.gstore.loginform = !this.gstore.loginform;
 		}
 	}
 }

view/vue/login-form.vue

@@ -16,7 +16,11 @@
                 <label for='password'>Mot de passe</label>
                 <input :class='err_connection ? "err" : ""' v-model='password_val' type='password' id='password'>
                 <p v-if='err_connection' id='msg-err'>Identifiant ou mot de passe incorrect</p>
-                <button id='btn-connexion'>Se connecter</button>
+                <div>
+                    <button id='btn-connection'>Se connecter</button>
+                    <span>ou</span>
+                    <button @click='signup' id='btn-signup'>S'inscrire</button>
+                </div>
             </form>
         </div>
 
@@ -44,8 +48,6 @@
 
                 api.call("POST user/login", request, function (response) {
                     /* (1) Check if is there an error and display theme that goes with */
-                    console.log(response);
-
                     if (response.error != 0 || !response.connected) {
                         this.err_connection = true;
                     }
@@ -54,6 +56,10 @@
                         document.location = '';
                     }
                 }.bind(this));
+            },
+            signup(evt) {
+                evt.preventDefault();
+                this.gstore.signupform = true;
             }
         }
     }

view/vue/wrapper.vue

@@ -17,16 +17,20 @@
 		<!-- Login form -->
 		<loginform-comp></loginform-comp>
 
+		<!--Sign pu form-->
+		<signupform-comp></signupform-comp>
+
 	</div>
 </template>
 
 
 <script>
 
-	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 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 signupform_vue	from './signup-form.vue';
 
 	export default {
 		name: 'wrapper',
@@ -35,7 +39,8 @@
 			'HeaderComp':     header_vue,
 			'MenuComp':       menu_vue,
 			'NotifstackComp': notifstack_vue,
-			'LoginformComp': loginform_vue
+			'LoginformComp':  loginform_vue,
+			'SignupformComp': signupform_vue
 		}
 	}