[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

@@ -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);  }
+
 }

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 */

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 )
+		if( rs.error !== 0 || rs.token == null ){
-			return gs.get.router.push('register');
+			this.func.print_err('username', 'Invalid combination');
+			this.func.print_err('password', 'Invalid combination');
+			return;
+		}
 
-		// manage login
+		// 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);
 

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 = '';
 	});

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 = '' ) );
+
 
 
 

webpack/vue/auth/dialog.vue

@@ -88,7 +88,7 @@
 
 
 		<div class='header' @click='minipop = !minipop'>
-			<div class='title'>{{ '{USERNAME}' }}</div>
+			<div class='title'>{{ gs.auth.user.username }}</div>
 		</div>
 
 		<div class='body'>
@@ -98,7 +98,7 @@
 				<span data-icon='create'                    @click='gs.popup.show(`channel.create`); minipop=false'>Create channel</span>
 				<span data-icon='category'                  @click='gs.popup.show(`room.create`); minipop=false'>Create room</span>
 				<span data-icon='edit'                      @click=''>Change nickname</span>
-				<span class='sb invalid' data-icon='logout' @click=''>Logout</span>
+				<span class='sb invalid' data-icon='logout' @click='gs.auth.token=null; gs.refresh()'>Logout</span>
 			</div>
 
 			<div v-for='(rooms, type) in gs.room'>