Filter out all the AuthMethods who don't have a component to render b…

…efore rendering LogInContainerComponent

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 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,11 +11,9 @@ import {
 import { hasValue } from '../empty.util';
 import { AuthService } from '../../core/auth/auth.service';
 import { CoreState } from '../../core/core-state.model';
+import { rendersAuthMethodType } from './methods/log-in.methods-decorator';
+import { map } from 'rxjs/operators';
 
-/**
- * /users/sign-in
- * @class LogInComponent
- */
 @Component({
   selector: 'ds-log-in',
   templateUrl: './log-in.component.html',
@@ -57,6 +55,10 @@ export class LogInComponent implements OnInit {
 
     this.authMethods = this.store.pipe(
       select(getAuthenticationMethods),
+      map((methods: AuthMethod[]) => methods
+        .filter((authMethod: AuthMethod) => rendersAuthMethodType(authMethod.authMethodType) !== undefined)
+        .sort((method1: AuthMethod, method2: AuthMethod) => method1.position - method2.position)
+      ),
     );
 
     // set loading
@@ -73,16 +75,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);
 }