[main.js] now asynchronous page data loading -> each page script is a Promise() that must success before calling next() on VueRouter to load the according Vue

This commit is contained in:
xdrm-brackets 2018-04-07 16:11:59 +02:00
parent 51875ca4e8
commit 9150874287
4 changed files with 162 additions and 140 deletions

View File

@ -12,7 +12,7 @@ gs.get.router.beforeEach((to, from, next) => {
// {1} Ignore null name //
if( to.name == null )
next();
return next();
// {2} Get appropriate page location //
let auth_folder = (gs.get.authed) ? 'auth' : 'noauth';
@ -21,14 +21,16 @@ gs.get.router.beforeEach((to, from, next) => {
// {3} Load page script //
if( fullpath === 'noauth/login')
import('./page/noauth/login.js').then(next);
else if( fullpath === 'noauth/register')
import('./page/noauth/register.js').then(next);
else if( fullpath === 'auth/channel')
import('./page/auth/channel.js').then(next);
return require('./page/noauth/login.js').default.then(next);
if( fullpath === 'noauth/register')
return require('./page/noauth/register.js').default.then(next);
if( fullpath === 'auth/channel')
return require('./page/auth/channel.js').default.then(next);
// {4} Let VueRouter do the magic //
next();
// next();
});

View File

@ -3,25 +3,31 @@ import ContentController from '../../lib/content-controller'
import RoomController from '../../lib/room-controller'
import ChannelController from '../../lib/channel-controller'
/* (1) Channel data gathering
---------------------------------------------------------*/
/* (1) Store route params */
window.initial_link = gs.get.router.history.current.params.link;
console.log(`[channel.URL] ${initial_link}`);
export default new Promise( (res, rej) => {
/* (1) Channel data gathering
---------------------------------------------------------*/
/* (1) Store route params */
window.initial_link = gs.get.router.history.current.params.link;
console.log(`[channel.URL] ${initial_link}`);
/* (2) Main components
---------------------------------------------------------*/
/* (1) Initialize popup management */
gs.set('popup', new PopupController());
/* (2) Main components
---------------------------------------------------------*/
/* (1) Initialize popup management */
gs.set('popup', new PopupController());
/* (2) Initialize content management */
gs.set('content', new ContentController());
/* (2) Initialize content management */
gs.set('content', new ContentController());
/* (3) Initialize rooms & room menu */
gs.set('room', new RoomController());
/* (3) Initialize rooms & room menu */
gs.set('room', new RoomController());
/* (4) Initialize channels & channel menu */
gs.set('channel', new ChannelController());
gs.get.channel.fetch(); // fetch at load time
/* (4) Initialize channels & channel menu */
gs.set('channel', new ChannelController());
gs.get.channel.fetch(); // fetch at load time
res();
});

View File

@ -1,61 +1,63 @@
/* (1) Initialise
---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('login', {
// fields
username: new FieldValidator('basic-name', ''),
password: new FieldValidator('password', ''),
export default new Promise( (res, rej) => {
// login failed
failed: false,
/* (1) Initialise
---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('login', {
// fields
username: new FieldValidator('basic-name', ''),
password: new FieldValidator('password', ''),
// login failed
failed: false,
// functions
func: {
login(){},
forgot_pass(){},
press_enter(){}
}
// functions
func: {
login(){},
forgot_pass(){},
press_enter(){}
}
});
});
/* (2) Login attempt
*
---------------------------------------------------------*/
gs.get.login.func.login = function(){
/* (2) Login attempt
*
---------------------------------------------------------*/
gs.get.login.func.login = function(){
/* (1) Cache fields' values */
let username = this.username.mutable;
let password = this.password.mutable;
/* (1) Cache fields' values */
let username = this.username.mutable;
let password = this.password.mutable;
/* (2) Manage errors */
if( !this.username.is_valid() )
return false;
/* (2) Manage errors */
if( !this.username.is_valid() )
return false;
if( !this.password.is_valid() )
return false;
if( !this.password.is_valid() )
return false;
/* (3) API bindings */
api.call('GET /user/token', {}, function(rs){
/* (3) API bindings */
api.call('GET /user/token', {}, function(rs){
// manage error
if( rs.error !== 0 || rs.token == null || rs.uid == null )
return this.failed = true;
// manage error
if( rs.error !== 0 || rs.token == null || rs.uid == null )
return this.failed = true;
// store TOKEN + user data
auth.token = rs.token;
auth.user = {
uid: rs.uid,
username: username
};
document.location = '';
// store TOKEN + user data
auth.token = rs.token;
auth.user = {
uid: rs.uid,
username: username
};
document.location = '';
}.bind(this), encodeURI(`${username}:${password}`));
}.bind(this), encodeURI(`${username}:${password}`));
}.bind(gs.get.login);
}.bind(gs.get.login);
@ -64,13 +66,18 @@ gs.get.login.func.login = function(){
/* (4) Manage pressing on enter
*
---------------------------------------------------------*/
gs.get.login.func.press_enter = function(e){
/* (4) Manage pressing on enter
*
---------------------------------------------------------*/
gs.get.login.func.press_enter = function(e){
// if enter -> launch login
if( e.keyCode === 13 )
this.func.login();
// if enter -> launch login
if( e.keyCode === 13 )
this.func.login();
}.bind(gs.get.login);
}.bind(gs.get.login);
res();
});

View File

@ -1,68 +1,70 @@
/* (1) Initialise
---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('register', {
// fields
mail: new FieldValidator('bypass', ''),
username: new FieldValidator('basic-name', ''),
password: new FieldValidator('password', ''),
export default new Promise( (res, rej) => {
// functions
func: {
register(){},
press_enter(){}
}
/* (1) Initialise
---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('register', {
// fields
mail: new FieldValidator('bypass', ''),
username: new FieldValidator('basic-name', ''),
password: new FieldValidator('password', ''),
});
// functions
func: {
register(){},
press_enter(){}
}
/* (2) Login attempt
*
---------------------------------------------------------*/
gs.get.register.func.register = function(){
/* (1) Cache fields' values */
let mail = this.mail.mutable;
let username = this.username.mutable;
let password = this.password.mutable;
/* (2) Manage errors */
// mail error
if( !this.mail.is_valid() )
return false;
// username error
if( !this.username.is_valid() )
return false;
// password error
if( !this.password.is_valid() )
return false;
/* (3) API bindings */
api.call('POST /user', { username: username, password: password }, function(rs){
// manage error
if( rs.error !== 0 || rs.uid == null || rs.token == null )
return gs.get.router.push('register');
// manage login
auth.token = rs.token;
auth.user = {
uid: rs.uid,
username: username
};
document.location = '';
});
}.bind(gs.get.register);
/* (2) Login attempt
*
---------------------------------------------------------*/
gs.get.register.func.register = function(){
/* (1) Cache fields' values */
let mail = this.mail.mutable;
let username = this.username.mutable;
let password = this.password.mutable;
/* (2) Manage errors */
// mail error
if( !this.mail.is_valid() )
return false;
// username error
if( !this.username.is_valid() )
return false;
// password error
if( !this.password.is_valid() )
return false;
/* (3) API bindings */
api.call('POST /user', { username: username, password: password }, function(rs){
// manage error
if( rs.error !== 0 || rs.uid == null || rs.token == null )
return gs.get.router.push('register');
// manage login
auth.token = rs.token;
auth.user = {
uid: rs.uid,
username: username
};
document.location = '';
});
}.bind(gs.get.register);
@ -71,13 +73,18 @@ gs.get.register.func.register = function(){
/* (4) Manage pressing on enter
*
---------------------------------------------------------*/
gs.get.register.func.press_enter = function(e){
/* (4) Manage pressing on enter
*
---------------------------------------------------------*/
gs.get.register.func.press_enter = function(e){
// if enter -> launch register
if( e.keyCode === 13 )
this.func.register();
// if enter -> launch register
if( e.keyCode === 13 )
this.func.register();
}.bind(gs.get.register);
}.bind(gs.get.register);
res();
});