added user name

package.json

@@ -28,6 +28,7 @@
     "@ngxs/store": "^3.7.1",
     "@types/leaflet": "1",
     "angular-auth-oidc-client": "^11.5.0",
+    "jwt-decode": "^3.1.2",
     "leaflet": "^1.7.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

src/app/header/header.component.html

@@ -1,7 +1,7 @@
 <div class="header-cover" fxLayout="row" fxLayoutAlign="space-between">
   <div>Позашкілля</div>
   <div *ngIf="(isAuthorized$ | async) then isAuthorized; else isUnauthorized">
-    
+
   </div>
   <ng-template #isUnauthorized>
      <button mat-raised-button (click)="login()">
@@ -13,13 +13,13 @@
     <div class="authorization">
       <button mat-raised-button color="primary"
         matBadge="2" matBadgePosition="before" matBadgeColor="accent">
-        <i> 
+        <i>
           <mat-icon class="icon-message"> email</mat-icon>
         </i>
       </button>
 
       <button mat-button [matMenuTriggerFor]="log">
-        <h1>{{user.firstName}}</h1>
+        <h1>{{userName$ | async}}</h1>
       </button>
       <mat-menu #log="matMenu">
         <button mat-menu-item>Гуртки</button>
@@ -28,6 +28,6 @@ <h1>{{user.firstName}}</h1>
       </mat-menu>
 
     </div>
-  
+
   </ng-template>
   </div>

src/app/header/header.component.ts

@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { Actions, ofAction, Select, Store } from '@ngxs/store';
 import { UserRegistrationState } from '../shared/store/user-registration.state';
 import { Observable } from 'rxjs';
-import { Logout, CheckAuth, AuthFail, Login } from '../shared/store/user-registration.actions';
+import {Logout, CheckAuth, AuthFail, Login, UserName, Role} from '../shared/store/user-registration.actions';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
@@ -16,35 +16,35 @@ import { Router } from '@angular/router';
 })
 export class HeaderComponent implements OnInit {
 
-  user = {
-    firstName: 'Іванов В. М'
-  }
-
   @Select(UserRegistrationState.isAuthorized)
   isAuthorized$: Observable<boolean>;
+  @Select(UserRegistrationState.userName)
+  userName$: Observable<string>;
+  @Select(UserRegistrationState.role)
+  role$: Observable<string>;
 
   constructor(private modalDialog: MatDialog,
-    public store: Store,
-    private actions$: Actions,
-    public snackBar: MatSnackBar,
-    private router: Router) { 
+              public store: Store,
+              private actions$: Actions,
+              public snackBar: MatSnackBar,
+              private router: Router) {
       actions$.pipe(
         ofAction(AuthFail)
       ).subscribe(action => {
           this.snackBar.open('Check your connection', 'Try again!', {
           duration: 5000,
           panelClass: ['red-snackbar'],
           });
-      })
+      });
     }
 
   ngOnInit(): void {
-    this.store.dispatch(new CheckAuth())
+    this.store.dispatch(new CheckAuth());
   }
   logout(): void {
-    this.store.dispatch(new Logout())  
+    this.store.dispatch(new Logout());
   }
   login(): void{
-    this.store.dispatch(new Login())
+    this.store.dispatch(new Login());
   }
 }

src/app/shared/store/user-registration.actions.ts

@@ -13,4 +13,12 @@ export class CheckAuth {
 export class AuthFail {
   static readonly type = '[user] has auth failed';
   constructor() {}
-}
+}
+export class UserName {
+  static readonly type = '[user] name added';
+  constructor() {}
+}
+export class Role {
+  static readonly type = '[role] added';
+  constructor() {}
+}

src/app/shared/store/user-registration.state.ts

@@ -1,18 +1,23 @@
 import { Injectable } from '@angular/core';
 import { State, Action, StateContext, Selector } from '@ngxs/store';
-import { Login, Logout, CheckAuth, AuthFail } from './user-registration.actions';
+import {Login, Logout, CheckAuth, AuthFail} from './user-registration.actions';
 
 import { HttpClient } from '@angular/common/http';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
+import jwt_decode from 'jwt-decode';
 
 export interface UserRegistrationStateModel {
   isAuthorized: boolean;
+  userName: string;
+  role: string;
 }
 
 @State<UserRegistrationStateModel>({
   name: 'user',
   defaults: {
     isAuthorized: false,
+    userName: '',
+    role: ''
   }
 })
 @Injectable()
@@ -22,9 +27,17 @@ export class UserRegistrationState {
     public http: HttpClient) {}
 
   @Selector()
-    static isAuthorized(state: UserRegistrationStateModel) {
+    static isAuthorized(state: UserRegistrationStateModel): boolean {
     return state.isAuthorized;
   }
+  @Selector()
+  static userName(state: UserRegistrationStateModel): string {
+    return state.userName;
+  }
+  @Selector()
+  static role(state: UserRegistrationStateModel): string {
+    return state.role;
+  }
 
   @Action(Login)
   Login({  dispatch }: StateContext<UserRegistrationStateModel>): void {
@@ -36,16 +49,20 @@ export class UserRegistrationState {
     dispatch(new CheckAuth());
   }
   @Action(CheckAuth)
-  CheckAuth({ patchState }: StateContext<UserRegistrationStateModel>): void {
+  CheckAuth({ patchState }: StateContext<UserRegistrationStateModel>, {  dispatch  }: StateContext<UserRegistrationStateModel>): void {
     this.oidcSecurityService
       .checkAuth()
       .subscribe((auth) => {
-        console.log('is authenticated', auth)
+        console.log('is authenticated', auth);
         patchState({ isAuthorized: auth});
+        if (auth) {
+          patchState({role: jwt_decode(this.oidcSecurityService.getToken()).role});
+          patchState({userName: jwt_decode(this.oidcSecurityService.getToken()).name});
+        }
       });
   }
   @Action(AuthFail)
   AuthFail(): void {
-      console.log("Authorization failed");
+      console.log('Authorization failed');
     }
   }

yarn.lock

@@ -6147,6 +6147,11 @@ jszip@^3.1.3:
     readable-stream "~2.3.6"
     set-immediate-shim "~1.0.1"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 karma-coverage@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/karma-coverage/-/karma-coverage-2.0.3.tgz#c10f4711f4cf5caaaa668b1d6f642e7da122d973"