Move out new-user and forgot-password items menu from LogInPasswordComponent

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

@@ -1,7 +1,13 @@
 <ds-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-loading>
 <div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="form-login px-4 py-3">
-<ng-container *ngFor="let authMethodModel of (authMethodData | async)">
-  <ds-login-container
-    [authMethodModel]="authMethodModel"></ds-login-container>
-</ng-container>
+  <ng-container *ngFor="let authMethodModel of (authMethodModels | async); let i = index">
+    <div *ngIf="i === 1" class="text-center mt-2">
+      <span class="align-middle">{{"login.form.or-divider" | translate}}</span>
+    </div>
+    <ds-login-container [authMethodModel]="authMethodModel"></ds-login-container>
+  </ng-container>
+
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">{{"login.form.new-user" | translate}}</a>
+  <a class="dropdown-item" href="#">{{"login.form.forgot-password" | translate}}</a>
 </div>

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

@@ -17,7 +17,7 @@ export class LogInComponent implements OnInit, OnDestroy {
    * The authentication methods data
    * @type {AuthMethodModel[]}
    */
-  @Input() authMethodData: Observable<AuthMethodModel[]>;
+  @Input() authMethodModels: Observable<AuthMethodModel[]>;
 
   @Input() isStandalonePage: boolean;
 
@@ -47,7 +47,7 @@ export class LogInComponent implements OnInit, OnDestroy {
 
     // this.store.dispatch(new SetIsStandalonePageInAuthMethodsAction(this.isStandalonePage));
 
-    this.authMethodData = this.store.pipe(
+    this.authMethodModels = this.store.pipe(
       select(getAuthenticationMethods),
     );
 

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

@@ -24,9 +24,4 @@
 
   <button class="btn btn-lg btn-primary btn-block mt-3" type="submit"
           [disabled]="!form.valid">{{"login.form.submit" | translate}}</button>
-
-
-  <div class="dropdown-divider"></div>
-  <a class="dropdown-item" href="#">{{"login.form.new-user" | translate}}</a>
-  <a class="dropdown-item" href="#">{{"login.form.forgot-password" | translate}}</a>
 </form>

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

@@ -0,0 +1,130 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { By } from '@angular/platform-browser';
+import { Store, StoreModule } from '@ngrx/store';
+import { LogInPasswordComponent } from './log-in-password.component';
+import { EPerson } from '../../../../core/eperson/models/eperson.model';
+import { EPersonMock } from '../../../testing/eperson-mock';
+import { authReducer } from '../../../../core/auth/auth.reducer';
+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 { AuthMethodModel } from '../../../../core/auth/models/auth-method.model';
+import { AuthMethodType } from '../authMethods-type';
+
+describe('LogInPasswordComponent', () => {
+
+  let component: LogInPasswordComponent;
+  let fixture: ComponentFixture<LogInPasswordComponent>;
+  let page: Page;
+  let user: EPerson;
+
+  const authState = {
+    authenticated: false,
+    loaded: false,
+    loading: false,
+  };
+
+  beforeEach(() => {
+    user = EPersonMock;
+  });
+
+  beforeEach(async(() => {
+    // refine the test module by declaring the test component
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        StoreModule.forRoot(authReducer),
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        LogInPasswordComponent
+      ],
+      providers: [
+        { provide: AuthService, useClass: AuthServiceStub },
+        { provide: 'authMethodModelProvider', useValue: new AuthMethodModel(AuthMethodType.Password) }
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ]
+    })
+      .compileComponents();
+
+  }));
+
+  beforeEach(inject([Store], (store: Store<AppState>) => {
+    store
+      .subscribe((state) => {
+        (state as any).core = Object.create({});
+        (state as any).core.auth = authState;
+      });
+
+    // create component and test fixture
+    fixture = TestBed.createComponent(LogInPasswordComponent);
+
+    // get test component from the fixture
+    component = fixture.componentInstance;
+
+    // create page
+    page = new Page(component, fixture);
+
+    // verify the fixture is stable (no pending tasks)
+    fixture.whenStable().then(() => {
+      page.addPageElements();
+    });
+
+  }));
+
+  it('should create a FormGroup comprised of FormControls', () => {
+    fixture.detectChanges();
+    expect(component.form instanceof FormGroup).toBe(true);
+  });
+
+  it('should authenticate', () => {
+    fixture.detectChanges();
+
+    // set FormControl values
+    component.form.controls.email.setValue('user');
+    component.form.controls.password.setValue('password');
+
+    // submit form
+    component.submit();
+
+    // verify Store.dispatch() is invoked
+    expect(page.navigateSpy.calls.any()).toBe(true, 'Store.dispatch not invoked');
+  });
+
+});
+
+/**
+ * I represent the DOM elements and attach spies.
+ *
+ * @class Page
+ */
+class Page {
+
+  public emailInput: HTMLInputElement;
+  public navigateSpy: jasmine.Spy;
+  public passwordInput: HTMLInputElement;
+
+  constructor(private component: LogInPasswordComponent, private fixture: ComponentFixture<LogInPasswordComponent>) {
+    // use injector to get services
+    const injector = fixture.debugElement.injector;
+    const store = injector.get(Store);
+
+    // add spies
+    this.navigateSpy = spyOn(store, 'dispatch');
+  }
+
+  public addPageElements() {
+    const emailInputSelector = 'input[formcontrolname=\'email\']';
+    this.emailInput = this.fixture.debugElement.query(By.css(emailInputSelector)).nativeElement;
+
+    const passwordInputSelector = 'input[formcontrolname=\'password\']';
+    this.passwordInput = this.fixture.debugElement.query(By.css(passwordInputSelector)).nativeElement;
+  }
+}

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

@@ -1,28 +1,20 @@
-import { filter, map, takeWhile } from 'rxjs/operators';
-import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import {
-  AuthenticateAction,
-  ResetAuthenticationMessagesAction
-} from '../../../../core/auth/auth.actions';
+import { AuthenticateAction, ResetAuthenticationMessagesAction } from '../../../../core/auth/auth.actions';
 
-import {
-  getAuthenticationError,
-  getAuthenticationInfo,
-} from '../../../../core/auth/selectors';
+import { getAuthenticationError, getAuthenticationInfo, } 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 { AuthMethodType } from '../authMethods-type';
 import { renderAuthMethodFor } from '../authMethods-decorator';
 import { AuthMethodModel } from '../../../../core/auth/models/auth-method.model';
 
-
 /**
  * /users/sign-in
  * @class LogInPasswordComponent
@@ -70,7 +62,7 @@ export class LogInPasswordComponent implements OnInit {
 
   /**
    * @constructor
-   * @param {AuthService} authService
+   * @param {AuthMethodModel} injectedAuthMethodModel
    * @param {FormBuilder} formBuilder
    * @param {Store<State>} store
    */