Merge branch 'fix-display-order-authentication-methods_contribute-7.4…

…' into fix-display-order-authentication-methods_contribute-7.6 # Conflicts: # src/app/shared/log-in/log-in.component.html # src/app/shared/log-in/log-in.component.scss
alexandrevryghem · Sep 26, 2023 · bc34511 · bc34511
2 parents 0905a53 + 0daae6d
commit bc34511
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/src/app/shared/log-in/container/log-in-container.component.spec.ts b/src/app/shared/log-in/container/log-in-container.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -17,6 +17,7 @@ import { AuthMethodType } from '../../../core/auth/models/auth.method-type';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
 import { AuthorizationDataServiceStub } from '../../testing/authorization-service.stub';
 import { RouterTestingModule } from '@angular/router/testing';
+import { MockElementRef } from '../../testing/element-ref.mock';
 
 describe('LogInContainerComponent', () => {
 
@@ -48,6 +49,7 @@ describe('LogInContainerComponent', () => {
       providers: [
         { provide: AuthService, useClass: AuthServiceStub },
         { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
+        { provide: ElementRef, useClass: MockElementRef },
         { provide: HardRedirectService, useValue: hardRedirectService },
         LogInContainerComponent
       ],

diff --git a/src/app/shared/log-in/container/log-in-container.component.ts b/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, ElementRef, Injector, Input, OnInit } from '@angular/core';
 import { rendersAuthMethodType } from '../methods/log-in.methods-decorator';
 import { AuthMethod } from '../../../core/auth/models/auth.method';
 
@@ -32,7 +31,10 @@ export class LogInContainerComponent implements OnInit {
    *
    * @param {Injector} injector
    */
-  constructor(private injector: Injector) {
+  constructor(
+    protected elRef: ElementRef,
+    protected injector: Injector,
+  ) {
   }
 
   /**
@@ -51,8 +53,12 @@ export class LogInContainerComponent implements OnInit {
   /**
    * Find the correct component based on the AuthMethod's type
    */
-  getAuthMethodContent(): string {
-      return rendersAuthMethodType(this.authMethod.authMethodType);
+  getAuthMethodContent(): Component {
+    const component = rendersAuthMethodType(this.authMethod.authMethodType);
+    if (component === undefined) {
+      this.elRef.nativeElement.classList.add('d-none');
+    }
+    return component;
   }
 
 }
diff --git a/src/app/shared/log-in/log-in.component.html b/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>
+    <ds-log-in-container [authMethod]="authMethod" [isStandalonePage]="isStandalonePage"></ds-log-in-container>
+    <div *ngIf="!last" class="dropdown-divider my-2"></div>
   </ng-container>
 </div>
diff --git a/src/app/shared/log-in/log-in.component.scss b/src/app/shared/log-in/log-in.component.scss
@@ -2,6 +2,10 @@
   max-width: 350px;
 }
 
+ds-log-in-container.d-none + .dropdown-divider {
+  display: none;
+}
+
 a {
   white-space: normal;
   padding: .25rem .75rem;

diff --git a/src/app/shared/log-in/methods/log-in.methods-decorator.ts b/src/app/shared/log-in/methods/log-in.methods-decorator.ts
@@ -1,6 +1,6 @@
 import { AuthMethodType } from '../../../core/auth/models/auth.method-type';
 
-const authMethodsMap = new Map();
+const authMethodsMap: Map<AuthMethodType, any> = new Map();
 
 export function renderAuthMethodFor(authMethodType: AuthMethodType) {
   return function decorator(objectElement: any) {