Merge pull request DSpace#2530 from alexandrevryghem/fix-display-order-authentication-methods_contribute-7.6

Fix display LogInComponent turning blank when entering wrong username/password combination

Author: tdonohue

src/app/core/data/feature-authorization/authorization-data.service.ts

@@ -74,7 +74,7 @@ export class AuthorizationDataService extends BaseDataService<Authorization> imp
           return [];
         }
       }),
-      catchError(() => observableOf(false)),
+      catchError(() => observableOf([])),
       oneAuthorizationMatchesFeature(featureId)
     );
   }

src/app/core/data/feature-authorization/authorization-utils.ts

@@ -68,13 +68,13 @@ export const oneAuthorizationMatchesFeature = (featureID: FeatureID) =>
     source.pipe(
       switchMap((authorizations: Authorization[]) => {
         if (isNotEmpty(authorizations)) {
-          return observableCombineLatest(
+          return observableCombineLatest([
             ...authorizations
               .filter((authorization: Authorization) => hasValue(authorization.feature))
               .map((authorization: Authorization) => authorization.feature.pipe(
                 getFirstSucceededRemoteDataPayload()
               ))
-          );
+          ]);
         } else {
           return observableOf([]);
         }

src/app/shared/log-in/container/log-in-container.component.ts

@@ -1,5 +1,4 @@
-import { Component, Injector, Input, OnInit } from '@angular/core';
-
+import { Component, Injector, Input, OnInit, Type } from '@angular/core';
 import { rendersAuthMethodType } from '../methods/log-in.methods-decorator';
 import { AuthMethod } from '../../../core/auth/models/auth.method';
 
@@ -27,12 +26,9 @@ export class LogInContainerComponent implements OnInit {
    */
   public objectInjector: Injector;
 
-  /**
-   * Initialize instance variables
-   *
-   * @param {Injector} injector
-   */
-  constructor(private injector: Injector) {
+  constructor(
+    protected injector: Injector,
+  ) {
   }
 
   /**
@@ -51,8 +47,8 @@ export class LogInContainerComponent implements OnInit {
   /**
    * Find the correct component based on the AuthMethod's type
    */
-  getAuthMethodContent(): string {
-      return rendersAuthMethodType(this.authMethod.authMethodType);
+  getAuthMethodContent(): Type<Component> {
+    return rendersAuthMethodType(this.authMethod.authMethodType);
   }
 
 }

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

@@ -1,11 +1,7 @@
 <ds-themed-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-themed-loading>
 <div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="px-4 py-3 mx-auto login-container">
-  <ng-container *ngFor="let authMethod of getOrderedAuthMethods(authMethods | async); let last = last">
-    <div [class.d-none]="contentRef.innerText?.trim().length === 0">
-      <div #contentRef>
-        <ds-log-in-container [authMethod]="authMethod" [isStandalonePage]="isStandalonePage"></ds-log-in-container>
-      </div>
-      <div *ngIf="!last" class="dropdown-divider my-2"></div>
-    </div>
+  <ng-container *ngFor="let authMethod of (authMethods | async); let last = last">
+    <ds-log-in-container [authMethod]="authMethod" [isStandalonePage]="isStandalonePage"></ds-log-in-container>
+    <div *ngIf="!last" class="dropdown-divider my-2"></div>
   </ng-container>
 </div>

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

@@ -11,12 +11,8 @@ import {
 import { hasValue } from '../empty.util';
 import { AuthService } from '../../core/auth/auth.service';
 import { CoreState } from '../../core/core-state.model';
-import { AuthMethodType } from '../../core/auth/models/auth.method-type';
+import { rendersAuthMethodType } from './methods/log-in.methods-decorator';
 
-/**
- * /users/sign-in
- * @class LogInComponent
- */
 @Component({
   selector: 'ds-log-in',
   templateUrl: './log-in.component.html',
@@ -57,8 +53,10 @@ export class LogInComponent implements OnInit {
   ngOnInit(): void {
     this.authMethods = this.store.pipe(
       select(getAuthenticationMethods),
-      // ignore the ip authentication method when it's returned by the backend
-      map((methods: AuthMethod[]) => methods.filter((authMethod: AuthMethod) => authMethod.authMethodType !== AuthMethodType.Ip)),
+      map((methods: AuthMethod[]) => methods
+        .filter((authMethod: AuthMethod) => rendersAuthMethodType(authMethod.authMethodType) !== undefined)
+        .sort((method1: AuthMethod, method2: AuthMethod) => method1.position - method2.position)
+      ),
     );
 
     // set loading
@@ -75,16 +73,4 @@ export class LogInComponent implements OnInit {
     });
   }
 
-  /**
-   * Returns an ordered list of {@link AuthMethod}s based on their position.
-   *
-   * @param authMethods The {@link AuthMethod}s to sort
-   */
-  getOrderedAuthMethods(authMethods: AuthMethod[] | null): AuthMethod[] {
-    if (hasValue(authMethods)) {
-      return [...authMethods].sort((method1: AuthMethod, method2: AuthMethod) => method1.position - method2.position);
-    } else {
-      return [];
-    }
-  }
 }

src/app/shared/log-in/methods/log-in.methods-decorator.ts

@@ -1,6 +1,7 @@
+import { Component, Type } from '@angular/core';
 import { AuthMethodType } from '../../../core/auth/models/auth.method-type';
 
-const authMethodsMap = new Map();
+const authMethodsMap: Map<AuthMethodType, Type<Component>> = new Map();
 
 export function renderAuthMethodFor(authMethodType: AuthMethodType) {
   return function decorator(objectElement: any) {
@@ -11,6 +12,6 @@ export function renderAuthMethodFor(authMethodType: AuthMethodType) {
   };
 }
 
-export function rendersAuthMethodType(authMethodType: AuthMethodType) {
+export function rendersAuthMethodType(authMethodType: AuthMethodType): Type<Component> | undefined {
   return authMethodsMap.get(authMethodType);
 }