From 4a101ee576978c683149d016c16f024801aac4c9 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 28 Mar 2018 19:42:29 +0200 Subject: [PATCH] [lib.authentication] now stores also 'user' data alongside the token [webpack.main] [webpack.setup] added 'auth' (lib.authentication) to GStore to display username, etc + renamed 'auth' to 'authed' (which is a boolean to know if the user is connected [page.noauth.login] added explicit errors + do not redirect in case wrong combination [page.noauth.register] added explicit errors [vue.auth.dialog] implemented LOGOUT --- webpack/lib/authentication.js | 11 +++++++++-- webpack/main.js | 4 ++-- webpack/page/noauth/login.js | 21 ++++++++++++++------- webpack/page/noauth/register.js | 9 ++++++--- webpack/setup.js | 10 ++++++++-- webpack/vue/auth/dialog.vue | 4 ++-- 6 files changed, 41 insertions(+), 18 deletions(-) diff --git a/webpack/lib/authentication.js b/webpack/lib/authentication.js index 3c05e3f..64b24b0 100644 --- a/webpack/lib/authentication.js +++ b/webpack/lib/authentication.js @@ -13,17 +13,24 @@ export default class Authentication{ this.lsi = new LocalStorageInterface('__auth__', 5*60); /* (2) Update token */ - if( this.token !== null ) + if( this.token !== null && this.user !== null ){ this.lsi.push('token', this.token); + this.lsi.push('user', this.user); + } } - /* (2) TOKEN facade + /* (2) facade * ---------------------------------------------------------*/ + // TOKEN get token(){ return this.lsi.fetch('token'); } set token(_token){ return this.lsi.push('token', _token); } + // USER DATA + get user(){ return this.lsi.fetch('user'); } + set user(_user){ return this.lsi.push('user', _user); } + } \ No newline at end of file diff --git a/webpack/main.js b/webpack/main.js index 72c671a..9981bc8 100644 --- a/webpack/main.js +++ b/webpack/main.js @@ -16,7 +16,7 @@ gs.get.router.beforeEach((to, from, next) => { next(); // {2} Get appropriate page location // - let auth_folder = (gs.get.auth) ? 'auth' : 'noauth'; + let auth_folder = (gs.get.authed) ? 'auth' : 'noauth'; let page_file = to.name || gs.get.routes[auth_folder][0].name; // {3} Load page script // @@ -30,7 +30,7 @@ gs.get.router.beforeEach((to, from, next) => { /* (3) Select appropriate wrapper */ -const wrapper = (gs.get.auth) ? auth_wrapper : noauth_wrapper; +const wrapper = (gs.get.authed) ? auth_wrapper : noauth_wrapper; /* (4) Render view */ diff --git a/webpack/page/noauth/login.js b/webpack/page/noauth/login.js index b192123..c3fc06c 100644 --- a/webpack/page/noauth/login.js +++ b/webpack/page/noauth/login.js @@ -92,7 +92,7 @@ gs.get.login.func.login = function(){ // username error if( !this.username.validate(username) ){ errors = true; - this.func.print_err('username', 'This field is required'); + this.func.print_err('username', '3 characters are required: letters, numbers, dot'); }else this.func.print_err('username', '', 0); @@ -100,7 +100,7 @@ gs.get.login.func.login = function(){ // password error if( !this.password.validate(password) ){ errors = true; - this.func.print_err('password', 'This field is required'); + this.func.print_err('password', '8 characters are required'); }else this.func.print_err('password', '', 0); @@ -112,14 +112,21 @@ gs.get.login.func.login = function(){ api.call('GET /user/token', {}, function(rs){ // manage error - if( rs.error !== 0 || rs.token == null ) - return gs.get.router.push('register'); + if( rs.error !== 0 || rs.token == null ){ + this.func.print_err('username', 'Invalid combination'); + this.func.print_err('password', 'Invalid combination'); + return; + } - // manage login - auth.token = rs.token; + // store TOKEN + user data + auth.token = rs.token; + auth.user = { + uid: null, // todo + username: username + }; document.location = ''; - }, encodeURI(`${username}:${password}`)); + }.bind(this), encodeURI(`${username}:${password}`)); }.bind(gs.get.login); diff --git a/webpack/page/noauth/register.js b/webpack/page/noauth/register.js index 24826e2..988a808 100644 --- a/webpack/page/noauth/register.js +++ b/webpack/page/noauth/register.js @@ -107,7 +107,7 @@ gs.get.register.func.register = function(){ // username error if( !this.username.validate(username) ){ errors = true; - this.func.print_err('username', 'This field is required'); + this.func.print_err('username', '3 characters are required: letters, numbers, dot'); }else this.func.print_err('username', '', 0); @@ -115,7 +115,7 @@ gs.get.register.func.register = function(){ // password error if( !this.password.validate(password) ){ errors = true; - this.func.print_err('password', 'This field is required'); + this.func.print_err('password', '8 characters are required'); }else this.func.print_err('password', '', 0); @@ -131,8 +131,11 @@ gs.get.register.func.register = function(){ return gs.get.router.push('register'); // manage login - gs.set('uid', rs.uid); auth.token = rs.token; + auth.user = { + uid: rs.uid, + username: username + }; document.location = ''; }); diff --git a/webpack/setup.js b/webpack/setup.js index 5f907db..880c788 100644 --- a/webpack/setup.js +++ b/webpack/setup.js @@ -18,6 +18,7 @@ window.gs = new GlobalStore(); /* (2) Authentication token management */ window.auth = new Authentication(); +gs.set('auth', auth); /* (3) XHR / WebSocket drivers */ window.xhrcd = XHRClientDriver; @@ -29,6 +30,8 @@ window.ws = new WebSocketClientDriver('ws.douscord.xdrm.io'); + + /* (2) Global data ---------------------------------------------------------*/ /* (1) Get Full URI */ @@ -38,13 +41,16 @@ gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').fi gs.set('routes', routes); /* (3) Store if authenticated */ -gs.set('auth', auth.token !== null); +gs.set('authed', auth.token !== null); /* (4) Init. vue router */ gs.set('router', new VueRouter({ - routes: gs.get.auth ? gs.get.routes['auth'] : gs.get.routes['noauth'] + routes: gs.get.authed ? gs.get.routes['auth'] : gs.get.routes['noauth'] })); +/* (5) refresh page */ +gs.set('refresh', () => ( document.location = '' ) ); + diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue index 6dd9d68..ccf2c52 100644 --- a/webpack/vue/auth/dialog.vue +++ b/webpack/vue/auth/dialog.vue @@ -88,7 +88,7 @@
-
{{ '{USERNAME}' }}
+
{{ gs.auth.user.username }}
@@ -98,7 +98,7 @@ Create channel Create room Change nickname - Logout + Logout