SSR App

angular.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "frontcraft": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src/backend",
-      "prefix": "app",
-      "architect": {
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/server",
-            "main": "src/backend/Launcher.ts",
-            "tsConfig": "tsconfig.json"
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "frontcraft"
-}

guild.json

@@ -1,5 +0,0 @@
-{
-  "name": "AAA",
-  "realm": "Gandling EU",
-  "description": "Wee woo"
-}

index.html

@@ -1 +0,0 @@
-<table><tr><td><!--nstart--><b class="q4">Spineshatter</b><!--nend--><!--ndstart--><!--ndend--><span class="q"><br>Item Level <!--ilvl-->73</span><br /><!--bo-->Binds when picked up<br />Unique<table width="100%"><tr><td>Main Hand</td><th><!--scstart2:4--><span class="q1">Mace</span><!--scend--></th></tr></table><table width="100%"><tr> <td><span><!--dmg-->99 - 184 Damage</span></td> <th>Speed <!--spd-->2.60</th> </tr></table><!--dps-->(54.42 damage per second)<br><span><!--stat4-->+9 Strength</span><br><span><!--stat7-->+16 Stamina</span><!--ebstats--><!--egstats--><!--eistats--><!--e--><!--ps--><br>Durability 105 / 105</td></tr></table><table><tr><td>Requires Level <!--rlvl-->60<br><span class="q2">Equip: <a href="https://classic.wowhead.com/spell=7518" class="q2">Increased Defense +5.</a></span><!--itemEffects:1--><div class="whtt-sellprice">Sell Price: <span class="moneygold">12</span> <span class="moneysilver">88</span> <span class="moneycopper">25</span></div><div class="whtt-extra whtt-droppedby">Dropped by: Razorgore the Untamed</div></td></tr></table>

package.json

@@ -4,19 +4,17 @@
   "version": "1.0.0",
   "scripts": {
     "tsc": "tsc",
-    "launch": "node dist/server/main.js",
+    "launch": "node lib/src/backend/Launcher.js",
     "start": "npm run build && npm run launch",
     "start-backend": "npm run build-backend && npm run launch",
     "test": "rm -rf data && npm run build-backend && mocha lib/test/backendTest.js",
-    "build": "npm run build-backend && npm run build-frontend",
-    "build-backend": "npm run clean-backend && tsc",
-    "build-frontend": "npm run clean-frontend && (mkdir static || rm -rf static/*) && npm run build-dashboard",
-    "build-dashboard": "cd src/frontend && npm i && npm run build && cp -r dist/* ../../static",
+    "build": "npm run build-frontend && npm run build-backend",
+    "build-backend": "npm run clean-backend && npm run tsc",
+    "build-frontend": "npm run clean-frontend && (mkdir dist || rm -rf dist/*) && npm run build-dashboard",
+    "build-dashboard": "cd src/frontend && npm run build && cp -r dist/* ../../dist",
     "clean": "rm -rf data && npm run clean-backend && npm run clean-frontend",
-    "clean-backend": "rm -rf lib plugins config widget .rpt2_cache *.js *.ts",
-    "clean-frontend": "rm -rf src/frontend/dist static",
-    "webpack": "webpack --config src/backend/webpack.prod.js --progress --colors",
-    "setangular": "ng update @angular/cli@8.2.2 @angular/core@8.2.2 @angular/compiler-cli@8.2.2"
+    "clean-backend": "rm -rf lib plugins config widget .rpt2_cache ",
+    "clean-frontend": "rm -rf src/frontend/dist dist"
   },
   "repository": {
     "type": "git",
@@ -32,6 +30,7 @@
     "circular-buffer": "^1.0.2",
     "crypto-js": "^3.1.9-1",
     "debug": "^4.1.1",
+    "domino": "^2.1.4",
     "express": "^4.16.4",
     "frontblock": "^0.15.2",
     "frontblock-generic": "^0.34.8",
@@ -42,6 +41,7 @@
     "loadson": "^1.0.0",
     "log4js": "^4.5.1",
     "lowdb": "^1.0.0",
+    "ngx-cookie-service": "^2.4.0",
     "node-fetch": "^2.6.0",
     "path": "^0.12.7",
     "reflect-metadata": "^0.1.13",
@@ -54,16 +54,15 @@
     "tsyringe": "^4.0.1",
     "upgiter": "^1.0.4",
     "uuid": "^3.3.3",
-    "xml2js": "^0.4.22"
+    "xml2js": "^0.4.22",
+    "xmlhttprequest": "^1.8.0"
   },
   "devDependencies": {
     "madge": "^3.6.0",
-    "mocha": "^7.0.0",
+    "mocha": "^7.1.0",
     "terser-webpack-plugin": "^1.4.1",
     "ts-loader": "^5.3.3",
-    "typescript": "^3.5.3",
-    "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.5"
+    "typescript": "^3.5.3"
   },
   "files": [
     "lib/**/*"

src/backend/Admin/Admin.ts

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getLogger } from 'frontblock-generic/Types';
+import { getLogger, Logger, } from "log4js";
 import { promises as fs, mkdirSync } from "fs"
 import { RPCServer } from 'rpclibrary'
 import * as Path from 'path'
@@ -22,12 +22,7 @@ import { Injector } from '../Injector/Injector';
 import { Shoutbox } from '../Components/Shoutbox/Shoutbox';
 import { PubSub } from '../Components/PubSub/PubSub';
 
