import { map } from 'rxjs/operators'; import { Component, Inject, OnInit } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { AuthenticateAction, ResetAuthenticationMessagesAction } from '../../../../core/auth/auth.actions'; import { getAuthenticationError, getAuthenticationInfo, } from '../../../../core/auth/selectors'; import { isNotEmpty } from '../../../empty.util'; import { fadeOut } from '../../../animations/fade'; import { AuthMethodType } from '../../../../core/auth/models/auth.method-type'; import { renderAuthMethodFor } from '../log-in.methods-decorator'; import { AuthMethod } from '../../../../core/auth/models/auth.method'; import { AuthService } from '../../../../core/auth/auth.service'; import { HardRedirectService } from '../../../../core/services/hard-redirect.service'; import { CoreState } from '../../../../core/core-state.model'; /** * /users/sign-in * @class LogInPasswordComponent */ @Component({ selector: 'ds-log-in-password', templateUrl: './log-in-password.component.html', styleUrls: ['./log-in-password.component.scss'], animations: [fadeOut] }) @renderAuthMethodFor(AuthMethodType.Password) export class LogInPasswordComponent implements OnInit { /** * The authentication method data. * @type {AuthMethod} */ public authMethod: AuthMethod; /** * The error if authentication fails. * @type {Observable} */ public error: Observable; /** * Has authentication error. * @type {boolean} */ public hasError = false; /** * The authentication info message. * @type {Observable} */ public message: Observable; /** * Has authentication message. * @type {boolean} */ public hasMessage = false; /** * The authentication form. * @type {FormGroup} */ public form: UntypedFormGroup; /** * @constructor * @param {AuthMethod} injectedAuthMethodModel * @param {boolean} isStandalonePage * @param {AuthService} authService * @param {HardRedirectService} hardRedirectService * @param {FormBuilder} formBuilder * @param {Store} store */ constructor( @Inject('authMethodProvider') public injectedAuthMethodModel: AuthMethod, @Inject('isStandalonePage') public isStandalonePage: boolean, private authService: AuthService, private hardRedirectService: HardRedirectService, private formBuilder: UntypedFormBuilder, private store: Store ) { this.authMethod = injectedAuthMethodModel; } /** * Lifecycle hook that is called after data-bound properties of a directive are initialized. * @method ngOnInit */ public ngOnInit() { // set formGroup this.form = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required] }); // set error this.error = this.store.pipe(select( getAuthenticationError), map((error) => { this.hasError = (isNotEmpty(error)); return error; }) ); // set error this.message = this.store.pipe( select(getAuthenticationInfo), map((message) => { this.hasMessage = (isNotEmpty(message)); return message; }) ); } /** * Reset error or message. */ public resetErrorOrMessage() { if (this.hasError || this.hasMessage) { this.store.dispatch(new ResetAuthenticationMessagesAction()); this.hasError = false; this.hasMessage = false; } } /** * Submit the authentication form. * @method submit */ public submit() { this.resetErrorOrMessage(); // get email and password values const email: string = this.form.get('email').value; const password: string = this.form.get('password').value; // trim values email.trim(); password.trim(); if (!this.isStandalonePage) { this.authService.setRedirectUrl(this.hardRedirectService.getCurrentRoute()); } else { this.authService.setRedirectUrlIfNotSet('/'); } // dispatch AuthenticationAction this.store.dispatch(new AuthenticateAction(email, password)); // clear form this.form.reset(); } }