From 91508742878fb629ab8f126d261d9d965cbe1ef0 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sat, 7 Apr 2018 16:11:59 +0200 Subject: [PATCH] [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 --- parcel/main.js | 16 ++-- parcel/page/auth/channel.js | 38 +++++---- parcel/page/noauth/login.js | 107 +++++++++++++------------ parcel/page/noauth/register.js | 141 +++++++++++++++++---------------- 4 files changed, 162 insertions(+), 140 deletions(-) diff --git a/parcel/main.js b/parcel/main.js index 3219d05..9bae61d 100644 --- a/parcel/main.js +++ b/parcel/main.js @@ -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(); }); diff --git a/parcel/page/auth/channel.js b/parcel/page/auth/channel.js index d7b03c4..3571aa4 100644 --- a/parcel/page/auth/channel.js +++ b/parcel/page/auth/channel.js @@ -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 \ No newline at end of file + /* (4) Initialize channels & channel menu */ + gs.set('channel', new ChannelController()); + gs.get.channel.fetch(); // fetch at load time + + res(); + +}); \ No newline at end of file diff --git a/parcel/page/noauth/login.js b/parcel/page/noauth/login.js index cff7b1f..a64f64c 100644 --- a/parcel/page/noauth/login.js +++ b/parcel/page/noauth/login.js @@ -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); \ No newline at end of file + }.bind(gs.get.login); + + + res(); + +}); \ No newline at end of file diff --git a/parcel/page/noauth/register.js b/parcel/page/noauth/register.js index 181a53a..6c5b89c 100644 --- a/parcel/page/noauth/register.js +++ b/parcel/page/noauth/register.js @@ -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); \ No newline at end of file + }.bind(gs.get.register); + + + res(); + +}); \ No newline at end of file