SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html

@@ -41,6 +41,11 @@
             </div>
           </div>
         </div>
+        <mat-list-item (click)="onLogoutClick()">
+          <mat-icon matListIcon>exit_to_app</mat-icon>
+          <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">Log out</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts

@@ -16,6 +16,10 @@ import { GameMasterArmorsTableComponent } from '../game-master-armors-table/game
 import { MatDialog } from '@angular/material';
 import { GameMasterCharacterActionsDialogComponent } from '../game-master-character-actions-dialog/game-master-character-actions-dialog.component';
 import { GameMasterWeaponsTableComponent } from '../game-master-weapons-table/game-master-weapons-table.component';
+import { ClearStore } from '../../store/actions/app.actions';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -61,6 +65,8 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
   loggedCharacters: LoggedCharactersViewModel[];
 
   constructor(
+    private store: Store<AppState>,
+    private router: Router,
     private signalRService: GMSignalRService,
     private characterService: CharacterService,
     public dialog: MatDialog
@@ -129,6 +135,11 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
     }
   }
 
+  onLogoutClick() {
+    this.store.dispatch(new ClearStore());
+    this.router.navigate(['/']);
+  }
+
   private SubscribeToEvents(): void {
     this.signalRService.message.subscribe((message: string) => {
       if (

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html

@@ -40,7 +40,7 @@
           <a matLine>Shop</a>
         </mat-list-item>
 
-        <mat-list-item [routerLink]="['/']" [routerLinkActive]="['active']">
+        <mat-list-item (click)="onLogoutClick()">
           <mat-icon [class.active]="selected" matListIcon>exit_to_app</mat-icon>
           <a matLine>Log out</a>
         </mat-list-item>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { PlayerSignalRService } from "../../shared/signalR-service/player-signalR.service";
-import { first } from "rxjs/operators";
+import { PlayerSignalRService } from '../../shared/signalR-service/player-signalR.service';
+import { first } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from 'src/app/store/models/app-state.model';
 import { AbilitiesComponent } from '../abilities/abilities.component';
+import {ClearStore, ClearUserId} from '../../store/actions/app.actions';
+import { Router } from '@angular/router';
+import {ClearCharacterId} from "../../store/actions/player.action";
 
 @Component({
   selector: 'app-player-dashboard',
@@ -15,13 +18,13 @@ export class PlayerDashboardComponent implements OnInit {
   isExpanded = false;
   selected = false;
 
-  constructor(private signalRService: PlayerSignalRService, private store: Store<AppState>) {}
+  constructor(private signalRService: PlayerSignalRService, private store: Store<AppState>, private router: Router) {}
 
   ngOnInit() {
     this.store.select(s => s.playerStore.characterId).pipe(first()).subscribe((id) => {
       this.signalRService.Login(id);
+      this.SwitchMiddleComponent('AbilitiesComponent');
     });
-    this.SwitchMiddleComponent('AbilitiesComponent');
   }
 
   toggle() {
@@ -29,9 +32,15 @@ export class PlayerDashboardComponent implements OnInit {
   }
 
   SwitchMiddleComponent(componentName: string) {
-    switch(componentName){
+    switch (componentName) {
       case 'AbilitiesComponent':
         this.middleComponent = AbilitiesComponent;
     }
   }
+
+  onLogoutClick() {
+    this.store.dispatch(new ClearCharacterId());
+    this.store.dispatch(new ClearStore());
+    this.router.navigate(['/']);
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts

@@ -3,7 +3,8 @@ import {Action} from '@ngrx/store';
 export enum AppActionTypes {
   ADD_USER_ID = '[APP] Add user id',
   ADD_ROLE = '[APP] Add role',
-  CLEAR_USER_ID = '[APP] Clear user id'
+  CLEAR_USER_ID = '[APP] Clear user id',
+  CLEAR_STORE = '[APP] Clear user id and user role'
 }
 
 export class AddUserId implements Action {
@@ -27,6 +28,12 @@ export class ClearUserId implements Action {
   }
 }
 
+export class ClearStore implements Action {
+  readonly type = AppActionTypes.CLEAR_STORE;
+
+  constructor() {
+  }
+}
 
 
-export type AppAction = AddUserId | AddRole | ClearUserId;
+export type AppAction = AddUserId | AddRole | ClearUserId | ClearStore;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts

@@ -1,7 +1,8 @@
-import {Action} from "@ngrx/store";
+import {Action} from '@ngrx/store';
 
 export enum PlayerActionTypes {
-  ADD_CHARACTER_ID= '[PLAYER] Add character id'
+  ADD_CHARACTER_ID= '[PLAYER] Add character id',
+  CLEAR_CHARACTER_ID = '[PLAYER] Clear character id'
 }
 
 export class AddCharacterId implements Action {
@@ -12,4 +13,12 @@ export class AddCharacterId implements Action {
   }
 }
 
-export type PlayerAction = AddCharacterId;
+export class ClearCharacterId implements Action {
+  readonly type = PlayerActionTypes.CLEAR_CHARACTER_ID;
+
+  constructor() {
+
+  }
+}
+
+export type PlayerAction = AddCharacterId | ClearCharacterId;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts

@@ -14,6 +14,8 @@ export function AppReducer(state: AppStoreModel = initialState, action: AppActio
       return {...state, role: action.payload.role};
     case AppActionTypes.CLEAR_USER_ID:
       return {...state, userId: null};
+    case AppActionTypes.CLEAR_STORE:
+      return {userId: null, role: null};
     default:
       return state;
   }

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts

@@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
   switch (action.type) {
     case PlayerActionTypes.ADD_CHARACTER_ID:
       return {...state, characterId: action.payload.characterId};
+    case PlayerActionTypes.CLEAR_CHARACTER_ID:
+      return { characterId: null};
     default:
       return state;
   }