-//import { ngExpressEngine } from '../../frontend/node_modules/@nguniversal/express-engine';
-//import { APP_BASE_HREF } from '../../frontend/';
-//import { AppServerModule } from './app.server.module';
-
-
-const logger = getLogger("admin", 'debug') 
+getLogger().level = 'debug'
 
 @RootComponent({
     injectable: IAdmin,
@@ -73,15 +68,15 @@ implements TableDefinitionExporter, IAdmin {
         await this.makeKnex()
         this.startWebsocket()
         await Promise.all( this.frontworkComponents.map(c => c.initialize?c.initialize():undefined ))
-        logger.debug(this.frontworkComponents.length+" components initialized")
-        this.startWebserver()
+        getLogger('Admin#start').debug(this.frontworkComponents.length+" components initialized")
+        await this.startWebserver()
     }
 
     stop(){
         Promise.all([ 
             ...this.frontworkComponents.map(c => c.stop?c.stop():undefined ),
         ])
-        .catch(e => logger.warn(e))
+        .catch(e => getLogger('Admin#stop').warn(e))
         .finally(() => { 
             this.rpcServer.destroy()
             process.exit(0)
@@ -123,92 +118,56 @@ implements TableDefinitionExporter, IAdmin {
         ], {
             visibility: '0.0.0.0'
         })
-        logger.debug("Websocket up on", 20000)
+        getLogger('Admin#startWebsocket').debug("Websocket up on", 20000)
     }
 
-    private startWebserver(){
+    private async startWebserver(){
         if(this.httpServer != null || this.express != null){
-            logger.warn("Webserver is already running")
+            getLogger('Admin#startWebserver').warn("Webserver is already running")
             return
         }
         
         let port:number = this.config.getConfig().httpPort
         this.express = express()
 
-    /*
-        this.express.engine('html', ngExpressEngine({
-            bootstrap: AppServerModule,
-        }));
-        
-        this.express.set('view engine', 'html');
-        this.express.set('views', 'static');
-        
-          // Serve static files from /browser
-        this.express.get('*.*', express.static('static', {
-            maxAge: '1y'
-        }));
-
-        this.express.get("/", (request, response) => {
-            response.status(200)
-            response.sendFile('index.html');
-        })
-
-          // All regular routes use the Universal engine
-        this.express.get('*', (req, res) => {
-            res.status(301)
-            res.redirect('/')
-            //res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-        });
-*/
-/* */
-        // get the compiled FrontendPlugins.js
-        this.express.use('/', express.static('static'))
-
-        this.express.get('/plugins/:id'+".js", async (request, response) => {
-            const pth = Path.resolve("plugins/"+request.params.id, "FrontendPlugin.js");
-            const file = await fs.readFile(pth)
-            const frontend = file.toString()
-
-            response.status(200)
-            response.set('Content-Type', 'application/javascript')
-            response.send(frontend)
-        })
+        const distFolder = "../../../../dist"
+        const ngExpressServer = Path.join(__dirname, distFolder, 'server.js')
 
-        // serve the index.html from the static folder
-        this.express.get("/", (request, response) => {
-            response.status(200)
-            response.sendFile('index.html');
+        this.express.get('*.*', (req, res)=>{
+            //console.log('*.*', req.path);
+            res.sendFile(Path.join(__dirname, distFolder,'browser',decodeURIComponent(req.path)))
         })
 
-        // redirect all the other traffic to the single page app
-        this.express.get("*", (request, response) => {
-            response.status(301)
-            response.redirect('/')
-        })
+        try{
+            const req = require(distFolder+"/server.js")
+            await req.attachExpress(this.express)
+            getLogger('Admin#startWebserver').info('Frontend from '+ngExpressServer+" loaded")
+        }catch(e){
+            getLogger('Admin#startWebserver').error(e)
+            getLogger('Admin#startWebserver').warn("No angular SSR module was provided in "+ngExpressServer)
+            getLogger('Admin#startWebserver').warn("This is not fatal, but your page will not render on *"+port)
+        }
 
-        this.httpServer = new http.Server(this.express)
-        this.httpServer.listen(port, () => {
-            logger.info('Admin panel listening for HTTP on *'+port)
+        this.express.listen(port, () => {
+            getLogger('Admin#startWebserver').info('Admin panel listening for HTTP on *'+port)
         })
-
-/* */
     }
 
     private stopWebserver(){
         if(this.httpServer == null || this.express == null){
-            logger.warn("Webserver is not running")
+            getLogger('Admin#stopWebserver').warn("Webserver is not running")
             return
         }
         this.httpServer.close()
         this.httpServer = null
         this.express = null
-        logger.info("Webserver stopped")
+        getLogger('Admin#stopWebserver').info("Webserver stopped")
     }
 
     async makeKnex():Promise<Knex>{
         const conf:Knex.Config = this.config.getConfigKey("dbConf")
 
-        logger.debug("Making new knex:", conf)        
+        getLogger('Admin#makeKnex').debug("Making new knex:", conf)        
         if(conf.client === 'sqlite3'){
             mkdirSync(Path.dirname((<any>conf.connection).filename), {recursive: true})
         }
@@ -237,6 +196,6 @@ implements TableDefinitionExporter, IAdmin {
 }
 
 process.on( 'SIGINT', function() {
-    logger.info("Shutting down from SIGINT (Ctrl-C)" );
+    getLogger('process#SIGINT').info("Shutting down from SIGINT (Ctrl-C)" );
     Injector.resolve<FrontworkAdmin>(FrontworkAdmin).stop()
 })

src/backend/Admin/app.server.module.ts

@@ -1,21 +0,0 @@
-/*
-import { NgModule } from '../../frontend/node_modules/@angular/core';
-import { ServerModule } from '../../frontend/node_modules/@angular/platform-server';
-import { ModuleMapLoaderModule } from '../../frontend/node_modules/@nguniversal/module-map-ngfactory-loader';
-
-import { AppModule } from '../../frontend/src/app/app.module';
-import { AppComponent } from '../../frontend/src/app/app.component';
-
-@NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-    ModuleMapLoaderModule
-  ],
-  providers: [
-    // Add universal-only providers here
-  ],
-  bootstrap: [ AppComponent ],
-})
-export class AppServerModule {}
-*/

src/backend/Components/User/UserManager.ts

@@ -17,40 +17,42 @@ import { IRaidManager } from "../Raid/Interface";
 import { IItemManager } from "../Item/Interface";
 import { IGuildManager } from "../Guild/Interface";
 
+getLogger().level = "debug"
+
 const uuid = require('uuid/v4')
 
 const salt = "6pIbc6yjSN"
-const ONE_WEEK = 604800000 
+const ONE_WEEK = 604800000
 
 type Serverstate<SubresT, InterfaceT extends RPCInterface> = {
     server: RPCServer<SubresT, InterfaceT>,
-    port : number,
+    port: number,
 };
 
 
 @Injectable(IUserManager)
 export class UserManager
-implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManager{
+    implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManager {
     name = "UserManager" as "UserManager"
 
     @Inject(IAdmin)
     private admin: IAdmin
 
     @Inject(IGuildManager)
-    private guild : GuildManager
-    
+    private guild: GuildManager
+
     @Inject(IItemManager)
-    private item : ItemManager
-    
+    private item: ItemManager
+
     @Inject(IRaidManager)
-    private raid : RaidManager
-    
+    private raid: RaidManager
+
     @Inject(ICharacterManager)
-    private character : CharacterManager
-    
-    exporters :any[] = []
-    rankServer : Serverstate<{}, FrontcraftFeatureIfc>
-    userLogins : {[username in string] : UserRecord} = {}
+    private character: CharacterManager
+
+    exporters: any[] = []
+    rankServer: Serverstate<{}, FrontcraftFeatureIfc>
+    userLogins: { [username in string]: UserRecord } = {}
     allowed: string[] = []
 
     exportRPCs = () => [
@@ -64,46 +66,46 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
     ]
 
     exportRPCFeatures = () => [
-    {
-        name: 'manageUser' as 'manageUser',
-        exportRPCs: () => [
-            this.adminLogout,
-            this.changeRank,
-            this.adminChangePassword
-        ]
-    },{
-        name: 'modifyPermissions' as 'modifyPermissions',
-        exportRPCs: () => [
-            this.getPermissions,
-            this.setPermission,
-        ]
-    },{
-        name: 'softreserveCurrency' as 'softreserveCurrency',
-        exportRPCs: () => [
-            this.incrementCurrency,
-            this.decrementCurrency,
-            this.setCurrency
-        ]
-    }]
-
-    changeRank = async (user:User, rank:Rank): Promise<User> => {
+        {
+            name: 'manageUser' as 'manageUser',
+            exportRPCs: () => [
+                this.adminLogout,
+                this.changeRank,
+                this.adminChangePassword
+            ]
+        }, {
+            name: 'modifyPermissions' as 'modifyPermissions',
+            exportRPCs: () => [
+                this.getPermissions,
+                this.setPermission,
+            ]
+        }, {
+            name: 'softreserveCurrency' as 'softreserveCurrency',
+            exportRPCs: () => [
+                this.incrementCurrency,
+                this.decrementCurrency,
+                this.setCurrency
+            ]
+        }]
+
+    changeRank = async (user: User, rank: Rank): Promise<User> => {
         await this.admin
-        .knex('users')
-        .where({
-            username: user.username
-        }).update({
-            rank: rank
-        })
+            .knex('users')
+            .where({
+                username: user.username
+            }).update({
+                rank: rank
+            })
 
         await this.adminLogout(user.username)
 
         return await this.admin
-        .knex('users')
-        .where({
-            username: user.username
-        }).first()
+            .knex('users')
+            .where({
+                username: user.username
+            }).first()
     }
-    
+
     getTableDefinitions = (): TableDefiniton[] => [
         {
             name: 'users',
@@ -116,40 +118,40 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
                     table.integer(tier).defaultTo(1)
                 })
             }
-        },{
+        }, {
             name: 'rpcpermissions',
             tableBuilder: (table) => {
                 table.string("rpcname").primary().notNullable()
                 _Rank.forEach(r => {
-                    if(r === 'ADMIN')
+                    if (r === 'ADMIN')
                         table.boolean(r).defaultTo(true).notNullable()
                     else
                         table.boolean(r).defaultTo(false).notNullable()
                 })
             }
         }
-        ,...this.exporters.flatMap(exp => exp['getTableDefinitions']?exp['getTableDefinitions']():undefined)
+        , ...this.exporters.flatMap(exp => exp['getTableDefinitions'] ? exp['getTableDefinitions']() : undefined)
     ]
 
     initialize = async () => {
-        this.exporters = [this.guild, this.item, this.raid, this.character] 
+        this.exporters = [this.guild, this.item, this.raid, this.character]
         //set up permissions
-        getLogger('UserManager').debug('setting up permissions')
+        getLogger('UserManager#initialize').debug('setting up permissions')
 
-        await Promise.all( 
+        await Promise.all(
             [this, ...this.exporters].flatMap(exp => exp.exportRPCFeatures().map(async (feature) => {
-            try{
-                await this.admin.knex.insert({ rpcname: feature.name }).into('rpcpermissions')
-            }catch(e){
-            }
-        })))
+                try {
+                    await this.admin.knex.insert({ rpcname: feature.name }).into('rpcpermissions')
+                } catch (e) {
+                }
+            })))
 
         const rankServer = await this.startRankServer(20001)
         this.rankServer = {
             server: rankServer,
             port: 20001
         }
-        setInterval(this.checkExpiredSessions, 600_000)   
+        setInterval(this.checkExpiredSessions, 600_000)
     }
 
     stop = async () => {
@@ -157,115 +159,111 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
             Object.values(x.connections).forEach(c => c.destroy())
         })
 
-        try{
+        try {
             return this.rankServer.server.destroy()
-        }catch(e){
-            //getLogger('UserManager').warn(e)
+        } catch (e) {
+            getLogger('UserManager#stop').debug(String(e))
         }
     }
 
     checkExpiredSessions = () => {
         Object.values(this.userLogins).map(userLogin => {
             const auth = userLogin.auth
-            if(!this.checkToken(auth.token.value)){
+            if (!this.checkToken(auth.token.value)) {
                 this.logout(auth.user.username, auth.token.value)
             }
         })
     }
 
-    checkConnection = async (socket: Socket) => {
-        
-        let data : any
-        let tries = 0
-        while(!data){
-            tries ++
-            if(tries === 5){
-                getLogger('UserManager').debug('Connection check failed for connection *'+socket.port)
-                socket.destroy()
-                return false
+    checkConnection = async (socket: Socket, retries = 0) : Promise<boolean> => {
+        if(retries < 0){
+            return false
+        }
+        //give the client some time to bind its hooks
+        await new Promise((res, rej) => { setTimeout(res, 150);})
+
+        let data
+        try{
+            data = await Promise.race([socket.call('getUserData'), new Promise((res, rej) => { setTimeout(res, 250);})])
+        }catch(e){
+            getLogger('UserManager#checkConnection').debug('Client didn\'t respond', e)
+            return false
+        }
+
+        if(!data) {
+            if(retries > 0){
+                return await this.checkConnection(socket, retries-1)
             }
-            data = await Promise.race([socket.call('getUserData'), new Promise((res, rej) => { setTimeout(res, 1000);})])
+            return false
         }
-        if(!this.userLogins[data.user.username]){
+
+        if (!this.userLogins[data.user.username]) {
             await this.logout(data.user.username, data.token.value)
             return false
         }
 
         this.userLogins[data.user.username].connections[socket.port] = socket
-        await socket.call('navigate', ["/frontcraft/dashboard"])
+        getLogger('UserManager#checkConnection').debug(this.userLogins, this.allowed);
+        
         return true
     }
 
-    changePassword = async (userToken:string, pwHash:string) : Promise<User> => {
+    changePassword = async (userToken: string, pwHash: string): Promise<User> => {
         const record = this.getUserRecordByToken(userToken)
-        if(!record) return {} as User
+        if (!record) return {} as User
         return await this.adminChangePassword(record.user, pwHash)
     }
 
-    adminChangePassword = async(user:User, pwHash:string) : Promise<User> => {
+    adminChangePassword = async (user: User, pwHash: string): Promise<User> => {
         const salted = await saltedHash(pwHash, salt)
         await this.admin.knex('users')
-        .update({pwhash: salted})
-        .where({
-            username: user.username
-        })
+            .update({ pwhash: salted })
+            .where({
+                username: user.username
+            })
 
         const usr = await this.getUser(user.username)
-        if(!usr) return {} as any
+        if (!usr) return {} as any
         await this.adminLogout(usr.username)
         return usr
     }
 
     setPermission = async (permission: RPCPermission) => {
         await this.admin.knex('rpcpermissions')
-        .where('rpcname', '=', permission.rpcname)
-        .update(permission)
+            .where('rpcname', '=', permission.rpcname)
+            .update(permission)
 
         await Promise.all(
             Object.entries(this.userLogins).map(([username, record]) => {
-                if(record.user.rank === "ADMIN") return
+                if (record.user.rank === "ADMIN") return
                 return this.adminLogout(username)
             })
         )
     }
 
-    getPermissions = async () : Promise<RPCPermission[]> => {
+    getPermissions = async (): Promise<RPCPermission[]> => {
         return await this.admin.knex.select('*').from('rpcpermissions')
     }
 
-    getPermission = async (feature: keyof FrontcraftFeatureIfc, rank:Rank) : Promise<boolean> => {
-        const perm : RPCPermission = await this.admin.knex
+    getPermission = async (feature: keyof FrontcraftFeatureIfc, rank: Rank): Promise<boolean> => {
+        const perm: RPCPermission = await this.admin.knex
             .select(rank)
             .from('rpcpermissions')
             .where('rpcname', '=', <string>feature)
             .first()
 
-        if(!perm) return false
+        if (!perm) return false
         return perm[rank]
     }
 
-    getRPCForRank = async (rank: Rank): Promise<AnyRPCExporter[]> => {
-        let rpcs = [
-            ...this.exportRPCFeatures(), 
-            ...this.exporters.flatMap((exp) => exp.exportRPCFeatures())
-        ]
-        
-        const bits = await  Promise.all(rpcs.map(async (feature) => {
-            const allowed = await this.getPermission(<keyof FrontcraftFeatureIfc> feature.name, rank)
-            return allowed
-        }))
-
-        return rpcs.filter(entry => bits.shift())
-    }
-
-    createUser = async(user:User): Promise<User> => {
-        if(user.rank === 'ADMIN'){
+    createUser = async (user: User): Promise<User> => {
+        if (user.rank === 'ADMIN') {
             const admins = await this.admin.knex
                 .select("*")
                 .from('users')
-                .where({rank: 'ADMIN'})
+                .where({ rank: 'ADMIN' })
 
-            if(admins.length > 0){
+            if (admins.length > 0) {
                 return {} as User
             }
         }
@@ -273,128 +271,139 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
         user.pwhash = await saltedHash(user.pwhash, salt)
 
         await this.admin.knex('users')
-        .insert(user)
+            .insert(user)
 
         const userRecord = await this.admin.knex
-        .select("*")
-        .from('users')
-        .where(user)
-        .first()
+            .select("*")
+            .from('users')
+            .where(user)
+            .first()
 
         return userRecord
     }
 
-    getUser = async (username: string) : Promise<User | void> => await this.admin
-    .knex('users')
-    .select('*')
-    .where({
-        username: username.toLowerCase()
-    })
-    .first()
+    getUser = async (username: string): Promise<User | void> => await this.admin
+        .knex('users')
+        .select('*')
+        .where({
+            username: username.toLowerCase()
+        })
+        .first()
 
-    logout = async (username:string, tokenValue : string) : Promise<void> => {
-        try{
-            if(!this.checkTokenOwnedByUser(username, tokenValue)) return
+    logout = async (username: string, tokenValue: string): Promise<void> => {
+        try {
+            if (!this.checkTokenOwnedByUser(username, tokenValue)) return
             return await this.adminLogout(username)
-        }catch(e){
+        } catch (e) {
 
         }
     }
 
-    adminLogout = async(username: string) : Promise<void> => {
-        try{
-            if(this.userLogins[username]){
-                await Promise.all (Object.values(this.userLogins[username].connections).map(async (sock) => {
-                    await sock.call('kick')
-                }))
-            
-                this.allowed = this.allowed.filter(allowed => allowed !== this.userLogins[username].auth.token.value)
+    adminLogout = async (username: string): Promise<void> => {
+        try {
+            if (this.userLogins[username]) {
+                const token = this.userLogins[username].auth.token.value
+                //doesn't matter if error or success
+                Object.values(this.userLogins[username].connections).forEach(async (sock) => {
+                    try{
+                        await sock.call('kick')
+                    }catch(e){
+                        //getLogger('UserManager#adminLogout#kick').debug(String(e))
+                    }
+                })
+                this.allowed = this.allowed.filter(allowed => {
+                    return allowed != token
+                })
                 delete this.userLogins[username]
             }
-        }catch(e){}
+        } catch (e) {
+            getLogger('UserManager#adminLogout').debug(String(e), this.userLogins)
+        }
     }
 
     wipeCurrency = async () => {
         await Promise.all(_Tiers.map(tier => {
             const update = {}
             update[tier] = 1
-    
+
             return this.admin.knex('users')
-            .update(update)
+                .update(update)
         }))
     }
 
-    login = async(username:string, pwHash:string) : Promise<Auth> => {
+    login = async (username: string, pwHash: string): Promise<Auth> => {
         username = username.toLowerCase()
-        const user:User = await this.admin.knex
-        .select('*')
-        .from('users')
-        .where({ username: username })
-        .first()
-         
+        const user: User = await this.admin.knex
+            .select('*')
+            .from('users')
+            .where({ username: username })
+            .first()
+
         const salted = await saltedHash(pwHash, salt)
 
-        if(user && salted === user.pwhash){
+        if (user && salted === user.pwhash) {
             delete user.pwhash
 
             //return existing auth
-            if(this.userLogins[username] != null){
+            if (this.userLogins[username] != null) {
                 return this.userLogins[username].auth
             }
-            
+
             const token = this.createToken(user)
-            const userAuth : Auth = {
+            const userAuth: Auth = {
                 token: token,
                 user: user,
                 port: this.rankServer.port
             }
 
-            this.userLogins[user.username] = {connections: {}, auth: userAuth, user:user}
+            this.userLogins[user.username] = { connections: {}, auth: userAuth, user: user }
             this.allowed.push(token.value)
-            return userAuth 
+
+            return userAuth
         }
 
         throw new Error('login failed')
     }
 
-    getUserRecordByToken(tokenValue: string){
+    getUserRecordByToken(tokenValue: string) {
         return Object.values(this.userLogins).find(login => login.auth.token.value === tokenValue)
     }
 
-    getAuth = async (tokenValue:string) : Promise<Auth | void> => {
+    getAuth = async (tokenValue: string): Promise<Auth | void> => {
         const maybeAuth = this.getUserRecordByToken(tokenValue)
-        if(maybeAuth)
+        if (maybeAuth)
             return maybeAuth.auth
         return
     }
 
-    startRankServer = async (port: number) : Promise<RPCServer<{},FrontcraftFeatureIfc>> => {
+    startRankServer = async (port: number): Promise<RPCServer<{}, FrontcraftFeatureIfc>> => {
         let rpcs = [
-            ...this.exportRPCFeatures(), 
+            ...this.exportRPCFeatures(),
             ...this.exporters.flatMap((exp) => exp.exportRPCFeatures())
         ]
-        let rpcServer = new RPCServer<{},FrontcraftFeatureIfc>(port, rpcs, {
+        let rpcServer = new RPCServer<{}, FrontcraftFeatureIfc>(port, rpcs, {
             accessFilter: async (sesame, exporter) => {
                 const record = this.getUserRecordByToken(sesame!)
-                if(!record) return false
+                if (!record) return false
                 return await this.getPermission(exporter.name, record.user.rank)
             },
-            closeHandler: (socket) => { 
-                Object.values(this.userLogins)
-                    .forEach(login => delete login.connections[socket.port])
-
+            closeHandler: (socket) => {
+                Object.values(this.userLogins).forEach(login => delete login.connections[socket.port])
+                getLogger('UserManager#closeHandler').debug(this.userLogins, this.allowed)
             },
             connectionHandler: (socket) => {
-                this.checkConnection(socket).then(res => {
-                    if(!res){
+                this.checkConnection(socket, 10).then(res => {
+                    if (!res) {
+                        getLogger('UserManager#connectionHandler').debug("Connection on "+socket.port+" failed to authenticate")
                         socket.destroy();
                     }
                 }).catch((e) => {
+                    getLogger('UserManager#connectionHandler').debug(String(e))
                     socket.destroy();
                 })
             },
             errorHandler: (socket, e, rpcName, args) => {
-                getLogger('UserManager').error(rpcName, args, e);
+                getLogger('UserManager#errorHandler').error(rpcName, args, e);
             },
             sesame: (sesame) => this.checkToken(sesame),
             visibility: '0.0.0.0'
@@ -403,25 +412,27 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
         return rpcServer
     }
 
-    checkToken = (token: string) : boolean => this.allowed.includes(token)
-                                            && Object.values(this.userLogins).find(login => login.auth.token.value === token)!.auth.token.created > Date.now() - ONE_WEEK
-
+    checkToken = (token: string): boolean => {
+        return this.allowed.includes(token)
+            && Object.values(this.userLogins).find(login => login.auth.token.value === token)!.auth.token.created > Date.now() - ONE_WEEK
+    }
+    
     checkTokenOwnedByUser = (username: string, tokenValue: string) => {
         username = username.toLowerCase()
         const maybeRecord = this.getUserRecordByToken(tokenValue)
-        if(!maybeRecord || maybeRecord.auth.user.username != username){
+        if (!maybeRecord || maybeRecord.auth.user.username != username) {
             return false
-        } 
+        }
         return true
     }
-                                                       
-    createToken = (user:User): Token => {
-        
-        if(this.userLogins[user.username]){
+
+    createToken = (user: User): Token => {
+
+        if (this.userLogins[user.username]) {
             return this.userLogins[user.username].auth.token
         }
 
-        const token:Token = {
+        const token: Token = {
             value: uuid(),
             user_id: user.id!,
             created: Date.now()
@@ -430,47 +441,47 @@ implements FrontworkComponent<UserManagerIfc, UserManagerFeatureIfc>, IUserManag
         return token
     }
 
-    getCurrency = async(user:User, tier?: Tiers) : Promise<number> => { 
-        if(!tier) return 0
-        const usr : User = await this.admin
-        .knex('users')
-        .where('username', '=', user.username)
-        .select('*')
-        .first()
+    getCurrency = async (user: User, tier?: Tiers): Promise<number> => {
+        if (!tier) return 0
+        const usr: User = await this.admin
+            .knex('users')
+            .where('username', '=', user.username)
+            .select('*')
+            .first()
 
         return usr[tier]!
     }
 
     decrementCurrency = async (user: User, tier?: Tiers, value = 1) => {
-        if(!tier || value < 1) return
+        if (!tier || value < 1) return
 
-        const usr : User = await this.admin
-        .knex('users')
-        .where('id', '=', user.id)
-        .select('*')
-        .first()
+        const usr: User = await this.admin
+            .knex('users')
+            .where('id', '=', user.id)
+            .select('*')
+            .first()
 
-        if(!usr || usr[tier]! <= 0) return
+        if (!usr || usr[tier]! <= 0) return
 
         await this.admin
-        .knex('users')
-        .where('id', '=', user.id)
-        .decrement(tier, value)
+            .knex('users')
+            .where('id', '=', user.id)
+            .decrement(tier, value)
     }
 
     incrementCurrency = async (user: User, tier: Tiers, value = 1) => {
-        if(!tier || value < 1) return
+        if (!tier || value < 1) return
         await this.admin
-        .knex('users')
-        .where('id', '=', user.id)
-        .increment(tier, value)
+            .knex('users')
+            .where('id', '=', user.id)
+            .increment(tier, value)
     }
 
-    setCurrency = async (user: User, tier?:Tiers, value = 0) => {
-        if(!tier || value < 0) return
+    setCurrency = async (user: User, tier?: Tiers, value = 0) => {
+        if (!tier || value < 0) return
         await this.admin
-        .knex('users')
-        .where('id', '=', user.id)
-        .update(tier, value)
+            .knex('users')
+            .where('id', '=', user.id)
+            .update(tier, value)
     }
 }

src/backend/main.server.ts

@@ -1,2 +0,0 @@
-//import { enableProdMode } from '../frontend/node_modules/@angular/core';
-//enableProdMode();

src/backend/webpack.prod.js

@@ -1,68 +0,0 @@
-const path = require('path');
-
-module.exports = [{
-  mode: 'production',
-  target: "node",
-  node: {
-    global: true,
-    process: true,
-    __filename: false,
-    __dirname: false,
-    Buffer: true,
-  },
-  
-  resolve: {
-    // Add `.ts` and `.tsx` as a resolvable extension.
-
-    extensions: [".ts", ".tsx", ".js"]
-  },
-  module: {
-    rules: [
-      { test: /\.ts?$/, loader: "ts-loader" }
-    ]
-  },
-
-  externals: ['knex'],
-  optimization: {
-    minimize: false
-  },
-  entry: path.resolve(__dirname, 'Installer.ts'),
-  output: {
-      path: path.resolve(__dirname, '../../dist'),
-      filename: 'Installer.js',
-      libraryTarget: 'commonjs',
-  }
-},{
-  mode: 'production',
-  target: "node",
-  node: {
-    global: true,
-    process: true,
-    __filename: false,
-    __dirname: false,
-    Buffer: true,
-  },
-
-  
-  resolve: {
-    // Add `.ts` and `.tsx` as a resolvable extension.
-
-    extensions: [".ts", ".tsx", ".js"]
-  },
-  module: {
-    rules: [
-      { test: /\.ts?$/, loader: "ts-loader" }
-    ]
-  },
-
-  externals:["./Installer"],
-  optimization: {
-    minimize: false
-  },
-  entry: path.resolve(__dirname, 'Launcher.ts'),
-  output: {
-      path: path.resolve(__dirname, '../../dist'),
-      filename: 'FrontblockAdmin.js',
-      libraryTarget: 'commonjs',
-  }
-}]

src/frontend/angular.json

@@ -13,10 +13,10 @@
           "options": {
             "preserveSymlinks": true,
             "rebaseRootRelativeCssUrls": true,
-            "outputPath": "dist",
+            "outputPath": "dist/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "./tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -51,20 +51,13 @@
               "node_modules/echarts/dist/echarts.min.js",
               "node_modules/echarts/dist/extension/bmap.min.js",
               "node_modules/chart.js/dist/Chart.min.js",
-              "node_modules/rpclibrary/js/browser/rpclibrary.browser.js"
+              "node_modules/rpclibrary/js/browser/rpclibrary.browser.js",
+              "node_modules/js-cookie/src/js.cookie.js"
             ]
           },
           "configurations": {
             "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -136,7 +129,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
+              "./tsconfig.app.json",
               "src/tsconfig.spec.json"
             ],
             "typeCheck": true,
@@ -167,6 +160,23 @@
           }
         }
       }
+    },
+    "frontcraft": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "",
+      "prefix": "app",
+      "architect": {
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "./src/main.server.ts",
+            "tsConfig": "./tsconfig.server.json"
+          }
+        }
+      }
     }
   },
   "defaultProject": "ngx-admin-demo",

src/frontend/package-lock.json

@@ -425,6 +425,7 @@
       "version": "8.2.14",
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.2.14.tgz",
       "integrity": "sha512-ABZO4E7eeFA1QyJ2trDezxeQM5ZFa1dXw1Mpl/+1vuXDKNjJgNyWYwKp/NwRkLmrsuV0yv4UDCDe4kJOGbPKnw==",
+      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -1350,6 +1351,16 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/platform-server": {
+      "version": "8.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-8.2.14.tgz",
+      "integrity": "sha512-gGAgxMmac5CyLcwgB+qCD1o75An0NmpREh/lxPgz6n6Zs9JqdqpZROLSIHqGBaU6MWo1qiOfS6L08HwYPx7ipQ==",
+      "requires": {
+        "domino": "^2.1.2",
+        "tslib": "^1.9.0",
+        "xhr2": "^0.1.4"
+      }
+    },
     "@angular/router": {
       "version": "8.2.14",
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.2.14.tgz",
@@ -2511,11 +2522,11 @@
       "integrity": "sha512-jX6R5lApSBtPHcZzgJ1+URxvJhmSodX+YcuDnuYsQJB1nkpC0Kjs6XL5OEONVg4NaoYcxMYmnxRe51lrlQdilg=="
     },
     "@nebular/theme": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.4.0.tgz",
-      "integrity": "sha512-UcK1hwMvJXDROU9QiCfRq5LXRV9gB+K+AJtg1UYhvNJ+NzZkLyn+P+wFNX0StI91BjjNw3T699Xvz4B0grWhlA==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.6.0.tgz",
+      "integrity": "sha512-S7topzx0Hf9D7YkQxKJ8UB1G2/sEN3o4eKjkRe8Xv5n7H3WqpKQ9Uef3oW2mTf75dmICBldhKXvopdr6TA5foA==",
       "requires": {
-        "intersection-observer": "0.5.0"
+        "intersection-observer": "0.7.0"
       }
     },
     "@ngtools/webpack": {
@@ -2542,6 +2553,24 @@
         }
       }
     },
+    "@nguniversal/common": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@nguniversal/common/-/common-9.0.1.tgz",
+      "integrity": "sha512-AprW7oREmywDudrBI1auy4lB6AQFKHLeebdY7vAXjviIEzBDm9Zd1Z59SqFtp+H4Pce8R7tQ3zoXY1n7azCigg=="
+    },
+    "@nguniversal/express-engine": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@nguniversal/express-engine/-/express-engine-9.0.1.tgz",
+      "integrity": "sha512-uICu/CVrKuRYKUhpn91tRoERRhorDH038zyUsQt3yqsKV5BXyclr+H0lHh94dXyi+W0RKmksvzGNshwc4IWnUA==",
+      "requires": {
+        "@nguniversal/common": "9.0.1"
+      }
+    },
+    "@nguniversal/module-map-ngfactory-loader": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@nguniversal/module-map-ngfactory-loader/-/module-map-ngfactory-loader-8.2.6.tgz",
+      "integrity": "sha512-YcxXSrDZt6iDR+YbesJvprNpHd1nRLeThJwAFlcwvK/GVGSyKeWV6eqk3bRkBkgkw8OwaG/4lOQ4aofxQw+13w=="
+    },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
@@ -6490,6 +6519,12 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "dev": true
+    },
     "detect-indent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@@ -6785,6 +6820,11 @@
         "domelementtype": "1"
       }
     },
+    "domino": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.4.tgz",
+      "integrity": "sha512-l70mlQ7IjPKC8kT7GljQXJZmt5OqFL+RE91ik5y5WWQtsd9wP8R7gpFnNu96fK5MqAAZRXfLLsnzKtkty5fWGQ=="
+    },
     "domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -7547,6 +7587,15 @@
         }
       }
     },
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
     "express": {
       "version": "4.17.1",
       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
@@ -8011,6 +8060,18 @@
       "integrity": "sha1-WKRmaX34piBc39vzlVNri9d3pfY=",
       "dev": true
     },
+    "findup-sync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
+      "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==",
+      "dev": true,
+      "requires": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      }
+    },
     "flat-cache": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
@@ -8907,6 +8968,41 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^3.0.0"
+      },
+      "dependencies": {
+        "global-prefix": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+          "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+          "dev": true,
+          "requires": {
+            "ini": "^1.3.5",
+            "kind-of": "^6.0.2",
+            "which": "^1.3.1"
+          }
+        }
+      }
+    },
+    "global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -9610,10 +9706,16 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "dev": true
+    },
     "intersection-observer": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.0.tgz",
-      "integrity": "sha512-8Zgt4ijlyvIrQVTA7MPb2W9+KhoetrAbxlh0RmTGxpx0+ZsAXvy7IsbNnZIrqZ6TddAdWeQj49x7Ph7Ir6KRkA=="
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
     },
     "intl": {
       "version": "1.2.5",
@@ -10261,6 +10363,11 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
       "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15544,6 +15651,29 @@
         "resolve-from": "^3.0.0"
       }
     },
+    "resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "dependencies": {
+        "global-modules": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+          "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+          "dev": true,
+          "requires": {
+            "global-prefix": "^1.0.1",
+            "is-windows": "^1.0.1",
+            "resolve-dir": "^1.0.0"
+          }
+        }
+      }
+    },
     "resolve-from": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
@@ -18531,6 +18661,12 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
+    "v8-compile-cache": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
+      "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==",
+      "dev": true
+    },
     "v8flags": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
@@ -19409,6 +19545,234 @@
         "webpack-sources": "^1.4.1"
       }
     },
+    "webpack-cli": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.11.tgz",
+      "integrity": "sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.2",
+        "cross-spawn": "6.0.5",
+        "enhanced-resolve": "4.1.0",
+        "findup-sync": "3.0.0",
+        "global-modules": "2.0.0",
+        "import-local": "2.0.0",
+        "interpret": "1.2.0",
+        "loader-utils": "1.2.3",
+        "supports-color": "6.1.0",
+        "v8-compile-cache": "2.0.3",
+        "yargs": "13.2.4"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "invert-kv": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "lcid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+          "dev": true,
+          "requires": {
+            "invert-kv": "^2.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+          "dev": true,
+          "requires": {
+            "execa": "^1.0.0",
+            "lcid": "^2.0.0",
+            "mem": "^4.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "13.2.4",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz",
+          "integrity": "sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "os-locale": "^3.1.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "webpack-core": {
       "version": "0.6.9",
       "resolved": "https://registry.npmjs.org/webpack-core/-/webpack-core-0.6.9.tgz",
@@ -20508,6 +20872,11 @@
       "integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=",
       "dev": true
     },
+    "xhr2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz",
+      "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8="
+    },
     "xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",

src/frontend/package.json

@@ -11,10 +11,11 @@
   },
   "scripts": {
     "ng": "ng",
+    "webpack:server": "webpack --config webpack.server.config.js",
     "conventional-changelog": "conventional-changelog",
     "start": "ng serve",
-    "build": "ng build",
-    "build:prod": "npm run build -- --prod --aot",
+    "build": "rm -rf dist serverBundle && npm run ngbuild && ng run frontcraft:server && webpack --config webpack.server.config",
+    "ngbuild": "ng build --prod",
     "test": "ng test",
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
     "lint": "ng lint",
@@ -26,25 +27,29 @@
     "docs": "compodoc -p src/tsconfig.app.json -d docs",
     "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
     "prepush": "npm run lint:ci",
-    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
+    "add": "ng add @nguniversal/express-engine",
+    "tsc": "tsc --project src/tsconfig.server.json && webpack --config extra-webpack.config.js"
   },
   "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
-    "@angular-builders/custom-webpack": "^8.2.0",
-    "@angular/animations": "^8.0.0",
-    "@angular/cdk": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
+    "@angular-builders/custom-webpack": "^8.4.1",
+    "@angular/animations": "^8.2.14",
+    "@angular/cdk": "^8.2.3",
+    "@angular/common": "^8.2.14",
+    "@angular/core": "^8.2.14",
     "@angular/forms": "^8.0.0",
     "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.2.14",
+    "@angular/platform-server": "^8.2.14",
     "@angular/router": "^8.0.0",
     "@asymmetrik/ngx-leaflet": "3.0.1",
     "@nebular/auth": "4.4.0",
     "@nebular/eva-icons": "4.4.0",
     "@nebular/security": "4.4.0",
-    "@nebular/theme": "^4.4.0",
+    "@nebular/theme": "^4.6.0",
+    "@nguniversal/express-engine": "^9.0.1",
+    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
     "@swimlane/ngx-charts": "^10.0.0",
     "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
@@ -58,6 +63,7 @@
     "eva-icons": "^1.1.0",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
+    "js-cookie": "^2.2.1",
     "leaflet": "1.2.0",
     "nebular-icons": "1.1.0",
     "ng2-ckeditor": "^1.2.2",
@@ -81,8 +87,9 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.24",
-    "@angular/cli": "^8.0.2",
-    "@angular/compiler-cli": "^8.0.0",
+    "@angular/cli": "^8.3.25",
+    "@angular/compiler": "^8.2.14",
+    "@angular/compiler-cli": "^8.2.14",
     "@angular/language-service": "8.0.0",
     "@compodoc/compodoc": "^1.1.11",
     "@fortawesome/fontawesome-free": "^5.2.0",
@@ -109,6 +116,7 @@
     "ts-node": "3.2.2",
     "tslint": "^5.7.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "^3.5.1"
+    "typescript": "^3.5.1",
+    "webpack-cli": "^3.3.11"
   }
 }

src/frontend/server.ts

@@ -0,0 +1,47 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+import { resolve } from 'path';
+import { enableProdMode } from '@angular/core';
+const domino = require('domino');
+const win = domino.createWindow('');
+
+global['window'] = win;
+global['document'] = win.document;
+global['alert'] = console.log
+global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
+
+export async function attachExpress(app, staticDir = "./dist") {
+  const STATIC_FOLDER = resolve(process.cwd(), staticDir);
+
+  enableProdMode();
+
+  const bundle = require(staticDir + '/server/main');
+
+  const ServerApiService = bundle.ServerApiService
+  const serviceObj = new ServerApiService()
+  await serviceObj.initialize()
+
+  app.set('view engine', 'html');
+  app.engine(
+    'html',
+    ngExpressEngine({
+      bootstrap: bundle.AppServerModuleNgFactory,
+      providers: [
+        provideModuleMap(bundle.LAZY_MODULE_MAP),
+        {
+          provide: bundle.IApiService,
+          useValue: serviceObj,
+          deps: []
+        }
+      ]
+    })
+  );
+
+  app.get('*', (req, res) => {
+    //console.log('*', req.path);
+    res.render(resolve(STATIC_FOLDER, 'browser/index'), { req, res })
+  });
+}

src/frontend/src/app/@core/core.module.ts

@@ -1,20 +1,11 @@
-import { ModuleWithProviders, NgModule, Optional, SkipSelf, APP_INITIALIZER } from '@angular/core';
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
-import { ApiService, initializeLoginSvc } from '../frontcraft/services/login-api';
 import { CookieService } from 'ngx-cookie-service';
 import { LayoutService } from './utils';
 
 const DATA_SERVICES = [  
-  {provide: ApiService, useClass: ApiService},
-  {provide: CookieService, useClass: CookieService},
-  {
-    provide: APP_INITIALIZER,
-    useFactory: initializeLoginSvc,
-    deps: [ApiService, CookieService],
-    multi: true
-  }
 ];
 
 export const NB_CORE_PROVIDERS = [

src/frontend/src/app/@theme/components/header/chat.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { ApiService } from '../../../frontcraft/services/login-api';
 import { ShoutMessage } from '../../../../../../backend/Components/Shoutbox/Interface';
+import { IApiService } from '../../../frontcraft/services/ApiService';
 
 @Component({
   selector: 'chat',
@@ -31,7 +31,7 @@ export class ChatComponent {
   history
 
   constructor(
-    private api: ApiService
+    private api: IApiService
   ) {}
 
   submit(event){

src/frontend/src/app/@theme/components/header/header.component.ts

@@ -1,14 +1,14 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NbMediaBreakpointsService, NbSidebarService, NbThemeService, NbMenuItem, NbDialogService } from '@nebular/theme';
+import { NbSidebarService, NbThemeService, NbMenuItem, NbDialogService } from '@nebular/theme';
 
 import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { ApiService } from '../../../frontcraft/services/login-api';
 import { User } from '../../../../../../backend/Types/Types';
 import { Router } from '@angular/router';
 import { ChatComponent } from './chat.component';
 import { ShoutMessage } from '../../../../../../backend/Components/Shoutbox/Interface';
+import { IApiService } from '../../../frontcraft/services/ApiService';
 
 @Component({
   selector: 'ngx-header',
@@ -54,8 +54,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
               private router: Router,
               private themeService: NbThemeService,
               private layoutService: LayoutService,
-              private breakpointService: NbMediaBreakpointsService,
-              private api: ApiService,
+              private api: IApiService,
               private dialogService : NbDialogService
              ) {}
 

src/frontend/src/app/@theme/components/tiny-mce/tiny-mce.component.ts

@@ -17,21 +17,9 @@ export class TinyMCEComponent implements OnDestroy, AfterViewInit {
   ) { }
 
   ngAfterViewInit() {
-    tinymce.init({
-      target: this.host.nativeElement,
-      plugins: ['link', 'paste', 'table'],
-      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
-      setup: editor => {
-        this.editor = editor;
-        editor.on('keyup', () => {
-          this.editorKeyup.emit(editor.getContent());
-        });
-      },
-      height: '320',
-    });
+    
   }
 
   ngOnDestroy() {
-    tinymce.remove(this.editor);
   }
 }

src/frontend/src/app/app-routing.module.ts

@@ -1,25 +1,94 @@
 import { ExtraOptions, RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
+import { PagesLayoutComponent } from './frontcraft/pages/pages-layout.component';
+import { FrontcraftUserComponent } from './frontcraft/pages/user/user.component';
+import { FrontcraftRaidComponent } from './frontcraft/pages/raid/raid.component';
+import { FrontcraftArchiveComponent } from './frontcraft/pages/raid/archive.component';
+import { FrontcraftRaidsComponent } from './frontcraft/pages/raids/raids.component';
+import { FrontcraftCharacterComponent } from './frontcraft/pages/character/character.component';
+import { FrontcraftCharactersComponent } from './frontcraft/pages/characters/characters.component';
+import { FrontcraftRulesComponent } from './frontcraft/pages/rules/rules.component';
+import { FrontcraftArmoryComponent } from './frontcraft/pages/armory/armory.component';
+import { RegisterComponent } from './frontcraft/auth/register/register.component';
+import { LogoutComponent } from './frontcraft/auth/logout/logout.component';
+import { MyLoginComponent } from './frontcraft/auth/login/login.component';
+import { AuthComponent } from './frontcraft/auth/auth-layout.component';
+import { ChangePermissionsComponent } from './frontcraft/permissions/changePermissions/changePermissions.component';
+import { PermissionsComponent } from './frontcraft/permissions/permissions-layout.component';
 
 const routes: Routes = [
   {
     path: 'permissions',
-    loadChildren: () => import('./frontcraft/permissions/permissions.module')
-      .then(m => m.PermissionsModule),
+    component: PermissionsComponent,
+    children: [
+      {
+          path: '**',
+          component: ChangePermissionsComponent,
+      },
+    ]
   },
   {
     path: 'auth',
-    loadChildren: () => import('./frontcraft/auth/auth.module')
-      .then(m => m.MyAuthModule),
+    component: AuthComponent,
+        children: [
+            {
+                path: 'register',
+                component: RegisterComponent
+            },
+            {
+                path: 'logout',
+                component: LogoutComponent,
+            },
+            {
+                path: '**',
+                component: MyLoginComponent,
+            },
+        ]
   },
   {
     path: 'frontcraft',
-    loadChildren: () => import('./frontcraft/pages/pages.module')
-      .then(m => m.FrontcraftPagesModule),
+    component: PagesLayoutComponent,
+    children: [
+        {
+            path: 'user/:name',
+            component: FrontcraftUserComponent
+        },
+        {
+            path: 'raid/:id',
+            component: FrontcraftRaidComponent
+        },
+        {
+            path: 'archive/:id',
+            component: FrontcraftArchiveComponent
+        },
+        {
+            path: 'raids',
+            component: FrontcraftRaidsComponent
+        },
+        {
+            path: 'character/:name',
+            component: FrontcraftCharacterComponent
+        },
+        {
+            path: 'characters',
+            component: FrontcraftCharactersComponent
+        },
+        {
+            path: 'rules',
+            component: FrontcraftRulesComponent
+        },
+        {
+            path: 'armory',
+            component: FrontcraftArmoryComponent
+        },
+        {
+            path: '**',
+            redirectTo: 'raids'
+        },
+    ]
   },
-  
-  { path: '', redirectTo: 'frontcraft', pathMatch: 'full' },
-  { path: '**', redirectTo: 'frontcraft' },
+  { path: '', redirectTo: 'frontcraft/raids', pathMatch: 'full' },
+  { path: '**', redirectTo: 'frontcraft/raids' },     
 ];
 
 const config: ExtraOptions = {

src/frontend/src/app/app.component.ts

@@ -3,9 +3,7 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { Component, OnInit, Inject, PLATFORM_ID, APP_ID } from '@angular/core';
-import { ApiService } from './frontcraft/services/login-api';
-import { isPlatformBrowser } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'ngx-app',
@@ -13,17 +11,7 @@ import { isPlatformBrowser } from '@angular/common';
 })
 export class AppComponent implements OnInit {
 
-  constructor(
-    private loginSvc: ApiService,
-    @Inject(PLATFORM_ID) private platformId: Object,
-    @Inject(APP_ID) private appId: string
-  ) {
-      if(!isPlatformBrowser(platformId)){
-        global['window'] = {}
-      }
-  }
+  constructor() {  }
 
-  ngOnInit(): void {
-
-  }
+  ngOnInit(): void { }
 }

src/frontend/src/app/app.module.ts

@@ -5,7 +5,7 @@
  */
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule, APP_INITIALIZER, NgZone, Injector } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ThemeModule } from './@theme/theme.module';
 import { AppComponent } from './app.component';
@@ -19,14 +19,17 @@ import {
   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
-import { ApiService, initializeLoginSvc } from './frontcraft/services/login-api';
-import { CookieService } from 'ngx-cookie-service';
 import { CoreModule } from './@core/core.module';
+import { FrontcraftPagesModule } from './frontcraft/pages/pages.module';
+import { MyAuthModule } from './frontcraft/auth/auth.module';
+import { PermissionsModule } from './frontcraft/permissions/permissions.module';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent
+  ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'frontcraft' }),
     BrowserAnimationsModule,
     HttpClientModule,
     AppRoutingModule,
@@ -41,17 +44,12 @@ import { CoreModule } from './@core/core.module';
       messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
     }),
     CoreModule.forRoot(),
