Added navigation bar user menu

src/app/core/auth/selectors.ts

@@ -8,6 +8,7 @@ import { createSelector } from '@ngrx/store';
  */
 import { AuthState } from './auth.reducer';
 import { AppState } from '../../app.reducer';
+import { EPerson } from '../eperson/models/eperson.model';
 
 /**
  * Returns the user state.
@@ -35,11 +36,12 @@ const _isAuthenticatedLoaded = (state: AuthState) => state.loaded;
 
 /**
  * Return the users state
+ * NOTE: when state is REHYDRATED user object lose prototype so return always a new EPerson object
  * @function _getAuthenticatedUser
  * @param {State} state
- * @returns {User}
+ * @returns {EPerson}
  */
-const _getAuthenticatedUser = (state: AuthState) => state.user;
+const _getAuthenticatedUser = (state: AuthState) => Object.assign(new EPerson(), state.user);
 
 /**
  * Returns the authentication error.

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -13,10 +13,9 @@
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="#" id="dropdownUser" (click)="$event.preventDefault()" class="px-1" ngbDropdownToggle><i class="fas fa-user-circle fa-lg fa-fw" [title]="'nav.logout' | translate"></i></a>
-      <ul id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
+      <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
-        <li class="dropdown-item">{{(user | async).name}}</li>
+        <ds-user-menu></ds-user-menu>
-        <li class="dropdown-item"><ds-log-out></ds-log-out></li>
+      </div>
-      </ul>
     </div>
   </li>
   <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">

src/app/shared/auth-nav-menu/user-menu/user-menu.component.html

@@ -0,0 +1,9 @@
+<ds-loading *ngIf="(loading$ | async)"></ds-loading>
+<div *ngIf="!(loading$ | async)">
+  <span class="dropdown-item-text">{{(user$ | async).name}}</span>
+  <a class="dropdown-item" [routerLink]="['/mydspace']" routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
+  <div class="dropdown-divider"></div>
+  <ds-log-out></ds-log-out>
+</div>
+
+

src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+
+import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { AppState } from '../../../app.reducer';
+import { getAuthenticatedUser, isAuthenticationLoading } from '../../../core/auth/selectors';
+
+@Component({
+  selector: 'ds-user-menu',
+  templateUrl: './user-menu.component.html',
+  styleUrls: ['./user-menu.component.scss']
+})
+export class UserMenuComponent implements OnInit {
+
+  /**
+   * True if the authentication is loading.
+   * @type {Observable<boolean>}
+   */
+  public loading$: Observable<boolean>;
+
+  /**
+   * The authenticated user.
+   * @type {Observable<EPerson>}
+   */
+  public user$: Observable<EPerson>;
+
+  constructor(private store: Store<AppState>) {
+  }
+
+  ngOnInit(): void {
+
+    // set loading
+    this.loading$ = this.store.pipe(select(isAuthenticationLoading));
+
+    // set user
+    this.user$ = this.store.pipe(select(getAuthenticatedUser));
+
+    this.user$.subscribe((user) => {
+      console.log(user, user.name);
+    })
+
+  }
+}

src/app/shared/log-out/log-out.component.html

@@ -1,5 +1,4 @@
-<ds-loading *ngIf="(loading | async)"></ds-loading>
+<div class="form-login px-4">
-<div *ngIf="!(loading | async)" class="form-login px-4 py-3">
 
   <div *ngIf="(error | async) && hasError" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 

src/app/shared/log-out/log-out.component.ts

@@ -1,21 +1,12 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-// @ngrx
+import { Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 
-// actions
 import { LogOutAction } from '../../core/auth/auth.actions';
-
+import { getLogOutError, } from '../../core/auth/selectors';
-// reducers
-import {
-  getLogOutError,
-  isAuthenticated,
-  isAuthenticationLoading,
-} from '../../core/auth/selectors';
-
 import { AppState } from '../../app.reducer';
-import { Observable } from 'rxjs';
 import { fadeOut } from '../animations/fade';
 
 @Component({
@@ -24,25 +15,13 @@ import { fadeOut } from '../animations/fade';
   styleUrls: ['./log-out.component.scss'],
   animations: [fadeOut]
 })
-export class LogOutComponent implements OnDestroy, OnInit {
+export class LogOutComponent implements OnInit {
   /**
    * The error if authentication fails.
    * @type {Observable<string>}
    */
   public error: Observable<string>;
 
-  /**
-   * True if the logout is loading.
-   * @type {boolean}
-   */
-  public loading: Observable<boolean>;
-
-  /**
-   * Component state.
-   * @type {boolean}
-   */
-  private alive = true;
-
   /**
    * @constructor
    * @param {Store<State>} store
@@ -51,22 +30,12 @@ export class LogOutComponent implements OnDestroy, OnInit {
               private store: Store<AppState>) {
   }
 
-  /**
-   *  Lifecycle hook that is called when a directive, pipe or service is destroyed.
-   */
-  public ngOnDestroy() {
-    this.alive = false;
-  }
-
   /**
    * Lifecycle hook that is called after data-bound properties of a directive are initialized.
    */
   ngOnInit() {
     // set error
     this.error = this.store.pipe(select(getLogOutError));
-
-    // set loading
-    this.loading = this.store.pipe(select(isAuthenticationLoading));
   }
 
   /**