Reduced use of own css

src/app/+login-page/login-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">
+<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">{{"login.form.header" | translate}}</h1>
       <ds-log-in></ds-log-in>
+    </div>
+  </div>
 </div>

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

@@ -0,0 +1,6 @@
+@import '../../styles/variables.scss';
+
+.login-logo {
+  height: $login-logo-height;
+  width: $login-logo-width;
+}

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

@@ -135,6 +135,7 @@ export class AuthService {
    */
   public checkAuthenticationToken(): Observable<AuthTokenInfo> {
     return this.store.select(getAuthenticationToken)
+      .take(1)
       .map((authTokenInfo: AuthTokenInfo) => {
         let token: AuthTokenInfo;
         // Retrieve authentication token info and check if is valid

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

@@ -2,7 +2,7 @@
   <li *ngIf="!(isAuthenticated | async) && !(windowService.isMobileView() | async) && showAuth" 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" ngbDropdownMenu aria-labelledby="dropdownLogin">
+      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu aria-labelledby="dropdownLogin">
         <ds-log-in></ds-log-in>
       </div>
     </div>

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

@@ -7,7 +7,7 @@ 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 { getAuthenticatedUser, isAuthenticated } from '../../core/auth/selectors';
+import { getAuthenticatedUser, isAuthenticated, isAuthenticationLoading } from '../../core/auth/selectors';
 import { Subscription } from 'rxjs/Subscription';
 import { Eperson } from '../../core/eperson/models/eperson.model';
 
@@ -24,6 +24,12 @@ export class AuthNavMenuComponent implements OnDestroy, OnInit {
    */
   public isAuthenticated: Observable<boolean>;
 
+  /**
+   * True if the authentication is loading.
+   * @type {boolean}
+   */
+  public loading: Observable<boolean>;
+
   public showAuth = false;
 
   public user: Observable<Eperson>;
@@ -35,9 +41,12 @@ export class AuthNavMenuComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit(): void {
-    // set loading
+    // set isAuthenticated
     this.isAuthenticated = this.store.select(isAuthenticated);
 
+    // set loading
+    this.loading = this.store.select(isAuthenticationLoading);
+
     this.user = this.store.select(getAuthenticatedUser);
 
     this.subs.push(this.store.select(routerStateSelector)

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

@@ -4,7 +4,7 @@
   <input id="inputEmail"
          autocomplete="off"
          autofocus
-         class="form-control"
+         class="form-control form-control-lg position-relative"
          formControlName="email"
          placeholder="{{'login.form.email' | translate}}"
          required
@@ -12,7 +12,7 @@
   <label for="inputPassword" class="sr-only">{{"login.form.password" | translate}}</label>
   <input id="inputPassword"
          autocomplete="off"
-         class="form-control"
+         class="form-control form-control-lg position-relative"
          placeholder="{{'login.form.password' | translate}}"
          formControlName="password"
          required

src/app/shared/log-in/log-in.component.scss

@@ -1,21 +1,5 @@
 @import '../../../styles/variables.scss';
 
-.form-login {
-  width: 100%;
-  max-width: 330px;
-  padding: 15px;
-  margin: 0 auto;
-}
-.form-login .checkbox {
-  font-weight: 400;
-}
-.form-login .form-control {
-  position: relative;
-  box-sizing: border-box;
-  height: auto;
-  padding: 10px;
-  font-size: 16px;
-}
 .form-login .form-control:focus {
   z-index: 2;
 }
@@ -25,7 +9,6 @@
   border-bottom-left-radius: 0;
 }
 .form-login input[type="password"] {
-  margin-bottom: 10px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }

src/styles/_custom_variables.scss

@@ -3,4 +3,6 @@ $content-spacing: $spacer * 1.5;
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
 $card-height-percentage:98%;
 $card-thumbnail-height:240px;
+$login-logo-height:72px;
+$login-logo-width:72px;