safety commit before system upgrade

src/backend/Components/Character/CharacterManager.ts

 import { RPCInterface } from "rpclibrary";
 import { Inject, Module } from "../../Injector/ServiceDecorator";
-import { TableDefiniton, Character } from "../../Types/Types";
+import { TableDefiniton, Character, Spec, User } from "../../Types/Types";
 import { CharacterManagerIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
 import { getSpecTableData, SpecT } from "../../Types/PlayerSpecs";
     private admin: IAdmin   
 
     @Inject(ILoginManager)
-    private loginManager : any
+    private loginManager : ILoginManager
 
     exportRPCs = () => [
         {
-           name: 'getSpecId' as 'getSpecId',
-           call: this.getSpecId
+            name: 'getSpecId' as 'getSpecId',
+            call: this.getSpecId
+        },{
+            name: 'getCharacterByName' as 'getCharacterByName',
+            call: this.getCharacterByName
+        },{
+            name: 'getCharacters' as 'getCharacters',
+            call: this.getCharacters
+        },{
+            name: 'getCharactersOfUser' as 'getCharactersOfUser',
+            call: this.getCharactersOfUser
         }
     ]
 
             name: 'characters',
             tableBuilder: (table) => {
                 table.increments("id").primary()
-                table.string("name").notNullable().unique()
+                table.string("charactername").notNullable().unique()
                 table.integer("specid").notNullable()
                 table.foreign("specid").references("specs.id")
                 table.integer("userid").notNullable()
             tableBuilder: (table) => {
                 table.increments("id")
                 table.string('class')
-                table.string('name')
-                table.unique(['class', 'name'])
+                table.string('specname')
+                table.unique(['class', 'specname'])
             }
         }
     ]
     private initialized = false
     
     initialize = async () => {
-        if(!this.initialized)
-            this.initialized = true
-        //initialize spec table
-
-        getLogger('CharacterManager').debug('inserting specs')
-
+        if(this.initialized) return
+        this.initialized = true
         await this.admin.knex('specs').insert(getSpecTableData()).catch(e => { console.log("skipping spec insertion") })
     }
 
     createCharacter = async (userToken: string, character : Character) : Promise<Character> => {
         try{
+            character.charactername = character.charactername.toLowerCase()
             const user = this.loginManager.getUserRecordByToken(userToken)
             await this.admin.knex('characters').insert(character)
             const char : Character = await this.admin.knex.select('*').from('characters').where(character).first()
         return this.admin.knex.select('*').from('characters')
     }
 
+    getCharacterByName = async(charactername: string) : Promise<(Character & User & Spec) | void> => {
+        charactername = charactername.toLowerCase()
+        return await this.admin.knex('characters as c')
+        .join('specs as s', 's.id', '=', 'c.specid')
+        .join('users as u', 'u.id', '=', 'c.userid')
+        .select('charactername', 'class', 'specname', 'username', 'rank', 'locked', )
+        .where('charactername', '=', charactername)
+        .first()
+    }
+
+    getCharactersOfUser = async(username: string) : Promise<(Character & Spec)[]> => {
+        username = username.toLowerCase()
+        return await this.admin.knex('characters as c')
+        .join('users as u', 'u.id', '=', 'c.userid')
+        .join('specs as s', 's.id', '=', 'c.specid')
+        .select('class', 'charactername', 'class', 'specname')
+        .where('u.username', '=', username)
+    }
+
     getSpecId = async <c extends keyof SpecT>(clazz: c, name: SpecT[c]) => await this.admin.knex
     .from('specs')
     .select('id')
-    .where({
+    .where(<Spec>{
         class: clazz,
-        name: name
-    }).first().then(spec => spec.id)
+        specname: name
+    })
+    .first()
+    .then(spec => spec.id)
 
 }

src/backend/Components/Character/Interface.ts

-import { Character } from "../../Types/Types"
+import { Character, Spec, User } from "../../Types/Types"
 import { SpecT } from "../../Types/PlayerSpecs"
 
 
     createCharacter: (usertoken: string, char : Character) => Promise<Character>
     getSpecId: <c extends keyof SpecT>(clazz: c, name: SpecT[c]) => Promise<number>
     getCharacters: () => Promise<Character[]>
+    getCharacterByName: (charactername: string) => Promise<(Character & User & Spec) | void>
+    getCharactersOfUser: (username: string) => Promise<(Character & Spec)[]>
 }

src/backend/Components/Character/RPCInterface.ts

     CharacterManager: {
         getSpecId : ICharacterManager['getSpecId']
         getCharacters : ICharacterManager['getCharacters']
+        getCharacterByName : ICharacterManager['getCharacterByName']
+        getCharactersOfUser: ICharacterManager['getCharactersOfUser']
     }
 }
 

