From 0daae6de23466c08c8cbd595850803930c784779 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 27 Sep 2023 00:51:39 +0200
Subject: [PATCH] Hide the empty login containers using ElementRef

---
 .../container/log-in-container.component.spec.ts |  4 +++-
 .../container/log-in-container.component.ts      | 16 +++++++++++-----
 src/app/shared/log-in/log-in.component.html      |  8 ++------
 src/app/shared/log-in/log-in.component.scss      |  4 ++++
 .../log-in/methods/log-in.methods-decorator.ts   |  2 +-
 5 files changed, 21 insertions(+), 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
index 4700cf93071..c7fb11f658a 100644
--- 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
index f6a08a1e1ec..14018c8c0c5 100644
--- 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
index 173e0f8e303..bb38e707359 100644
--- 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 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
index caaeef3dc76..5c403764cd1 100644
--- a/src/app/shared/log-in/log-in.component.scss
+++ b/src/app/shared/log-in/log-in.component.scss
@@ -1,3 +1,7 @@
 .login-container {
   max-width: 350px;
 }
+
+ds-log-in-container.d-none + .dropdown-divider {
+  display: none;
+}
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
index 0614bdeb511..df993dfc2ef 100644
--- 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) {