All files / src/app/shared/components/login/login-form login-form.component.ts

85.71% Statements 12/14
69.56% Branches 16/23
75% Functions 3/4
85.71% Lines 12/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 954x 4x       4x 4x   4x                                       4x               2x       2x 2x       2x   2x       2x                                                                                      
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { Observable } from 'rxjs';
 
import { USER_REGISTRATION_LOGIN_TYPE } from 'ish-core/configurations/injection-keys';
import { AccountFacade } from 'ish-core/facades/account.facade';
import { HttpError } from 'ish-core/models/http-error/http-error.model';
import { InjectSingle } from 'ish-core/utils/injection';
 
/**
 * The Login Form Page Container displays a login form using the {@link LoginFormComponent} and signs the user in
 * Set the Url query parameter returnUrl as page Url after successful Logging in, e.g.
 * <a
    routerLink="/login"
    [queryParams]="{ returnUrl: '/account' }"
    class="my-account-link my-account-login"
    rel="nofollow"
  >
 *
 * @example:
 * <ish-login-form></ish-login-form>
 */
@Component({
  selector: 'ish-login-form',
  templateUrl: './login-form.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginFormComponent implements OnInit {
  @Input() labelClass: string;
  @Input() inputClass: string;
  @Input() forgotPasswordClass: string;
  @Input() signInClass: string;
 
  loginError$: Observable<HttpError>;
 
  form = new UntypedFormGroup({});
  fields: FormlyFieldConfig[];
 
  constructor(
    @Inject(USER_REGISTRATION_LOGIN_TYPE) private loginType: InjectSingle<typeof USER_REGISTRATION_LOGIN_TYPE>,
    private accountFacade: AccountFacade
  ) {}
 
  ngOnInit() {
    this.loginError$ = this.accountFacade.userError$;
 
    this.fields = this.getFields();
  }
 
  private getFields() {
    return [
      {
        key: 'login',
        type: this.loginType === 'email' ? 'ish-email-field' : 'ish-text-input-field',
        props: {
          label: this.loginType === 'email' ? 'account.login.email.label' : 'account.login.username.label',
          labelClass: this.labelClass || 'col-md-3',
          fieldClass: this.inputClass || 'col-md-6',
          required: true,
          hideRequiredMarker: true,
        },
        validation: {
          messages: {
            required:
              this.loginType === 'email' ? 'form.email.error.required' : 'account.login.username.error.required',
          },
        },
      },
      {
        key: 'password',
        type: 'ish-password-novalidate-field',
        props: {
          label: 'account.login.password.label',
          labelClass: this.labelClass || 'col-md-3',
          fieldClass: this.inputClass || 'col-md-6',
          required: true,
          hideRequiredMarker: true,
        },
        validation: {
          messages: {
            required: 'account.login.password.error.required',
          },
        },
      },
    ];
  }
 
  loginUser() {
    Iif (this.form.valid) {
      this.accountFacade.loginUser(this.form.value);
    }
  }
}