From 0406689523e2e640b3cbc7ecb596232ae8943379 Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 22:22:04 +0100 Subject: [PATCH 01/11] add: public_html.css.login-form (css for user authentication) add: public_html.image.header.notif.login (icon for user authentication for header) add: view.vue.login-form (vue for user authentication) --- public_html/css/login-form.css | 108 +++++++++++++++++++++++ public_html/image/header/notif/login.svg | 49 ++++++++++ view/vue/login-form.vue | 60 +++++++++++++ 3 files changed, 217 insertions(+) create mode 100644 public_html/css/login-form.css create mode 100644 public_html/image/header/notif/login.svg create mode 100644 view/vue/login-form.vue diff --git a/public_html/css/login-form.css b/public_html/css/login-form.css new file mode 100644 index 0000000..3a1c16f --- /dev/null +++ b/public_html/css/login-form.css @@ -0,0 +1,108 @@ +/* Header */ +#LOGIN-FORM > .head{ + display: block; + position: relative; + width: 100%; + + padding: .7em 0; + + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #ddd; + + text-align: center; + color: #888; +} + +/* Container */ +#LOGIN-FORM > .body{ + display: block; + position: relative; + width: 100%; + min-height: 2em; + height: auto; + + border-radius: 0 0 3px 3px; + + overflow: auto; + +} + +/* Items */ +#LOGIN-FORM > .body > form{ + display: block; + position: relative; + + padding: .8em 1em; + + border-bottom: 1px solid #ddd; + + background-color: #fff; + + color: #555; + + cursor: pointer; + + transition: background-color .2s ease-in-out, + color .2s ease-in-out; +} + +#LOGIN-FORM > .body > form * { + text-align: center; +} + +#LOGIN-FORM > .body > form > *{ + display: block; +} + +#LOGIN-FORM > .body > form > input{ + padding: 5px; + margin: 5px auto 10px auto; + border-color: #777777; +} + +#LOGIN-FORM > .body > form > input.err{ + border-color: #ff0000; +} + +#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{ + color: #fff; + background-color: #21bb89; +} + + + +#LOGIN-FORM > .body > form > #msg-err{ + color: #ff0000; +} + +#LOGIN-FORM > .body > form, +#LOGIN-FORM > .body > form > input, +#LOGIN-FORM > .body > form > button { + font-family: inherit; +} + +#LOGIN-FORM > .body > form > input, +#LOGIN-FORM > .body > form > button { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border-style: solid; + border-width: 1px; + outline: none; +} \ No newline at end of file diff --git a/public_html/image/header/notif/login.svg b/public_html/image/header/notif/login.svg new file mode 100644 index 0000000..88b7dc6 --- /dev/null +++ b/public_html/image/header/notif/login.svg @@ -0,0 +1,49 @@ + +image/svg+xml \ No newline at end of file diff --git a/view/vue/login-form.vue b/view/vue/login-form.vue new file mode 100644 index 0000000..a7f94bd --- /dev/null +++ b/view/vue/login-form.vue @@ -0,0 +1,60 @@ + + + \ No newline at end of file From d0dc02e53f58c011d0b45aa135d8ee73162d4d1b Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 22:25:58 +0100 Subject: [PATCH 02/11] 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 @@ + 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 @@
+
@@ -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 @@ - + @@ -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 } } From 2791dda887c82473eb8f8cf3ed207b4f154e9ed4 Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 22:29:48 +0100 Subject: [PATCH 03/11] fix: view.vue-config (boolean must be initialize with false) --- view/vue-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view/vue-config.js b/view/vue-config.js index 512e1cc..4ae1515 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -143,4 +143,4 @@ gstore.add('nstack', false); gstore.add('loc', [0, 0]); // login form authentication visibility -gstore.add('loginform', true); +gstore.add('loginform', false); \ No newline at end of file From 11895fb8758f666fc718b0cedb3b5318537139b7 Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 23:04:07 +0100 Subject: [PATCH 04/11] fix: config.modules (user mail & admin mail must be of mail type instead of text) --- config/modules.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/modules.json b/config/modules.json index 87d84d1..354df6a 100755 --- a/config/modules.json +++ b/config/modules.json @@ -19,7 +19,7 @@ "permissions": [], "parameters": { "username": { "description": "Identifiant de l'administrateur", "type": "varchar(3,20,alphanumeric)" }, - "mail": { "description": "Adresse mail de l'administrateur", "type": "text" }, + "mail": { "description": "Adresse mail de l'administrateur", "type": "mail" }, "password": { "description": "Mot de passe de l'administrateur", "type": "text" } }, "output": { @@ -50,7 +50,7 @@ "permissions": [], "parameters": { "username": { "description": "Identifiant de l'utilisateur", "type": "varchar(3,20,alphanumeric)" }, - "mail": { "description": "Adresse mail de l'utilisateur", "type": "text" }, + "mail": { "description": "Adresse mail de l'utilisateur", "type": "mail" }, "password": { "description": "Mot de passe de l'utilisateur", "type": "text" } }, "output": { From 514f56db188a72f3bf7ec942f8739d172f42edcc Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 23:32:23 +0100 Subject: [PATCH 05/11] add: public_html.css.signup-form (css for sign up form authentication) add: view.vue.signup-form (vue for sign up form authentication) --- public_html/css/signup-form.css | 109 ++++++++++++++++++++++++++++++++ view/vue/signup-form.vue | 81 ++++++++++++++++++++++++ 2 files changed, 190 insertions(+) create mode 100644 public_html/css/signup-form.css create mode 100644 view/vue/signup-form.vue diff --git a/public_html/css/signup-form.css b/public_html/css/signup-form.css new file mode 100644 index 0000000..f6e01ac --- /dev/null +++ b/public_html/css/signup-form.css @@ -0,0 +1,109 @@ +/* Header */ +#SIGNUP-FORM > .head{ + display: block; + position: relative; + width: 100%; + + padding: .7em 0; + + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #ddd; + + text-align: center; + color: #888; +} + +/* Container */ +#SIGNUP-FORM > .body{ + display: block; + position: relative; + width: 100%; + min-height: 2em; + height: auto; + + border-radius: 0 0 3px 3px; + + overflow: auto; + +} + +/* Items */ +#SIGNUP-FORM > .body > form{ + display: block; + position: relative; + + padding: .8em 1em; + + border-bottom: 1px solid #ddd; + + background-color: #fff; + + color: #555; + + cursor: pointer; + + transition: background-color .2s ease-in-out, + color .2s ease-in-out; +} + +#SIGNUP-FORM > .body > form * { + text-align: center; +} + +#SIGNUP-FORM > .body > form > *{ + display: block; +} + +#SIGNUP-FORM > .body > form > input{ + padding: 5px; + margin: 5px auto 10px auto; + border-color: #777777; +} + +#SIGNUP-FORM > .body > form > input.err{ + border-color: #ff0000; +} + +#SIGNUP-FORM > .body > form > #btn-create-account{ + color: #21bb89; + background-color: #fff; + border-color: #21bb89; + border-width: 2px; + + padding: 6px; + margin: 15px auto 0 auto; + + font-weight: bold; + cursor: pointer; + + transition: background-color .2s ease-in-out, + color .2s ease-in-out; +} + +#SIGNUP-FORM > .body > form > #btn-create-account:hover{ + color: #fff; + background-color: #21bb89; +} + + + +#SIGNUP-FORM > .body > form > #msg-err{ + color: #ff0000; + font-size: 0.85em; +} + +#SIGNUP-FORM > .body > form, +#SIGNUP-FORM > .body > form > input, +#SIGNUP-FORM > .body > form > button { + font-family: inherit; +} + +#SIGNUP-FORM > .body > form > input, +#SIGNUP-FORM > .body > form > button { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border-style: solid; + border-width: 1px; + outline: none; +} \ No newline at end of file diff --git a/view/vue/signup-form.vue b/view/vue/signup-form.vue new file mode 100644 index 0000000..5ff120e --- /dev/null +++ b/view/vue/signup-form.vue @@ -0,0 +1,81 @@ + + + \ No newline at end of file From b12eb46939dac8714864f69fb8a1fd9ead47fd7a Mon Sep 17 00:00:00 2001 From: Guillaume FAUVET Date: Thu, 7 Dec 2017 23:40:29 +0100 Subject: [PATCH 06/11] 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 @@ + 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 @@ + + +