migrations

package-lock.json

     "bluebird": {
       "version": "3.5.5",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
-      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w=="
+      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+      "dev": true
     },
     "body-parser": {
       "version": "1.19.0",
       "dev": true
     },
     "colorette": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.0.8.tgz",
-      "integrity": "sha512-X6Ck90ReaF+EfKdVGB7vdIQ3dr651BbIrBwY5YBKg13fjH+940sTtp7/Pkx33C6ntYfQcRumOs/aUQhaRPpbTQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz",
+      "integrity": "sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg=="
     },
     "combined-stream": {
       "version": "1.0.8",
     "commander": {
       "version": "2.20.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
+      "dev": true
     },
     "commondir": {
       "version": "1.0.1",
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
     "getopts": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/getopts/-/getopts-2.2.4.tgz",
-      "integrity": "sha512-Rz7DGyomZjrenu9Jx4qmzdlvJgvrEFHXHvjK0FcZtcTC1U5FmES7OdZHUwMuSnEE6QvBvwse1JODKj7TgbSEjQ=="
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/getopts/-/getopts-2.2.5.tgz",
+      "integrity": "sha512-9jb7AW5p3in+IiJWhQiZmmwkpLaR/ccTWdWQCtZM66HJcHHLegowh4q4tSD7gouUyeNvFWRavfK9GXosQHDpFA=="
     },
     "getpass": {
       "version": "0.1.7",
         }
       }
     },
+    "global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "requires": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      }
+    },
     "global-prefix": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
       "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
     },
     "knex": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/knex/-/knex-0.19.2.tgz",
-      "integrity": "sha512-TVYvlp2esS4LjjJSz8XuE48bPJq4N3lWnETQVgJ3hXPEqjiDjxcTa3bCn6F5ipQuBaMAAaFHNrqsZm7BttogdA==",
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/knex/-/knex-0.19.5.tgz",
+      "integrity": "sha512-Hy258avCVircQq+oj3WBqPzl8jDIte438Qlq+8pt1i/TyLYVA4zPh2uKc7Bx0t+qOpa6D42HJ2jjtl2vagzilw==",
       "requires": {
-        "bluebird": "^3.5.5",
-        "colorette": "1.0.8",
-        "commander": "^2.20.0",
+        "bluebird": "^3.7.0",
+        "colorette": "1.1.0",
+        "commander": "^3.0.2",
         "debug": "4.1.1",
-        "getopts": "2.2.4",
+        "getopts": "2.2.5",
         "inherits": "~2.0.4",
         "interpret": "^1.2.0",
         "liftoff": "3.1.0",
         "lodash": "^4.17.15",
         "mkdirp": "^0.5.1",
-        "pg-connection-string": "2.0.0",
+        "pg-connection-string": "2.1.0",
         "tarn": "^2.0.0",
         "tildify": "2.0.0",
-        "uuid": "^3.3.2",
+        "uuid": "^3.3.3",
         "v8flags": "^3.1.3"
       },
       "dependencies": {
+        "bluebird": {
+          "version": "3.7.2",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+          "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+        },
+        "commander": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow=="
+        },
         "inherits": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "pg-connection-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.0.0.tgz",
-      "integrity": "sha1-Pu/lmX4G2Ugh5NUC5CtqHHP434I="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.1.0.tgz",
+      "integrity": "sha512-bhlV7Eq09JrRIvo1eKngpwuqKtJnNhZdpdOlvrPrA4dxqXPjxSrbNrfnIDmTpwMyRszrcV4kU5ZA4mMsQUrjdg=="
     },
     "picomatch": {
       "version": "2.2.1",
       "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==",
-          "requires": {
-            "global-prefix": "^1.0.1",
-            "is-windows": "^1.0.1",
-            "resolve-dir": "^1.0.0"
-          }
-        }
       }
     },
     "resolve-url": {
       }
     },
     "rpclibrary": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/rpclibrary/-/rpclibrary-1.9.2.tgz",
-      "integrity": "sha512-MOtVm0IBRLryXag1IwkYNPVFegbvW10+MbCjhr3GptO3MA7nHZ545ammgoCWnREtGOgFeN4Jib/EBDOJ9Ep41Q==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/rpclibrary/-/rpclibrary-1.10.2.tgz",
+      "integrity": "sha512-uf4FtylK+tyVo1O8YVihxYxaI4KHnKBzq05SsLYe8ZPXdO8Hqrv7Je5cwv3bfx0FBCO1vVrSc8DT1P6ypGY6uQ==",
       "requires": {
         "bsock": "^0.1.9",
+        "crypto-js": "^4.0.0",
         "http": "0.0.0",
         "uuid": "^3.3.3"
+      },
+      "dependencies": {
+        "crypto-js": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+          "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+        }
       }
     },
     "run-queue": {

package.json

   "version": "1.0.0",
   "scripts": {
     "tsc": "tsc",
+    "knex": "knex",
     "launch": "node lib/src/backend/Launcher.js",
     "start": "npm run build && npm run launch",
     "start-backend": "npm run build-backend && npm run launch",
     "git-cherrypicker": "0.0.3",
     "git-describe": "^4.0.4",
     "http": "0.0.0",
-    "knex": "^0.19.2",
     "loadson": "^1.0.0",
     "log4js": "^4.5.1",
     "lowdb": "^1.0.0",
     "path": "^0.12.7",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.0",
-    "rpclibrary": "^1.9.2",
+    "rpclibrary": "^1.10.2",
     "simple-git": "^1.124.0",
     "spawn-sync": "^2.0.0",
     "sqlite3": "^4.1.1",
     "xmlhttprequest": "^1.8.0"
   },
   "devDependencies": {
+    "knex": "^0.19.5",
     "madge": "^3.6.0",
     "mocha": "^7.1.0",
     "terser-webpack-plugin": "^1.4.1",

src/backend/Admin/Admin.ts

 import { promises as fs, mkdirSync } from "fs"
 import { RPCServer } from 'rpclibrary'
 import * as Path from 'path'
-import * as Knex from  'knex';
+import * as Knex from 'knex';
 import * as http from 'http';
 import * as express from 'express';
 import { GuildManager } from '../Components/Guild/GuildManager';
         PubSub
     ]
 })
-export class FrontworkAdmin 
-implements TableDefinitionExporter, IAdmin {
-    knex:Knex
+export class FrontworkAdmin
+    implements TableDefinitionExporter, IAdmin {
+    knex: Knex
     config: RPCConfigLoader<AdminConf>
     rpcServer: RPCServer
 
     private express
     private httpServer
 
-    constructor(private frontworkComponents: FrontworkComponent[] = []){
+    constructor(private frontworkComponents: FrontworkComponent[] = []) {
         this.config = new RPCConfigLoader<AdminConf>({
-            name: "FrontworkAdminConf", 
+            name: "FrontworkAdminConf",
             getDefaultConfig: () => {
                 return {
                     httpPort: 8080,
                     dbConf: {
                         client: 'sqlite3',
                         connection: {
-                            filename: Path.resolve(__dirname, '../../../..', "data/frontworkAdmin.sqlite")
+                            filename: Path.resolve(__dirname, '../../../..', "data/frontworkAdmin.sqlite"),
+                        },
+                        migrations: {
+                            directory: Path.resolve(__dirname, '../../../..', "migrations"),
+                            extension: 'ts'
                         },
                         useNullAsDefault: true,
                     }
-                }   
+                }
             }
-        }, './config', this.configChangeHandler) 
+        }, './config', this.configChangeHandler)
     }
 
