version bump and frontend fixes

log.txt

+[2020-03-29T12:12:03.477] [DEBUG] Admin#makeKnex - Making new knex: {
+  client: 'sqlite3',
+  connection: {(node:1085628) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
+Terminated
+npm ERR! code ELIFECYCLE
+npm ERR! errno 143
+npm ERR! frontcraft@1.0.0 launch: `node lib/src/backend/Launcher.js > log.txt "-"`
+npm ERR! Exit status 143
+npm ERR! 
+npm ERR! Failed at the frontcraft@1.0.0 launch script.
+npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
+
+npm ERR! A complete log of this run can be found in:
+npm ERR!     /home/cake/.npm/_logs/2020-03-29T10_12_28_351Z-debug.log
+s loaded
+[2020-03-29T12:12:04.535] [INFO] Admin#startWebserver - Admin panel listening for HTTP on *8080
+[2020-03-29T12:12:17.689] [DEBUG] UserManager#checkConnection - {
+  celinda: {
+    connections: { '59288': [Socket] },
+    auth: { token: [Object], user: [Object], port: 20001 },
+    user: {
+      id: 3,
+      username: 'celinda',
+      rank: 'Officer',
+      MC: 1,
+      BWL: 0,
+      ZG: 1,
+      AQ20: 1,
+      AQ40: 1,
+      Naxx: 1
+    }
+  }
+} [ '1563eebe-9da2-4b31-b4ef-ef3aaa7e23b1' ]

package.json

   "scripts": {
     "tsc": "tsc",
     "knex": "knex",
-    "launch": "node lib/src/backend/Launcher.js",
+    "launch": "node lib/src/backend/Launcher.js > log.txt",
     "start": "npm run build && npm run launch",
     "start-backend": "npm run build-backend && npm run launch",
     "test": "rm -rf data && npm run build-backend && mocha lib/test/backendTest.js",

src/backend/Admin/Admin.ts

 import { FrontworkComponent } from '../Types/FrontworkComponent';
 import { IAdmin } from './Interface';
 import { Injector } from '../Injector/Injector';
-import { Shoutbox } from '../Components/Shoutbox/Shoutbox';
 import { PubSub } from '../Components/PubSub/PubSub';
 
 getLogger().level = 'debug'
         RaidManager,
         CharacterManager,
         UserManager,
-        Shoutbox,
         PubSub
     ]
 })
 
         try {
             const req = require(distFolder + "/server.js")
-            await req.attachExpress(this.express)
+            await req.attachExpress(this.express, './dist', getLogger('angularSSR#'))
             getLogger('Admin#startWebserver').info('Frontend from ' + ngExpressServer + " loaded")
         } catch (e) {
             getLogger('Admin#startWebserver').error(e)

src/backend/Components/Raid/RaidManager.ts

 
     getRaids = async (): Promise<Raid[]> => {
 
-        const subQuery = this.admin
+        const countSignups = this.admin
             .knex('signups')
             .count('*')
             .where({
             })
             .as('signupcount')
 
+        const countBenches = this.admin
+            .knex('signups')
+            .count('*')
+            .where({
+                raidid: this.admin.knex.ref('raids.id'),
+                benched: true,
+                late: false
+            })
+            .as('benchcount')
+
         return await this.admin.knex('raids')
-            .select('*', subQuery)
+            .select('*', countSignups, countBenches)
             .orderBy('start', 'asc')
     }
 

src/backend/Components/Shoutbox/Interface.ts

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

src/backend/Components/Shoutbox/RPCInterface.ts

-import { IShoutbox } from "./Interface"
-
-export type ShoutboxIfc = {
-    Shoutbox:{
-        getFeed: IShoutbox['getFeed']
-        shout: IShoutbox['shout']
-        subscribe: IShoutbox['subscribe']
-    }
-}
-
-export type ShoutboxFeatureIfc = {
-    
-}

src/backend/Components/Shoutbox/Shoutbox.ts

-import { Injectable } from "../../Injector/ServiceDecorator";
-import { ShoutboxFeatureIfc, ShoutboxIfc } from "./RPCInterface";
-import { FrontworkComponent } from "../../Types/FrontworkComponent";
-import { TableDefiniton } from "../../Types/Types";
-import { IShoutbox, ShoutMessage } from "./Interface";
-import * as  CircularBuffer from "circular-buffer";
-const uuid = require('uuid/v4')
-
-@Injectable(IShoutbox)
-export class Shoutbox
-implements FrontworkComponent<ShoutboxIfc, ShoutboxFeatureIfc>, IShoutbox{
-    name = "Shoutbox" as "Shoutbox";    
-
-    log: CircularBuffer = new CircularBuffer(500)
-    subs = {}
-
-    exportRPCs = () => [
-        this.shout,
-        this.getFeed,
-        {
-            name: 'subscribe' as 'subscribe',
-            hook: this.subscribe,
-            onClose: (subres, rpcName) => {
-                this.unsubscribe(subres.uuid)
-            }
-        }
-    ]
-
-    exportRPCFeatures = () => []
-    
-    getTableDefinitions(): TableDefiniton[] {
-        return []
-    }
-
-    shout = async (uuid:string, msg: ShoutMessage) : Promise<void> => {
-        if(!this.subs[uuid]) return
-        this.broadcast(uuid, msg)
-        this.log.push(msg)
-    }
-
-    private broadcast = async (uuid:string, msg: ShoutMessage) => {
-        await Promise.all(Object.values(this.subs).map(async (callback:any) => {
-            try{
-                await callback(msg)
-            }catch(e){
-                delete this.subs[uuid]
-            }
-        }))
-    }
-
-    getFeed = async () : Promise<ShoutMessage[]> => {
-        return this.log.toarray()
-    }
-
-    subscribe = async (callback) : Promise<string> => {
-        uuid()
-        this.subs[uuid] = callback
-        return uuid
-    }
-
-    unsubscribe = async (uuid: string) => {
-        delete this.subs[uuid]
-    }
-}

src/backend/Components/User/UserManager.ts

             },
             errorHandler: (socket, e, rpcName, args) => {
                 getLogger('UserManager#errorHandler').error(rpcName, args, e);
+                throw(new Error("RPC failed"))
             },
             sesame: (sesame) => this.checkToken(sesame),
             visibility: '0.0.0.0'

src/backend/Types/Types.ts

 import { CharacterManagerIfc, CharacterManagerFeatureIfc } from "../Components/Character/RPCInterface";
 import { ItemManagerFeatureIfc, ItemManagerIfc } from "../Components/Item/RPCInterface";
 import { GuildManagerFeatureIfc, GuildManagerIfc } from "../Components/Guild/RPCInterface";
