mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[*] manage 2 wrappers+ 2 routeSet (1 for authed users, other for not authed users)

This commit is contained in:
xdrm-brackets 2018-03-24 17:51:04 +01:00
parent 6ec30fa1e9
commit d7677eacb5
15 changed files with 213 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
webpack/common.js
View File

@ -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());

18
webpack/lib/authentication.js
View File

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

24
webpack/lib/local-storage-interface.js
View File

@ -5,13 +5,15 @@ export default class LocalStorageInterface{
*
* @_prefix<String> localStorage Interface Prefix (prefix)
* @_ttl<int> Seconds default valid time for stored data
* @_session<bool> 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) );

55
webpack/main.js
View File

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

50
webpack/page/auth/channel.js Normal file
View File

@ -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());

35
webpack/page/home.js
View File

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

1
webpack/page/noauth/login.js Normal file
View File

@ -0,0 +1 @@

24
webpack/routes.js
View File

@ -1,11 +1,29 @@
export default{ 0: [
export default {
auth: [
{
name: 'channel',
path: '/channel/:link',
component: require('./vue/channel.vue').default
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'
}
]
}

45
webpack/setup.js Normal file
View File

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

0
webpack/vue/channel.vue → webpack/vue/auth/channel.vue
View File

0
webpack/vue/dialog.vue → webpack/vue/auth/dialog.vue
View File

0
webpack/vue/menu.vue → webpack/vue/auth/menu.vue
View File

0
webpack/vue/wrapper.vue → webpack/vue/auth/wrapper.vue
View File

24
webpack/vue/noauth/login.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class='container'>
<div class='header'>
</div>
<div class='body'>
</div>
</div>
</template><script>
export default {
name: 'login-',
data(){ return { gs: gs.get }; }
}
</script>

23
webpack/vue/noauth/wrapper.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div id="WRAPPER">
<!-- Container -->
<router-view></router-view>
</div>
</template><script>
export default {
name: 'wrapper-',
data(){ return { gs: gs.get }; },
}
</script>