From b12eb46939dac8714864f69fb8a1fd9ead47fd7a Mon Sep 17 00:00:00 2001
From: Guillaume FAUVET <g.fauvet.perso@gmail.com>
Date: Thu, 7 Dec 2017 23:40:29 +0100
Subject: [PATCH] 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     | 24 +++++++++++++++++
 public_html/css/login-form.css | 49 ++++++++++++++++++++++++----------
 view/home.php                  |  1 +
 view/vue-config.js             |  5 +++-
 view/vue/header.vue            |  3 ++-
 view/vue/login-form.vue        | 12 ++++++---
 view/vue/wrapper.vue           | 15 +++++++----
 7 files changed, 85 insertions(+), 24 deletions(-)

diff --git a/public_html/css/layout.css b/public_html/css/layout.css
index 60b6a1f..eb09afd 100644
--- a/public_html/css/layout.css
+++ b/public_html/css/layout.css
@@ -140,4 +140,28 @@ 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;
 }
\ No newline at end of file
diff --git a/public_html/css/login-form.css b/public_html/css/login-form.css
index 3a1c16f..87dfc93 100644
--- a/public_html/css/login-form.css
+++ b/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;
diff --git a/view/home.php b/view/home.php
index 5aeffb4..7b473ac 100755
--- a/view/home.php
+++ b/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>
diff --git a/view/vue-config.js b/view/vue-config.js
index 4ae1515..b4c4325 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -143,4 +143,7 @@ gstore.add('nstack', false);
 gstore.add('loc', [0, 0]);
 
 // login form authentication visibility
-gstore.add('loginform', false);
\ No newline at end of file
+gstore.add('loginform', false);
+
+// sign up form visibility
+gstore.add('signupform', false);
\ No newline at end of file
diff --git a/view/vue/header.vue b/view/vue/header.vue
index a5290fe..c20ef36 100644
--- a/view/vue/header.vue
+++ b/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;
 		}
 	}
 }
diff --git a/view/vue/login-form.vue b/view/vue/login-form.vue
index a7f94bd..692b95e 100644
--- a/view/vue/login-form.vue
+++ b/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;
             }
         }
     }
diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue
index 18af9fc..eaa1ddc 100755
--- a/view/vue/wrapper.vue
+++ b/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
 		}
 	}