-import { ShoutboxIfc } from "../Components/Shoutbox/RPCInterface";
 import { Tiers } from "./Items";
 import { PubSubIfc } from "../Components/PubSub/RPCInterface";
 
                           & CharacterManagerIfc 
                           & ItemManagerIfc
                           & GuildManagerIfc
-                          & ShoutboxIfc
                           & PubSubIfc
 
 export type FrontcraftFeatureIfc = RaidManagerFeatureIfc 
     description: string
     start: string
     signupcount?: number
+    benchcount?: number
     size: number
     tier: Tiers
 }

src/frontend/package-lock.json

         "assert-plus": "^1.0.0"
       }
     },
+    "date-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz",
+      "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w=="
+    },
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
       "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
       "requires": {
         "ms": "^2.1.1"
       }
         }
       }
     },
+    "flatted": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
+      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg=="
+    },
     "flatten": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "fontkit": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-1.8.0.tgz",
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
             "kind-of": "^3.0.2"
           }
         },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
           "dev": true
         },
+        "log4js": {
+          "version": "0.6.38",
+          "resolved": "https://registry.npmjs.org/log4js/-/log4js-0.6.38.tgz",
+          "integrity": "sha1-LElBFmldb7JUgJQ9P8hy5mKlIv0=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~1.0.2",
+            "semver": "~4.3.3"
+          },
+          "dependencies": {
+            "readable-stream": {
+              "version": "1.0.34",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+              "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+              "dev": true,
+              "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "0.0.1",
+                "string_decoder": "~0.10.x"
+              }
+            }
+          }
+        },
         "micromatch": {
           "version": "2.3.11",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
             }
           }
         },
+        "semver": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
+          "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
+          "dev": true
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
           "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
           "dev": true
         },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        },
         "tmp": {
           "version": "0.0.31",
           "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
       }
     },
     "log4js": {
-      "version": "0.6.38",
-      "resolved": "https://registry.npmjs.org/log4js/-/log4js-0.6.38.tgz",
-      "integrity": "sha1-LElBFmldb7JUgJQ9P8hy5mKlIv0=",
-      "dev": true,
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.1.2.tgz",
+      "integrity": "sha512-knS4Y30pC1e0n7rfx3VxcLOdBCsEo0o6/C7PVTGxdVK+5b1TYOSGQPn9FDcrhkoQBV29qwmA2mtkznPAQKnxQg==",
       "requires": {
-        "readable-stream": "~1.0.2",
-        "semver": "~4.3.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "semver": {
-          "version": "4.3.6",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
-          "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
-          "dev": true
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-          "dev": true
-        }
+        "date-format": "^3.0.0",
+        "debug": "^4.1.1",
+        "flatted": "^2.0.1",
+        "rfdc": "^1.1.4",
+        "streamroller": "^2.2.3"
       }
     },
     "loglevel": {
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multicast-dns": {
       "version": "6.2.3",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
+    "rfdc": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.1.4.tgz",
+      "integrity": "sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug=="
+    },
     "rimraf": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
       "dev": true
     },
