From d7677eacb5a7b3a83a5721ea0957782263475b9a Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sat, 24 Mar 2018 17:51:04 +0100 Subject: [PATCH] [*] manage 2 wrappers+ 2 routeSet (1 for authed users, other for not authed users) --- webpack/common.js | 47 -------------------- webpack/lib/authentication.js | 18 ++++++-- webpack/lib/local-storage-interface.js | 24 ++++++----- webpack/main.js | 59 +++++++------------------- webpack/page/auth/channel.js | 50 ++++++++++++++++++++++ webpack/page/home.js | 35 --------------- webpack/page/noauth/login.js | 1 + webpack/routes.js | 36 ++++++++++++---- webpack/setup.js | 45 ++++++++++++++++++++ webpack/vue/{ => auth}/channel.vue | 0 webpack/vue/{ => auth}/dialog.vue | 0 webpack/vue/{ => auth}/menu.vue | 0 webpack/vue/{ => auth}/wrapper.vue | 0 webpack/vue/noauth/login.vue | 24 +++++++++++ webpack/vue/noauth/wrapper.vue | 23 ++++++++++ 15 files changed, 213 insertions(+), 149 deletions(-) delete mode 100644 webpack/common.js create mode 100644 webpack/page/auth/channel.js delete mode 100644 webpack/page/home.js create mode 100644 webpack/page/noauth/login.js create mode 100644 webpack/setup.js rename webpack/vue/{ => auth}/channel.vue (100%) rename webpack/vue/{ => auth}/dialog.vue (100%) rename webpack/vue/{ => auth}/menu.vue (100%) rename webpack/vue/{ => auth}/wrapper.vue (100%) create mode 100644 webpack/vue/noauth/login.vue create mode 100644 webpack/vue/noauth/wrapper.vue diff --git a/webpack/common.js b/webpack/common.js deleted file mode 100644 index c01b377..0000000 --- a/webpack/common.js +++ /dev/null @@ -1,47 +0,0 @@ -import {APIClient} from './lib/api-client' -import {GlobalStore} from './lib/gstore' -import VueRouter from 'vue-router' -import routes from './routes' -import {PopupController} from './lib/popup-controller' -import {ContentController} from './lib/content-controller' -import {RoomController} from './lib/room-controller' -import {ChannelController} from './lib/channel-controller' - -import XHRClientDriver from './lib/client/xhr.js' -import WebSocketClientDriver from './lib/client/ws.js' - - -window.gs = new GlobalStore(); -window.api = new APIClient('localhost', null, false); -window.xhrcd = XHRClientDriver; -window.wscd = WebSocketClientDriver; - -/* (1) Global data ----------------------------------------------------------*/ -/* (1) Get Full URI */ -gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; })); - -/* (2) Store routes */ -gs.set('routes', routes[0]); - -/* (3) Init. vue router */ -gs.set('router', new VueRouter({ - routes: gs.get.routes -})); - - - - -/* (2) Main components ----------------------------------------------------------*/ -/* (1) Initialize popup management */ -gs.set('popup', new PopupController()); - -/* (2) Initialize content management */ -gs.set('content', new ContentController()); - -/* (3) Initialize rooms & room menu */ -gs.set('room', new RoomController()); - -/* (4) Initialize channels & channel menu */ -gs.set('channel', new ChannelController()); \ No newline at end of file diff --git a/webpack/lib/authentication.js b/webpack/lib/authentication.js index 3769d84..3c05e3f 100644 --- a/webpack/lib/authentication.js +++ b/webpack/lib/authentication.js @@ -1,3 +1,5 @@ +import LocalStorageInterface from './local-storage-interface' + export default class Authentication{ @@ -7,11 +9,21 @@ export default class Authentication{ ---------------------------------------------------------*/ constructor(){ - /* (1) Default attributes */ - this._authkey = 'auth.default'; + /* (1) Default localStorage Interface */ + this.lsi = new LocalStorageInterface('__auth__', 5*60); + + /* (2) Update token */ + if( this.token !== null ) + this.lsi.push('token', this.token); - /* (2) Section Title */ } + + /* (2) TOKEN facade + * + ---------------------------------------------------------*/ + get token(){ return this.lsi.fetch('token'); } + set token(_token){ return this.lsi.push('token', _token); } + } \ No newline at end of file diff --git a/webpack/lib/local-storage-interface.js b/webpack/lib/local-storage-interface.js index d773726..2c75da7 100644 --- a/webpack/lib/local-storage-interface.js +++ b/webpack/lib/local-storage-interface.js @@ -5,13 +5,15 @@ export default class LocalStorageInterface{ * * @_prefix localStorage Interface Prefix (prefix) * @_ttl Seconds default valid time for stored data + * @_session Whether to use sessionStorage (default is localStorage) * ---------------------------------------------------------*/ - constructor(_prefix, _ttl){ + constructor(_prefix, _ttl, _session=false){ /* (1) Initialise private attributes */ this._prefix = 'root'; this._ttl = null; + this._driver = !!_session ? sessionStorage : localStorage; /* (2) Initialise public attributes */ this.keys = []; @@ -31,13 +33,13 @@ export default class LocalStorageInterface{ } - /* (1) Synchronise keys from localStorage + /* (1) Synchronise keys from this._driver * ---------------------------------------------------------*/ synchronise(){ - // 1. Get localStorage key list - let keys = Object.keys(localStorage); + // 1. Get this._driver key list + let keys = Object.keys(this._driver); // 2. Local copy of prefix let prefix = `${this._prefix}.`; @@ -71,19 +73,19 @@ export default class LocalStorageInterface{ return false; /* (2) Default value for _ttl */ - _ttl = isNaN(_ttl) ? this._ttl : _ttl; + let ttl = isNaN(_ttl) || _ttl === null ? this._ttl : parseInt(_ttl); /* (2) Store data ---------------------------------------------------------*/ /* (1) Build storage object */ let storage_object = { - expires: _ttl ? new Date().getTime() + _ttl*1000 : null, + expires: ttl ? new Date().getTime() + ttl*1000 : null, data: _data }; /* (2) Store storage object */ - localStorage.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object)); + this._driver.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object)); /* (3) Synchronize keys */ this.keys.push(_name); @@ -119,7 +121,7 @@ export default class LocalStorageInterface{ /* (2) Fetch data ---------------------------------------------------------*/ /* (1) Try to get data */ - let fetched = localStorage.getItem(`${this._prefix}.${_name}`); + let fetched = this._driver.getItem(`${this._prefix}.${_name}`); /* (2) Try to parse */ try{ @@ -133,7 +135,7 @@ export default class LocalStorageInterface{ } /* (4) If not valid anymore -> delete + return NULL */ - if( storage_object.expires < new Date().getTime() ){ + if( !isNaN(storage_object.expires) && storage_object.expires < new Date().getTime() ){ this.pop(_name); return null; } @@ -162,8 +164,8 @@ export default class LocalStorageInterface{ if( this.keys.indexOf(_name) < 0 ) return null; - /* (3) Remove from localStorage */ - localStorage.removeItem(`${this._prefix}.${_name}`); + /* (3) Remove from this._driver */ + this._driver.removeItem(`${this._prefix}.${_name}`); /* (4) Update keys */ this.keys = this.keys.filter( (k) => (k!==_name) ); diff --git a/webpack/main.js b/webpack/main.js index 004597e..8bbca3c 100644 --- a/webpack/main.js +++ b/webpack/main.js @@ -1,54 +1,25 @@ -/* (1) Imports ----------------------------------------------------------*/ -/* (1) NPM libs */ -import Vue from 'vue' -import VueRouter from 'vue-router' -import routes from './routes' - -/* (2) Vues */ -import wrapper from './vue/wrapper.vue' - -/* (3) Data */ -require('./common.js'); +import Vue from 'vue' +import VueRouter from 'vue-router' +import auth_wrapper from './vue/auth/wrapper.vue' +import noauth_wrapper from './vue/noauth/wrapper.vue' +/* (1) Setup Vue, VueRouter, Authentication lib */ +require('./setup.js'); +/* (2) Get appropriate page data */ +let auth_folder = (gs.get.auth) ? 'auth' : 'noauth'; +let page_file = gs.get.router.history.current.name || gs.get.routes[auth_folder][0].name; +/* (3) Load page script */ +require(`./page/${auth_folder}/${page_file}.js`); -/* (2) Initialisation ----------------------------------------------------------*/ -/* (1) Render view */ +/* (4) Select appropriate wrapper */ +const wrapper = (gs.get.auth) ? auth_wrapper : noauth_wrapper; + +/* (5) Render view */ Vue.use(VueRouter); new Vue({ el: '#vue', router: gs.get.router, render(h){ return h(wrapper); } }) - -/* (2) Store route params */ -window.initial_link = gs.get.router.history.current.params.link; -console.log(`[channel.URL] ${initial_link}`); - -/* (3) Channel data gathering ----------------------------------------------------------*/ -/* (1) Fetch channel data */ -setTimeout(() => { - - /* (2) Fetch data */ - gs.get.channel.dump( require('./mockup/api-channels.json') ); - - /* (3) Find if @link matches */ - var redirect_id = null; - for( let c of gs.get.channel.list ){ - - if( c.link === window.initial_link ){ - redirect_id = c.id; - break; - } - - } - - /* (4) Emulate navigatation from URL */ - console.log(`[restore.channel] ${redirect_id}`); - gs.get.channel.nav(redirect_id); - -}, 500); \ No newline at end of file diff --git a/webpack/page/auth/channel.js b/webpack/page/auth/channel.js new file mode 100644 index 0000000..f8a5526 --- /dev/null +++ b/webpack/page/auth/channel.js @@ -0,0 +1,50 @@ +import PopupController from '../../lib/popup-controller' +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}`); + +/* (2) Fetch channel data */ +setTimeout(() => { + + /* (3) Fetch data */ + gs.get.channel.dump( require('../../mockup/api-channels.json') ); + + /* (4) Find if @link matches */ + var redirect_id = null; + for( let c of gs.get.channel.list ){ + + if( c.link === window.initial_link ){ + redirect_id = c.id; + break; + } + + } + + /* (4) Emulate navigatation from URL */ + console.log(`[restore.channel] ${redirect_id}`); + gs.get.channel.nav(redirect_id); + +}, 500); + + + +/* (2) Main components +---------------------------------------------------------*/ +/* (1) Initialize popup management */ +gs.set('popup', new PopupController()); + +/* (2) Initialize content management */ +gs.set('content', new ContentController()); + +/* (3) Initialize rooms & room menu */ +gs.set('room', new RoomController()); + +/* (4) Initialize channels & channel menu */ +gs.set('channel', new ChannelController()); \ No newline at end of file diff --git a/webpack/page/home.js b/webpack/page/home.js deleted file mode 100644 index c6a590a..0000000 --- a/webpack/page/home.js +++ /dev/null @@ -1,35 +0,0 @@ -/* (1) Imports ----------------------------------------------------------*/ -/* (1) NPM libs */ -import Vue from 'vue' -import VueRouter from 'vue-router' -import routes from '../routes/home' - -/* (2) Vues */ -import wrapper_vue from '../vue/wrapper.vue' - -/* (3) Data */ -require('../data/common'); -require('../data/home'); - - - - -/* (2) Initialisation ----------------------------------------------------------*/ -/* (1) Init Router */ -const router = new VueRouter({ - mode: 'history', - routes: require('./routes.js') -}); - -/* (2) Store router in gstore */ -gstore.add('router', router); - -/* (3) Render view */ -Vue.use(VueRouter); -new Vue({ - el: '#WRAPPER', - router, - render: h => h(wrapper_vue) -}); \ No newline at end of file diff --git a/webpack/page/noauth/login.js b/webpack/page/noauth/login.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/webpack/page/noauth/login.js @@ -0,0 +1 @@ + diff --git a/webpack/routes.js b/webpack/routes.js index 01fce46..eb5150e 100644 --- a/webpack/routes.js +++ b/webpack/routes.js @@ -1,11 +1,29 @@ -export default{ 0: [ +export default { - { - path: '/channel/:link', - component: require('./vue/channel.vue').default - }, { - path: '*', - redirect: '/channel/me' - } + auth: [ -] } \ No newline at end of file + { + name: 'channel', + path: '/channel/:link', + component: require('./vue/auth/channel.vue').default + }, { + path: '*', + redirect: '/channel/me' + } + + ], + + noauth: [ + + { + name: 'login', + path: '/login', + component: require('./vue/noauth/login.vue').default + }, { + path: '*', + redirect: '/login' + } + + ] + +} \ No newline at end of file diff --git a/webpack/setup.js b/webpack/setup.js new file mode 100644 index 0000000..07bf030 --- /dev/null +++ b/webpack/setup.js @@ -0,0 +1,45 @@ +/* (1) VueJS data */ +import VueRouter from 'vue-router' +import GlobalStore from './lib/gstore' +import routes from './routes' + +/* (2) Custom libs */ +import Authentication from './lib/authentication.js' +import XHRClientDriver from './lib/client/xhr.js' +import WebSocketClientDriver from './lib/client/ws.js' + + + +/* (1) Custom lib accessors +---------------------------------------------------------*/ +window.gs = new GlobalStore(); +window.xhrcd = XHRClientDriver; +window.wscd = WebSocketClientDriver; +window.auth = new Authentication(); + + + +/* (2) Global data +---------------------------------------------------------*/ +/* (1) Get Full URI */ +gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; })); + +/* (2) Store routes */ +gs.set('routes', routes); + +/* (3) Store if authenticated */ +gs.set('auth', auth.token !== null); + +/* (4) Init. vue router */ +gs.set('router', new VueRouter({ + routes: gs.get.auth ? gs.get.routes['auth'] : gs.get.routes['noauth'] +})); + + + + + + + + + diff --git a/webpack/vue/channel.vue b/webpack/vue/auth/channel.vue similarity index 100% rename from webpack/vue/channel.vue rename to webpack/vue/auth/channel.vue diff --git a/webpack/vue/dialog.vue b/webpack/vue/auth/dialog.vue similarity index 100% rename from webpack/vue/dialog.vue rename to webpack/vue/auth/dialog.vue diff --git a/webpack/vue/menu.vue b/webpack/vue/auth/menu.vue similarity index 100% rename from webpack/vue/menu.vue rename to webpack/vue/auth/menu.vue diff --git a/webpack/vue/wrapper.vue b/webpack/vue/auth/wrapper.vue similarity index 100% rename from webpack/vue/wrapper.vue rename to webpack/vue/auth/wrapper.vue diff --git a/webpack/vue/noauth/login.vue b/webpack/vue/noauth/login.vue new file mode 100644 index 0000000..f01a3f8 --- /dev/null +++ b/webpack/vue/noauth/login.vue @@ -0,0 +1,24 @@ + \ No newline at end of file diff --git a/webpack/vue/noauth/wrapper.vue b/webpack/vue/noauth/wrapper.vue new file mode 100644 index 0000000..c5c2f09 --- /dev/null +++ b/webpack/vue/noauth/wrapper.vue @@ -0,0 +1,23 @@ + \ No newline at end of file