First functional prototype

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

@@ -3,7 +3,8 @@
     <div>
       <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>
+     <!-- <ds-log-in></ds-log-in>-->
+      <ds-log-in-container></ds-log-in-container>
     </div>
   </div>
 </div>

src/app/+login-page/login-page.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LoginPageComponent } from './login-page.component';
 import { LoginPageRoutingModule } from './login-page-routing.module';
-import {ShibbolethComponent} from './shibboleth/shibboleth.component';
+
 
 @NgModule({
   imports: [
@@ -13,8 +13,9 @@ import {ShibbolethComponent} from './shibboleth/shibboleth.component';
   ],
   declarations: [
     LoginPageComponent,
-   /* ShibbolethComponent*/
-  ]
+
+  ],
+
 })
 export class LoginPageModule {
 

src/app/core/auth/models/auth-method.model.ts

@@ -1,9 +1,33 @@
 export class AuthMethodModel {
   authMethodName: string;
   location?: string;
+  authMethodConstant: AuthMethodConstants
 
   constructor(authMethodName: string, location?: string) {
     this.authMethodName = authMethodName;
     this.location = location;
+    switch (authMethodName) {
+      case 'password': {
+        this.authMethodConstant = AuthMethodConstants.PASSWORD;
+        break;
+      }
+      case 'shibboleth': {
+        this.authMethodConstant = AuthMethodConstants.SHIBBOLETH;
+        break;
+      }
+      case 'ldap': {
+        this.authMethodConstant = AuthMethodConstants.LDAP;
+        break;
+      }
+      default: {
+        break;
+      }
+    }
   }
 }
+
+export enum AuthMethodConstants {
+  PASSWORD,
+  SHIBBOLETH,
+  LDAP
+}

src/app/core/auth/selectors.ts

@@ -107,6 +107,17 @@ const _getRegistrationError = (state: AuthState) => state.error;
  */
 const _getRedirectUrl = (state: AuthState) => state.redirectUrl;
 
+// @Art: these two  are the ones i added:
+const _getAuthenticationMethods = (state: AuthState) => state.authMethods;
+
+/**
+ * Returns the authentication methods enabled at the backend
+ * @function getAuthenticationMethods
+ * @param {AuthState} state
+ * @param {any} props
+ * @return {any}
+ */
+export const getAuthenticationMethods = createSelector(getAuthState, _getAuthenticationMethods);
 
 /**
  * Returns the authenticated user

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

@@ -3,7 +3,8 @@
     <div ngbDropdown placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="#" id="dropdownLogin" (click)="$event.preventDefault()" ngbDropdownToggle class="px-1">{{ 'nav.login' | translate }}</a>
       <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu aria-labelledby="dropdownLogin">
-        <ds-log-in></ds-log-in>
+      <!--  <ds-log-in></ds-log-in>-->
+        <ds-log-in-container></ds-log-in-container>
       </div>
     </div>
   </li>

src/app/shared/log-in/DynamicTestComponent/dynamic-test.component.html

@@ -0,0 +1 @@
+<h1>This is the DynamicTestComponent</h1>

src/app/shared/log-in/DynamicTestComponent/dynamic-test.component.ts

@@ -0,0 +1,21 @@
+/**
+ * /users/sign-in
+ * @class LogInComponent
+ */
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'ds-dynamic-test',
+  templateUrl: './dynamic-test.component.html',
+  styleUrls: ['./dynamic-test.component.scss'],
+
+})
+export class DynamicTestComponent {
+
+  /**
+   * @constructor
+   */
+  constructor() {
+    // console.log('constructor of DynamicTestComponent called');
+  }
+}

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

@@ -0,0 +1,12 @@
+<br>
+<div *ngFor="let method of dynamicLoginMethods | async; let i = index" >
+
+
+   <!-- <div class="dropdown-divider"></div>-->
+    <br *ngIf="i >= 1">
+
+
+
+  <ng-container *ngComponentOutlet="method.component; injector: objectInjector;">
+  </ng-container>
+</div>

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