src/backend/Components/Item/ItemManager.ts

 
         try{
             return <Item>{
-                name: r.wowhead.item[0].name[0],
+                itemname: r.wowhead.item[0].name[0],
                 iconname: r.wowhead.item[0].icon[0]._,
                 url: r.wowhead.item[0].link[0],
                 quality: r.wowhead.item[0].quality[0]._,
     getTableDefinitions(): TableDefiniton[] {
         return [
             {
-                name: 'reservations',
+                name: 'tokens',
                 tableBuilder: (table) => {
-                    table.integer("user_id").primary()
-                    table.foreign("user_id").references("id").inTable('users')
-                    table.integer("item_id").primary()
-                    table.foreign("item_id").references("id").inTable('items')
-                    table.integer("raid_id").primary()
-                    table.foreign("raid_id").references("id").inTable('raids')
+                    table.integer("characterid").primary()
+                    table.foreign("characterid").references("id").inTable('characters')
+                    table.integer("itemid").primary()
+                    table.foreign("itemid").references("id").inTable('items')
+                    table.integer("level")
                 }
             },{
                 name: 'items',
                 tableBuilder: (table) => {
                     table.increments("id").primary()
-                    table.string('name').unique().notNullable()
+                    table.string('itemname').unique().notNullable()
                     table.string('iconname').notNullable()
                     table.string('url').notNullable()
                     table.string('quality').defaultTo('Epic').notNullable()

src/backend/Components/Login/Interface.ts

-import { Auth, Rank, User, RPCPermission } from "../../Types/Types"
+import { Auth, Rank, User, RPCPermission, UserRecord } from "../../Types/Types"
 
 export class ILoginManager{
     login: (username:string, pwHash:string) => Promise<Auth>
     logout: (username: string, tokenValue :string) => Promise<void>
-    getAuth: (tokenValue: string) => Promise<Auth>
+    getAuth: (tokenValue: string) => Promise<Auth | void>
     createUser: (user:User) => Promise<User>
     setPermission: (perm: RPCPermission) => Promise<void>
     getPermissions: () => Promise<RPCPermission[]>
     checkToken: (token: string, rank: Rank) => boolean
+    getUserRecordByToken: (tokenValue: string) => UserRecord | void
 }

src/backend/Components/Login/LoginManager.ts

 import { CharacterManager } from "../Character/CharacterManager";
 import { LoginManagerIfc, LoginManagerFeatureIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
-import { Rank, User, Auth, _Rank, TableDefiniton, RPCPermission, FrontcraftFeatureIfc, AnyRPCExporter, Token } from "../../Types/Types";
+import { Rank, User, Auth, _Rank, TableDefiniton, RPCPermission, FrontcraftFeatureIfc, AnyRPCExporter, Token, UserRecord } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { ILoginManager } from "./Interface";
-import { getLogger } from "log4js";
+import { getLogger, Logger } from "log4js";
 
 const uuid = require('uuid/v4')
 
     
     exporters :any[] = []
     rankServers : {[rank in Rank] : Serverstate}
-    userLogins : {[username in string] : {
-        user: User
-        connections: {[port in number]: Socket}
-        auth: Auth
-    }} = {}
+    userLogins : {[username in string] : UserRecord} = {}
 
     exportRPCs = () => [
         {
             name: 'users',
             tableBuilder: (table) => {
                 table.increments("id").primary()
-                table.string("name").notNullable().unique()
+                table.string("username").notNullable().unique()
                 table.string("pwhash").notNullable()
                 table.string("rank").notNullable()
                 table.string("email").nullable().unique()
         },{
             name: 'rpcpermissions',
             tableBuilder: (table) => {
-                table.string("name").primary().notNullable()
+                table.string("rpcname").primary().notNullable()
                 _Rank.forEach(r => {
                     if(r === 'ADMIN')
                         table.boolean(r).defaultTo(true).notNullable()
         await Promise.all( 
             [this, ...this.exporters].flatMap(exp => exp.exportRPCFeatures().map(async (feature) => {
             try{
-                await this.admin.knex.insert({ name: feature.name }).into('rpcpermissions')
+                await this.admin.knex.insert({ rpcname: feature.name }).into('rpcpermissions')
             }catch(e){
                 console.log(e);
             }
         Object.values(this.userLogins).map(userLogin => {
             const auth = userLogin.auth
             if(!this.checkToken(auth.token.value, auth.user.rank)){
-                this.logout(auth.user.name, auth.token.value)
+                this.logout(auth.user.username, auth.token.value)
             }
         })
     }
 
     checkConnection = async (socket: Socket) => {
+        
         let data : any
         let tries = 0
         while(!data){
             tries ++
             if(tries === 5){
                 getLogger('LoginManager').debug('Connection check failed for connection *'+socket.port)
-
                 socket.destroy()
-                return
+                return false
             }
-            data = await Promise.race([socket.call('getUserData'), new Promise((res, rej) => { setTimeout(res, 250);})])
-        } 
-        this.userLogins[data.user.name].connections[socket.port] = socket
+            data = await Promise.race([socket.call('getUserData'), new Promise((res, rej) => { setTimeout(res, 1000);})])
+        }
+        if(!this.userLogins[data.user.username]){
+            await this.logout(data.user.username, data.token.value)
+            return false
+        }
+
+        this.userLogins[data.user.username].connections[socket.port] = socket
         await socket.call('navigate', ["/frontcraft/dashboard"])
         return true
     }
 
     setPermission = async (permission: RPCPermission) => {
         await this.admin.knex('rpcpermissions')
-        .where('rpcname', '=', permission.name)
+        .where('rpcname', '=', permission.rpcnamename)
         .update(permission)
     }
 
         const perm : RPCPermission[] = await this.admin.knex
             .select(rank)
             .from('rpcpermissions')
-            .where('name', '=', <string>feature)
+            .where('rpcname', '=', <string>feature)
 
         if(perm.length === 0) return false
         return perm[0][rank]
 
             user.locked = false
         }
+        user.username = user.username.toLowerCase()
+
         await this.admin.knex('users')
         .insert(user)
 
 
     logout = async (username:string, tokenValue : string) : Promise<void> => {
         try{
+            username = username.toLowerCase()
+            const maybeRecord = this.getUserRecordByToken(tokenValue)
+            if(maybeRecord && maybeRecord.auth.user.username != username){
+                getLogger('LoginManager').warn(`Bad logout attempt
+                token by: ${maybeRecord.auth.user.username}
+                tried to logout: ${username}`)
+                return
+            } 
 
-            await Promise.all (Object.values(this.userLogins[username].connections).map(async (sock) => {
-                await sock.call('navigate', '/auth/login')
-            }))
+            if(this.userLogins[username]){
+                await Promise.all (Object.values(this.userLogins[username].connections).map(async (sock) => {
+                    await sock.call('navigate', '/auth/login')
+                }))
+            }
 
             Object.values(this.rankServers)
                 .forEach(state => {
     }
 
     login = async(username:string, pwHash:string) : Promise<Auth> => {
+        username = username.toLowerCase()
         const res:User[] = await this.admin.knex
         .select('*')
         .from('users')
-        .where({ name: username })
+        .where({ username: username })
 
         if(res.length > 0 && pwHash === res[0].pwhash){
             const user:User = res[0]
                 port: this.rankServers[user.rank].port
             }
 
-            this.userLogins[user.name] = {connections: {}, auth: userAuth, user:user}
+            this.userLogins[user.username] = {connections: {}, auth: userAuth, user:user}
             this.rankServers[user.rank].allowed.push(token.value)
-
             return userAuth 
         }
 
     }
 
     getUserRecordByToken(tokenValue: string){
-        const maybeRecord = Object.values(this.userLogins).find(login => login.auth.token.value === tokenValue)
-        return maybeRecord?maybeRecord:undefined
+        return Object.values(this.userLogins).find(login => login.auth.token.value === tokenValue)
     }
 
-    getAuth = async (tokenValue:string) : Promise<Auth> => {
+    getAuth = async (tokenValue:string) : Promise<Auth | void> => {
         const maybeAuth = this.getUserRecordByToken(tokenValue)
         if(maybeAuth)
             return maybeAuth.auth
-
-        throw new Error("Bad token")
+        return
     }
 
     startRankServer = async (rank : Rank, port: number) : Promise<RPCServer> => {
             
                         },
                         connectionHandler: (socket) => {
-                            this.checkConnection(socket).catch((e) => {
-                                console.log(e);
-                            }) //sometimes times out if you go too fast
+                            this.checkConnection(socket).then(res => {
+                                if(!res){
+                                    socket.destroy();
+                                }
+                            }).catch((e) => {
+                                socket.destroy();
+                                getLogger('LoginManager').warn(e);
+                            })
                         },
                         errorHandler: (socket, e, rpcName, args) => {
                             console.log(rpcName, args);
 
     createToken = (user:User): Token => {
         
-        if(this.userLogins[user.name]){
-            return this.userLogins[user.name].auth.token
+        if(this.userLogins[user.username]){
+            return this.userLogins[user.username].auth.token
         }
 
         const token:Token = {

src/backend/Components/Raid/Interface.ts

-import { User, Raid, Signup } from "../../Types/Types"
+import { Raid, Signup, Character } from "../../Types/Types"
 
 export class IRaidManager{
     getRaids: () => Promise<Raid[]>
     addSignup: (signup: Signup) => Promise<any>
     removeSignup: (signup: Signup) => Promise<any>    
     getSignups: (raid:Raid) => Promise<Signup[]>
-    sign: (user:User, raid:Raid, attending:boolean) => Promise<any>
+    sign: (userToken: string, character:Character, raid:Raid, attending:boolean) => Promise<any>
 }

src/backend/Components/Raid/RaidManager.ts

 import { Inject, Module } from "../../Injector/ServiceDecorator";
 import { RaidManagerIfc, RaidManagerFeatureIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
-import { TableDefiniton, Signup, Raid, User } from "../../Types/Types";
+import { TableDefiniton, Signup, Raid, User, Character } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { IRaidManager } from "./Interface";
+import { ILoginManager } from "../Login/Interface";
 
 @Module(IRaidManager)
 export class RaidManager
     @Inject(IAdmin)
     private admin: IAdmin
 
+    @Inject(ILoginManager)
+    private login: ILoginManager
+
     exportRPCs = () => [{
         name: 'getRaids' as 'getRaids',
         call: this.getRaids
             },{
                 name: 'signups',
                 tableBuilder: (table) => {
-                    table.primary(['raid_id', 'user_id'])
-                    table.integer('raid_id')
-                    table.foreign('raid_id').references('id').inTable('raids')
-                    table.integer('user_id')
-                    table.foreign('user_id').references('id').inTable('users')
+                    table.primary(['raidid', 'characterid'])
+                    table.integer('raidid')
+                    table.foreign('raidid').references('id').inTable('raids')
+                    table.integer('characterid')
+                    table.foreign('characterid').references('id').inTable('characters')
                 }
             }            
         ]
     removeSignup = async (signup: Signup) => await this.admin
     .knex('signups')
     .where({
-        raid_id: signup.raid_id, 
-        user_id: signup.user_id
+        raid_id: signup.raidid, 
+        character_id: signup.characterid
     })
     .delete()
 
     .select('*')
     .from('raids')
     
-    getSignups = async (raid:Raid) : Promise<Signup[]> => await this.admin.knex
+    getSignups = async (raid:Raid) : Promise<Signup[]> => await this.admin
+    .knex('signups')
+    .join('characters as c', 'c.id', '=', 'characterid')
+    .join('specs as s', 's.id', '=', 'specid')
+    .join('users as u', 'u.id', '=', 'userid')
     .select('*')
-    .from('signups')
-    .where('raid_id', '=', raid.id!)
+    .where('raidid', '=', raid.id!)
     
-    sign = async (user:User, raid:Raid) => await this.admin
-    .knex('signups')
-    .insert({
-        raid_id: raid.id!,
-        user_id: user.id!
-    })
+    sign = async (usertoken:string, character:Character, raid:Raid) => {
+        const maybeUserRecord = this.login.getUserRecordByToken(usertoken)
+        if(!maybeUserRecord || maybeUserRecord.user.id != character.userid){
+            throw new Error("Bad Usertoken")
+        }
+
+        await this.admin
+        .knex('signups')
+        .insert({
+            raidid: raid.id!,
+            characterid: character.id!
+        })
+    }
 }

src/backend/Injector/Injector.ts

   rootInterface : Type<any>
   root : Type<any>
   rootModules: Type<any>[] = []
-  modules : {ifc?: Type<any>, implementation: Type<any>}[] = []
+  modules : {implements?: Type<any>, implementation: Type<any>}[] = []
 
   moduleObjs : {[key in string] : FrontworkComponent} = {}
 
     if(target.name === this.rootInterface.name || target.name === this.root.name){
       let modules = this.modules.map(m => {
         const module = new m.implementation()
-        if(m.ifc)
-          this.moduleObjs[m.ifc.name] = module
+        if(m.implements)
+          this.moduleObjs[m.implements.name] = module
         this.moduleObjs[m.implementation.name] = module
         return module
       })

src/backend/Injector/ServiceDecorator.ts

 export const Module = (ifc?: Type<any>) : GenericClassDecorator<Type<any>> => {
   return (target: Type<any>) => {
     Injector.modules.push({
-      ifc: ifc,
+      extends: ifc,
       implementation: target
     })
   }
  * @constructor
  */
 export const RootComponent = (config : {
-    rootInterface : Type<any>
+    implements : Type<any>
     imports : Type<FrontworkComponent>[]
   }) : GenericClassDecorator<Type<any>> => {
   return (target: Type<any>) => {
     Injector.rootModules = config.imports
-    Injector.rootInterface = config.rootInterface
+    Injector.rootInterface = config.implements
     Injector.root = target
   }
 }

src/backend/Types/PlayerSpecs.ts

-import { Spec, _Class } from "./Types"
+import { Spec, _Class, Class } from "./Types"
 
 export type SpecT = {
     Warrior : 'Arms' | 'Fury' | 'Protection'
         const specNames : string[] = specs[_class]
         return specNames.map(specName => {
             return {
-                name: specName,
+                specname: specName,
                 class: _class
             }
         })
     })
+}
+
+export function getClassColor(c: Class) : string{
+    switch(c){
+        case "Warrior": return "#C79C6E"
+        case "Warlock": return "#8787ED"
+        case "Shaman": return "#0070DE"
+        case "Rogue": return "#FFF569"
+        case "Priest": return "#FFFFFF"
+        case "Paladin": return "#F58CBA"
+        case "Mage": return "#40C7EB"
+        case "Druid": return "#FF7D0A"
+        case "Hunter": return "#A9D271"
+    }
 }

src/backend/Types/Types.ts

 import * as Knex from "knex"
-import { RPCExporter } from "rpclibrary";
+import { RPCExporter, Socket } from "rpclibrary";
 import { RaidManagerIfc, RaidManagerFeatureIfc } from "../Components/Raid/RPCInterface";
 import { LoginManagerIfc, LoginManagerFeatureIfc } from "../Components/Login/RPCInterface";
 import { CharacterManagerIfc, CharacterManagerFeatureIfc } from "../Components/Character/RPCInterface";
 export type AnyRPCExporter = RPCExporter<any,any>
 
 export type RPCPermission = {
-    name: string
+    rpcnamename: string
 } & {
     [rank in Rank] : boolean
 }
 
 export type Item = {
     id?:number
-    name:string
+    itemname:string
     iconname:string
     url:string
     quality:string
 
 export type User = {
     id?: number
-    name: string
+    username: string
     pwhash: string
     rank: Rank
     email?: string
 }
 
 export type Signup = {
-    raid_id: number
-    user_id: number
+    raidid: number
+    characterid: number
 }
 
 export type Character = {
     id? : number
-    name : string
+    charactername : string
     specid : number
     userid : number
 }
 
 export type Auth = {port: number, user: User, token: Token}
 
+export type UserRecord = {
+    user: User
+    connections: {[port in number]: Socket}
+    auth: Auth
+}
 
 export type Spec = {
     id?: number,
     class: Class,
-    name: string
+    specname: string
 }
 
 export type SomeOf<T> = {

src/frontend/package-lock.json

       }
     },
     "tslib": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
-      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "tslint": {
       "version": "5.7.0",

src/frontend/package.json

     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
     "tinymce": "4.5.7",
-    "tslib": "^1.9.0",
+    "tslib": "^1.10.0",
     "typeface-exo": "0.0.22",
     "web-animations-js": "github:angular/web-animations-js#release_pr208",
     "zone.js": "~0.9.1"

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

     <nb-action class="user-action">
       <nb-user [nbContextMenu]="userMenu"
                [onlyPicture]="false"
-               [name]="user?.name"
+               [name]="user?.username"
                [picture]="user?.picture">
       </nb-user>
     </nb-action>

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

 
   currentTheme = 'dark';
 
-  userMenu : NbMenuItem[] = [ { title: 'Profile' }, { title: 'Log out', url: '/auth/logout' } ];
+  userMenu : NbMenuItem[] = [ { title: 'Log out', link: '/auth/logout' } ];
 
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
     this.currentTheme = this.themeService.currentTheme;
 
     this.user = this.loginService.getCurrentUser()
+    if(this.user)
+      this.userMenu.unshift({ title: 'Profile', link: '/frontcraft/user/'+this.user.username });
 
     /*
     this.userService.getUsers()

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

 import { NgModule } from '@angular/core';
 
 const routes: Routes = [
+
   {
     path: 'auth',
     loadChildren: () => import('./frontcraft/auth/auth.module')

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

   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
-import { LoginApiService } from './frontcraft/services/login-api';
 
 @NgModule({
   declarations: [AppComponent],

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

     <label class="label" for="input-username">Username:</label>
     <input nbInput
            fullWidth
-           [(ngModel)]="user.name"
+           [(ngModel)]="user.username"
            #email="ngModel"
            name="name"
            id="input-username"

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

   }
 
   async onSubmit(){
+    const pw = this.user.pwhash
     this.user.pwhash = await hash(this.user.pwhash)
     const user = this.user
     this.user = {} as User
 
     try{
       const usr = await this.loginApi.getUnprivilegedSocket().Authenticator.createUser(user)
-      
     }catch(e){
       alert("Error creating user"+e)
+      return
+    }
+
+    try{
+      await this.loginApi.login(user.username, pw)
+      await this.loginApi.getFeature('createCharacter').then(async feature => {
+        if(!feature) return
+        const specid = await this.loginApi.getUnprivilegedSocket().CharacterManager.getSpecId(char['class'], char['spec'])
+        await feature.createCharacter(this.loginApi.getAuth().token.value, {
+          charactername: char.name,
+          specid: specid,
+          userid: this.loginApi.getAuth().user.id!
+        })
+      })
+    }catch(e){
+      alert("Error creating character"+e)
+      return
     }
   }
 

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

+<nb-card 
+status="control">
+    <nb-card-header [ngStyle]="{'color': color}" style="text-transform: capitalize;">
+        {{char.charactername}}
+    </nb-card-header>
+    <nb-card-body>
+        {{char.specname}} {{char.class}}<br />
+        Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
+    </nb-card-body>
+</nb-card>

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

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LoginApiService } from '../../services/login-api';
+import { Spec, User, Character } from '../../../../../../backend/Types/Types';
+import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+
+@Component({
+  selector: 'character',
+  templateUrl: './character.component.html',
+})
+export class FrontcraftCharacterComponent implements OnInit{
+
+    char : (Character & User & Spec) = {} as any
+    color : string
+
+    constructor(
+      private login: LoginApiService,
+      private route: ActivatedRoute,
+      private router: Router,
+    ){}
+
+    async ngOnInit(){
+      const param = this.route.snapshot.paramMap.get('name');
+      this.login.getUnprivilegedSocket()      
+      .CharacterManager
+      .getCharacterByName(param)
+      .then((char) => {
+        if(char){
+          this.color = getClassColor(char.class)
+          this.char = char
+        }
+      })
+    }
+}

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

-<strong> Dashboard </strong>
+<nb-card>
+    <nb-card-body>
+
+        <label class="search-label" for="search">Search:</label>
+        <input nbInput [nbFilterInput]="dataSource" id="search" class="search-input">
+
+        <table [nbTreeGrid]="dataSource" [nbSort]="dataSource" (sort)="updateSort($event)">
+
+            <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
+            <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>
+
+            <ng-container [nbTreeGridColumnDef]="customColumn">
+                <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(customColumn)" *nbTreeGridHeaderCellDef>
+                {{customColumn}}
+                </th>
+                <td nbTreeGridCell *nbTreeGridCellDef="let row">
+                    <nb-tree-grid-row-toggle
+                        *ngIf="row.children && row.children.length">
+                    </nb-tree-grid-row-toggle>
+                    
+                    {{row.data[customColumn]}}
+                </td>
+            </ng-container>
+
+            <ng-container *ngFor="let column of defaultColumns; let index = index"
+                            [nbTreeGridColumnDef]="column"
+                            [showOn]="getShowOn(index)">
+                <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef>
+                {{column}}
+                </th>
+                <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
+            </ng-container>
+        </table>
+    </nb-card-body>
+</nb-card>

src/frontend/src/app/frontcraft/pages/dashboard/dashboard.component.scss

+button[nbTreeGridRowToggle] {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+  
+  .search-label {
+    display: block;
+  }
+  .search-input {
+    margin-bottom: 1rem;
+  }
+  
+  .nb-column-name {
+    width: 100%;
+  }
+  
+  @media screen and (min-width: 400px) {
+    .nb-column-name,
+    .nb-column-size {
+      width: 50%;
+    }
+  }
+  
+  @media screen and (min-width: 500px) {
+    .nb-column-name,
+    .nb-column-size,
+    .nb-column-kind {
+      width: 33.333%;
+    }
+  }
+  
+  @media screen and (min-width: 600px) {
+    .nb-column-name {
+      width: 31%;
+    }
+    .nb-column-size,
+    .nb-column-kind,
+    .nb-column-items {
+      width: 23%;
+    }
+  }

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

-import { Component, OnInit } from '@angular/core';
-import { LoginApiService } from '../../services/login-api';
+import { Component } from '@angular/core';
+import { NbSortDirection, NbSortRequest, NbTreeGridDataSourceBuilder, NbTreeGridDataSource } from '@nebular/theme';
+
+interface TreeNode<T> {
+  data: T;
+  children?: TreeNode<T>[];
+  expanded?: boolean;
+}
+
+interface Row {
+  name: string,
+  character: any,
+  SRC: any,
+}
+
+type TreeType = TreeNode<Row>
 
 @Component({
   selector: 'dashboard',
   templateUrl: './dashboard.component.html',
+  styleUrls: ['./tree-grid-shared.scss', './dashboard.component.scss'],
 })
-export class FrontcraftDashboardComponent implements OnInit{
+export class FrontcraftDashboardComponent{
+  customColumn = 'name';
+  defaultColumns = [ 'character', 'SRC'/*, 'Profile'*/ ];
+  allColumns = [ this.customColumn, ...this.defaultColumns ];
+
+  dataSource: NbTreeGridDataSource<TreeType>;
 
-    constructor(private loginApi : LoginApiService){}
+  sortColumn: string;
+  sortDirection: NbSortDirection = NbSortDirection.NONE;
 
-    ngOnInit(){
-        console.log(this.loginApi)
+  constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder<TreeType>) {
+    this.dataSource = this.dataSourceBuilder.create(this.data);
+  }
+
+  updateSort(sortRequest: NbSortRequest): void {
+    this.sortColumn = sortRequest.column;
+    this.sortDirection = sortRequest.direction;
+  }
+
+  getSortDirection(column: string): NbSortDirection {
+    if (this.sortColumn === column) {
+      return this.sortDirection;
     }
+    return NbSortDirection.NONE;
+  }
+
+  private data: TreeType[] = [
+   {
+     data: {name: 'a', character: 2, SRC: 0},
+     children: [
+       {data: {name: 'a', character: 'Warrior', SRC: 'Arms'}}
+     ]
+   }
+  ];
 
-}
+  getShowOn(index: number) {
+    const minWithForMultipleColumns = 400;
+    const nextColumnStep = 100;
+    return minWithForMultipleColumns + (nextColumnStep * index);
+  }
+}

src/frontend/src/app/frontcraft/pages/dashboard/tree-grid-shared.scss

+::ng-deep {
+    body {
+      min-height: 20rem;
+    }
+  
+    .nb-tree-grid-header-cell,
+    .nb-tree-grid-header-cell button {
+      text-transform: capitalize;
+    }
+  }

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

 export class PagesLayoutComponent implements OnInit{
   menu:NbMenuItem[] = [{
     icon: 'people-outline',
-    title: 'People'
+    title: 'People',
+    link: '/frontcraft/people'
   },{
     icon: 'clock-outline',
     title: 'Raids'
+  },{
+    icon: 'clock-outline',
+    title: 'character',
+    link: '/frontcraft/character/a'
+  },{
+    icon: 'clock-outline',
+    title: 'user',
+    link: '/frontcraft/user/a'
   }]
   
   constructor(

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

 import { RouterModule, Routes } from '@angular/router';
 import { FrontcraftDashboardComponent } from './dashboard/dashboard.component';
 import { PagesLayoutComponent } from './pages-layout.component';
+import { FrontcraftCharacterComponent } from './character/character.component';
+import { FrontcraftUserComponent } from './user/user.component';
+import { FrontcraftPeopleComponent } from './people/people.component';
 
 export const routes: Routes = [
     {
         path: '',
         component: PagesLayoutComponent,
         children: [
+            {
+                path: 'people',
+                component: FrontcraftPeopleComponent
+            },
+            {
+                path: 'user/:name',
+                component: FrontcraftUserComponent
+            },
+            {
+                path: 'character/:name',
+                component: FrontcraftCharacterComponent
+            },
             {
                 path: 'dashboard',
                 component: FrontcraftDashboardComponent,

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

   NbCheckboxModule,
   NbInputModule,
   NbMenuModule,
-  NbCardModule
+  NbCardModule,
+  NbTreeGridModule
 } from '@nebular/theme';
 import { MyAuthRoutingModule } from './pages-routing.module';
 import { FrontcraftDashboardComponent } from './dashboard/dashboard.component';
 import { DashboardModule } from '../../demo_pages/dashboard/dashboard.module';
 import { ECommerceModule } from '../../demo_pages/e-commerce/e-commerce.module';
 import { MiscellaneousModule } from '../../demo_pages/miscellaneous/miscellaneous.module';
+import { FrontcraftCharacterComponent } from './character/character.component';
+import { FrontcraftUserComponent } from './user/user.component';
+import { FrontcraftPeopleComponent } from './people/people.component';
 
 
 @NgModule({
   imports: [
     MyAuthRoutingModule,
+    NbTreeGridModule,
     CommonModule,
     FormsModule,
     RouterModule,
     
   ],
   declarations: [
+    FrontcraftPeopleComponent,
+    FrontcraftUserComponent,
+    FrontcraftCharacterComponent,
     PagesLayoutComponent,
     FrontcraftDashboardComponent
   ],

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

+<nb-card>
+    <nb-card-body>
+
+        <label class="search-label" for="search">Search:</label>
+        <input nbInput [nbFilterInput]="dataSource" id="search" class="search-input">
+
+        <table [nbTreeGrid]="dataSource" [nbSort]="dataSource" (sort)="updateSort($event)">
+
+            <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
+            <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>
+
+            <ng-container [nbTreeGridColumnDef]="customColumn">
+                <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(customColumn)" *nbTreeGridHeaderCellDef>
+                {{customColumn}}
+                </th>
+                <td nbTreeGridCell *nbTreeGridCellDef="let row">
+                    <nb-tree-grid-row-toggle
+                        *ngIf="row.children && row.children.length">
+                    </nb-tree-grid-row-toggle>
+                    <span style="text-transform: capitalize;">
+                        {{row.data[customColumn]}}
+                    </span>
+                </td>
+            </ng-container>
+
+            <ng-container *ngFor="let column of defaultColumns; let index = index"
+                            [nbTreeGridColumnDef]="column"
+                            [showOn]="getShowOn(index)">
+                <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef>
+                {{column}}
+                </th>
+                <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
+            </ng-container>
+        </table>
+    </nb-card-body>
+</nb-card>

src/frontend/src/app/frontcraft/pages/people/people.component.scss

+button[nbTreeGridRowToggle] {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+  
+  .search-label {
+    display: block;
+  }
+  .search-input {
+    margin-bottom: 1rem;
+  }
+  
+  .nb-column-name {
+    width: 100%;
+  }
+  
+  @media screen and (min-width: 400px) {
+    .nb-column-name,
+    .nb-column-size {
+      width: 50%;
+    }
+  }
+  
+  @media screen and (min-width: 500px) {
+    .nb-column-name,
+    .nb-column-size,
+    .nb-column-kind {
+      width: 33.333%;
+    }
+  }
+  
+  @media screen and (min-width: 600px) {
+    .nb-column-name {
+      width: 31%;
+    }
+    .nb-column-size,
+    .nb-column-kind,
+    .nb-column-items {
+      width: 23%;
+    }
+  }

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

+import { Component } from '@angular/core';
+import { NbSortDirection, NbSortRequest, NbTreeGridDataSourceBuilder, NbTreeGridDataSource } from '@nebular/theme';
+
+interface TreeNode<T> {
+  data: T;
+  children?: TreeNode<T>[];
+  expanded?: boolean;
+}
+
+interface Row {
+  name: string,
+  character: any,
+  SRC: any,
+  kind: 'Character' | 'Account'
+}
+
+type TreeType = TreeNode<Row>
+
+@Component({
+  selector: 'people-component',
+  templateUrl: './people.component.html',
+  styleUrls: ['./tree-grid-shared.scss', './people.component.scss'],
+})
+export class FrontcraftPeopleComponent{
+  customColumn = 'name';
+  defaultColumns = [ 'character', 'SRC'/*, 'Profile'*/ ];
+  allColumns = [ this.customColumn, ...this.defaultColumns ];
+
+  dataSource: NbTreeGridDataSource<TreeType>;
+
+  sortColumn: string;
+  sortDirection: NbSortDirection = NbSortDirection.NONE;
+
+  constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder<TreeType>) {
+    this.dataSource = this.dataSourceBuilder.create(this.data);
+  }
+
+  updateSort(sortRequest: NbSortRequest): void {
+    this.sortColumn = sortRequest.column;
+    this.sortDirection = sortRequest.direction;
+  }
+
+  getSortDirection(column: string): NbSortDirection {
+    if (this.sortColumn === column) {
+      return this.sortDirection;
+    }
+    return NbSortDirection.NONE;
+  }
+
+  private data: TreeType[] = [
+   {
+     data: {name: 'a', character: 2, SRC: 0, kind: 'Account'},
+     children: [
+       {data: {name: 'a', character: 'Warrior', SRC: 'Arms', kind: 'Character'}}
+     ]
+   }
+  ];
+
+  getShowOn(index: number) {
+    const minWithForMultipleColumns = 400;
+    const nextColumnStep = 100;
+    return minWithForMultipleColumns + (nextColumnStep * index);
+  }
+}

src/frontend/src/app/frontcraft/pages/people/tree-grid-shared.scss

+::ng-deep {
+    body {
+      min-height: 20rem;
+    }
+  
+    .nb-tree-grid-header-cell,
+    .nb-tree-grid-header-cell button {
+      text-transform: capitalize;
+    }
+  }

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

+
+
+<nb-card
+accent="info">
+    <nb-card-header>
+        <h2 style="text-transform: capitalize;">{{user.username}}</h2>
+    </nb-card-header>
+    <nb-card-body>
+      <nb-card
+      accent="control"
+      *ngFor="let char of characters">
+          <nb-card-header>
+              <h4>
+                  <a [ngStyle]="{'color': char.color}" style="text-transform: capitalize;" [routerLink]="'/frontcraft/character/'+char.charactername">
+                      {{char.charactername}}
+                  </a>
+              </h4>
+          </nb-card-header>
+          <nb-card-body>
+              {{char.specname}} {{char.class}}
+          </nb-card-body>
+      </nb-card>
+    </nb-card-body>
+</nb-card>

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

+import { Component, OnInit } from '@angular/core';
+import { LoginApiService } from '../../services/login-api';
+import { Router } from '@angular/router';
+import { User, Spec, Character } from '../../../../../../backend/Types/Types';
+import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+
+@Component({
+  selector: 'user-component',
+  templateUrl: './user.component.html',
+})
+export class FrontcraftUserComponent implements OnInit{
+
+  user:User = {} as any
+  characters : (Character & Spec)[] = []
+
+  constructor(
+    private router : Router,  
+    private loginApi : LoginApiService
+  ){}
+
+  ngOnInit(){
+    const auth = this.loginApi.getAuth()
+    if(!auth){
+      this.router.navigateByUrl('/auth/login')
+      return
+    }
+    this.user = auth.user
+    this.loginApi.getUnprivilegedSocket()
+    .CharacterManager
+    .getCharactersOfUser(this.user.username)
+    .then((characters) => {
+      characters.forEach(c => {
+        c['color'] = getClassColor(c.class)
+      })
+      this.characters = characters
+    })  
+  }
+}

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

            
             const authSock = await sock.connect<RPCSocket & SomeOf<FrontcraftFeatureIfc>>(auth.token.value)
 
-            sock.hook('kick', () => this.logout())
+            sock.hook('kick', () => {
+                console.log("I got kicked");
+            })
             sock.hook('getUserData', () => auth)
             sock.hook('navigate', (where:string) => {
-                this.ngZone.run(() => {
-                    this.injector.get(Router).navigateByUrl(where);
+                this.ngZone.run( () => {
+                    this.injector.get(Router).navigateByUrl('/')
                 })
             })
             sock.on('error', (e) => {
-                console.log('Socket error',  e)
-                this.logout()
+                sock.destroy();
+                
             })
-
+            
             this.auth = auth
             this.privSocket = authSock
             this.cookieSvc.set('token', JSON.stringify(auth))
         }
     }
 
-    getCurrentUser = () : User | undefined => this.auth?this.auth.user:undefined
+    getCurrentUser = () : User | undefined => {
+        return this.auth?this.auth.user:undefined
+    }
 
     login = async (username: string, password: string) : Promise<RPCSocket & SomeOf<FrontcraftFeatureIfc>> => {
         const pwHash = await hash(password)
 
     logout = async () => {
         this.cookieSvc.set('token', undefined)
-        if(this.auth) await this.socket.Authenticator.logout(this.auth.user.name, this.auth.token.value)
+        if(this.auth) await this.socket.Authenticator.logout(this.auth.user.username, this.auth.token.value)
         if(this.privSocket) this.privSocket.destroy()
         this.privSocket = null
         this.auth  = null