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 @@ + 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 @@

Identifiant ou mot de passe incorrect

- +
+ + ou + +
@@ -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 @@ + + +