Fixed logout page view

src/app/+logout-page/logout-page.component.html

@@ -1,5 +1,9 @@
-<div class="text-center mt-5">
-  <img class="mb-4" src="assets/images/dspace-logo.png" alt="" width="72" height="72">
-  <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
-  <ds-log-out></ds-log-out>
+<div class="container">
+  <div class="text-center mt-5 row justify-content-md-center">
+    <div class="col-sm-6 col-md-4">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
+      <ds-log-out></ds-log-out>
+    </div>
+  </div>
 </div>

src/app/+logout-page/logout-page.component.scss

@@ -1,15 +1 @@
-.login-container {
-  height: 100%;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: flex;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  -webkit-box-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  justify-content: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #f5f5f5;
-}
+@import '../+login-page/login-page.component.scss';

src/app/core/auth/auth.service.ts

@@ -26,6 +26,7 @@ import { NativeWindowRef, NativeWindowService } from '../../shared/services/wind
 import { REQUEST } from '@nguniversal/express-engine/tokens';
 
 export const LOGIN_ROUTE = '/login';
+export const LOGOUT_ROUTE = '/logout';
 
 export const REDIRECT_COOKIE = 'dsRedirectUrl';
 

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

@@ -1,5 +1,5 @@
 <ul class="navbar-nav" [ngClass]="{'mr-auto': (windowService.isMobileView() | async)}">
-  <li *ngIf="!(isAuthenticated | async) && !(windowService.isMobileView() | async) && showAuth" class="nav-item dropdown" (click)="$event.stopPropagation();">
+  <li *ngIf="!(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
     <div ngbDropdown placement="bottom-right" class="d-inline-block float-right" @fadeInOut>
       <a href="#" id="dropdownLogin" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="caret"></span></a>
       <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu aria-labelledby="dropdownLogin">
@@ -10,7 +10,7 @@
   <li *ngIf="!(isAuthenticated | async) && (windowService.isMobileView() | async)" class="nav-item">
     <a class="nav-link" routerLink="/login" routerLinkActive="active"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="sr-only">(current)</span></a>
   </li>
-  <li *ngIf="(isAuthenticated | async) && !(windowService.isMobileView() | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown placement="bottom-right" class="d-inline-block" [ngClass]="{'float-right': !(windowService.isMobileView() | async)}" @fadeInOut>
       <a href="#" id="dropdownUser" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-user fa-fw" aria-hidden="true"></i>Hello {{(user | async).name}}<span class="caret"></span></a>
       <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { RouterReducerState } from '@ngrx/router-store';
 import { Store } from '@ngrx/store';
@@ -6,10 +6,10 @@ import { Store } from '@ngrx/store';
 import { fadeInOut, fadeOut } from '../animations/fade';
 import { HostWindowService } from '../host-window.service';
 import { AppState, routerStateSelector } from '../../app.reducer';
-import { hasValue, isNotUndefined } from '../empty.util';
+import { isNotUndefined } from '../empty.util';
 import { getAuthenticatedUser, isAuthenticated, isAuthenticationLoading } from '../../core/auth/selectors';
-import { Subscription } from 'rxjs/Subscription';
 import { Eperson } from '../../core/eperson/models/eperson.model';
+import { LOGIN_ROUTE, LOGOUT_ROUTE } from '../../core/auth/auth.service';
 
 @Component({
   selector: 'ds-auth-nav-menu',
@@ -17,7 +17,7 @@ import { Eperson } from '../../core/eperson/models/eperson.model';
   styleUrls: ['./auth-nav-menu.component.scss'],
   animations: [fadeInOut, fadeOut]
 })
-export class AuthNavMenuComponent implements OnDestroy, OnInit {
+export class AuthNavMenuComponent implements OnInit {
   /**
    * Whether user is authenticated.
    * @type {Observable<string>}
@@ -30,12 +30,10 @@ export class AuthNavMenuComponent implements OnDestroy, OnInit {
    */
   public loading: Observable<boolean>;
 
-  public showAuth = false;
+  public showAuth = Observable.of(false);
 
   public user: Observable<Eperson>;
 
-  protected subs: Subscription[] = [];
-
   constructor(private store: Store<AppState>,
               public windowService: HostWindowService) {
   }
@@ -49,16 +47,10 @@ export class AuthNavMenuComponent implements OnDestroy, OnInit {
 
     this.user = this.store.select(getAuthenticatedUser);
 
-    this.subs.push(this.store.select(routerStateSelector)
+    this.showAuth = this.store.select(routerStateSelector)
       .filter((router: RouterReducerState) => isNotUndefined(router) && isNotUndefined(router.state))
-      .subscribe((router: RouterReducerState) => {
-        this.showAuth = router.state.url !== '/login';
-      }));
-  }
-
-  ngOnDestroy() {
-    this.subs
-      .filter((sub) => hasValue(sub))
-      .forEach((sub) => sub.unsubscribe());
+      .map((router: RouterReducerState) => {
+        return router.state.url !== LOGIN_ROUTE && router.state.url !== LOGOUT_ROUTE;
+      });
   }
 }