+    "streamroller": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-2.2.3.tgz",
+      "integrity": "sha512-AegmvQsscTRhHVO46PhCDerjIpxi7E+d2GxgUDu+nzw/HuLnUdxHWr6WQ+mVn/4iJgMKKFFdiUwFcFRDvcjCtw==",
+      "requires": {
+        "date-format": "^2.1.0",
+        "debug": "^4.1.1",
+        "fs-extra": "^8.1.0"
+      },
+      "dependencies": {
+        "date-format": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
+          "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA=="
+        }
+      }
+    },
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
     "unix-crypt-td-js": {
       "version": "1.1.4",

src/frontend/package.json

     "core-js": "2.5.1",
     "echarts": "^4.0.2",
     "eva-icons": "^1.1.0",
+    "font-awesome": "^4.7.0",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "js-cookie": "^2.2.1",
     "leaflet": "1.2.0",
+    "log4js": "^6.1.2",
     "nebular-icons": "1.1.0",
     "ng2-ckeditor": "^1.2.2",
     "ng2-completer": "2.0.8",

src/frontend/server.ts

 global['alert'] = console.log
 global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
 
-export async function attachExpress(app, staticDir = "./dist", loggerService = console) {
+export async function attachExpress(app, staticDir = "./dist", logger = console) {
   const STATIC_FOLDER = resolve(process.cwd(), staticDir);
-
   enableProdMode();
 
+  const loggerService = {
+    warn: (...args) => logger.error(...args),
+    error: (...args) => logger.warn(...args),
+    log: (...args) => logger.info(...args),
+    table: (...args) => logger.info(...args),
+    collapsed: (msg, type, ...args) => loggerService[type](msg, ...args)
+  }
+
   const bundle = require(staticDir + '/server/main');
 
   const ServerApiService = bundle.ServerApiService
-  const serviceObj = new ServerApiService(loggerService)
+  const serviceObj = new ServerApiService(logger)
   await serviceObj.initialize()
 
   app.set('view engine', 'html');

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

-import { Component } from '@angular/core';
-import { ShoutMessage } from '../../../../../../backend/Components/Shoutbox/Interface';
-import { IApiService } from '../../../frontcraft/services/ApiService';
-
-@Component({
-  selector: 'chat',
-  template: `
-        <nb-chat title="Shoutbox" size="large" status="primary">
-          <nb-chat-message *ngFor="let msg of messages"
-                           [type]="text"
-                           [message]="msg.message"
-                           [sender]="msg.sender"
-                           [date]="msg.date"
-                           [reply]="msg.reply">
-          </nb-chat-message>
-          <nb-chat-form 
-          (send)="submit($event)" 
-          [dropFiles]="false">
-          </nb-chat-form>
-        </nb-chat>
-  `, 
-  styles: [`
-  nb-chat {
-    width: 600px;
-    margin: 0.5rem 0 2rem 2rem;
-  }`],
-})
-export class ChatComponent {
-
-  messages : ShoutMessage[] = []
-  history
-
-  constructor(
-    private api: IApiService
-  ) {}
-
-  submit(event){
-    this.sendMessage({
-      date: ""+Date.now(),
-      message: event.message,
-      sender: this.api.getCurrentUser().username
-    })
-  }
-
-  sendMessage : (msg:ShoutMessage)=>Promise<void>
-}

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

       icon="settings-2-outline" 
       link="/permissions">
     </nb-action>
-    <nb-action 
-      *ngIf="!newmessage"
-      icon="message-square-outline" 
-      (click)="openChat()">
-    </nb-action>
-    <nb-action 
-      *ngIf="newmessage"
-      icon="message-square-outline"
-      badgeText="new"
-      badgePosition="top right"
-      badgeStatus="info"
-      (click)="openChat()">
-    </nb-action>
   
     <nb-action class="user-action">
       <nb-user style="text-transform: capitalize;"

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

 import { Subject } from 'rxjs';
 import { User } from '../../../../../../backend/Types/Types';
 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';
+import { IApiService } from '../../../frontcraft/services/ApiService/ApiService';
 
 @Component({
   selector: 'ngx-header',
   userMenu: NbMenuItem[] = [];
 
   sendMessage: any = console.log
-  chatwindow: ChatComponent
-  chatlog: ShoutMessage[] = []
   newmessage = false
   lastmessage = "asdasd"
   modifyPermissions
     private themeService: NbThemeService,
     private layoutService: LayoutService,
     private api: IApiService,
-    private dialogService: NbDialogService,
-    private route: ActivatedRoute
   ) { }
 
   private setUserMenu = (redirect = this.router.url) => {
       }
     })
 
-
-
     this.api.get('GuildManager').getGuildInfo().then(info => {
       this.title = info.name
     })
 
-    this.api.connectShoutbox((msg) => {
-      this.chatlog.push(msg)
-      msg['reply'] = false
-
-      if (msg.message != this.lastmessage) {
-        this.newmessage = true
-        msg['reply'] = true
-      }
-      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.themeService.onThemeChange()
       .pipe(
         map(({ name }) => name),
       .subscribe(themeName => this.currentTheme = themeName);
   }
 
-  openChat() {
-    this.newmessage = false
-    const ref = this.dialogService.open(ChatComponent, {
-      context: {
-        sendMessage: this.sendMessage,
-      }
-    });
-    ref.onClose.subscribe(() => {
-      this.chatwindow = null
-    })
-    this.chatwindow = ref.componentRef.instance
-    this.chatwindow.messages.push(...this.chatlog)
-  }
-
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();

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

 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
 import { DARK_THEME } from './styles/theme.dark';
-import { ChatComponent } from './components/header/chat.component';
 
 const NB_MODULES = [
   NbLayoutModule,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
   OneColumnNoSidebarLayoutComponent,
-  ChatComponent
 ];
 const PIPES = [
   CapitalizePipe,
   exports: [CommonModule, ...PIPES, ...COMPONENTS],
   declarations: [...COMPONENTS, ...PIPES],
   entryComponents: [
-    ChatComponent
   ]
 })
 export class ThemeModule {

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

  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { NbIconLibraries } from '@nebular/theme';
+
 
 @Component({
   selector: 'ngx-app',
-  template: '<router-outlet></router-outlet>',
+  template: `<router-outlet></router-outlet>`,
+  styles: []
 })
-export class AppComponent { }
+export class AppComponent{
+  constructor(private iconLibraries: NbIconLibraries) {
+    this.iconLibraries.registerFontPack('font-awesome', { iconClassPrefix: 'fa' });
+  }
+}

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

   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
+import { FlashService } from './frontcraft/services/flash-service';
 
 @NgModule({
   declarations: [
     PermissionsModule
   ],
   bootstrap: [AppComponent],
-  providers: []
+  providers: [FlashService]
 })
 export class FrontcraftAppModule {
 }

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

 import { Router, NavigationStart } from '@angular/router'
-import { IApiService } from './services/ApiService'
+import { IApiService } from './services/ApiService/ApiService'
 import { AnyFunction } from 'rpclibrary'
-import { LoggerService } from './services/logger.service'
-import { OnDestroy } from '@angular/core'
+import { LoggerService } from './services/LoggerService/logger.service'
+import { OnDestroy, Inject, PLATFORM_ID, Injector } from '@angular/core'
+import { isPlatformBrowser } from '@angular/common'
 
 export abstract class UpdatingComponent implements OnDestroy {
+
     private _uuid: string
     private _routerCancel: Function
+    private _router: Router
+    private _api: IApiService
+    private _logger: LoggerService
+    private platformId: Object
 
     constructor(
-        private _router: Router,
-        private _api: IApiService,
-        private _logger: LoggerService
-    ) { }
+        injector: Injector
+    ) {
+        this._router = injector.get(Router)
+        this._api = injector.get(IApiService)
+        this._logger = injector.get(LoggerService)
+        this.platformId = injector.get(PLATFORM_ID)
+    }
 
     protected subscribe = (
         topic: string,
         callback: AnyFunction,
     ) => {
+        if (!topic
+        || topic === "null"
+        || topic === "undefined"
+        || !callback
+        || !isPlatformBrowser(this.platformId)) 
+        {
+            return
+        }
+
         const sub = this._router.events.subscribe(event => {
             if (event instanceof NavigationStart) {
                 this.ngOnDestroy()

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

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({

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

 import { Component, OnInit } from '@angular/core';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({

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

 import { Router, ActivatedRoute } from '@angular/router';
 import { _Rank, _Class, Class, User, _Race  } from '../../../../../../backend/Types/Types'
 import { specs  } from '../../../../../../backend/Types/PlayerSpecs'
-import { hash, IApiService } from '../../services/ApiService';
+import { hash, IApiService } from '../../services/ApiService/ApiService';
 
 
 @Component({

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

 import { Item, Stats } from '../../../../../../backend/Types/Types';
 
 import { NbToastrService } from '@nebular/theme';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
   selector: 'armory',

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

 import { Spec, User, Character, Item } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers } from '../../../../../../backend/Types/Items';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
   selector: 'character',

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

 import { NbThemeService } from '@nebular/theme';
 import { _Class } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 
 @Component({

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

 import { Component, OnInit } from '@angular/core';
 import { NbMenuItem } from '@nebular/theme';
 import { Router } from '@angular/router';
-import { IApiService } from '../services/ApiService';
+import { IApiService } from '../services/ApiService/ApiService';
 
 
 @Component({

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

 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RaidData } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
+import { LoggerService } from '../../services/LoggerService/logger.service';
 
 @Component({
   selector: 'archive',
     constructor(
       private api: IApiService,
       private route: ActivatedRoute,
+      private router: Router,
+      private logger: LoggerService
     ){
     }
 
       const param = this.route.snapshot.paramMap.get('id');
 
       const raidManager = this.api.get('RaidManager')
-      const raiddata = await raidManager.getArchiveRaid(parseInt(param))
+      try{
+        const raiddata = await raidManager.getArchiveRaid(parseInt(param))
+        if(!raiddata) throw new Error('Unable to get raid')
 
-      console.log(raiddata);
-      
-
-      this.raid = raiddata
-      this.isTier = raiddata.tier != null
-      this.tokens = raiddata.tokens
-      this.displayedtokens = this.tokens;
-
-      [
-        ...raiddata.tanks, 
-        ...raiddata.healers, 
-        ...Object.values<any>(raiddata.participants).flat()
-      ].forEach(p => {
-        p['color'] = getClassColor(p.class)
-      })
-
-      this.changeSearch()
+        this.raid = raiddata
+        this.isTier = raiddata.tier != null
+        this.tokens = raiddata.tokens
+        this.displayedtokens = this.tokens;
+  
+        [
+          ...raiddata.tanks, 
+          ...raiddata.healers, 
+          ...Object.values<any>(raiddata.participants).flat()
+        ].forEach(p => {
+          p['color'] = getClassColor(p.class)
+          if(!p.timestamp)
+            p.before = 5.184e+8 //7 days
+          else
+            p['before'] = Number.parseInt(this.raid.start) - Date.parse(p.timestamp)
+        })
+  
+        this.changeSearch()
+      }catch(e){
+        this.router.navigate(["/"])
+      }
     }
 
     changeSearch(){

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

 import { NbToastrService, NbDialogRef } from '@nebular/theme';
 import { RaidData, Character } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
     selector: 'characterpicker',

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

                                                     style="white-space: pre-line; max-width: 50vw; word-wrap: break-word;">
                                                     {{participant.memo}}
                                                 </p>
-                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}} ({{participant.before | date : 'dd'}} days before start)
                                             </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
+                                        [nbPopover]="template" 
+                                        nbPopoverTrigger="hover"
+                                        style="width: 0.75em; height: 0.75em;" 
+                                        [icon]="participant.memo != null && participant.memo != ''?'message-circle-outline':'clock-outline'"
+                                        [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                         </nb-icon>
+
                                         <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                         </span>
                                                 <p style="white-space: pre-line;">
                                                     {{participant.memo}}
                                                 </p>
-                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}} ({{participant.before | date : 'dd'}} days before start)
                                             </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
+                                            [nbPopover]="template" 
+                                            nbPopoverTrigger="hover"
+                                            style="width: 0.75em; height: 0.75em;" 
+                                            [icon]="participant.memo != null && participant.memo != ''?'message-circle-outline':'clock-outline'"
+                                            [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                         </nb-icon>
                                         <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                             Trial
                                                     <p style="white-space: pre-line;">
                                                         {{participant.memo}}
                                                     </p>
-                                                    {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
+                                                    {{participant.timestamp | date : 'HH:mm EEE MMM d'}} ({{participant.before | date : 'dd'}} days before start)
                                                 </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
+                                                [nbPopover]="template" 
+                                                nbPopoverTrigger="hover"
+                                                style="width: 0.75em; height: 0.75em;" 
+                                                [icon]="participant.memo != null && participant.memo != ''?'message-circle-outline':'clock-outline'"
+                                                [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                             </nb-icon>
+
                                             <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                                 Trial
                                             </span>
 
                         <nb-list class="">
                             <nb-list-item *ngFor="let item of displayedtokens | keyvalue">
-                                <table>
+                                <table style="width: 100%;">
                                     <tr>
                                         <td>
                                             <wowhead [item]="item.value[0]"></wowhead><br />
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td>
-                                            <div class="row">
-                                                <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4">
-                                                    <span
-                                                        [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
-                                                        <span style="text-transform: capitalize; 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'}">
-                                                                {{token.charactername}}
-                                                            </a>
-                                                        </span>
+                                        <td class="row">
+                                            <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4"
+                                                style="white-space: nowrap;">
+                                                <span
+                                                    [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
+                                                    <span style="text-transform: capitalize;">
+                                                        [ {{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'}">
+                                                            {{token.charactername}}
+                                                        </a>
                                                     </span>
-                                                    <ng-template #tooltip>
-                                                        <div style="color:white">
-                                                            Becomes valid when promoted to Raider
-                                                        </div>
-                                                    </ng-template>
-                                                    <span *ngIf="token.rank=='Trial'" style="font-size: 9px;"
-                                                        [nbPopover]="tooltip" nbPopoverTrigger="hover"
-                                                        nbPopoverPlacement="top">
-                                                        Trial
-                                                    </span><br />
-                                                </div>
+                                                </span>
+                                                <ng-template #tooltip>
+                                                    <div style="color:white">
+                                                        Becomes valid when promoted to Raider
+                                                    </div>
+                                                </ng-template>
+                                                <span *ngIf="token.rank=='Trial'" style="font-size: 9px;"
+                                                    [nbPopover]="tooltip" nbPopoverTrigger="hover"
+                                                    nbPopoverPlacement="top">
+                                                    &nbsp;Trial
+                                                </span><br />
                                             </div>
 
                                         </td>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Injector } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RaidData, Raid, Signup, Character, Spec, Item, SRToken } from '../../../../../../backend/Types/Types';
 import { NbToastrService, NbDialogService } from '@nebular/theme';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { FrontcraftBuyTokenComponent } from '../shop/buytoken.component';
 import { allItems } from '../../../../../../backend/Types/Items';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 import { UpdatingComponent } from '../../UpdatingComponent';
-import { LoggerService } from '../../services/logger.service';
+import { LoggerService } from '../../services/LoggerService/logger.service';
+import { FlashService } from '../../services/flash-service';
 
 @Component({
   selector: 'raid',
   templateUrl: './raid.component.html',
 })
-export class FrontcraftRaidComponent 
-extends UpdatingComponent
-implements OnInit{
-
-    canSignup = false
-    isSignedup = false
-    islate = false
-    isTier = false
-    reservesShown = true
-    manageRaid
-    mySignup: (Signup & Character & Spec)
-
-    raid: RaidData = <any>{
-      participants:{
-          Druid: [],
-          Hunter: [],
-          Mage: [],
-          Paladin: [],
-          Priest: [],
-          Rogue: [],
-          Shaman: [],
-          Warlock: [],
-          Warrior: [],
-      },
-      tanks: [],
-      healers: [],
-      tokens:{},
-      tier: 'null'
+export class FrontcraftRaidComponent
+  extends UpdatingComponent
+  implements OnInit {
+
+  now = Date.now()
+  canSignup = false
+  isSignedup = false
+  islate = false
+  isTier = false
+  reservesShown = true
+  manageRaid
+  mySignup: (Signup & Character & Spec)
+
+  raid: RaidData = <any>{
+    participants: {
+      Druid: [],
+      Hunter: [],
+      Mage: [],
+      Paladin: [],
+      Priest: [],
+      Rogue: [],
+      Shaman: [],
+      Warlock: [],
+      Warrior: [],
+    },
+    tanks: [],
+    healers: [],
+    tokens: {},
+    tier: 'null'
+  }
+  tokens: { [itemname in string]: (Character & SRToken & Item)[] } = {}
+  displayedtokens = {}
+  search = ""
+
+  constructor(
+    injector: Injector,
+    private api: IApiService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private dialogService: NbDialogService,
+    private toast: NbToastrService,
+    private flash: FlashService,
+    private logger: LoggerService
+  ) {
+    super(injector)
+  }
+
+  ngOnInit() {
+    this.manageRaid = this.api.get('manageRaid')
+    const signupFeature = this.api.get('signup')
+
+    if (signupFeature) {
+      this.canSignup = true
     }
-    tokens: {[itemname in string]: (Character & SRToken & Item)[]} = {}
-    displayedtokens = {}
-    search = ""
-
-    constructor(
-      private api: IApiService,
-      private route: ActivatedRoute,
-      private router: Router,
-      private dialogService : NbDialogService,
-      private toast: NbToastrService,
-      logger: LoggerService
-    ){
-      super(router, api, logger)
-    }
-
-    ngOnInit(){
-      this.manageRaid = this.api.get('manageRaid')
-      const signupFeature = this.api.get('signup')
-      
-      if(signupFeature){
-        this.canSignup = true
+    this.refresh().then(() => {
+      this.subscribe(String(this.raid.id), (data: RaidData) => this.display(data).then(_ =>
+        this.flash.show()
+      ))
+    })
+  }
+
+  itemSelect = async (item) => {
+    this.dialogService.open(FrontcraftBuyTokenComponent, {
+      context: {
+        item: item,
+        signup: this.mySignup,
+        tier: this.raid.tier,
+        characterName: this.mySignup.charactername
       }
+    }).onClose.subscribe(() => {
       this.refresh().then(() => {
-        this.subscribe(String(this.raid.id), (data: RaidData) => this.display(data))
-      })
-    }
-
-    itemSelect = async(item) => {
-      this.dialogService.open(FrontcraftBuyTokenComponent, {
-        context: {
-          item: item,
-          signup: this.mySignup,
-          tier: this.raid.tier,
-          characterName: this.mySignup.charactername
-        }
-      }).onClose.subscribe(() => {
-        this.refresh().then(()=>{
-          this.reservesShown = true
-        })
+        this.reservesShown = true
       })
-    }
-
-    signup = async () => {
-      const signupFeature = this.api.get('signup')
-      if(!signupFeature) return
-
-      this.dialogService.open(FrontcraftCharacerpickerComponent, { 
-        closeOnBackdropClick: true,
-        closeOnEsc: true,
-        context: {
-          raid: this.raid,
-        } 
-      }).onClose.subscribe(() => {
-        this.refresh().then(()=>{
-          this.reservesShown = false
-        })
+    })
+  }
+
+  signup = async () => {
+    const signupFeature = this.api.get('signup')
+    if (!signupFeature) return
+
+    this.dialogService.open(FrontcraftCharacerpickerComponent, {
+      closeOnBackdropClick: true,
+      closeOnEsc: true,
+      context: {
+        raid: this.raid,
+      }
+    }).onClose.subscribe(() => {
+      this.refresh().then(() => {
+        this.reservesShown = false
       })
-    }
-
-    async archiveRaid(raid:Raid){
-      await this.manageRaid!.archiveRaid(raid)
-      this.toast.show('Raid archived', 'Success', { status: 'success' })
-      this.router.navigateByUrl('/frontcraft/archive/'+raid.id)
-    }
-
-    async startRaid(raid:Raid){
-      await this.manageRaid!.startRaid(raid)
-      this.toast.show('Raid started', 'Success', { status: 'success' })
-      this.router.navigateByUrl('/frontcraft/archive/'+raid.id)
-    }
-
-    unsign = async () => {
-      const signupFeature = this.api.get('signup')
-      if(!signupFeature) return
-
-      await signupFeature.unsign(this.api.getAuth().token.value, {
-        ...this.mySignup,
-        id: this.mySignup.characterid, 
-      }, this.raid)
-      this.toast.show('Success', 'Unsigned', { status: 'success' })
-    }
-
-    setLate = async (value:boolean) => {
-      const auth = this.api.getAuth()
-      const signup = this.api.get('signup')
-      if(!signup) return
-
-      await signup.sign(auth.token.value, {
-        ...this.mySignup,
-        id: this.mySignup.characterid,
-      }, this.raid, value, this.mySignup.memo)
-      this.toast.show('Signup', 'Success', { status: 'success' })
-    }
-
-    adminUnsign = async(character:Character) => {
-      const manage =  this.api.get('manageRaid')
-      if(!manage) return
-      await manage.adminUnsign({
-        ...character,
-        id: character['characterid']
-      }, this.raid)
-    }
-
-    refresh = async () => {
-      const param = this.route.snapshot.paramMap.get('id');
-
-      const raidManager = this.api.get('RaidManager')
+    })
+  }
+
+  async archiveRaid(raid: Raid) {
+    await this.manageRaid!.archiveRaid(raid)
+    this.toast.show('Raid archived', 'Success', { status: 'success' })
+    this.router.navigateByUrl('/frontcraft/archive/' + raid.id)
+  }
+
+  async startRaid(raid: Raid) {
+    await this.manageRaid!.startRaid(raid)
+    this.toast.show('Raid started', 'Success', { status: 'success' })
+    this.router.navigateByUrl('/frontcraft/archive/' + raid.id)
+  }
+
+  unsign = async () => {
+    const signupFeature = this.api.get('signup')
+    if (!signupFeature) return
+
+    await signupFeature.unsign(this.api.getAuth().token.value, {
+      ...this.mySignup,
+      id: this.mySignup.characterid,
+    }, this.raid)
+    this.toast.show('Success', 'Unsigned', { status: 'success' })
+  }
+
+  setLate = async (value: boolean) => {
+    const auth = this.api.getAuth()
+    const signup = this.api.get('signup')
+    if (!signup) return
+
+    await signup.sign(auth.token.value, {
+      ...this.mySignup,
+      id: this.mySignup.characterid,
+    }, this.raid, value, this.mySignup.memo)
+    this.toast.show('Signup', 'Success', { status: 'success' })
+  }
+
+  adminUnsign = async (character: Character) => {
+    const manage = this.api.get('manageRaid')
+    if (!manage) return
+    await manage.adminUnsign({
+      ...character,
+      id: character['characterid']
+    }, this.raid)
+  }
+
+  refresh = async () => {
+    const param = this.route.snapshot.paramMap.get('id');
+    const raidManager = this.api.get('RaidManager')
+
+    try {
       const raiddata = await raidManager.getRaidData(<any>{
         id: param
       })
-      this.display(raiddata)
+      await this.display(raiddata)
+    } catch (e) {
+      this.router.navigate(["/"])
     }
-
-    display =  async (raiddata:RaidData)  => {
-      this.isTier = allItems[raiddata.tier] != null
-
-      this.raid = raiddata
-      this.tokens = raiddata.tokens;
-
-      [...raiddata.tanks, ...raiddata.healers, ...Object.values(raiddata.participants).flat()].forEach(p => {
-        p['color'] = getClassColor(p.class)
-      })
-
-      const user = this.api.getCurrentUser()
-      const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)     
-      
-      if(matchingSignup){       
-        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()
+  }
+
+  display = async (raiddata: RaidData) => {
+    this.logger.log(raiddata)
+    this.isTier = allItems[raiddata.tier] != null
+
+    this.raid = raiddata
+    this.tokens = raiddata.tokens;
+
+    [...raiddata.tanks, ...raiddata.healers, ...Object.values(raiddata.participants).flat()].forEach(p => {
+      p['color'] = getClassColor(p.class)
+      p['before'] = Number.parseInt(this.raid.start) - Date.parse(p.timestamp)
+    })
+
+    const user = this.api.getCurrentUser()
+    const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)
+
+    if (matchingSignup) {
+      this.mySignup = matchingSignup
+      this.isSignedup = true
+      this.mySignup['status'] = matchingSignup['benched'] ? 'Bench' : matchingSignup['late'] ? 'Late' : 'Attending'
+    } else {
+      this.isSignedup = false
+      this.mySignup = null
     }
 
-    changeSearch(){
-      if(!this.search || this.search == ""){
-        this.displayedtokens = this.tokens
-      }else{
-        this.displayedtokens = {}
-        Object.entries(this.tokens).forEach((e: [string /*itemname*/, (Character & SRToken & Item)[]]) => {
-          const filteredTokens = e[1].filter(item => {
-            return item.itemname.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
-          })
-          if(filteredTokens.length > 0)
-            this.displayedtokens[e[0]] = filteredTokens 
-        })        
-      }
-    }
-
-    setBench(signup:Signup){
-      this.manageRaid.setBenched({
-        characterid: signup.characterid,
-        raidid: signup.raidid,
-        late: false,
-        benched: !signup.benched
-      }).then(_ => this.refresh())
+    this.changeSearch()
+  }
+
+  changeSearch() {
+    if (!this.search || this.search == "") {
+      this.displayedtokens = this.tokens
+    } else {
+      this.displayedtokens = {}
+      Object.entries(this.tokens).forEach((e: [string /*itemname*/, (Character & SRToken & Item)[]]) => {
+        const filteredTokens = e[1].filter(item => {
+          return item.itemname.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
+        })
+        if (filteredTokens.length > 0)
+          this.displayedtokens[e[0]] = filteredTokens
+      })
     }
+  }
+
+  setBench(signup: Signup) {
+    this.manageRaid.setBenched({
+      characterid: signup.characterid,
+      raidid: signup.raidid,
+      late: false,
+      benched: !signup.benched
+    }).then(_ => this.refresh())
+  }
 }

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

 import { Component, OnInit } from '@angular/core';
 import { Raid, RaidData } from '../../../../../../backend/Types/Types';
-import { NbDialogRef } from '@nebular/theme';
+import { NbDialogRef, DARK_THEME } from '@nebular/theme';
 import { Tiers, _Tiers } from '../../../../../../backend/Types/Items';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 const ONE_MINUTE = 60000
 const ONE_HOUR = 60 * ONE_MINUTE
   }
 
   onTierSelect(){
-    
   }
 
   onTemplateSelect(){
     const manage = this.api.get('manageRaid')
     if(!manage) return
 
-    await manage.createRaid(raid)
+    const dbraid = await manage.createRaid(raid)
     this.dialogRef.close()
   }
 }

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

   <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>
+        <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>
+            <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>
+            </td>
+          </tr>
+          <tr class="row">
+            <td class="col-3" style="padding-left:8px; padding-right: 25px; white-space: nowrap; color: lightslategray;">
+              <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{ raid.signupcount | number:'2.0' }}&nbsp;/&nbsp;{{raid.size}}
+            </td>
+            <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+              <nb-icon icon="person-remove-outline"></nb-icon>&nbsp;{{ raid.benchcount }}
+            </td>
+            <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+              <nb-icon icon="clock-outline"></nb-icon>&nbsp;{{raid.start | date : 'HH:mm'}}
+            </td>
+            <td class="col-3" 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>
       </a>
     </nb-list-item>
   </nb-list>
   <nb-list nbInfiniteList listenWindowScroll [threshold]="500">
     <nb-list-item *ngFor="let raid of oldraids" [routerLink]="'/frontcraft/archive/'+raid.id">
       <a [routerLink]="'/frontcraft/archive/'+raid.id">
-        <div class="row">
-          <table>
+          <table style="width: 100%;">
             <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>
+              <td>
+                <h4>
+                  {{raid.title}}
+                </h4>
+              </td>
             </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>
+            <tr class="row">
+              <td class="col-3" style="padding-left:8px; padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{ raid.signupcount | number:'2.0' }}&nbsp;/&nbsp;{{raid.size}}
+              </td>
+              <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+                <nb-icon icon="person-remove-outline"></nb-icon>&nbsp;{{ raid.participants.bench.length }}
               </td>
-              <td style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
+              <td class="col-3" 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;">
+              <td class="col-3" 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>

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

-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { NbDialogService } from '@nebular/theme';
+import { Component, OnInit, OnDestroy, Injector } from '@angular/core';
+import { NbDialogService, NbToastrService } from '@nebular/theme';
 import { FrontcraftCreateRaidsComponent } from './createraid.compontent';
 import { Router, NavigationStart } from '@angular/router';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 import { UpdatingComponent } from '../../UpdatingComponent';
-import { LoggerService } from '../../services/logger.service';
+import { LoggerService } from '../../services/LoggerService/logger.service';
+import { FlashService } from '../../services/flash-service';
 
 @Component({
   selector: 'raids',
   templateUrl: 'raids.component.html',
   styleUrls: ['raids.component.scss'],
 })
-export class FrontcraftRaidsComponent 
-extends UpdatingComponent
-implements OnInit {
+export class FrontcraftRaidsComponent
+  extends UpdatingComponent
+  implements OnInit {
 
 
   manageRaid
   pageSize = 10;
 
   constructor(
+    injector: Injector,
     private api: IApiService,
-    router: Router,
     private dialogService: NbDialogService,
-    logger: LoggerService
+    private flash: FlashService,
   ) {
-    super(router, api, logger)
+    super(injector)
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     super.ngOnDestroy()
   }
 
   async ngOnInit() {
-    this.subscribe("raids", () => this.refresh())
+    this.subscribe("raids", () => this.refresh().then(_ =>
+      this.flash.show()
+    ))
 
     this.manageRaid = this.api.get('manageRaid')
     this.refresh()

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

 import { Component, OnInit } from '@angular/core';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
   selector: 'rules',

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

 import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
 import { _Tiers, Tiers } from '../../../../../../backend/Types/Items';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
     selector: 'buyToken',

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

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { ClientApiService } from '../../services/client-login-api';
+import { ClientApiService } from '../../services/ApiService/client-login-api';
 import { Item, Character } from '../../../../../../backend/Types/Types';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
   selector: 'itemselect',

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

   template: `
     <span *ngIf="tooltipHtml">
       <ng-template #tooltip>
-        <div style="color:white" [innerHTML]="tooltipHtml">
+        <div style="color:white; background-color:black; padding: 7px" [innerHTML]="tooltipHtml">
         </div>
       </ng-template>
       <span 

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

 import { _Tiers } from '../../../../../../backend/Types/Items';
 import { _Rank } from '../../../../../../backend/Types/Types';
 import { NbToastrService } from '@nebular/theme';
-import { hash, IApiService } from '../../services/ApiService';
+import { hash, IApiService } from '../../services/ApiService/ApiService';
 
 @Component({
   selector: 'user-component',

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

 import { Component, OnInit } from '@angular/core';
 import { _Rank, _Class, _Race, RPCPermission  } from '../../../../../../backend/Types/Types'
 import { NbToastrService } from '@nebular/theme';
-import { IApiService } from '../../services/ApiService';
+import { IApiService } from '../../services/ApiService/ApiService';
 
 
 @Component({

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

-import { Auth, FrontcraftIfc, FrontcraftFeatureIfc, User, SomeOf } from '../../../../../backend/Types/Types';
-import { saltedHash } from '../../../../../backend/Util/hash';
+import { Auth, FrontcraftIfc, FrontcraftFeatureIfc, User, SomeOf } from '../../../../../../backend/Types/Types';
+import { saltedHash } from '../../../../../../backend/Util/hash';
 import { RPCSocket, ConnectedSocket } from 'rpclibrary';
 
 export class IApiService{
     initialize: () => Promise<any>
     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

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

 import { Injectable } from "@angular/core";
 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 { Auth, User, _Class, FrontcraftFeatureIfc, SomeOf, FrontcraftIfc, } from '../../../../../../backend/Types/Types'
 import { hash, IApiService, GuestUser } from './ApiService';
-import { LoggerService } from './logger.service';
+import { LoggerService } from '../LoggerService/logger.service';
 
 declare const Cookies
 
 export class ClientApiService implements IApiService{
     private socket:ConnectedSocket<FrontcraftIfc>
     private auth:Auth
-    private privSocket: RPCSocket<SomeOf<FrontcraftFeatureIfc>>
+    private privSocket: ConnectedSocket<SomeOf<FrontcraftFeatureIfc>>
 
     constructor(
         private logger: LoggerService
 
     getUnprivilegedSocket = () : ConnectedSocket<FrontcraftIfc> => this.socket
 
-    private getPrivilegedSocket = async (auth:Auth) : Promise<RPCSocket<SomeOf<FrontcraftFeatureIfc>>> => {
+    private getPrivilegedSocket = async (auth:Auth) : Promise<ConnectedSocket<SomeOf<FrontcraftFeatureIfc>>> => {
         if(this.privSocket) {
             return this.privSocket
         }
         return sock
     }
 
-    async connectShoutbox(callback:Function) : Promise<Function>{
-        const uuid = await this.get('Shoutbox').subscribe(callback)
-        return async (msg: ShoutMessage) => await this.get('Shoutbox').shout(uuid, msg)
-    }
-
     kick = async () => {
         await this.logout()
         location.reload()

src/frontend/src/app/frontcraft/services/server-login-api.ts → src/frontend/src/app/frontcraft/services/ApiService/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 { RPCSocket } from 'rpclibrary/js/src/Frontend'
+import { Auth, User, _Class, FrontcraftFeatureIfc, SomeOf, FrontcraftIfc, } from '../../../../../../backend/Types/Types'
 import { hash, IApiService, GuestUser } from './ApiService';
-import { LoggerService } from './logger.service';
+import { LoggerService } from '../LoggerService/logger.service';
 import { ConnectedSocket } from 'rpclibrary';
+import { async } from '@angular/core/testing';
 
 declare const Cookies
 
 @Injectable()
-export class ServerApiService implements IApiService{
-    private socket:ConnectedSocket<FrontcraftIfc>
-    private auth:Auth
+export class ServerApiService implements IApiService {
+    private socket: ConnectedSocket<FrontcraftIfc>
+    private auth: Auth
     private privSocket: RPCSocket & SomeOf<FrontcraftFeatureIfc>
 
     constructor(
         private logger: LoggerService
-    ){}
+    ) { }
 
-    getUnprivilegedSocket = () : ConnectedSocket<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) :
+        never => {
 
-    get = <K extends (keyof FrontcraftIfc | keyof FrontcraftFeatureIfc)>(feature : K) : K extends keyof FrontcraftIfc?FrontcraftIfc[K]:
-                                                                                        K extends keyof FrontcraftFeatureIfc?(FrontcraftFeatureIfc[K] | void): 
-                                                                                        never => {
         //@ts-ignore
         return this.socket[feature]
     }
 
-    getCurrentUser = () : User => {
+    getCurrentUser = (): User => {
         return GuestUser
     }
 
-    login = async (username: string, password: string) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
+    login = async (username: string, password: string): Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
         const pwHash = await hash(password)
         let auth
-        try{
+        try {
             auth = await this.socket.UserManager.login(username, pwHash)
-        }catch(e){
+        } catch (e) {
             return
         }
 
-        if(!auth){ 
+        if (!auth) {
             await this.logout()
             throw new Error("Login failed")
         }
 
     }
 
-    async connectShoutbox(callback:Function) : Promise<Function>{
+    async connectShoutbox(callback: Function): Promise<Function> {
         return this.logger.log
     }
 
 
     logout = async () => {
         Cookies.remove('token')
-        if(this.auth){
-            try{
+        if (this.auth) {
+            try {
                 await this.socket.UserManager.logout(this.auth.user.username, this.auth.token.value)
-            }catch(e){
+            } catch (e) {
                 this.logger.warn(e);
             }
-        } 
+        }
 
-        if(this.privSocket) this.privSocket.destroy()
+        if (this.privSocket) this.privSocket.destroy()
         this.privSocket = null
-        this.auth  = null
+        this.auth = null
     }
 
-    initialize = async () : Promise<any> => {
-        if(this.socket){
+    initialize = async (): Promise<any> => {
+        if (this.socket) {
             this.socket.destroy()
             this.socket = null
         }
 
-        try{
+        try {
             let conn = new RPCSocket<FrontcraftIfc>(20000, window.location.hostname)
             conn.on('close', async () => {
-            })                        
+            })
 
             this.socket = await conn.connect()
-        }catch(e){
+        } catch (e) {
             this.logger.log(e);
             throw new Error("Websocket cannot connect")
         }
 
     getAuth = () => this.auth
 
-    async checkLogin() : Promise<boolean>{
-        if(!this.auth) return false
+    async checkLogin(): Promise<boolean> {
+        if (!this.auth) return false
         const valid = this.socket.UserManager.checkToken(this.auth.token.value, this.auth.user.rank)
-        if(valid) return true
+        if (valid) return true
         await this.logout()
         return false
     }

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

+export interface ILoggerService {
+    log,
+    warn,
+    error,
+    table,
+}
+
+export interface ICollapsableLoggerService extends ILoggerService{
+    collapsed
+}

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

+import { Injectable, SkipSelf, Optional } from "@angular/core";
+import { environment } from '../../../../environments/environment';
+import { ICollapsableLoggerService, ILoggerService } from './LoggerService';
+
+@Injectable()
+export class LoggerService implements ICollapsableLoggerService {
+
+    private logger = console
+    
+    constructor(
+    ) { }
+
+    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 (!environment.production) {
+            console.groupCollapsed(groupname)
+            this[type].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/flash-service.ts

+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable()
+export class FlashService {
+    private displaying = false
+    constructor(@Inject(DOCUMENT) private document: Document) { }
+
+    show(durationMs = 250) {
+        if (this.displaying) return
+        this.displaying = true
+        this.document.getElementById('glowbox').classList.toggle('glowing');
+        this.document.getElementById('glowbox').classList.toggle('not-glowing');
+
+        setTimeout(() => {
+            this.displaying = false
+            this.document.getElementById('glowbox').classList.toggle('glowing');
+            this.document.getElementById('glowbox').classList.toggle('not-glowing');
+        }, durationMs)
+    }
+}

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/index.html

 <!doctype html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Frontcraft</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
   <style>
-  @import url('https://fonts.googleapis.com/css?family=Montserrat');
-
-  .loadTitle {
-    font-family: 'Montserrat';
-    text-align: center;
-    color: #FFF;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    letter-spacing: 1px;
-    padding-top: calc(50vh - 120px);
-  }
-
-  .loadH {
-    background-image: url('https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif');
-    background-size: cover;
-    color: transparent;
-    background-clip: text;
-    -moz-background-clip: text;
-    -webkit-background-clip: text;
-    text-transform: uppercase;
-    font-size: min(10vw, 120px);
-    margin: 10px 0;
-  }
+    @import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+    .loadTitle {
+      font-family: 'Montserrat';
+      text-align: center;
+      color: #FFF;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      letter-spacing: 1px;
+      padding-top: calc(50vh - 120px);
+    }
+
+    .loadH {
+      background-image: url('https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif');
+      background-size: cover;
+      color: transparent;
+      background-clip: text;
+      -moz-background-clip: text;
+      -webkit-background-clip: text;
+      text-transform: uppercase;
+      font-size: min(10vw, 120px);
+      margin: 10px 0;
+    }
+
+    #glowbox {
+      pointer-events: none;
+      z-index: 10000000;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      -webkit-box-shadow: inset 0px 33px 38px -30px rgba(255, 255, 255, 0.71);
+      -moz-box-shadow: inset 0px 33px 38px -30px rgba(255, 255, 255, 0.71);
+      box-shadow: inset 0px 33px 38px -30px rgba(255, 255, 255, 0.71);
+    }
+
+    #glowbox.not-glowing {
+      opacity: 0;
+      transition: opacity 0.25s; 
+    }
+
+    #glowbox.glowing {
+      opacity: 1;
+      transition: opacity 0.25s; 
+    }
   </style>
 
   <base href="/">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
+  <div id="glowbox" class="not-glowing"></div>
   <ngx-app></ngx-app>
   <div id="nb-global-spinner" class="spinner" style="background-color: #111; height: 100vh;">
     <div class="loadTitle">
       <h1 class="loadH">Tranquil</h1>
     </div>
   </div>
-  
+
 </body>
-</html>
+
+</html>

src/frontend/src/main.server.ts

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

src/frontend/src/main.ts

 
 import { FrontcraftAppModule } from './app/app.module';
 import { environment } from './environments/environment';
-import { IApiService } from "./app/frontcraft/services/ApiService"
-import { ClientApiService } from './app/frontcraft/services/client-login-api';
-import { LoggerService } from './app/frontcraft/services/logger.service';
+import { IApiService } from "./app/frontcraft/services/ApiService/ApiService"
+import { ClientApiService } from './app/frontcraft/services/ApiService/client-login-api';
+import { LoggerService } from './app/frontcraft/services/LoggerService/logger.service';
 
 if (environment.production) {
   enableProdMode();