-    async start(){
+    async start() {
         await this.makeKnex()
         this.startWebsocket()
-        await Promise.all( this.frontworkComponents.map(c => c.initialize?c.initialize():undefined ))
-        getLogger('Admin#start').debug(this.frontworkComponents.length+" components initialized")
+        await Promise.all(this.frontworkComponents.map(c => c.initialize ? c.initialize() : undefined))
+        getLogger('Admin#start').debug(this.frontworkComponents.length + " components initialized")
         await this.startWebserver()
     }
 
-    stop(){
-        Promise.all([ 
-            ...this.frontworkComponents.map(c => c.stop?c.stop():undefined ),
+    stop() {
+        Promise.all([
+            ...this.frontworkComponents.map(c => c.stop ? c.stop() : undefined),
         ])
-        .catch(e => getLogger('Admin#stop').warn(e))
-        .finally(() => { 
-            this.rpcServer.destroy()
-            process.exit(0)
-         })
+            .catch(e => getLogger('Admin#stop').warn(e))
+            .finally(() => {
+                this.rpcServer.destroy()
+                process.exit(0)
+            })
     }
 
-    protected configChangeHandler = (conf:AdminConf, key?:string) => {
-        if(key === 'dbConf'){
+    protected configChangeHandler = (conf: AdminConf, key?: string) => {
+        if (key === 'dbConf') {
             this.makeKnex()
         }
     }
 
-    getConfigKey(key:string){
+    getConfigKey(key: string) {
         return this.config.getConfigKey(key)
     }
 
-    setConfigKey(key:string, value:any){
+    setConfigKey(key: string, value: any) {
         return this.config.setConfigKey(key, value)
     }
 
-    getTableDefinitions(): TableDefiniton[]{
+    getTableDefinitions(): TableDefiniton[] {
         return [
             ...this.frontworkComponents
         ]
-        .filter(exp => exp.getTableDefinitions != null)
-        .flatMap(exp => exp.getTableDefinitions())
+            .filter(exp => exp.getTableDefinitions != null)
+            .flatMap(exp => exp.getTableDefinitions())
     }
 
-    private startWebsocket(){
+    private startWebsocket() {
         this.rpcServer = new RPCServer(20000, [
             ...this.frontworkComponents,
             {
         getLogger('Admin#startWebsocket').debug("Websocket up on", 20000)
     }
 
-    private async startWebserver(){
-        if(this.httpServer != null || this.express != null){
+    private async startWebserver() {
+        if (this.httpServer != null || this.express != null) {
             getLogger('Admin#startWebserver').warn("Webserver is already running")
             return
         }
-        
-        let port:number = this.config.getConfig().httpPort
+
+        let port: number = this.config.getConfig().httpPort
         this.express = express()
 
         const distFolder = "../../../../dist"
         const ngExpressServer = Path.join(__dirname, distFolder, 'server.js')
 
-        this.express.get('*.*', (req, res)=>{
+        this.express.get('*.*', (req, res) => {
             //console.log('*.*', req.path);
-            res.sendFile(Path.join(__dirname, distFolder,'browser',decodeURIComponent(req.path)))
+            res.sendFile(Path.join(__dirname, distFolder, 'browser', decodeURIComponent(req.path)))
+            res.status(200)
         })
 
-        try{
-            const req = require(distFolder+"/server.js")
+        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').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)
+            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.express.listen(port, () => {
-            getLogger('Admin#startWebserver').info('Admin panel listening for HTTP on *'+port)
+            getLogger('Admin#startWebserver').info('Admin panel listening for HTTP on *' + port)
         })
     }
 
-    private stopWebserver(){
-        if(this.httpServer == null || this.express == null){
+    private stopWebserver() {
+        if (this.httpServer == null || this.express == null) {
             getLogger('Admin#stopWebserver').warn("Webserver is not running")
             return
         }
         getLogger('Admin#stopWebserver').info("Webserver stopped")
     }
 
-    async makeKnex():Promise<Knex>{
-        const conf:Knex.Config = this.config.getConfigKey("dbConf")
+    async makeKnex(): Promise<Knex> {
+        const conf: Knex.Config = this.config.getConfigKey("dbConf")
 
-        getLogger('Admin#makeKnex').debug("Making new knex:", conf)        
-        if(conf.client === 'sqlite3'){
-            mkdirSync(Path.dirname((<any>conf.connection).filename), {recursive: true})
+        getLogger('Admin#makeKnex').debug("Making new knex:", conf)
+        if (conf.client === 'sqlite3') {
+            mkdirSync(Path.dirname((<any>conf.connection).filename), { recursive: true })
         }
 
         this.knex = Knex(conf)
-        if(conf.client === 'sqlite3'){
+        if (conf.client === 'sqlite3') {
             await this.knex.raw('PRAGMA foreign_keys = ON');
-        
+
         }
 
         await Promise.all(
             this.getTableDefinitions()
-            //make unique by name
-            .filter((other, index, self) => index === self.findIndex(
-                (self) => self.name === other.name)
-            )
-            //create table if not exists
-            .map(async (def)=> {
-                const hasTable = await this.knex.schema.hasTable(def.name)
-                if(!hasTable)
-                    return await this.knex.schema.createTable(def.name, def.tableBuilder)
-            })
+                //make unique by name
+                .filter((other, index, self) => index === self.findIndex(
+                    (self) => self.name === other.name)
+                )
+                //create table if not exists
+                .map(async (def) => {
+                    const hasTable = await this.knex.schema.hasTable(def.name)
+                    if (!hasTable)
+                        return await this.knex.schema.createTable(def.name, def.tableBuilder)
+                })
         )
+        await this.knex.migrate.latest().catch(e => {
+            getLogger('Admin#makeKnex').error(e)
+            process.exit(-1)
+        })
         return this.knex
     }
 }
 
-process.on( 'SIGINT', function() {
-    getLogger('process#SIGINT').info("Shutting down from SIGINT (Ctrl-C)" );
+process.on('SIGINT', function () {
+    getLogger('process#SIGINT').info("Shutting down from SIGINT (Ctrl-C)");
     Injector.resolve<FrontworkAdmin>(FrontworkAdmin).stop()
 })

src/backend/Components/Item/ItemManager.ts

 import { ItemManagerFeatureIfc, ItemManagerIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
 import { TableDefinitionExporter } from "../../Types/Interfaces";
-import { TableDefiniton, Item, User, Character, SRToken, SRPriority, Spec, Signup, Raid, Stats } from "../../Types/Types";
+import { TableDefiniton, Item, Character, SRToken, SRPriority, Spec, Signup, Raid, Stats } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { IItemManager } from "./Interface";
 import { IUserManager } from "../User/Interface";
                     table.boolean('hidden').defaultTo(false).notNullable()
                     table.string('tooltip').notNullable()
                     table.enu('tier', _Tiers).notNullable()
-                    table.json('stats').notNullable()
+                    table.json('stats')
                 }
             }]
     }

src/backend/Components/PubSub/Interface.ts

-import { SubscriptionResponse } from "rpclibrary"
 
 export class IPubSub<UpdateType>{
     publish: (topic: string, p: UpdateType) => Promise<void>
-    subscribe: (topic:string, callback: (p:UpdateType)=>any) => Promise<SubscriptionResponse&{data:any}>
+    subscribe: (topic:string, callback: (p:UpdateType)=>any) => Promise<string>
     unsubscribe: (uuid: string) => Promise<void>
-}
+}

src/backend/Components/PubSub/PubSub.ts

 import { Injectable } from "../../Injector/ServiceDecorator";
-import { SubscriptionResponse, makeSubResponse, RPCExporter } from "rpclibrary";
+import { RPCExporter } from "rpclibrary";
 import { IPubSub } from "./Interface";
+const uuidv4 = require('uuid/v4')
 
 @Injectable(IPubSub)
 export class PubSub<UpdateType = any>
         }))
     }
 
-    subscribe = async (topic:string, callback:(p:UpdateType)=>any) : Promise<SubscriptionResponse<{topic: string}>> => {
-        const resp = makeSubResponse({
-            topic: topic
-        })
+    subscribe = async (topic:string, callback:(p:UpdateType)=>any) : Promise<string> => {
+        const uuid = uuidv4()
         if(!this.subs[topic]) this.subs[topic] = {}
-        this.subs[topic][resp.uuid] = callback
-        return resp
+        this.subs[topic][uuid] = callback
+        return uuid
     }
 
     private unsubscribe = async (uuid: string) => {

src/backend/Components/Raid/Interface.ts

     addSignup: (signup: Signup) => Promise<Signup>
     removeSignup: (signup: Signup) => Promise<any>    
     getSignups: (raid:Raid) => Promise<(Signup & Character & Spec & User)[]>
-    sign: (userToken: string, character:Character, raid:Raid, late:boolean) => Promise<any>
+    sign: (userToken: string, character:Character, raid:Raid, late:boolean, memo?: string) => Promise<any>
     unsign: (userToken: string, character:Character, raid:Raid,) => Promise<any>
     archiveRaid: (raid:Raid) => Promise<RaidData>
     getRaidData: (raid:Raid) => Promise<RaidData>

src/backend/Components/Raid/RaidManager.ts

 import { IUserManager } from "../User/Interface";
 import { ICharacterManager } from "../Character/Interface";
 import { _Tiers } from "../../Types/Items";
+import { MAX_MEMO_LENGTH } from "../../Types/Constants";
 import { IItemManager } from "../Item/Interface";
 import { ItemManager } from "../Item/ItemManager";
 import { IPubSub } from "../PubSub/Interface";
+import { getLogger } from "log4js";
 
 @Injectable(IRaidManager)
 export class RaidManager
                     table.foreign('characterid').references('id').inTable('characters').onDelete('CASCADE')
                     table.boolean('benched').defaultTo('false')
                     table.boolean('late')
+                    table.timestamp('timestamp').defaultTo(this.admin.knex.fn.now())
+                    table.string('memo').nullable()
                 }
             }
         ]
 
     notifyRaid = async (raid:Raid | {id:number}) => {
         const data = await this.getRaidData(<Raid>raid)
-        this.pubsub.publish(""+raid.id, data)
-        await this.notifyRaids()
+        try{
+            await this.pubsub.publish(String(raid.id), data)
+            await this.notifyRaids()
+        }catch(e){
+            getLogger('RaidManager#notifyRaid').debug(e);
+        }
     }
 
     notifyRaids = async () => {
-        this.pubsub.publish('raids', undefined)
+        try{
+            await this.pubsub.publish('raids', undefined)
+        }catch(e){
+            getLogger('RaidManager#notifyRaids').debug(e);
+        }
     }
 
     createRaid = async (raid: Raid): Promise<Raid> => {
 
         await Promise.all([
             ...archived.participants.bench.map(giveCurrency),
-            ...Object.values(archived.participants).flat().flatMap((b:Signup & Character & Spec) => giveCurrency(b))
+            ...Object.values(archived.participants).flat().map((b:Signup & Character & Spec) => giveCurrency(b))
         ])
 
         await this.notifyRaids()
     archiveRaid = async (raid: Raid): Promise<RaidData> => {
         const raidData = await this.getRaidData(raid)
 
-        //const tx = await this.admin.knex.transaction()
+        const tx = await this.admin.knex.transaction()
 
         await this.admin.knex('archive')
-            //.transacting(tx)
+            .transacting(tx)
             .insert({
                 id: raidData.id,
                 raiddata: JSON.stringify(raidData)
             Object.values(raidData.participants).flat().flatMap((p: (Signup & Character & Spec)) => 
                 this.admin
                 .knex(raid.tier + 'tokens')
-                //.transacting(tx)
+                .transacting(tx)
                 .where({
                     characterid: p.characterid,
                     signupid: null
             ))
 
         await this.admin.knex('raids')
-            //.transacting(tx)
+            .transacting(tx)
             .where('id', '=', raid.id)
             .del()
-        //await tx.commit()
+        await tx.commit()
 
 
         const row = await this.admin.knex('archive')
             healers: <(Signup & Character & Spec)[]>[],
             tanks: <(Signup & Character & Spec)[]>[]
         }
-        //const tx = await this.admin.knex.transaction()
 
         const subQuery = this.admin
             .knex('signups')
 
         const raidInDb: Raid = await this.admin.knex('raids')
             .select('*', subQuery)
-            //.transacting(tx)
             .where('id', '=', raid.id)
             .first()
 
         const characterData: (Signup & Character & Spec)[] = await this.admin
             .knex('signups as s')
-            //.transacting(tx)
-            .select('s.id as id', 'charactername', 'rank', 'class', 'specid', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid', 'specid')
+            .select('s.id as id', 'charactername', 'rank', 'class', 'specid', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid', 'specid', 'memo', 'timestamp')
             .join('raids as r', 's.raidid', '=', 'r.id')
             .join('characters as c', 's.characterid', '=', 'c.id')
             .join('users as u', 'c.userid', '=', 'u.id')
 
         const tokenData: (Character & SRToken & Item)[] = await this.admin
             .knex('signups as s')
-            //.transacting(tx)
             .select('*', 's.id as id')
             .join('raids as r', 's.raidid', '=', 'r.id')
             .join('characters as c', 's.characterid', '=', 'c.id')
                 this.whereNotNull('t.signupid')
             })
 
-        //await tx.commit()
-
         tokenData.forEach(data => {
             if (!raiddata.tokens[data.itemname])
                 raiddata.tokens[data.itemname] = []
         .select('*', 'si.id as id')
         .where('raidid', '=', raid.id!)
 
-    sign = async (usertoken: string, character: Character, raid: Raid, late: boolean) => {
+    sign = async (usertoken: string, character: Character, raid: Raid, late: boolean, memo?: string) => {
         const maybeUserRecord = this.userManager.getUserRecordByToken(usertoken)
         if (!maybeUserRecord || maybeUserRecord.user.id != character.userid) {
             throw new Error("Bad Usertoken")
         }
-        //const tx = await this.admin.knex.transaction()
 
+        if(memo) memo = memo.substring(0, MAX_MEMO_LENGTH)
         const exists = await this.admin
             .knex('signups')
-            //.transacting(tx)
             .select('*')
             .where({
                 raidid: raid.id!,
         if (!exists) {
             await this.admin
                 .knex('signups')
-                //.transacting(tx)
                 .insert({
                     raidid: raid.id!,
                     characterid: character.id!,
                     late: late,
                     benched: false,
+                    memo: memo
                 })
         } else {
             await this.admin
                 .knex('signups')
-                //.transacting(tx)
                 .where({
                     id: exists.id
                 })
                     characterid: character.id!,
                     late: late,
                     benched: false,
+                    memo: memo
                 })
         }
-        //await tx.commit()
 
         await this.notifyRaid(raid)
         
     adminUnsign = async (character: Character, raid: Raid) => {
 
         const user = await this.characterManager.getUserOfCharacter(character)
-
-        const signup = await this.admin.knex('signups as si')
-            .where({
-                "si.raidid": raid.id!,
-                "si.characterid": character.id!,
-            }).first()
-
         const tokens = await this.itemManager.getTokens(character, [raid.tier], true)
 
         //check if token has to be deleted

src/backend/Components/Shoutbox/Interface.ts

 import { Raid, Signup, Character, RaidData } from "../../Types/Types"
-import { SubscriptionResponse } from "rpclibrary"
 
 export type ShoutMessage = {
     message: string,
 export class IShoutbox{
     shout: (uuid:string, msg: ShoutMessage) => Promise<void>
     getFeed: () => Promise<ShoutMessage[]>
-    subscribe: (callback) => Promise<SubscriptionResponse>
+    subscribe: (callback) => Promise<string>
 }

src/backend/Components/Shoutbox/Shoutbox.ts

 import { FrontworkComponent } from "../../Types/FrontworkComponent";
 import { TableDefiniton } from "../../Types/Types";
 import { IShoutbox, ShoutMessage } from "./Interface";
-import { SubscriptionResponse, makeSubResponse } from "rpclibrary";
 import * as  CircularBuffer from "circular-buffer";
+const uuid = require('uuid/v4')
 
 @Injectable(IShoutbox)
 export class Shoutbox
         return this.log.toarray()
     }
 
-    subscribe = async (callback) : Promise<SubscriptionResponse> => {
-        const resp = makeSubResponse({})
-        this.subs[resp.uuid] = callback
-        return resp
+    subscribe = async (callback) : Promise<string> => {
+        uuid()
+        this.subs[uuid] = callback
+        return uuid
     }
 
     unsubscribe = async (uuid: string) => {

src/backend/Components/User/UserManager.ts

 import { CharacterManager } from "../Character/CharacterManager";
 import { UserManagerFeatureIfc, UserManagerIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
-import { Rank, User, Auth, _Rank, TableDefiniton, RPCPermission, FrontcraftFeatureIfc, AnyRPCExporter, Token, UserRecord } from "../../Types/Types";
+import { Rank, User, Auth, _Rank, TableDefiniton, RPCPermission, FrontcraftFeatureIfc, Token, UserRecord } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { IUserManager } from "./Interface";
-import { getLogger, Logger } from "log4js";
+import { getLogger } from "log4js";
 import { saltedHash } from "../../Util/hash";
 import { _Tiers, Tiers } from "../../Types/Items";
 import { ICharacterManager } from "../Character/Interface";
 const salt = "6pIbc6yjSN"
 const ONE_WEEK = 604800000
 
-type Serverstate<SubresT, InterfaceT extends RPCInterface> = {
-    server: RPCServer<SubresT, InterfaceT>,
+type Serverstate<InterfaceT extends RPCInterface> = {
+    server: RPCServer<InterfaceT>,
     port: number,
 };
 
     private character: CharacterManager
 
     exporters: any[] = []
-    rankServer: Serverstate<{}, FrontcraftFeatureIfc>
+    rankServer: Serverstate<FrontcraftFeatureIfc>
     userLogins: { [username in string]: UserRecord } = {}
     allowed: string[] = []
 
         return
     }
 
-    startRankServer = async (port: number): Promise<RPCServer<{}, FrontcraftFeatureIfc>> => {
+    startRankServer = async (port: number): Promise<RPCServer<FrontcraftFeatureIfc>> => {
         let rpcs = [
             ...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

src/backend/Injector/ServiceDecorator.ts

 import { Injector } from "./Injector";
 import { Type, GenericClassDecorator } from "./Util";
-import { FrontworkComponent } from "../Types/FrontworkComponent";
 import { RPCExporter } from "rpclibrary";
 
 /**

src/backend/Types/Constants.ts

+export const MAX_MEMO_LENGTH = 255

src/backend/Types/FrontworkComponent.ts

-import { RPCInterface, RPCExporter, RPCInterfaceArray } from "rpclibrary";
+import { RPCInterface, RPCExporter, RPCDefinitions } from "rpclibrary";
 import { PrivilegedRPCExporter } from "./PrivilegedRPCExporter";
 import { TableDefinitionExporter } from "./Interfaces";
 import { TableDefiniton } from "./Types";
     FeatureIfc extends RPCInterface = RPCInterface, 
     Name extends keyof Ifc = keyof Ifc, 
     FeatureName extends keyof FeatureIfc = keyof FeatureIfc, 
-    SubresT = {}
 > extends
-    PrivilegedRPCExporter<Ifc, FeatureIfc, Name, FeatureName, SubresT>,
+    PrivilegedRPCExporter<Ifc, FeatureIfc, Name, FeatureName>,
     TableDefinitionExporter
 {
     name: Name;
 
-    exportRPCFeatures(): RPCExporter<FeatureIfc, FeatureName, SubresT>[] 
-    exportRPCs(): RPCInterfaceArray<Ifc>[Name]
+    exportRPCFeatures(): RPCExporter<FeatureIfc, FeatureName>[] 
+    exportRPCs(): RPCDefinitions<Ifc>[Name]
     getTableDefinitions(): TableDefiniton[] 
 
     initialize?(): Promise<any>

src/backend/Types/Plugin.ts

 
 
 export abstract class Plugin<ConfType = {}> 
-implements ConfigExporter<ConfType>, RPCExporter<any,any,any>, TableDefinitionExporter{
+implements ConfigExporter<ConfType>, RPCExporter, TableDefinitionExporter{
     
     constructor (protected admin: FrontworkAdmin, public name:string){
         if(!this.getConfig()){

src/backend/Types/PrivilegedRPCExporter.ts

-import { RPCExporter, RPCInterface, RPC, RPCInterfaceArray } from "rpclibrary";
+import { RPCExporter, RPCInterface } from "rpclibrary";
 
 export interface PrivilegedRPCExporter <
     Ifc extends RPCInterface = RPCInterface, 
     FeatureIfc extends RPCInterface = RPCInterface,
     Name extends keyof Ifc = keyof Ifc, 
     FeatureName extends keyof FeatureIfc = keyof FeatureIfc, 
-    SubresT = {}
 >extends RPCExporter<Ifc, Name>{
-    exportRPCFeatures() : RPCExporter<FeatureIfc, FeatureName, SubresT>[]
+    exportRPCFeatures() : RPCExporter<FeatureIfc, FeatureName>[]
 }

src/backend/Types/Types.ts

     characterid: number
     benched: boolean
     late: boolean
+    timestamp: string
+    memo?: string
 }
 
 export type Character = {

src/frontend/angular.json

           "configurations": {
             "production": {
               "aot": true,
+              "optimization": true,
+              "extractCss": true,
+              "sourceMap": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

src/frontend/package-lock.json

       "integrity": "sha512-ZYzRkETgBrdEGzL5JSKimvjI2CX7ioyZCkX2BpcfyjqI+079W0wHAyj5W4rIZMcDSOHgLZtgz1IdDi/vU77KEQ=="
     },
     "rpclibrary": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/rpclibrary/-/rpclibrary-1.9.2.tgz",
-      "integrity": "sha512-MOtVm0IBRLryXag1IwkYNPVFegbvW10+MbCjhr3GptO3MA7nHZ545ammgoCWnREtGOgFeN4Jib/EBDOJ9Ep41Q==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/rpclibrary/-/rpclibrary-1.10.2.tgz",
+      "integrity": "sha512-uf4FtylK+tyVo1O8YVihxYxaI4KHnKBzq05SsLYe8ZPXdO8Hqrv7Je5cwv3bfx0FBCO1vVrSc8DT1P6ypGY6uQ==",
       "requires": {
         "bsock": "^0.1.9",
+        "crypto-js": "^4.0.0",
         "http": "0.0.0",
         "uuid": "^3.3.3"
+      },
+      "dependencies": {
+        "crypto-js": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+          "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+        }
       }
     },
     "run-async": {

src/frontend/package.json

     "prepush": "npm run lint:ci",
     "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"
+    "tsc": "tsc --project src/tsconfig.server.json && webpack --config extra-webpack.config.js",
+    "knex": "knex"
   },
   "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rpclibrary": "^1.9.2",
+    "rpclibrary": "^1.10.2",
     "rxjs": "6.5.2",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",

src/frontend/server.ts

 global['alert'] = console.log
 global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
 
-export async function attachExpress(app, staticDir = "./dist") {
+export async function attachExpress(app, staticDir = "./dist", loggerService = console) {
   const STATIC_FOLDER = resolve(process.cwd(), staticDir);
 
   enableProdMode();
   const bundle = require(staticDir + '/server/main');
 
   const ServerApiService = bundle.ServerApiService
-  const serviceObj = new ServerApiService()
+  const serviceObj = new ServerApiService(loggerService)
   await serviceObj.initialize()
 
   app.set('view engine', 'html');
       bootstrap: bundle.AppServerModuleNgFactory,
       providers: [
         provideModuleMap(bundle.LAZY_MODULE_MAP),
+        {
+          provide: bundle.LoggerService,
+          deps: [],
+          useValue: loggerService
+        },
         {
           provide: bundle.IApiService,
+          deps: [],
           useValue: serviceObj,
-          deps: []
         }
       ]
     })

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

     </nb-action>
   
     <nb-action class="user-action">
-      <nb-user [nbContextMenu]="userMenu"
+      <nb-user style="text-transform: capitalize;"
+               [nbContextMenu]="userMenu"
                [onlyPicture]="false"
                [name]="user?.username">
       </nb-user>

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

 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { User } from '../../../../../../backend/Types/Types';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { ChatComponent } from './chat.component';
 import { ShoutMessage } from '../../../../../../backend/Components/Shoutbox/Interface';
 import { IApiService } from '../../../frontcraft/services/ApiService';
   ];
 
   currentTheme = 'default';
-  userMenu : NbMenuItem[] = [ { title: 'Log out', link: '/auth/logout' } ];
+  userMenu: NbMenuItem[] = [];
 
   sendMessage: any = console.log
   chatwindow: ChatComponent
   lastmessage = "asdasd"
   modifyPermissions
 
-  constructor(private sidebarService: NbSidebarService,
-              private router: Router,
-              private themeService: NbThemeService,
-              private layoutService: LayoutService,
-              private api: IApiService,
-              private dialogService : NbDialogService
-             ) {}
+  constructor(
+    private sidebarService: NbSidebarService,
+    private router: Router,
+    private themeService: NbThemeService,
+    private layoutService: LayoutService,
+    private api: IApiService,
+    private dialogService: NbDialogService,
+    private route: ActivatedRoute
+  ) { }
+
+  private setUserMenu = (redirect = this.router.url) => {
+    if (this.user.username === 'Guest' && this.user.rank === 'Guest'){
+      this.userMenu = [
+        { title: 'Login', link: '/auth/login', queryParams: { redirect: redirect } },
+        { title: 'Register', link: '/auth/register', queryParams: { redirect: redirect } },
+      ]
+    }else{
+      this.userMenu = [
+        { title: 'Profile', link: '/frontcraft/user/' + this.user.username },
+        { title: 'Log out', link: '/auth/logout', queryParams: { redirect: redirect } },
+      ]
+    }
+  }
 
   ngOnInit() {
     this.themeService.changeTheme("dark");
     this.currentTheme = this.themeService.currentTheme;
     this.modifyPermissions = this.api.get('modifyPermissions')
     this.user = this.api.getCurrentUser()
-    if(this.user)
-      this.userMenu.unshift({ title: 'Profile', link: '/frontcraft/user/'+this.user.username });
-   
+    
+    this.setUserMenu()
+
+    this.router.events.subscribe((val) => {
+      if(val instanceof NavigationEnd) {
+        this.setUserMenu(val.urlAfterRedirects)
+      }
+    })
+
+
+
     this.api.get('GuildManager').getGuildInfo().then(info => {
       this.title = info.name
     })
 
     this.api.connectShoutbox((msg) => {
       this.chatlog.push(msg)
-      msg['reply']=false
+      msg['reply'] = false
 
-      if(msg.message != this.lastmessage){
+      if (msg.message != this.lastmessage) {
         this.newmessage = true
-        msg['reply']=true
+        msg['reply'] = true
       }
-      if(this.chatwindow) this.chatwindow.messages.push(msg)
+      if (this.chatwindow) this.chatwindow.messages.push(msg)
     }).then(sendMsg => {
       this.sendMessage = (msg) => {
         sendMsg(msg)
         this.lastmessage = msg.message
       }
-      this.api.get('Shoutbox').getFeed().then(log => {this.chatlog = log})
+      this.api.get('Shoutbox').getFeed().then(log => { this.chatlog = log })
     })
 
     this.themeService.onThemeChange()
       .subscribe(themeName => this.currentTheme = themeName);
   }
 
-  openChat(){
+  openChat() {
     this.newmessage = false
     const ref = this.dialogService.open(ChatComponent, {
       context: {
         sendMessage: this.sendMessage,
       }
     });
-    ref.onClose.subscribe(()=>{
+    ref.onClose.subscribe(() => {
       this.chatwindow = null
     })
     this.chatwindow = ref.componentRef.instance
   toggleSidebar(): boolean {
     this.sidebarService.toggle(true, 'menu-sidebar');
     this.layoutService.changeLayoutSize();
-
     return false;
   }
 

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

   selector: 'ngx-app',
   template: '<router-outlet></router-outlet>',
 })
-export class AppComponent implements OnInit {
-
-  constructor() {  }
-
-  ngOnInit(): void { }
-}
+export class AppComponent { }

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

  */
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, APP_INITIALIZER, NgZone, Injector } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ThemeModule } from './@theme/theme.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+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';
 import {
   NbChatModule,
   NbDatepickerModule,
   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
-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: [

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

 
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 

src/frontend/src/app/frontcraft/UpdatingComponent.ts

+import { Router, NavigationStart } from '@angular/router'
+import { IApiService } from './services/ApiService'
+import { AnyFunction } from 'rpclibrary'
+import { LoggerService } from './services/logger.service'
+import { OnDestroy } from '@angular/core'
+
+export abstract class UpdatingComponent implements OnDestroy {
+    private _uuid: string
+    private _routerCancel: Function
+
+    constructor(
+        private _router: Router,
+        private _api: IApiService,
+        private _logger: LoggerService
+    ) { }
+
+    protected subscribe = (
+        topic: string,
+        callback: AnyFunction,
+    ) => {
+        const sub = this._router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                this.ngOnDestroy()
+            }
+        })
+        this._routerCancel = () => { sub.unsubscribe() }
+        this._api.get('PubSub').subscribe(topic, callback).then(uuid => {
+            this._logger.collapsed(`New subscription ${topic}`, "table", {
+                topic: topic,
+                uuid: uuid
+            })
+            this._uuid = uuid
+        }).catch(e => {
+            this._logger.warn(`Subscribe for ${topic} failed, ${String(e)}`)
+            delete this._uuid
+        })
+    }
+
+    //Note angular may call this function several times
+    ngOnDestroy() {
+        if (this._uuid) {
+            const id = this._uuid
+            delete this._uuid
+            this._api.get('PubSub').unsubscribe(id).then(() => {
+                this._logger.log(`Unsubscribed from ${id}`)
+            })
+        }
+        if (this._routerCancel) {
+            try {
+                this._routerCancel()
+            } catch (e) {
+                this._logger.warn(e)
+            }
+            delete this._routerCancel
+        }
+    }
+}

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

 import { Component, OnInit } from '@angular/core';
-import { ClientApiService } from '../services/client-login-api';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'auth-layout',

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

 
 
 <section class="another-action" aria-label="Register">
-  Don't have an account? <a class="text-link" routerLink="/auth/register">Register</a>
+  Don't have an account? <a class="text-link" routerLink="/auth/register" [queryParams]="{redirect: '/frontcraft'}">Register</a>
 </section>

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

 import { Component, OnInit } from '@angular/core';
-import { ClientApiService } from '../../services/client-login-api';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { IApiService } from '../../services/ApiService';
 import { NbToastrService } from '@nebular/theme';
 
   constructor(
     private router : Router,  
     private api : IApiService,
-    private toastr: NbToastrService
+    private toastr: NbToastrService,
+    private route: ActivatedRoute
   ){}
 
   ngOnInit(){
       this.toastr.danger("Login failed", "Error")
       return
     }else{
-      window['r'] = this.router
-      this.router.navigate(["/froncraft"])
+      this.route.queryParamMap.subscribe(params => {
+        this.router.navigate([params.get('redirect')])        
+      })
     }
   }
 }

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

-You will be redirected shortly. If not click here <a href="/auth/login">click</a>
+You will be redirected shortly. If not click here <a routerLink="/auth/login" [queryParams]="{redirect: '/frontcraft'}">click</a>

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

 import { Component, OnInit } from '@angular/core';
 import { IApiService } from '../../services/ApiService';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'mylogout',
 
   constructor(
     private api : IApiService,
-    private router: Router
+    private router: Router,
+    private route: ActivatedRoute
   ){}
 
   ngOnInit(){
     this.api.logout().then(() => {
-      this.router.navigate(['/auth/login'])
+      this.route.queryParamMap.subscribe(params => {
+        this.router.navigate([params.get('redirect')])        
+      })
     })
   }
 }

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

 
 
 <section class="another-action" aria-label="Register">
-  Back to <a class="text-link" routerLink="auth/login">Login</a>
+  Go to <a class="text-link" routerLink="auth/login" [queryParams]="{redirect: '/frontcraft'}">Login</a>
 </section>

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

 import { Component, OnInit } from '@angular/core';
-import { ClientApiService as ClientApiService } from '../../services/client-login-api';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } 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';
 
 
   submitted = false
 
   constructor(
-    private router : Router,  
+    private router : Router,
+    private route : ActivatedRoute,
     private api : IApiService
   ){}
 
         userid: this.api.getAuth().user.id!,
         race: char.race
       })
+
+      this.route.queryParamMap.subscribe(params => {
+        this.router.navigate([params.get('redirect')])        
+      })
+
     }catch(e){
       alert("Error creating character"+e)
       return

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

 import { Item, Stats } from '../../../../../../backend/Types/Types';
 
 import { NbToastrService } from '@nebular/theme';
-import { ClientApiService } from '../../services/client-login-api';
 import { IApiService } from '../../services/ApiService';
 
 @Component({

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

 import { Component, OnInit, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ClientApiService as ClientApiService } from '../../services/client-login-api';
+import { ActivatedRoute } from '@angular/router';
 import { Spec, User, Character, Item } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers } from '../../../../../../backend/Types/Items';

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

-import { Component, AfterContentInit, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NbMenuItem } from '@nebular/theme';
-import { ClientApiService } from '../services/client-login-api';
 import { Router } from '@angular/router';
 import { IApiService } from '../services/ApiService';
 
-declare const Cookies
 
 @Component({
   selector: 'page-layout',
     </ngx-one-column-layout>
   `,
 })
-export class PagesLayoutComponent implements OnInit{
+export class PagesLayoutComponent{
 
   menu:NbMenuItem[] = [{
     icon: 'image',
     link: '/frontcraft/armory'
   }]
   
-  constructor(
-    private api : IApiService,
-    private router : Router
-  ){}
+  constructor(){}
 
-  ngOnInit(): void {
-    /*
-    const u = this.api.getCurrentUser()
-    
-    if(!u){
-      this.router.navigate(['/auth/login'])
-    }
-    */
-  }
 }

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

   NbInputModule,
   NbMenuModule,
   NbCardModule,
-  NbTreeGridModule,
   NbListModule,
   NbTabsetModule,
   NbIconModule,

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

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-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';
       tanks:[],
       healers: []
     }
-    tokens = {}
+    tokens: {[key in string]:any[]} = {}
     displayedtokens = {}
     search = ""
     
 
       const raidManager = this.api.get('RaidManager')
       const raiddata = await raidManager.getArchiveRaid(parseInt(param))
+
+      console.log(raiddata);
+      
+
       this.raid = raiddata
       this.isTier = raiddata.tier != null
       this.tokens = raiddata.tokens
       this.changeSearch()
     }
 
-    changeSearch = () => {
-      this.tokens = this.raid.tokens;
-      this.displayedtokens = this.raid.tokens;
+    changeSearch(){
+      if(!this.search || this.search == ""){
+        this.displayedtokens = this.tokens
+      }else{
+        this.displayedtokens = {}
+        Object.entries(this.tokens).forEach((e) => {
+          const filteredTokens = e[1].filter(item => {
+            return item.itemname.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
+          })
+          if(filteredTokens.length > 0)
+            this.displayedtokens[e[0]] = filteredTokens 
+        })
+      }
     }
 }

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

       Pick Character
     </nb-card-header>
     <nb-card-body>
-        <div *ngFor="let character of characters">
-            <img [src]="'../../../../assets/images/'+character.class.toLowerCase()+'.png'" />
-            <span [ngStyle]="{'color': character.color}">
+        <textarea 
+            placeholder="Add a note (optional)"
+            rows="7" 
+            cols="50" 
+            nbInput style="white-space: pre-line;" 
+            [(ngModel)]="memo">
+        </textarea>
+        <br />
+        <br />
+        <nb-card *ngFor="let character of characters">
+            <nb-card-header [ngStyle]="{'color': character.color}">
+                <img [src]="'../../../../assets/images/'+character.class.toLowerCase()+'.png'" />
                 {{character.charactername}}
-            </span>
-            <br >
-            <br >
-            <br >
-
-            <button
-                (click)="signup(character, false)"
-                nbButton 
-                outline 
-                status="success" 
-                size="medium">
-                <nb-icon icon="checkmark-outline"></nb-icon> On Time
-            </button>
-            &nbsp;
-            &nbsp;
-            &nbsp;
-            <button
-                (click)="signup(character, true)"
-                nbButton 
-                outline 
-                status="warning" 
-                size="medium">
-                <nb-icon icon="clock-outline"></nb-icon> Late
-            </button>
-        </div>
+            </nb-card-header>
+            <nb-card-body>
+                <button
+                    (click)="signup(character, false)"
+                    nbButton 
+                    outline 
+                    status="success" 
+                    size="medium">
+                    <nb-icon icon="checkmark-outline"></nb-icon> On Time
+                </button>
+                &nbsp;
+                &nbsp;
+                &nbsp;
+                <button
+                    (click)="signup(character, true)"
+                    nbButton 
+                    outline 
+                    status="warning" 
+                    size="medium">
+                    <nb-icon icon="clock-outline"></nb-icon> Late
+                </button>
+            </nb-card-body>
+        </nb-card>
     </nb-card-body>
 </nb-card>

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

 import { OnInit, Component } from '@angular/core';
-import { NbWindowRef, NbToastrService, NbDialogRef } from '@nebular/theme';
+import { NbToastrService, NbDialogRef } from '@nebular/theme';
 import { RaidData, Character } from '../../../../../../backend/Types/Types';
-import { ClientApiService } from '../../services/client-login-api';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { IApiService } from '../../services/ApiService';
 
 
     raid : RaidData
     characters: Character[]
+    memo: string
 
     constructor(
         protected dialogRef: NbDialogRef<FrontcraftCharacerpickerComponent>,
         const signup = this.api.get('signup')
         if(!signup) return
 
-        await signup.sign(auth.token.value, character, this.raid, late)
+        await signup.sign(auth.token.value, character, this.raid, late, this.memo)
         this.toast.show('Signup', 'Success', { status: 'success' })
         this.dialogRef.close()
     }

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

                 <nb-tabset>
                     <nb-tab tabTitle="Info">
                         <h1>
-                            <img [src]="'../../../../assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
+                            <img [src]="'/assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
                                 style="height: 100px" />
                             {{raid.title}}
                         </h1>
                         <p>
                             {{raid.signupcount}} / {{raid.size}} signups
                         </p>
-                        <p>
+                        <p style="white-space: pre-line;">
                             {{raid.description}}
                         </p>
                         <div *ngIf="canSignup">
-                            <div *ngIf="isSignedup">
-
-                                <p>
-                                    You are signed as: {{mySignup.charactername}} ({{mySignup.race}}
-                                    {{mySignup.specname}}
-                                    {{mySignup.class}})<br />
-                                    Status: {{mySignup.status}}
+                            <div *ngIf="isSignedup" style="width: 100%;">
+                                <p style="white-space: pre-line;">
+                                    You are signed as: <span
+                                        style="text-transform: capitalize; word-break: keep-all;">{{mySignup.charactername}}</span>
+                                    ({{mySignup.race}} {{mySignup.specname}} {{mySignup.class}})
+                                    <br />
+                                    Status: {{mySignup.status}}<br /><br />
+                                    <textarea [status]="mySignup.status === 'Attending'?'success':'warning'"
+                                        placeholder="Add a note (optional)" rows="10" cols="50" nbInput
+                                        style="white-space: pre-line;" [(ngModel)]="mySignup.memo">
+                                    </textarea>
                                 </p>
 
-                                <button (click)="setLate(true)" *ngIf="mySignup.status !== 'Late'" nbButton outline
-                                    status="warning" size="medium">
-                                    <nb-icon icon="clock-outline"></nb-icon> Late
-                                </button>
-                                <button (click)="setLate(false)" *ngIf="mySignup.status === 'Late'" nbButton outline
+                                <button *ngIf="mySignup.status === 'Late'" (click)="setLate(false)" nbButton outline
                                     status="success" size="medium">
                                     <nb-icon icon="checkmark-outline"></nb-icon> On Time
                                 </button>
+                                <button *ngIf="mySignup.status === 'Attending'" (click)="setLate(false)" nbButton
+                                    outline status="success" size="medium">
+                                    <nb-icon icon="checkmark-outline"></nb-icon> Update
+                                </button>
+                                <button *ngIf="mySignup.status === 'Late'" (click)="setLate(true)" nbButton outline
+                                    status="warning" size="medium">
+                                    <nb-icon icon="clock-outline"></nb-icon> Update
+                                </button>
+                                <button *ngIf="mySignup.status === 'Attending'" (click)="setLate(true)" nbButton outline
+                                    status="warning" size="medium">
+                                    <nb-icon icon="clock-outline"></nb-icon> Late
+                                </button>
+
                                 <button (click)="unsign()" nbButton outline status="danger" size="medium">
                                     <nb-icon icon="close"></nb-icon>unsign
                                 </button>
                     </nb-tab>
                     <nb-tab tabTitle="Signups" [badgeText]="raid.signupcount" badgePosition="top right"
                         [badgeStatus]="raid.signupcount<40?'warning':'success'">
-
                         <div class="row">
                             <nb-card class="col-12 col-md-6" *ngIf="raid.tanks.length > 0">
                                 <nb-card-header>Tanks ({{raid.tanks.length}})</nb-card-header>
                                         <a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
                                             [routerLink]="'/frontcraft/character/'+participant.charactername">
                                             <img style="width:20px; height:20px"
-                                                [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
+                                                [src]="'/assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                             <img style="width:20px; height:20px"
-                                                [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
+                                                [src]="'/assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
+                                        <ng-template #template>
+                                            <div style="padding: 10px">
+                                                <p
+                                                    style="white-space: pre-line; max-width: 50vw; word-wrap: break-word;">
+                                                    {{participant.memo}}
+                                                </p>
+                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                            </div>
+                                        </ng-template>
+                                        <nb-icon *ngIf="participant.memo == null || participant.memo == ''"
+                                            [nbPopover]="template" nbPopoverTrigger="hover"
+                                            style="width: 0.75em; height: 0.75em;" icon="clock-outline"></nb-icon>
+
+                                        <nb-icon *ngIf="participant.memo != null && participant.memo != ''"
+                                            [nbPopover]="template" nbPopoverTrigger="hover"
+                                            style="width: 0.75em; height: 0.75em;" icon="message-circle-outline" status="info">
+                                        </nb-icon>
                                         <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                         </span>
                                         <a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
                                             [routerLink]="'/frontcraft/character/'+participant.charactername">
                                             <img style="width:20px; height:20px"
-                                                [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
+                                                [src]="'/assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                             <img style="width:20px; height:20px"
-                                                [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
+                                                [src]="'/assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
+                                        <ng-template #template>
+                                            <div style="padding: 10px">
+                                                <p style="white-space: pre-line;">
+                                                    {{participant.memo}}
+                                                </p>
+                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                            </div>
+                                        </ng-template>
+                                        <nb-icon *ngIf="participant.memo == null || participant.memo == ''"
+                                            [nbPopover]="template" nbPopoverTrigger="hover"
+                                            style="width: 0.75em; height: 0.75em;" icon="clock-outline"></nb-icon>
+
+                                        <nb-icon *ngIf="participant.memo != null && participant.memo != ''"
+                                            [nbPopover]="template" nbPopoverTrigger="hover"
+                                            style="width: 0.75em; height: 0.75em;" icon="message-circle-outline" status="info">
+                                        </nb-icon>
                                         <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                         </span>
                                                 style="text-transform: capitalize;"
                                                 [routerLink]="'/frontcraft/character/'+participant.charactername">
                                                 <img style="width:20px; height:20px"
-                                                    [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
+                                                    [src]="'/assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                                 <img style="width:20px; height:20px"
-                                                    [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
+                                                    [src]="'/assets/images/'+participant.class.toLowerCase()+'.png'" />
                                                 {{ participant.charactername }}
                                             </a>
+                                            <ng-template #template>
+                                                <div style="padding: 10px">
+                                                    <p style="white-space: pre-line;">
+                                                        {{participant.memo}}
+                                                    </p>
+                                                    {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                                </div>
+                                            </ng-template>
+                                            <nb-icon *ngIf="participant.memo == null || participant.memo == ''"
+                                                [nbPopover]="template" nbPopoverTrigger="hover"
+                                                style="width: 0.75em; height: 0.75em;" icon="clock-outline"></nb-icon>
+
+                                            <nb-icon *ngIf="participant.memo != null && participant.memo != ''"
+                                                [nbPopover]="template" nbPopoverTrigger="hover"
+                                                style="width: 0.75em; height: 0.75em;" icon="message-circle-outline" status="info">
+                                            </nb-icon>
                                             <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                                 Trial
                                             </span>
             <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 class="">
                             <nb-list-item *ngFor="let item of displayedtokens | keyvalue">
                                     <tr>
                                         <td>
                                             <div class="row">
-                                                <div 
-                                                *ngFor="let token of item.value" 
-                                                class="col-12 col-md-6 col-xl-4">
+                                                <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;
+                                                        <span style="text-transform: capitalize; white-space: nowrap;">
+                                                            [ {{token.level}} ]&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'}">
+                                                                [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>
                                                             Becomes valid when promoted to Raider
                                                         </div>
                                                     </ng-template>
-                                                    <span *ngIf="token.rank=='Trial'" style="font-size: 9px;" [nbPopover]="tooltip"
-                                                        nbPopoverTrigger="hover" nbPopoverPlacement="top">
+                                                    <span *ngIf="token.rank=='Trial'" style="font-size: 9px;"
+                                                        [nbPopover]="tooltip" nbPopoverTrigger="hover"
+                                                        nbPopoverPlacement="top">
                                                         Trial
                                                     </span><br />
                                                 </div>
                                             </div>
-            
+
                                         </td>
                                     </tr>
                                 </table>

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

-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
-import { ClientApiService as ClientApiService } from '../../services/client-login-api';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RaidData, Raid, Signup, Character, Spec, Item, SRToken } from '../../../../../../backend/Types/Types';
-import { NbWindowService, NbToastrService, NbDialogService } from '@nebular/theme';
+import { NbToastrService, NbDialogService } from '@nebular/theme';
 import { FrontcraftCharacerpickerComponent } from './characterpicker.component';
-import { getClassColor, SpecT } from '../../../../../../backend/Types/PlayerSpecs';
+import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { FrontcraftBuyTokenComponent } from '../shop/buytoken.component';
 import { allItems } from '../../../../../../backend/Types/Items';
 import { IApiService } from '../../services/ApiService';
+import { UpdatingComponent } from '../../UpdatingComponent';
+import { LoggerService } from '../../services/logger.service';
 
 @Component({
   selector: 'raid',
   templateUrl: './raid.component.html',
 })
-export class FrontcraftRaidComponent implements OnInit, OnDestroy{
+export class FrontcraftRaidComponent 
+extends UpdatingComponent
+implements OnInit{
 
     canSignup = false
     isSignedup = false
     tokens: {[itemname in string]: (Character & SRToken & Item)[]} = {}
     displayedtokens = {}
     search = ""
-    uuid
 
     constructor(
       private api: IApiService,
       private route: ActivatedRoute,
       private router: Router,
       private dialogService : NbDialogService,
-      private toast: NbToastrService
+      private toast: NbToastrService,
+      logger: LoggerService
     ){
-      router.events.subscribe(event => {
-        if (event instanceof NavigationStart) {
-          this.ngOnDestroy()
-        }
-      })
-    }
-
-    ngOnDestroy = () => {
-      if(this.uuid)
-        this.api.get('PubSub').unsubscribe(this.uuid)
+      super(router, api, logger)
     }
 
-    async ngOnInit(){
-      
+    ngOnInit(){
       this.manageRaid = this.api.get('manageRaid')
-      
       const signupFeature = this.api.get('signup')
+      
       if(signupFeature){
         this.canSignup = true
       }
-      await this.refresh()
-
-      const res = await this.api.get('PubSub').subscribe(""+this.raid.id!, (data: RaidData) => {
-        this.display(data)
+      this.refresh().then(() => {
+        this.subscribe(String(this.raid.id), (data: RaidData) => this.display(data))
       })
-      this.uuid = res.uuid
     }
 
     itemSelect = async(item) => {
       await signup.sign(auth.token.value, {
         ...this.mySignup,
         id: this.mySignup.characterid,
-      }, this.raid, value)
+      }, this.raid, value, this.mySignup.memo)
       this.toast.show('Signup', 'Success', { status: 'success' })
     }
 
       const raiddata = await raidManager.getRaidData(<any>{
         id: param
       })
-      
       this.display(raiddata)
-      
     }
 
     display =  async (raiddata:RaidData)  => {
       })
 
       const user = this.api.getCurrentUser()
-      const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)
+      const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)     
+      
       if(matchingSignup){       
-        this.isSignedup = true
         this.mySignup = matchingSignup
+        this.isSignedup = true        
         this.mySignup['status'] = matchingSignup['benched']?'Bench':matchingSignup['late']?'Late':'Attending'
       }else{
         this.isSignedup = false
         this.mySignup = null
       }
+
       this.changeSearch()
     }
 
           })
           if(filteredTokens.length > 0)
             this.displayedtokens[e[0]] = filteredTokens 
-        })
-        console.log(this.displayedtokens);
-        
+        })        
       }
     }
 

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

 import { Component, OnInit } from '@angular/core';
-import { ClientApiService } from '../../services/client-login-api';
 import { Raid, RaidData } from '../../../../../../backend/Types/Types';
-import { NbWindowRef, NbDialogRef } from '@nebular/theme';
+import { NbDialogRef } from '@nebular/theme';
 import { Tiers, _Tiers } from '../../../../../../backend/Types/Items';
 import { IApiService } from '../../services/ApiService';
 
     private api: IApiService
   ) {}
 
-  loadNext(cardData) {
+  loadNext() {
   }
 
   onTierSelect(){

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

 <nb-card class="col-12 col-xl-9">
   <nb-card-header>
     Upcoming raids
-    <nb-icon 
-      style="color:orange"
-      *ngIf="manageRaid"
-      (click)="create()"
-      icon="plus-square-outline"></nb-icon>
+    <nb-icon style="color:orange" *ngIf="manageRaid" (click)="create()" icon="plus-square-outline"></nb-icon>
   </nb-card-header>
-  <nb-list
-    nbInfiniteList
-    listenWindowScroll
-    [threshold]="500">
-    <nb-list-item *ngFor="let raid of raids" 
-    [routerLink]="'/frontcraft/raid/'+raid.id" 
-    class="raidlist"
-    style="cursor: pointer;">
-      <div class="row">
-        <img [src]="'../../../../assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'" 
-        style="object-fit: contain"
-        class="col-1 col-s-3" />
-
-        <div class="col-11 col-s-9" >
-          <div class="row">
-            <div class="col-12" style="padding-top: 5px">
+  <nb-list nbInfiniteList listenWindowScroll [threshold]="500">
+    <nb-list-item *ngFor="let raid of raids" class="raidlist">
+      <a [routerLink]="'/frontcraft/raid/'+raid.id">
+        <div class="row">
+          <table>
+            <tr>
+              <td rowspan="2" style="padding-right: 20px;">
+                <img [src]="'/assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
+                  style="max-width: 50px; object-fit: contain" />
+              </td>
               <h4>
                 {{raid.title}}
               </h4>
-            </div>
-          </div>
-          <div class="row" style="padding-top: 5px; padding-bottom: 5px; color:darkgray">
-            <div class="col-6 col-md-3">
-              <nb-icon icon="checkmark-circle"></nb-icon> {{raid.signupcount}} / {{raid.size}}<br>
-            </div>
-    
-            <div class="col-6 col-md-3">
-              <nb-icon icon="clock-outline"></nb-icon> {{raid.start | date : 'HH:mm'}}
-            </div>
-    
-            <div class="col-12 col-md-6">
-              <nb-icon icon="calendar-outline"></nb-icon> {{raid.start | date : 'EEE MMM d'}}
-            </div>
-          </div>
+            </tr>
+            <tr>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{raid.signupcount}}&nbsp;/&nbsp;{{raid.size}}<br>
+              </td>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="clock-outline"></nb-icon>&nbsp;{{raid.start | date : 'HH:mm'}}
+              </td>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="calendar-outline"></nb-icon>&nbsp;{{raid.start | date : 'EEE MMM d'}}
+              </td>
+            </tr>
+          </table>
         </div>
-      </div>
+      </a>
     </nb-list-item>
   </nb-list>
 </nb-card>
 
 <nb-card class="col-12 col-xl-9">
   <nb-card-header>Previous raids</nb-card-header>
-  <nb-list
-    nbInfiniteList
-    listenWindowScroll
-    [threshold]="500">
+  <nb-list nbInfiniteList listenWindowScroll [threshold]="500">
     <nb-list-item *ngFor="let raid of oldraids" [routerLink]="'/frontcraft/archive/'+raid.id">
-      <b>{{raid.title}}</b><br>
-      {{raid.signupcount}} / {{raid.size}}<br>
-      {{raid.start | date : 'EEEE d MMMM @ HH:mm'}}<br>
-      {{raid.description}}<br>
+      <a [routerLink]="'/frontcraft/archive/'+raid.id">
+        <div class="row">
+          <table>
+            <tr>
+              <td rowspan="2" style="padding-right: 20px;">
+                <img [src]="'/assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
+                  style="max-width: 50px;;object-fit: contain; filter: grayscale(75%)" />
+              </td>
+              <h4>
+                {{raid.title}}
+              </h4>
+            </tr>
+            <tr>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{raid.signupcount}}&nbsp;/&nbsp;{{raid.size}}<br>
+              </td>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="clock-outline"></nb-icon>&nbsp;{{raid.start | date : 'HH:mm'}}
+              </td>
+              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="calendar-outline"></nb-icon>&nbsp;{{raid.start | date : 'EEE MMM d'}}
+              </td>
+            </tr>
+          </table>
+        </div>
+      </a>
     </nb-list-item>
   </nb-list>
-</nb-card>
-  
+</nb-card>

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

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ClientApiService } from '../../services/client-login-api';
-import { NbWindowService, NbDialogService } from '@nebular/theme';
+import { NbDialogService } from '@nebular/theme';
 import { FrontcraftCreateRaidsComponent } from './createraid.compontent';
 import { Router, NavigationStart } from '@angular/router';
 import { IApiService } from '../../services/ApiService';
+import { UpdatingComponent } from '../../UpdatingComponent';
+import { LoggerService } from '../../services/logger.service';
 
 @Component({
   selector: 'raids',
   templateUrl: 'raids.component.html',
   styleUrls: ['raids.component.scss'],
 })
-export class FrontcraftRaidsComponent implements OnInit, OnDestroy{
+export class FrontcraftRaidsComponent 
+extends UpdatingComponent
+implements OnInit {
 
 
   manageRaid
   raids = []
   oldraids = []
   pageSize = 10;
-  uuid
 
   constructor(
     private api: IApiService,
-    private router: Router,
-    private dialogService: NbDialogService
+    router: Router,
+    private dialogService: NbDialogService,
+    logger: LoggerService
   ) {
-    this.manageRaid = this.api.get('manageRaid')
-    router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
-        this.ngOnDestroy()
-      }
-    })
+    super(router, api, logger)
   }
 
-  ngOnDestroy = () => {
-    if(this.uuid)
-      this.api.get('PubSub').unsubscribe(this.uuid)
+  ngOnDestroy(){
+    super.ngOnDestroy()
   }
 
   async ngOnInit() {
-    const res = await this.api.get('PubSub').subscribe("raids", () => {
-      this.refresh()
-    })
-    this.uuid = res.uuid
+    this.subscribe("raids", () => this.refresh())
+
+    this.manageRaid = this.api.get('manageRaid')
     this.refresh()
   }
 
-  refresh() {
-    this.api.get('RaidManager').getRaids().then(raids => {
-      this.raids = raids
-    })
-
+  async refresh() {
+    this.raids = await this.api.get('RaidManager').getRaids()
     const raidManager = this.api.get('RaidManager')
-    raidManager.getPastRaids(10).then(raiddata => {
-      this.oldraids = raiddata
-    })
+    this.oldraids = await raidManager.getPastRaids(10)
   }
 
-  create(){
-    this.dialogService.open(FrontcraftCreateRaidsComponent, { 
+  create() {
+    this.dialogService.open(FrontcraftCreateRaidsComponent, {
       closeOnBackdropClick: true,
       closeOnEsc: true,
       context: {
         templates: this.oldraids
-      } 
+      }
     })
-
   }
 }

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

-import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
-import { ClientApiService as ClientApiService } from '../../services/client-login-api';
-import { FrontcraftItemSelectComponent } from './itemselector.component';
-import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
+import { Component, OnInit, Input } from '@angular/core';
+import { NbToastrService, 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 { _Tiers, Tiers } from '../../../../../../backend/Types/Items';
 import { IApiService } from '../../services/ApiService';
 
 @Component({

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

 
     async ngOnInit(){
         
-        Promise.all(this.items.map(itemname => 
-            this.api.get('ItemManager').getItem(itemname)
+        
+        
+
+        Promise.all(this.items.map(async itemname => {
+            try{
+                return await this.api.get('ItemManager').getItem(itemname)
+            }catch(e){
+                console.log(itemname);
+            }
+        }
         )).then(items => {
             this.allItems = items
             this.displayedItems = this.allItems

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

 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';
 

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

         </form>
         <br />
 
-        <h3>Avaiable Reserves</h3>
+        <h3>Available Reserves</h3>
         {{user.MC}} MC |
         {{user.BWL}} BWL |
         {{user.ZG}} ZG |

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

 import { Component, OnInit } from '@angular/core';
-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';

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

 import { Component, OnInit } from '@angular/core';
-import { ClientApiService } from '../services/client-login-api';
 import { Router } from '@angular/router';
 
 @Component({

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

 import { Auth, FrontcraftIfc, FrontcraftFeatureIfc, User, SomeOf } from '../../../../../backend/Types/Types';
 import { saltedHash } from '../../../../../backend/Util/hash';
-import { RPCSocket } from 'rpclibrary';
+import { RPCSocket, ConnectedSocket } from 'rpclibrary';
 
 export class IApiService{
-    getUnprivilegedSocket: () => RPCSocket & FrontcraftIfc
+    getUnprivilegedSocket: () => ConnectedSocket<FrontcraftIfc>
     getAuth: () => Auth | undefined
     checkLogin: () => Promise<boolean>
     initialize: () => Promise<any>
-    getCurrentUser: () => User | undefined
+    getCurrentUser: () => User
     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
+    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, "")
 }
 
+export const GuestUser: User = {
+    username: 'Guest',
+    pwhash: '',
+    rank: 'Guest'
+}

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

 import { Injectable } from "@angular/core";
-import {RPCSocket} from 'rpclibrary/js/src/Frontend'
+import { RPCSocket } from 'rpclibrary/js/src/Frontend'
+import { ConnectedSocket } from "rpclibrary"
 import { Auth, User, _Class, FrontcraftFeatureIfc, SomeOf, FrontcraftIfc, } from '../../../../../backend/Types/Types'
 import { ShoutMessage } from '../../../../../backend/Components/Shoutbox/Interface';
-import { hash, IApiService } from './ApiService';
+import { hash, IApiService, GuestUser } from './ApiService';
+import { LoggerService } from './logger.service';
 
 declare const Cookies
 
 @Injectable()
 export class ClientApiService implements IApiService{
-    private socket:RPCSocket & FrontcraftIfc;
+    private socket:ConnectedSocket<FrontcraftIfc>
     private auth:Auth
-    private privSocket: RPCSocket & SomeOf<FrontcraftFeatureIfc>
+    private privSocket: RPCSocket<SomeOf<FrontcraftFeatureIfc>>
 
-    constructor(){
+    constructor(
+        private logger: LoggerService
+    ){
         window['s'] = this
     }
 
-    getUnprivilegedSocket = () : RPCSocket & FrontcraftIfc => this.socket
+    getUnprivilegedSocket = () : ConnectedSocket<FrontcraftIfc> => this.socket
 
-    private getPrivilegedSocket = async (auth:Auth) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
+    private getPrivilegedSocket = async (auth:Auth) : Promise<RPCSocket<SomeOf<FrontcraftFeatureIfc>>> => {
         if(this.privSocket) {
             return this.privSocket
         }
             sock.hook('getUserData', () => auth)
 
             sock.on('close', async () => {
-                console.log("priv#close");
+                this.logger.log("priv#close");
                 
                 //handled via unprivileged socket
             })
 
             sock.on('error', async (e) => {
-                console.log("priv#error", e);
+                this.logger.log("priv#error", e);
 
                 //handled via unprivileged socket
             })
-            const authSock = await sock.connect<RPCSocket & SomeOf<FrontcraftFeatureIfc>>(auth.token.value)
+            const authSock = await sock.connect(auth.token.value)
             
             this.auth = auth
             this.privSocket = authSock
         } 
     }
 
-    getCurrentUser = () : User | undefined => {
-        return this.auth?this.auth.user:undefined
+    getCurrentUser = () : User => {
+        return this.auth?this.auth.user:GuestUser
     }
 
     login = async (username: string, password: string) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
     }
 
     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)
+        const uuid = await this.get('Shoutbox').subscribe(callback)
+        return async (msg: ShoutMessage) => await this.get('Shoutbox').shout(uuid, msg)
     }
 
     kick = async () => {
 
     logout = async () => {
         Cookies.remove('token')
+        if(this.privSocket) this.privSocket.unhook('kick')
         if(this.auth){
             try{
                 await this.socket.UserManager.logout(this.auth.user.username, this.auth.token.value)
         }
 
         try{
-            let conn = new RPCSocket(20000, window.location.hostname)
+            let conn = new RPCSocket<FrontcraftIfc>(20000, window.location.hostname)
             conn.on('close', async () => {
             })                        
 
-            this.socket = await conn.connect<FrontcraftIfc>()
+            this.socket = await conn.connect()
         }catch(e){
             alert('Unable to connect. The server appears to be down.\nPress OK to refresh the page')
             location.reload()

src/frontend/src/app/frontcraft/services/logger.service.ts

+import { Injectable } from "@angular/core";
+import { environment } from '../../../environments/environment';
+
+interface ILoggerService{
+    log,
+    warn,
+    error,
+    table,
+    collapsed
+}
+
+@Injectable()
+export class LoggerService implements ILoggerService {
+
+    constructor(
+        private logger = console
+    ) { }
+
+    log = (...args) => { this.LOG('log', args) }
+    warn = (...args) => { this.LOG('warn', args) }
+    error = (...args) => { this.LOG('error', args) }
+    table = (...args) => { this.LOG('table', args) }
+    collapsed = (groupname: string, type: keyof ILoggerService, ...args) => {
+        if(type === "collapsed")
+            return this.log(args)
+            
+        console.groupCollapsed(groupname)
+        this[type as any].apply(this.logger, args)
+        console.groupEnd() 
+    }
+
+    private LOG(type, ...args) {
+        if (!environment.production) {
+            this.logger[type].apply(this.logger, ...args)
+        }
+    }
+}

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

 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';
+import { hash, IApiService, GuestUser } from './ApiService';
+import { LoggerService } from './logger.service';
+import { ConnectedSocket } from 'rpclibrary';
 
 declare const Cookies
 
 @Injectable()
 export class ServerApiService implements IApiService{
-    private socket:RPCSocket & FrontcraftIfc;
+    private socket:ConnectedSocket<FrontcraftIfc>
     private auth:Auth
     private privSocket: RPCSocket & SomeOf<FrontcraftFeatureIfc>
 
-    constructor(){}
+    constructor(
+        private logger: LoggerService
+    ){}
 
-    getUnprivilegedSocket = () : RPCSocket & FrontcraftIfc => this.socket
+    getUnprivilegedSocket = () : ConnectedSocket<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): 
         return this.socket[feature]
     }
 
-    getCurrentUser = () : User | undefined => {
-        return this.auth?this.auth.user:undefined
+    getCurrentUser = () : User => {
+        return GuestUser
     }
 
     login = async (username: string, password: string) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
 
         //attach error handler now so failed logins dont trigger reloads
         this.socket.on('error', async (err) => {
-            console.log(err);
+            this.logger.log(err);
         })
 
     }
 
     async connectShoutbox(callback:Function) : Promise<Function>{
-        return console.log
+        return this.logger.log
     }
 
     kick = async () => {
             try{
                 await this.socket.UserManager.logout(this.auth.user.username, this.auth.token.value)
             }catch(e){
-                console.warn(e);
+                this.logger.warn(e);
             }
         } 
 
         }
 
         try{
-            let conn = new RPCSocket(20000, window.location.hostname)
+            let conn = new RPCSocket<FrontcraftIfc>(20000, window.location.hostname)
             conn.on('close', async () => {
             })                        
 
-            this.socket = await conn.connect<FrontcraftIfc>()
+            this.socket = await conn.connect()
         }catch(e){
-            console.log(e);
+            this.logger.log(e);
             throw new Error("Websocket cannot connect")
         }
     }

src/frontend/src/main.server.ts

 import { IApiService } from './app/frontcraft/services/ApiService';
 export { IApiService }
 export { ServerApiService } from './app/frontcraft/services/server-login-api';
-
+export { LoggerService } from './app/frontcraft/services/logger.service'

src/frontend/src/main.ts

 import { environment } from './environments/environment';
 import { IApiService } from "./app/frontcraft/services/ApiService"
 import { ClientApiService } from './app/frontcraft/services/client-login-api';
+import { LoggerService } from './app/frontcraft/services/logger.service';
 
 if (environment.production) {
   enableProdMode();
 }
-
-const serviceObj = new ClientApiService()
+const loggerService = new LoggerService()
+const serviceObj = new ClientApiService(loggerService)
 serviceObj.initialize().then(_ => {
   platformBrowserDynamic([
     {
       provide: IApiService,
       deps: [],
       useValue: serviceObj
+    },{
+      provide: LoggerService,
+      deps: [],
+      useValue: loggerService
     }
   ]).bootstrapModule(FrontcraftAppModule)
     .catch(err => console.error(err));

src/frontend/tsconfig.app.json

 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "strict": false,
     "outDir": "./out-tsc/app",
     "paths": {
       "@angular/*": [

test/backendTest.ts

 import { Injector } from "../src/backend/Injector/Injector";
 import { FrontworkAdmin } from "../src/backend/Admin/Admin";
-import { T1, T2, Tiers } from "../src/backend/Types/Items";
+import { T2, Tiers } from "../src/backend/Types/Items";
 
-import { RPCSocket } from "rpclibrary";
+import { RPCSocket, ConnectedSocket } from "rpclibrary";
 import { FrontcraftIfc, Auth, User, FrontcraftFeatureIfc, Raid, Character, Rank, Class, Race, Spec, Signup } from "../src/backend/Types/Types";
 import { SpecT } from "../src/backend/Types/PlayerSpecs";
 
     let auth: Auth,
         adminUser: User,
         server: FrontworkAdmin,
-        client: RPCSocket & FrontcraftIfc,
-        adminClient: RPCSocket & FrontcraftFeatureIfc,
+        client: ConnectedSocket<FrontcraftIfc>,
+        adminClient: ConnectedSocket<FrontcraftFeatureIfc>,
         raids: Raid[] = [],
         users: { [username in string]: { account: User, character: Character, auth: Auth, signup?: Signup, item?: string } } = {}
 
                 }).then(adminUser => {
 
                     client.UserManager.login(adminUser.username, 'ca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb').then(auth => {
-                        const sock = new RPCSocket(
+                        const sock = new RPCSocket<FrontcraftFeatureIfc>(
                             auth.port,
                             "localhost"
                         )
 
-                        sock.connect<any>(auth.token.value).then(cli => {
+                        sock.connect(auth.token.value).then(cli => {
                             adminClient = cli
                             sock.hook('kick', () => {
                                 console.log("I got kicked");
 
     it('should sign up', (done) => {
         Promise.all(Object.values(users).map((user) =>
-            adminClient.signup.sign(user.auth.token.value, user.character, raids[0], false).catch(done)
+            adminClient.signup.sign(user.auth.token.value, user.character, raids[0], false, ""+Math.floor(Math.random()*10000)).catch(done)
         )).then(x => {
             adminClient.signup.getSignups(raids[0]).then(s => {
                 if (s.length == testAccounts.length) {