refactor(dlcm-portal): implement login/logout

implement login/logout for mobile toolbar component

src/app/app.component.html

@@ -3,13 +3,16 @@
                      [currentPath]="currentModule"
                      [currentLanguage]="appLanguage$ | async"
                      (languageEvent)="useLanguage($event)"
-                     (navigateEvent)="navigate($event)">
+                     (navigateEvent)="navigate($event)"
+                     (logoutEvent)="logout()">
   </dlcm-main-toolbar>
 
-  <dlcm-main-toolbar-mobile [currentPath]="currentModule"
+  <dlcm-main-toolbar-mobile [loggedIn]="isLogged$ | async"
+                            [currentPath]="currentModule"
                             [currentLanguage]="appLanguage$ | async"
                             (languageEvent)="useLanguage($event)"
-                            (navigateEvent)="navigate($event)">
+                            (navigateEvent)="navigate($event)"
+                            (logoutEvent)="logout()">
   </dlcm-main-toolbar-mobile>
 
   <div class="container-fluid instance-logo-wrapper">

src/app/app.component.ts

 import {Component} from "@angular/core";
 import {Router, RouterStateSnapshot} from "@angular/router";
-import {ChangeAppLanguage} from "@app/app.action";
+import {ChangeAppLanguage, Logout} from "@app/app.action";
 import {AppStateModel} from "@app/app.state";
 import {BaseDirective} from "@app/shared/directives/base.directive";
 import {LanguagesEnum} from "@app/shared/enums/languages.enum";
@@ -94,4 +94,8 @@ export class AppComponent extends BaseDirective {
       this.translate.use(language);
     }));
   }
+
+  logout() {
+    this.store.dispatch(new Logout());
+  }
 }

src/app/app.state.ts

@@ -20,6 +20,8 @@ import {environment} from "../environments/environment";
 import {OAuthService} from "@app/oauth/oauth-service";
 import {authConfig} from "@app/auth.config";
 import {tap} from "rxjs/operators";
+import {RoutesEnum} from "@app/shared/enums/routes.enum";
+import {Navigate} from "@ngxs/router-plugin";
 
 export interface AppStateModel extends BaseStateModel {
   appLanguage: LanguagesEnum;
@@ -102,6 +104,8 @@ export class AppState {
 
   @Action(Logout)
   logout(ctx: StateContext<AppStateModel>) {
+    this.oauthService.logOut();
+    ctx.dispatch(new Navigate([RoutesEnum.access]));
     ctx.patchState({
       isLoggedIn: false,
     });

src/app/components/main-toolbar-mobile/main-toolbar-mobile.component.html

@@ -30,6 +30,16 @@
                               (languageEvent)="useLanguage($event)">
       </dlcm-language-selector>
     </li>
-    <li>{{'app.toolbar.logout' | translate }}</li>
+    <ng-template [ngIf]="!loggedIn" [ngIfElse]="loggedOut">
+      <li class="login">
+        <a (click)="login()">{{'app.toolbar.login' | translate }}</a>
+      </li>
+    </ng-template>
+
+    <ng-template #loggedOut>
+      <li class="logout">
+        <a (click)="logout()">{{'app.toolbar.logout' | translate }}</a>
+      </li>
+    </ng-template>
   </ul>
 </div>

src/app/components/main-toolbar-mobile/main-toolbar-mobile.component.ts

 import {ChangeDetectionStrategy, Component} from "@angular/core";
 import {MainToolbarDirective} from "@app/directives/main-toolbar.directive";
+import {OAuthService} from "@app/oauth/oauth-service";
 
 @Component({
   selector: "dlcm-main-toolbar-mobile",
@@ -8,7 +9,7 @@ import {MainToolbarDirective} from "@app/directives/main-toolbar.directive";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainToolbarMobileComponent extends MainToolbarDirective {
-  constructor() {
-    super();
+  constructor(private oauth: OAuthService) {
+    super(oauth);
   }
 }

src/app/components/main-toolbar/main-toolbar.component.ts

-import {ChangeDetectionStrategy, Component, EventEmitter, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
 import {MainToolbarDirective} from "@app/directives/main-toolbar.directive";
 import {OAuthService} from "@app/oauth/oauth-service";
 import {Router} from "@angular/router";
@@ -13,40 +13,7 @@ import {LanguagesEnum} from "@app/shared/enums/languages.enum";
 })
 export class MainToolbarComponent extends MainToolbarDirective {
 
-  private logged = false;
-
-  get loggedIn(): boolean {
-    return this.logged;
-  }
-
-  @Input()
-  set loggedIn(val: boolean) {
-    this.logged = val;
-
-  }
-
-  constructor(private oauthService: OAuthService, private router: Router) {
-    super();
-    this.navigateEvent = new EventEmitter();
-    this.languageEvent = new EventEmitter();
-  }
-
-  navigate(path: string) {
-    this.navigateEvent.emit(path);
-  }
-
-  useLanguage(language: LanguagesEnum) {
-    this.languageEvent.emit(language);
-  }
-
-  login() {
-    this.oauthService.initAuthorizationCodeFlow();
-    this.loggedIn = true;
-  }
-
-  logout() {
-    this.oauthService.logOut();
-    this.router.navigate([RoutesEnum.access]);
-    this.loggedIn = false;
+  constructor(private oauth: OAuthService) {
+    super(oauth);
   }
 }

src/app/directives/main-toolbar.directive.ts

@@ -2,6 +2,7 @@ import {Directive, EventEmitter, Input, Output} from "@angular/core";
 import {BaseDirective} from "@app/shared/directives/base.directive";
 import {LanguagesEnum} from "@app/shared/enums/languages.enum";
 import {RoutesEnum} from "@app/shared/enums/routes.enum";
+import {OAuthService} from "@app/oauth/oauth-service";
 
 @Directive({
   selector: "[dlcmMainToolbar]"
@@ -19,13 +20,29 @@ export class MainToolbarDirective extends BaseDirective {
   @Output()
   languageEvent: EventEmitter<LanguagesEnum>;
 
+  @Output()
+  logoutEvent = new EventEmitter<void>();
+
   organizationalUnitPath: string = RoutesEnum.organizationalUnit;
   depositPath: string = RoutesEnum.deposit;
+
   accessPath: string = RoutesEnum.access;
 
   isOpen: boolean;
 
-  constructor() {
+  private logged = false;
+
+  get loggedIn(): boolean {
+    return this.logged;
+  }
+
+  @Input()
+  set loggedIn(val: boolean) {
+    this.logged = val;
+
+  }
+
+  constructor(private oauthService: OAuthService) {
     super();
     this.navigateEvent = new EventEmitter();
     this.languageEvent = new EventEmitter();
@@ -43,4 +60,12 @@ export class MainToolbarDirective extends BaseDirective {
   toggleMenu() {
     this.isOpen = !this.isOpen;
   }
+
+  login() {
+    this.oauthService.initAuthorizationCodeFlow();
+  }
+
+  logout() {
+    this.logoutEvent.emit();
+  }
 }