@@ -0,0 +1,106 @@
+import {Component, Injector, OnDestroy, OnInit, ReflectiveInjector} from '@angular/core';
+import {AuthState} from '../../../core/auth/auth.reducer';
+import {Store} from '@ngrx/store';
+import {DynamicTestComponent} from '../DynamicTestComponent/dynamic-test.component';
+import {LogInComponent} from '../password/log-in.component';
+import {DynamicShibbolethComponent} from '../shibboleth/dynamic-shibboleth.component';
+import {getAuthenticationMethods} from '../../../core/auth/selectors';
+import {map, tap} from 'rxjs/operators';
+import {AppState} from '../../../app.reducer';
+import {Observable} from 'rxjs';
+import {DynamicLoginMethod} from './log-in-container.model';
+import {AuthMethodConstants, AuthMethodModel} from '../../../core/auth/models/auth-method.model';
+import {ShibbolethComponent} from '../../../+login-page/shibboleth/shibboleth.component';
+
+@Component({
+  selector: 'ds-log-in-container',
+  templateUrl: './log-in-container.component.html',
+  // styleUrls: ['./log-in.component.scss'],
+
+})
+export class LogInContainerComponent implements OnDestroy, OnInit {
+
+  private dynamicLoginMethods: Observable<DynamicLoginMethod[]>;
+  private authInfoInjector: Injector;
+  /**
+   * Injector to inject a section component with the @Input parameters
+   * @type {Injector}
+   */
+  public objectInjector: Injector;
+  private shibbolethUrl: string;
+
+  /**
+   * @constructor
+   * @param {AuthService} authService
+   * @param {FormBuilder} formBuilder
+   * @param {Store<State>} store
+   */
+  constructor(
+    private store: Store<AppState>,
+    private injector: Injector
+
+  ) {}
+
+  /**
+   * Lifecycle hook that is called after data-bound properties of a directive are initialized.
+   * @method ngOnInit
+   */
+  public ngOnInit() {
+
+    this.objectInjector = Injector.create({
+      providers: [
+        {provide: 'shibbolethUrlProvider', useFactory: () => (this.shibbolethUrl), deps: []},
+        // {provide: 'sectionDataProvider', useFactory: () => (this.sectionData), deps: []},
+        // {provide: 'submissionIdProvider', useFactory: () => (this.submissionId), deps: []},
+      ],
+      parent: this.injector
+    });
+
+    this.dynamicLoginMethods = this.store.select(getAuthenticationMethods).pipe(
+      map(((authMethods) => authMethods.map((authMethod) => {
+            switch (authMethod.authMethodConstant) {
+              case AuthMethodConstants.PASSWORD:
+                return new DynamicLoginMethod(authMethod.authMethodName, LogInComponent)
+                break;
+              case AuthMethodConstants.SHIBBOLETH:
+                // this.shibbolethUrl = authMethod.location;
+                this.shibbolethUrl = 'https://fis.tiss.tuwien.ac.at/Shibboleth.sso/Login?target=https://fis.tiss.tuwien.ac.at/shibboleth';
+                return new DynamicLoginMethod(authMethod.authMethodName, DynamicShibbolethComponent, authMethod.location)
+                break;
+              default:
+                break;
+            }
+          }
+          )
+        )
+      )
+    );
+
+  }
+
+  /* this.dynamicLoginMethods = this.dynamicLoginMethods = [
+     {
+       label: 'PasswordComponent',
+       component: LogInComponent
+     },
+     {
+       label: 'TestComponent',
+       component: DynamicTestComponent
+     },
+     {
+       label: 'ShibbolethComponent',
+       component: DynamicShibbolethComponent
+     },
+
+   ];
+ }*/
+
+  /**
+   *  Lifecycle hook that is called when a directive, pipe or service is destroyed.
+   * @method ngOnDestroy
+   */
+  public ngOnDestroy() {
+    console.log('ngOnDestroy() in LogInContainerComponent was called');
+  }
+
+}

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