+    FrontcraftPagesModule,
+    MyAuthModule,
+    PermissionsModule
   ],
   bootstrap: [AppComponent],
-  providers: [
-    ApiService,
-    {
-        provide: APP_INITIALIZER,
-        deps: [CookieService],
-        multi: true,
-        useFactory: initializeLoginSvc
-    },
-  ]
+  providers: []
 })
-export class AppModule {
+export class FrontcraftAppModule {
 }

src/frontend/src/app/app.server.module.ts

@@ -0,0 +1,18 @@
+
+import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+import { FrontcraftAppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    FrontcraftAppModule,
+    ServerModule,
+    ModuleMapLoaderModule
+  ],
+  providers: [],
+  bootstrap: [ AppComponent ],
+})
+export class AppServerModule {}

src/frontend/src/app/frontcraft/auth/auth-layout.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../services/login-api';
+import { ClientApiService } from '../services/client-login-api';
 import { Router } from '@angular/router';
 
 @Component({
@@ -13,8 +13,6 @@ import { Router } from '@angular/router';
 
 export class AuthComponent implements OnInit{
   constructor(
-    private loginSvc : ApiService,
-    private router: Router  
   ){}
 
   ngOnInit(){

src/frontend/src/app/frontcraft/auth/auth-routing.module.ts

@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { MyLoginComponent } from './login/login.component';
-import { AuthComponent } from './auth-layout.component';
-import { LogoutComponent } from './logout/logout.component';
-import { RegisterComponent } from './register/register.component';
-
-export const routes: Routes = [
-    {
-        path: '',
-        component: AuthComponent,
-        children: [
-            {
-                path: 'register',
-                component: RegisterComponent
-            },
-            {
-                path: 'logout',
-                component: LogoutComponent,
-            },
-            {
-                path: '**',
-                component: MyLoginComponent,
-            },
-        ]
-    }    
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class MyAuthRoutingModule {
-}

src/frontend/src/app/frontcraft/auth/auth.module.ts

@@ -12,7 +12,6 @@ import {
   NbCardModule,
   NbSelectModule
 } from '@nebular/theme';
-import { MyAuthRoutingModule } from './auth-routing.module';
 import { MyLoginComponent } from './login/login.component';
 import { AuthComponent } from './auth-layout.component';
 import { ThemeModule } from '../../@theme/theme.module';
@@ -22,7 +21,6 @@ import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   imports: [
-    MyAuthRoutingModule,
     CommonModule,
     FormsModule,
     RouterModule,

src/frontend/src/app/frontcraft/auth/login/login.component.html

@@ -29,7 +29,7 @@
            id="input-password"
            placeholder="Password"
            fieldSize="giant"
-           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
+           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : 'basic'"
            [required]="true"
            [minlength]="1"
            [maxlength]="15"

src/frontend/src/app/frontcraft/auth/login/login.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
 import { Router } from '@angular/router';
+import { IApiService } from '../../services/ApiService';
+import { NbToastrService } from '@nebular/theme';
 
 @Component({
   selector: 'mylogin',
@@ -21,18 +23,26 @@ export class MyLoginComponent implements OnInit{
 
   constructor(
     private router : Router,  
-    private loginApi : ApiService
+    private api : IApiService,
+    private toastr: NbToastrService
   ){}
 
   ngOnInit(){
-    this.loginApi.checkLogin().then(loggedin => {
+    this.api.checkLogin().then(loggedin => {
       if(loggedin){
         this.router.navigateByUrl("/")
       }
     });
   }
 
-  login(){
-    this.loginApi.login(this.user.name, this.user.password)
+  async login(){
+    const login = await this.api.login(this.user.name, this.user.password)
+    if(!login){
+      this.toastr.danger("Login failed", "Error")
+      return
+    }else{
+      window['r'] = this.router
+      this.router.navigate(["/froncraft"])
+    }
   }
 }

src/frontend/src/app/frontcraft/auth/logout/logout.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../services/login-api';
+import { IApiService } from '../../services/ApiService';
 import { Router } from '@angular/router';
 
 @Component({
@@ -9,11 +9,13 @@ import { Router } from '@angular/router';
 export class LogoutComponent implements OnInit{
 
   constructor(
-    private api : ApiService
+    private api : IApiService,
+    private router: Router
   ){}
 
   ngOnInit(){
-    this.api.logout()
+    this.api.logout().then(() => {
+      this.router.navigate(['/auth/login'])
+    })
   }
-
 }

src/frontend/src/app/frontcraft/auth/register/register.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService as ApiService, hash } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { Router } from '@angular/router';
 import { _Rank, _Class, Class, User, _Race  } from '../../../../../../backend/Types/Types'
 import { specs  } from '../../../../../../backend/Types/PlayerSpecs'
 import { race } from 'rxjs';
+import { hash, IApiService } from '../../services/ApiService';
 
 
 @Component({
@@ -33,7 +34,7 @@ export class RegisterComponent implements OnInit{
 
   constructor(
     private router : Router,  
-    private api : ApiService
+    private api : IApiService
   ){}
 
   ngOnInit(){

src/frontend/src/app/frontcraft/pages/armory/armory.component.html

@@ -1,6 +1,5 @@
 <nb-card 
-class = "col-12 col-xl-9"
-status="control">
+class = "col-12 col-xl-9">
     <nb-card-header style="text-transform: capitalize;">
         <h4>
             Armory

src/frontend/src/app/frontcraft/pages/armory/armory.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Item, Stats } from '../../../../../../backend/Types/Types';
 
 import { NbToastrService } from '@nebular/theme';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'armory',
@@ -18,7 +19,7 @@ export class FrontcraftArmoryComponent implements OnInit {
   gear: Item[] = []
 
   constructor(
-    private api: ApiService,
+    private api: IApiService,
     private toastr: NbToastrService
   ) { }
 

src/frontend/src/app/frontcraft/pages/character/character.component.html

@@ -1,6 +1,5 @@
 <nb-card 
-class = "col-12 col-xl-9"
-status="control">
+class = "col-12 col-xl-9">
     <nb-card-header style="text-transform: capitalize;">
         <h4>
             <a *ngIf="link === 'character'" [ngStyle]="{'color': color}" [routerLink]="'/frontcraft/character/'+char.charactername">

src/frontend/src/app/frontcraft/pages/character/character.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ApiService as ApiService } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { Spec, User, Character, Item } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers } from '../../../../../../backend/Types/Items';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'character',
@@ -28,7 +29,7 @@ export class FrontcraftCharacterComponent implements OnInit{
     gear2:string[] = []
 
     constructor(
-      private api: ApiService,
+      private api: IApiService,
       private route: ActivatedRoute,
     ){}
 

src/frontend/src/app/frontcraft/pages/characters/characters.component.ts

@@ -1,8 +1,8 @@
 import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-import { ApiService } from '../../services/login-api';
 import { _Class } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { IApiService } from '../../services/ApiService';
 
 
 @Component({
@@ -17,7 +17,7 @@ export class FrontcraftCharactersComponent implements AfterViewInit, OnDestroy{
   allcharacters = []
   displayedcharacters = []
 
-  constructor(private theme: NbThemeService, private api:ApiService) {
+  constructor(private theme: NbThemeService, private api:IApiService) {
   }
 
   changeSearch(){

src/frontend/src/app/frontcraft/pages/pages-layout.component.ts

@@ -1,7 +1,10 @@
-import { Component, AfterContentChecked, OnInit, AfterContentInit } from '@angular/core';
+import { Component, AfterContentInit, OnInit } from '@angular/core';
 import { NbMenuItem } from '@nebular/theme';
-import { ApiService } from '../services/login-api';
+import { ClientApiService } from '../services/client-login-api';
 import { Router } from '@angular/router';
+import { IApiService } from '../services/ApiService';
+
+declare const Cookies
 
 @Component({
   selector: 'page-layout',
@@ -13,7 +16,8 @@ import { Router } from '@angular/router';
     </ngx-one-column-layout>
   `,
 })
-export class PagesLayoutComponent implements AfterContentInit{
+export class PagesLayoutComponent implements OnInit{
+
   menu:NbMenuItem[] = [{
     icon: 'image',
     title: 'Raids',
@@ -33,15 +37,17 @@ export class PagesLayoutComponent implements AfterContentInit{
   }]
   
   constructor(
-    private loginSvc : ApiService,
+    private api : IApiService,
     private router : Router
   ){}
 
-  ngAfterContentInit() : void {
-    this.loginSvc.checkLogin().then(loggedin => {
-      if(!loggedin){
-        this.router.navigateByUrl("/auth")
-      }
-    });
+  ngOnInit(): void {
+    /*
+    const u = this.api.getCurrentUser()
+    
+    if(!u){
+      this.router.navigate(['/auth/login'])
+    }
+    */
   }
 }

src/frontend/src/app/frontcraft/pages/pages-routing.module.ts

@@ -1,63 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PagesLayoutComponent } from './pages-layout.component';
-import { FrontcraftCharacterComponent } from './character/character.component';
-import { FrontcraftUserComponent } from './user/user.component';
-import { FrontcraftRaidsComponent } from './raids/raids.component';
-import { FrontcraftRaidComponent } from './raid/raid.component';
-import { FrontcraftArchiveComponent } from './raid/archive.component';
-import { FrontcraftRulesComponent } from './rules/rules.component';
-import { FrontcraftCharactersComponent } from './characters/characters.component';
-import { FrontcraftArmoryComponent } from './armory/armory.component';
-
-export const routes: Routes = [
-    {
-        path: '',
-        component: PagesLayoutComponent,
-        children: [
-            {
-                path: 'user/:name',
-                component: FrontcraftUserComponent
-            },
-            {
-                path: 'raid/:id',
-                component: FrontcraftRaidComponent
-            },
-            {
-                path: 'archive/:id',
-                component: FrontcraftArchiveComponent
-            },
-            {
-                path: 'raids',
-                component: FrontcraftRaidsComponent
-            },
-            {
-                path: 'character/:name',
-                component: FrontcraftCharacterComponent
-            },
-            {
-                path: 'characters',
-                component: FrontcraftCharactersComponent,
-            },
-            {
-                path: 'rules',
-                component: FrontcraftRulesComponent
-            },
-            {
-                path: 'armory',
-                component: FrontcraftArmoryComponent
-            },
-            {
-                path: '**',
-                redirectTo: 'raids'
-            },
-        ]
-    }    
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class FrontcraftRoutingModule {
-}

src/frontend/src/app/frontcraft/pages/pages.module.ts

@@ -18,7 +18,6 @@ import {
   NbDatepickerModule,
   NbSelectModule
 } from '@nebular/theme';
-import { FrontcraftRoutingModule } from './pages-routing.module';
 import { PagesLayoutComponent } from './pages-layout.component';
 import { ThemeModule } from '../../@theme/theme.module';
 import { FrontcraftCharacterComponent } from './character/character.component';
@@ -42,7 +41,6 @@ import { FrontcraftArmoryComponent } from './armory/armory.component';
 
 @NgModule({
   imports: [
-    FrontcraftRoutingModule,
     CommonModule,
     FormsModule,
     RouterModule,

src/frontend/src/app/frontcraft/pages/raid/archive.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { ApiService as ApiService } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { RaidData } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'archive',
@@ -38,7 +39,7 @@ export class FrontcraftArchiveComponent implements OnInit{
     search = ""
     
     constructor(
-      private api: ApiService,
+      private api: IApiService,
       private route: ActivatedRoute,
     ){
     }
@@ -60,7 +61,7 @@ export class FrontcraftArchiveComponent implements OnInit{
       [
         ...raiddata.tanks, 
         ...raiddata.healers, 
-        ...Object.values(raiddata.participants).flat()
+        ...Object.values<any>(raiddata.participants).flat()
       ].forEach(p => {
         p['color'] = getClassColor(p.class)
       })

src/frontend/src/app/frontcraft/pages/raid/characterpicker.component.ts

@@ -1,8 +1,9 @@
 import { OnInit, Component } from '@angular/core';
 import { NbWindowRef, NbToastrService, NbDialogRef } from '@nebular/theme';
 import { RaidData, Character } from '../../../../../../backend/Types/Types';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
     selector: 'characterpicker',
@@ -15,7 +16,7 @@ export class FrontcraftCharacerpickerComponent implements OnInit{
 
     constructor(
         protected dialogRef: NbDialogRef<FrontcraftCharacerpickerComponent>,
-        private api : ApiService,
+        private api : IApiService,
         private toast : NbToastrService
     ){}
 

src/frontend/src/app/frontcraft/pages/raid/raid.component.html

@@ -1,6 +1,6 @@
 <div class="row">
     <div class="col-12 col-xl-6">
-        <nb-card [size]="'giant'">
+        <nb-card>
             <nb-card-body>
                 <nb-tabset>
                     <nb-tab tabTitle="Info">
@@ -68,9 +68,7 @@
                                                 [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
-                                        <span 
-                                            *ngIf="participant.rank=='Trial'" 
-                                            style="font-size: 9px;">
+                                        <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                         </span>
                                     </div>
@@ -97,9 +95,7 @@
                                                 [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
-                                        <span 
-                                            *ngIf="participant.rank=='Trial'" 
-                                            style="font-size: 9px;">
+                                        <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                         </span>
                                     </div>
@@ -128,9 +124,7 @@
                                                     [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                                 {{ participant.charactername }}
                                             </a>
-                                            <span 
-                                                *ngIf="participant.rank=='Trial'" 
-                                                style="font-size: 9px;">
+                                            <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                                 Trial
                                             </span>
                                         </div>
@@ -149,41 +143,52 @@
         </nb-card>
     </div>
     <div class="col-12 col-xl-6">
-        <nb-card  *ngIf="isTier">
+        <nb-card *ngIf="isTier">
             <nb-card-body>
                 <nb-tabset>
                     <nb-tab tabTitle="Reserves" [active]="reservesShown">
-                        <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search"
-                            fullWidth="true">
+                        <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search" fullWidth="true">
 
-                        <nb-list>
+                        <nb-list class="">
                             <nb-list-item *ngFor="let item of displayedtokens | keyvalue">
-                                <wowhead [item]="item.value[0]"></wowhead><br />
-                                <div class="row">
-                                    <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4">
-                                        <span [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
-                                            [ {{token.level}} ]
-                                            <span style="text-transform: capitalize;"
-                                                [ngStyle]="{'color':token.level>=10?'#ff8000':token.level>=8?'#a335ee':token.level>=6?'#0070dd':token.level>=4?'#1eff00':token.level>=2?'#ffffff':'#9d9d9d'}">
-                                                {{token.charactername}}
-                                            </span>
-                                        </span>
-                                        &nbsp;
-                                        <ng-template #tooltip>
-                                            <div style="color:white">
-                                                Becomes valid when promoted to Raider
+                                <table>
+                                    <tr>
+                                        <td>
+                                            <wowhead [item]="item.value[0]"></wowhead><br />
+
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div class="row">
+                                                <div 
+                                                *ngFor="let token of item.value" 
+                                                class="col-12 col-md-6 col-xl-4">
+                                                    <span
+                                                        [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
+                                                        <span style="text-transform: capitalize;">
+                                                            [&nbsp;{{token.level}}&nbsp;]&nbsp;
+                                                            <a [routerLink]="'/frontcraft/character/'+token.charactername"
+                                                            [ngStyle]="{'color':token.level>=10?'#ff8000':token.level>=8?'#a335ee':token.level>=6?'#0070dd':token.level>=4?'#1eff00':token.level>=2?'#ffffff':'#9d9d9d'}">
+                                                                {{token.charactername}}
+                                                            </a>
+                                                        </span>
+                                                    </span>
+                                                    <ng-template #tooltip>
+                                                        <div style="color:white">
+                                                            Becomes valid when promoted to Raider
+                                                        </div>
+                                                    </ng-template>
+                                                    <span *ngIf="token.rank=='Trial'" style="font-size: 9px;" [nbPopover]="tooltip"
+                                                        nbPopoverTrigger="hover" nbPopoverPlacement="top">
+                                                        Trial
+                                                    </span><br />
+                                                </div>
                                             </div>
-                                        </ng-template>
-                                        <span 
-                                        *ngIf="token.rank=='Trial'" 
-                                        style="font-size: 9px;"
-                                        [nbPopover]="tooltip" 
-                                        nbPopoverTrigger="hover"
-                                        nbPopoverPlacement="top">
-                                            Trial
-                                        </span><br />
-                                    </div>
-                                </div>
+            
+                                        </td>
+                                    </tr>
+                                </table>
                             </nb-list-item>
                         </nb-list>
                     </nb-tab>

src/frontend/src/app/frontcraft/pages/raid/raid.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
-import { ApiService as ApiService } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { RaidData, Raid, Signup, Character, Spec, Item, SRToken } from '../../../../../../backend/Types/Types';
 import { NbWindowService, NbToastrService, NbDialogService } from '@nebular/theme';
 import { FrontcraftCharacerpickerComponent } from './characterpicker.component';
 import { getClassColor, SpecT } from '../../../../../../backend/Types/PlayerSpecs';
 import { FrontcraftBuyTokenComponent } from '../shop/buytoken.component';
 import { allItems } from '../../../../../../backend/Types/Items';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'raid',
@@ -45,7 +46,7 @@ export class FrontcraftRaidComponent implements OnInit, OnDestroy{
     uuid
 
     constructor(
-      private api: ApiService,
+      private api: IApiService,
       private route: ActivatedRoute,
       private router: Router,
       private dialogService : NbDialogService,

src/frontend/src/app/frontcraft/pages/raids/createraid.compontent.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
 import { Raid, RaidData } from '../../../../../../backend/Types/Types';
 import { NbWindowRef, NbDialogRef } from '@nebular/theme';
 import { Tiers, _Tiers } from '../../../../../../backend/Types/Items';
+import { IApiService } from '../../services/ApiService';
 
 const ONE_MINUTE = 60000
 const ONE_HOUR = 60 * ONE_MINUTE
@@ -27,7 +28,7 @@ export class FrontcraftCreateRaidsComponent implements OnInit {
 
   constructor(
     protected dialogRef: NbDialogRef<FrontcraftCreateRaidsComponent>,
-    private api: ApiService
+    private api: IApiService
   ) {}
 
   loadNext(cardData) {

src/frontend/src/app/frontcraft/pages/raids/raids.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
 import { NbWindowService, NbDialogService } from '@nebular/theme';
 import { FrontcraftCreateRaidsComponent } from './createraid.compontent';
 import { Router, NavigationStart } from '@angular/router';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'raids',
@@ -19,7 +20,7 @@ export class FrontcraftRaidsComponent implements OnInit, OnDestroy{
   uuid
 
   constructor(
-    private api: ApiService,
+    private api: IApiService,
     private router: Router,
     private dialogService: NbDialogService
   ) {

src/frontend/src/app/frontcraft/pages/rules/rules.component.html

@@ -60,14 +60,21 @@
             <nb-tab tabTitle="priorities">
                 <nb-list>
                     <nb-list-item *ngFor="let item of rules | keyvalue">
-                        <wowhead [item]="item.value[0]"></wowhead><br>
-                        <div class="row" *ngFor="let rule of item.value">
-                            <div class="col-4">
-                                <span *ngIf="rule.modifier>0">+</span>{{rule.modifier}} {{rule.race}} <span [ngStyle]="{'color':rule.color}">{{rule.specname}} {{rule.class}}</span> 
-                            </div>
-                            <div class="col-8" style="color:white"> ({{rule.description}})</div>
-                            <br />
-                        </div>
+                        <table >
+                            <tr>
+                                <td colspan="2">
+                                    <wowhead [item]="item.value[0]"></wowhead>
+                                </td>
+                            </tr>
+                            <tr *ngFor="let rule of item.value">
+                                <td style="width: 250px;">
+                                    <span *ngIf="rule.modifier>0">+</span>{{rule.modifier}} {{rule.race}} <span [ngStyle]="{'color':rule.color}">{{rule.specname}} {{rule.class}}</span> 
+                                </td>
+                                <td>
+                                    <div style="color:white"> ({{rule.description}})</div>
+                                </td>
+                            </tr>
+                        </table>
                     </nb-list-item>
                 </nb-list>
             </nb-tab>

src/frontend/src/app/frontcraft/pages/rules/rules.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'rules',
@@ -12,7 +12,7 @@ export class FrontcraftRulesComponent implements OnInit{
     rules = {}
 
     constructor(
-      private api: ApiService,
+      private api: IApiService,
     ){
     }
 

src/frontend/src/app/frontcraft/pages/shop/buytoken.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { FrontcraftItemSelectComponent } from './itemselector.component';
 import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
 import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
     selector: 'buyToken',
@@ -88,7 +89,7 @@ import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
     constructor(
       private toastr: NbToastrService,
       protected dialogRef: NbDialogRef<FrontcraftBuyTokenComponent>,
-      private api : ApiService
+      private api : IApiService
     ){}
   
     async ngOnInit() {

src/frontend/src/app/frontcraft/pages/shop/item.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit, Input, } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
-import { NbToastrService, } from '@nebular/theme';
 import { Item, } from '../../../../../../backend/Types/Types';
 import { _Tiers, } from '../../../../../../backend/Types/Items';
 

src/frontend/src/app/frontcraft/pages/shop/itemselector.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { ApiService } from '../../services/login-api';
+import { ClientApiService } from '../../services/client-login-api';
 import { Item, Character } from '../../../../../../backend/Types/Types';
+import { IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'itemselect',
@@ -18,7 +19,7 @@ export class FrontcraftItemSelectComponent implements OnInit{
     @Output() onSelect = new EventEmitter<Item>();
 
     constructor(
-      private api: ApiService,
+      private api: IApiService,
     ){}
 
     async ngOnInit(){

src/frontend/src/app/frontcraft/pages/shop/shop.component.ts

@@ -1,9 +1,7 @@
-import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
-import { FrontcraftItemSelectComponent } from './itemselector.component';
-import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
-import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
-import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
+import { NbDialogService } from '@nebular/theme';
+import { Item, Character, Signup } from '../../../../../../backend/Types/Types';
 import { _Tiers, allItems } from '../../../../../../backend/Types/Items';
 
 @Component({
@@ -20,8 +18,6 @@ export class FrontcraftShopComponent implements OnInit{
     allItems = allItems
 
     constructor(
-      private api: ApiService,
-      private dialogService : NbDialogService
     ){
 
     }

src/frontend/src/app/frontcraft/pages/shop/wowhead.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
-import { NbToastrService } from '@nebular/theme';
 import { Item } from '../../../../../../backend/Types/Types';
 import { _Tiers } from '../../../../../../backend/Types/Items';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

src/frontend/src/app/frontcraft/pages/user/user.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService, hash } from '../../services/login-api';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { User, Spec, Character } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers } from '../../../../../../backend/Types/Items';
 import { _Rank } from '../../../../../../backend/Types/Types';
 import { NbToastrService } from '@nebular/theme';
+import { hash, IApiService } from '../../services/ApiService';
 
 @Component({
   selector: 'user-component',
@@ -19,12 +19,16 @@ export class FrontcraftUserComponent implements OnInit{
   ranks = _Rank
   myProfile = false
   manageUser
-  user:User = {} as any
+  user:User = {
+    rank: 'Guest',
+    username: 'Guest',
+    pwhash: ""
+  }
   characters : (Character & Spec)[] = []
 
   constructor(
     private route: ActivatedRoute,
-    private api : ApiService,
+    private api : IApiService,
     private toastr: NbToastrService
   ){}
 

src/frontend/src/app/frontcraft/permissions/changePermissions/changePermissions.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService as ApiService } from '../../services/login-api';
+import { ClientApiService as ClientApiService } from '../../services/client-login-api';
 import { Router } from '@angular/router';
 import { _Rank, _Class, _Race, RPCPermission  } from '../../../../../../backend/Types/Types'
 import { NbToastrService } from '@nebular/theme';
+import { IApiService } from '../../services/ApiService';
 
 
 @Component({
@@ -15,8 +16,7 @@ export class ChangePermissionsComponent implements OnInit{
   ranks = _Rank
 
   constructor(
-    private router : Router,  
-    private api : ApiService,
+    private api : IApiService,
     private toastr: NbToastrService
   ){}
 
@@ -32,9 +32,6 @@ export class ChangePermissionsComponent implements OnInit{
 
 
     perm[key] = value
-    console.log(perm);
-    
-
     await modify.setPermission(perm).catch(e => {
       
     })

src/frontend/src/app/frontcraft/permissions/permissions-layout.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../services/login-api';
+import { ClientApiService } from '../services/client-login-api';
 import { Router } from '@angular/router';
 
 @Component({
@@ -13,7 +13,6 @@ import { Router } from '@angular/router';
 
 export class PermissionsComponent implements OnInit{
   constructor(
-    private loginSvc : ApiService,
     private router: Router  
   ){}
 

src/frontend/src/app/frontcraft/permissions/permissions-routing.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PermissionsComponent } from './permissions-layout.component';
-import { ChangePermissionsComponent } from './changePermissions/changePermissions.component';
-
-export const routes: Routes = [
-    {
-        path: '',
-        component: PermissionsComponent,
-        children: [
-            {
-                path: '**',
-                component: ChangePermissionsComponent,
-            },
-        ]
-    }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class PermissionsRoutingModule {
-}

src/frontend/src/app/frontcraft/permissions/permissions.module.ts

@@ -15,13 +15,11 @@ import {
 } from '@nebular/theme';
 import { PermissionsComponent } from './permissions-layout.component';
 import { ThemeModule } from '../../@theme/theme.module';
-import { PermissionsRoutingModule } from './permissions-routing.module';
 import { ChangePermissionsComponent } from './changePermissions/changePermissions.component';
 
 @NgModule({
   imports: [
     NbToggleModule,
-    PermissionsRoutingModule,
     CommonModule,
     FormsModule,
     RouterModule,

src/frontend/src/app/frontcraft/services/ApiService.ts

@@ -0,0 +1,23 @@
+import { Auth, FrontcraftIfc, FrontcraftFeatureIfc, User, SomeOf } from '../../../../../backend/Types/Types';
+import { saltedHash } from '../../../../../backend/Util/hash';
+import { RPCSocket } from 'rpclibrary';
+
+export class IApiService{
+    getUnprivilegedSocket: () => RPCSocket & FrontcraftIfc
+    getAuth: () => Auth | undefined
+    checkLogin: () => Promise<boolean>
+    initialize: () => Promise<any>
+    getCurrentUser: () => User | undefined
+    login: (username: string, password: string) => Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>>
+    connectShoutbox: (callback:Function) => Promise<Function>
+    kick: () => Promise<void>
+    logout: () => Promise<void>
+    get: <K extends (keyof FrontcraftIfc | keyof FrontcraftFeatureIfc)>(feature : K) => K extends keyof FrontcraftIfc?FrontcraftIfc[K]:
+                                                                                        K extends keyof FrontcraftFeatureIfc?(FrontcraftFeatureIfc[K] | void): 
+                                                                                        never
+}
+
+export async function hash(value:string) : Promise<string>{
+    return saltedHash(value, "")
+}
+

src/frontend/src/app/frontcraft/services/login-api.ts → src/frontend/src/app/frontcraft/services/client-login-api.ts

@@ -1,31 +1,29 @@
-import { Injectable, Injector, NgZone } from "@angular/core";
+import { Injectable } from "@angular/core";
 import {RPCSocket} from 'rpclibrary/js/src/Frontend'
-
 import { Auth, User, _Class, FrontcraftFeatureIfc, SomeOf, FrontcraftIfc, } from '../../../../../backend/Types/Types'
-import { CookieService } from 'ngx-cookie-service';
-import { Router } from '@angular/router';
 import { ShoutMessage } from '../../../../../backend/Components/Shoutbox/Interface';
-import { saltedHash } from '../../../../../backend/Util/hash';
-import { NbToastrService } from '@nebular/theme';
+import { hash, IApiService } from './ApiService';
+
+declare const Cookies
 
 @Injectable()
-export class ApiService{
+export class ClientApiService implements IApiService{
     private socket:RPCSocket & FrontcraftIfc;
     private auth:Auth
     private privSocket: RPCSocket & SomeOf<FrontcraftFeatureIfc>
 
-    constructor(
-        private injector: Injector,
-        private cookieSvc : CookieService,
-        private ngZone : NgZone,
-        private toastr: NbToastrService
-    ){}
+    constructor(){
+        window['s'] = this
+    }
 
     getUnprivilegedSocket = () : RPCSocket & FrontcraftIfc => this.socket
 
     private getPrivilegedSocket = async (auth:Auth) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
-        if(this.privSocket) return this.privSocket
-        if(auth == null) throw new Error("Bad Auth")
+        if(this.privSocket) {
+            return this.privSocket
+        }
+        if(auth == null) 
+            throw new Error("Bad Auth")
 
         try{
             const sock = new RPCSocket(
@@ -38,24 +36,24 @@ export class ApiService{
             })
 
             sock.hook('getUserData', () => auth)
-            sock.hook('navigate', (where:string) => {
-                this.ngZone.run( () => {
-                    this.injector.get(Router).navigateByUrl(where)
-                })
-            })
 
             sock.on('close', async () => {
+                console.log("priv#close");
+                
                 //handled via unprivileged socket
             })
 
             sock.on('error', async (e) => {
+                console.log("priv#error", e);
+
                 //handled via unprivileged socket
             })
             const authSock = await sock.connect<RPCSocket & SomeOf<FrontcraftFeatureIfc>>(auth.token.value)
             
             this.auth = auth
             this.privSocket = authSock
-            this.cookieSvc.set('token', JSON.stringify(auth))
+            Cookies.set('token', JSON.stringify(auth))
+//            document.cookie = JSON.stringify(auth)
             return authSock
         }catch(e){ 
             if(this.privSocket) this.privSocket.destroy()
@@ -86,13 +84,11 @@ export class ApiService{
         try{
             auth = await this.socket.UserManager.login(username, pwHash)
         }catch(e){
-            this.toastr.danger("Login failed", "Error")
             return
         }
 
         if(!auth){ 
             await this.logout()
-            this.toastr.danger("Login failed", "Error")
             throw new Error("Login failed")
         }
 
@@ -105,8 +101,8 @@ export class ApiService{
         return sock
     }
 
-    async connectShoutbox(handler) : Promise<Function>{
-        const res = await this.get('Shoutbox').subscribe(handler)
+    async connectShoutbox(callback:Function) : Promise<Function>{
+        const res = await this.get('Shoutbox').subscribe(callback)
         return async (msg: ShoutMessage) => await this.get('Shoutbox').shout(res.uuid, msg)
     }
 
@@ -116,25 +112,21 @@ export class ApiService{
     }
 
     logout = async () => {
-        this.cookieSvc.set('token', undefined)
+        Cookies.remove('token')
         if(this.auth){
             try{
                 await this.socket.UserManager.logout(this.auth.user.username, this.auth.token.value)
             }catch(e){
-                //socket is dead
+                console.warn(e);
             }
         } 
 
         if(this.privSocket) this.privSocket.destroy()
         this.privSocket = null
         this.auth  = null
-        
-        this.ngZone.run(() => {
-            this.injector.get(Router).navigate(['/auth']);
-        })
     }
 
-    initialize = async () : Promise<any> => {
+    initialize = async (force = false) : Promise<any> => {
         if(this.socket){
             this.socket.destroy()
             this.socket = null
@@ -143,9 +135,7 @@ export class ApiService{
         try{
             let conn = new RPCSocket(20000, window.location.hostname)
             conn.on('close', async () => {
-            })
-
-            
+            })                        
 
             this.socket = await conn.connect<FrontcraftIfc>()
         }catch(e){
@@ -155,9 +145,9 @@ export class ApiService{
         }
 
         try{
-            const cookie = JSON.parse(this.cookieSvc.get('token'))
+            const cookie = JSON.parse(Cookies.get('token'))
             
-            if(cookie != null) {
+            if(cookie != null && cookie != "") {
                 try{
                     const auth = await this.socket.UserManager.getAuth(cookie.token.value)
                     if(!auth) return this.socket
@@ -168,6 +158,7 @@ export class ApiService{
                 }
             }
         }catch(e){
+            Cookies.remove('token')
         }
     }
 
@@ -180,13 +171,4 @@ export class ApiService{
         await this.logout()
         return false
     }
-}
-
-export async function hash(value:string) : Promise<string>{
-    return saltedHash(value, "")
-}
-
-//angular depenency manager requires this
-export function initializeLoginSvc(svc: ApiService): () => Promise<any> {
-    return ()=>svc.initialize?svc.initialize():undefined
 }

src/frontend/src/app/frontcraft/services/server-login-api.ts

@@ -0,0 +1,99 @@
+import { Injectable } from "@angular/core";
+import {RPCSocket} from 'rpclibrary/js/src/Frontend'
+import { Auth, User, _Class, FrontcraftFeatureIfc, SomeOf, FrontcraftIfc, } from '../../../../../backend/Types/Types'
+import { hash, IApiService } from './ApiService';
+
+declare const Cookies
+
+@Injectable()
+export class ServerApiService implements IApiService{
+    private socket:RPCSocket & FrontcraftIfc;
+    private auth:Auth
+    private privSocket: RPCSocket & SomeOf<FrontcraftFeatureIfc>
+
+    constructor(){}
+
+    getUnprivilegedSocket = () : RPCSocket & FrontcraftIfc => this.socket
+
+    get = <K extends (keyof FrontcraftIfc | keyof FrontcraftFeatureIfc)>(feature : K) : K extends keyof FrontcraftIfc?FrontcraftIfc[K]:
+                                                                                        K extends keyof FrontcraftFeatureIfc?(FrontcraftFeatureIfc[K] | void): 
+                                                                                        never => {
+        //@ts-ignore
+        return this.socket[feature]
+    }
+
+    getCurrentUser = () : User | undefined => {
+        return this.auth?this.auth.user:undefined
+    }
+
+    login = async (username: string, password: string) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
+        const pwHash = await hash(password)
+        let auth
+        try{
+            auth = await this.socket.UserManager.login(username, pwHash)
+        }catch(e){
+            return
+        }
+
+        if(!auth){ 
+            await this.logout()
+            throw new Error("Login failed")
+        }
+
+        //attach error handler now so failed logins dont trigger reloads
+        this.socket.on('error', async (err) => {
+            console.log(err);
+        })
+
+    }
+
+    async connectShoutbox(callback:Function) : Promise<Function>{
+        return console.log
+    }
+
+    kick = async () => {
+    }
+
+    logout = async () => {
+        Cookies.remove('token')
+        if(this.auth){
+            try{
+                await this.socket.UserManager.logout(this.auth.user.username, this.auth.token.value)
+            }catch(e){
+                console.warn(e);
+            }
+        } 
+
+        if(this.privSocket) this.privSocket.destroy()
+        this.privSocket = null
+        this.auth  = null
+    }
+
+    initialize = async () : Promise<any> => {
+        if(this.socket){
+            this.socket.destroy()
+            this.socket = null
+        }
+
+        try{
+            let conn = new RPCSocket(20000, window.location.hostname)
+            conn.on('close', async () => {
+            })                        
+
+            this.socket = await conn.connect<FrontcraftIfc>()
+        }catch(e){
+            console.log(e);
+            throw new Error("Websocket cannot connect")
+        }
+    }
+
+    getAuth = () => this.auth
+
+    async checkLogin() : Promise<boolean>{
+        if(!this.auth) return false
+        const valid = this.socket.UserManager.checkToken(this.auth.token.value, this.auth.user.rank)
+        if(valid) return true
+        await this.logout()
+        return false
+    }
+}

src/frontend/src/main.server.ts

@@ -0,0 +1,9 @@
+import { enableProdMode } from '@angular/core';
+
+enableProdMode()
+
+export { AppServerModule } from './app/app.server.module';
+import { IApiService } from './app/frontcraft/services/ApiService';
+export { IApiService }
+export { ServerApiService } from './app/frontcraft/services/server-login-api';
+

src/frontend/src/main.ts

@@ -6,12 +6,23 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { FrontcraftAppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { IApiService } from "./app/frontcraft/services/ApiService"
+import { ClientApiService } from './app/frontcraft/services/client-login-api';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+const serviceObj = new ClientApiService()
+serviceObj.initialize().then(_ => {
+  platformBrowserDynamic([
+    {
+      provide: IApiService,
+      deps: [],
+      useValue: serviceObj
+    }
+  ]).bootstrapModule(FrontcraftAppModule)
+    .catch(err => console.error(err));
+})

src/frontend/src/tsconfig.app.json

@@ -1,26 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ],
-      "@nebular/*": [
-        "../node_modules/@nebular/*"
-      ]
-    }
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts",
-    "../node_modules/@nebular/**/*.spec.ts",
-    "../node_modules/rpclibrary/js/**/*"
-  ],
-  "include": [
-    "../src/*.ts",
-    "../src/**/*.ts",
-    "../node_modules/@nebular/**/*.ts"
-  ]
-}

src/frontend/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "paths": {
+      "@angular/*": [
+        "./node_modules/@angular/*"
+      ],
+      "@nebular/*": [
+        "./node_modules/@nebular/*"
+      ]
+    }
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts",
+    "./node_modules/@nebular/**/*.spec.ts",
+    "./node_modules/rpclibrary/js/**/*"
+  ],
+  "include": [
+    "./src/*.ts",
+    "./src/**/*.ts",
+  ]
+}

src/frontend/tsconfig.json

@@ -1,15 +1,14 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "importHelpers": true,
-    "module": "commonjs",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
+    "outDir": "./out-tsc",
+    "baseUrl": "./",
+    "declaration": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "importHelpers": true,
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -20,5 +19,8 @@
     "plugins": [
       { "name": "tslint-language-service"}
     ]
-  }
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false,
+  },
 }

src/frontend/tsconfig.server.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app-server",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}

src/frontend/webpack.server.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: { server: './server.ts' },
+  resolve: { extensions: ['.js', '.ts'] },
+  mode: 'none',
+  target: 'node',
+  externals: [/(node_modules|main(\\|\/)..*(\\|\/).js)/],
+  output: {
+    path: path.join(__dirname, `dist`),
+    filename: '[name].js',
+    libraryTarget: 'commonjs'
+  },
+  module: {
+    rules: [
+      { test: /\.ts$/, loader: 'ts-loader', exclude: /^(?!.*\.spec\.ts$).*\.ts$/  },
+      {
+        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
+        parser: { system: true }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+};

tsconfig.json

@@ -9,18 +9,12 @@
       "strict": true,
       "experimentalDecorators": true,
       "emitDecoratorMetadata": true,
-
+      "baseUrl": "./",
       "outDir": "./lib",
-      //"types": ["node"],
+      "types": ["node", "mocha"],
       "strictNullChecks": false
     },
-    "include": ["src/backend/**/*"],
-    "exclude": [
-      "./src/frontend/**/*",
-      "./node_modules/**/*", 
-      "./src/frontend/node_modules/**/*", 
-      "./test",
-    ],
+    "include": ["src", "test"],
     "angularCompilerOptions": {
       "enableIvy": false,
       "entryModule": "./src/backend/Admin/app.server.module#AppServerModule"