@@ -0,0 +1,11 @@
+export class DynamicLoginMethod {
+  label: string;
+  component: any;
+  location?: string;
+
+  constructor(label, component, location?) {
+    this.label = label;
+    this.component = component;
+    this.location = location;
+  }
+}

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

@@ -40,13 +40,15 @@
    to make this work with your Shibboleth IdentityProvider and Service Provider. dspace.hostname = as in the
    backend config file "dspace.cfg".  Do not change the following parts of href:
     "/Shibboleth.sso/Login?target=" and "/shibboleth" at the end of href -->
-  <br>
+<!--  <br>
   <div>
       <a class="btn btn-lg btn-primary btn-block mt-2"
        href="https://fis.tiss.tuwien.ac.at/Shibboleth.sso/Login?target=https://fis.tiss.tuwien.ac.at/shibboleth"
        role="button"
     >HardCoded Shibb</a>
-  </div>
+  </div>-->
+
+
 
 
 

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

@@ -6,13 +6,13 @@ import { By } from '@angular/platform-browser';
 import { Store, StoreModule } from '@ngrx/store';
 
 import { LogInComponent } from './log-in.component';
-import { authReducer } from '../../core/auth/auth.reducer';
-import { EPersonMock } from '../testing/eperson-mock';
-import { EPerson } from '../../core/eperson/models/eperson.model';
+import { authReducer } from '../../../core/auth/auth.reducer';
+import { EPersonMock } from '../../testing/eperson-mock';
+import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { TranslateModule } from '@ngx-translate/core';
-import { AuthService } from '../../core/auth/auth.service';
-import { AuthServiceStub } from '../testing/auth-service-stub';
-import { AppState } from '../../app.reducer';
+import { AuthService } from '../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../testing/auth-service-stub';
+import { AppState } from '../../../app.reducer';
 
 describe('LogInComponent', () => {
 

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

@@ -7,19 +7,20 @@ import {Observable} from 'rxjs';
 import {
   AuthenticateAction,
   ResetAuthenticationMessagesAction, GetJWTafterShibbLoginAction
-} from '../../core/auth/auth.actions';
+} from '../../../core/auth/auth.actions';
 
 import {
   getAuthenticationError,
   getAuthenticationInfo,
   isAuthenticated,
   isAuthenticationLoading,
-} from '../../core/auth/selectors';
-import {CoreState} from '../../core/core.reducers';
+} from '../../../core/auth/selectors';
+import {CoreState} from '../../../core/core.reducers';
 
-import {isNotEmpty} from '../empty.util';
-import {fadeOut} from '../animations/fade';
-import {AuthService} from '../../core/auth/auth.service';
+import {isNotEmpty} from '../../empty.util';
+import {fadeOut} from '../../animations/fade';
+import {AuthService} from '../../../core/auth/auth.service';
+import {DynamicTestComponent} from '../DynamicTestComponent/dynamic-test.component';
 
 /**
  * /users/sign-in
@@ -81,6 +82,8 @@ export class LogInComponent implements OnDestroy, OnInit {
    */
   private alive = true;
 
+  dynamicLoginMethods: any;
+
   /**
    * @constructor
    * @param {AuthService} authService
@@ -91,7 +94,6 @@ export class LogInComponent implements OnDestroy, OnInit {
     private authService: AuthService,
     private formBuilder: FormBuilder,
     private store: Store<CoreState>,
-
   ) {
   }
 
@@ -100,7 +102,14 @@ export class LogInComponent implements OnDestroy, OnInit {
    * @method ngOnInit
    */
   public ngOnInit() {
-    console.log('log-in.component.ngOnInit() called');
+
+    this.dynamicLoginMethods =  this.dynamicLoginMethods =  [
+      {
+        label: 'TestComponent',
+        component: DynamicTestComponent
+      }
+    ];
+
     // set isAuthenticated
     this.isAuthenticated = this.store.pipe(select(isAuthenticated));
 

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

@@ -0,0 +1,23 @@
+<!--Change href to "https://dspace.hostname/Shibboleth.sso/Login?target=https://dspace.hostname/shibboleth"
+ to make this work with your Shibboleth IdentityProvider and Service Provider. dspace.hostname = as in the
+ backend config file "dspace.cfg".  Do not change the following parts of href:
+  "/Shibboleth.sso/Login?target=" and "/shibboleth" at the end of href -->
+<!--<br>
+<div>
+  <a class="btn btn-lg btn-primary btn-block mt-3" type="submit"
+     href="https://fis.tiss.tuwien.ac.at/Shibboleth.sso/Login?target=https://fis.tiss.tuwien.ac.at/shibboleth"
+     role="button"
+  >HardCoded Shibb</a>
+</div>-->
+
+
+<br>
+<div>
+  <a class="btn btn-lg btn-primary btn-block mt-3" type="submit"
+     [href]="injectedShibbolethUrl"
+     role="button"
+  >Shibboleth</a>
+</div>
+
+
+

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

@@ -0,0 +1,13 @@
+.form-login .form-control:focus {
+  z-index: 2;
+}
+.form-login input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-login input[type="password"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+

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

@@ -0,0 +1,22 @@
+/**
+ * /users/sign-in
+ * @class LogInComponent
+ */
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import {InputDecorator} from '@angular/core/src/metadata/directives';
+import {HttpClient} from '@angular/common/http';
+
+@Component({
+  selector: 'ds-dynamic-shibboleth',
+  templateUrl: './dynamic-shibboleth.component.html',
+  styleUrls: ['./dynamic-shibboleth.component.scss'],
+
+})
+export class DynamicShibbolethComponent {
+
+  /**
+   * @constructor
+   */
+  constructor(@Inject('shibbolethUrlProvider') public injectedShibbolethUrl: string) {
+  }
+}

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

@@ -1 +1 @@
-@import '../log-in/log-in.component.scss';
+@import '../log-in/password/log-in.component';

src/app/shared/shared.module.ts

@@ -47,7 +47,7 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
-import { LogInComponent } from './log-in/log-in.component';
+import { LogInComponent } from './log-in/password/log-in.component';
 import { AuthNavMenuComponent } from './auth-nav-menu/auth-nav-menu.component';
 import { LogOutComponent } from './log-out/log-out.component';
 import { FormComponent } from './form/form.component';
@@ -138,6 +138,10 @@ import { RoleDirective } from './roles/role.directive';
 import { UserMenuComponent } from './auth-nav-menu/user-menu/user-menu.component';
 import { ClaimedTaskActionsReturnToPoolComponent } from './mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component';
 import { ItemDetailPreviewFieldComponent } from './object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component';
+import {DynamicTestComponent} from './log-in/DynamicTestComponent/dynamic-test.component';
+import {LogInContainerComponent} from './log-in/log-in-container/log-in-container.component';
+import {s} from '@angular/core/src/render3';
+import {DynamicShibbolethComponent} from './log-in/shibboleth/dynamic-shibboleth.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -257,7 +261,9 @@ const COMPONENTS = [
   ItemSearchResultListElementComponent,
   TypedItemSearchResultListElementComponent,
   ItemTypeSwitcherComponent,
-  BrowseByComponent
+  BrowseByComponent,
+  LogInContainerComponent,
+  DynamicShibbolethComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -300,7 +306,11 @@ const ENTRY_COMPONENTS = [
   StartsWithTextComponent,
   PlainTextMetadataListElementComponent,
   ItemMetadataListElementComponent,
-  MetadataRepresentationListElementComponent
+  MetadataRepresentationListElementComponent,
+  DynamicTestComponent,
+  LogInComponent,
+  DynamicShibbolethComponent
+
 ];
 
 const SHARED_ITEM_PAGE_COMPONENTS = [