import { Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { CustomValidators, TranslateService } from '@aztrix/helpers';
import { ErrorType } from '@aztrix/models';
import { BehaviorSubject, first } from 'rxjs';
import { ModeService } from '../services/mode.service';
import * as i0 from "@angular/core";
import * as i1 from "../services/mode.service";
import * as i2 from "@angular/material/legacy-snack-bar";
import * as i3 from "@aztrix/helpers";
import * as i4 from "@angular/common";
import * as i5 from "@aztrix/components/password-edit";
import * as i6 from "@aztrix/components/value-edit";
import * as i7 from "@angular/forms";
import * as i8 from "@aztrix/components/button";
import * as i9 from "@aztrix/components/snackbar";
import * as i10 from "@aztrix/components/login-value-form-error";
import * as i11 from "../mode-switch/mode-switch.component";
import * as i12 from "../auth-form-header/auth-form-header.component";
export class LoginFormComponent {
    constructor(modeService, _snackbar, _translate) {
        this.modeService = modeService;
        this._snackbar = _snackbar;
        this._translate = _translate;
        this.allowMobile = false;
        this.loading$ = new BehaviorSubject(false);
        this.ErrorType = ErrorType;
        this.errorType = ErrorType.NONE;
        this.showMobile = false;
        this.mobileForm = new FormControl('', [CustomValidators.validateLoginValue()]);
        this.emailForm = new FormControl('', [CustomValidators.validateLoginValue()]);
    }
    get usernameForm() {
        return this.form.get('username');
    }
    get passwordForm() {
        return this.form.get('password');
    }
    ngOnInit() {
        this.mobileForm.valueChanges.subscribe((value) => {
            this.usernameForm.setValue(value);
        });
        this.emailForm.valueChanges.subscribe((value) => {
            this.usernameForm.setValue(value);
        });
    }
    switchMobileOrEmail() {
        if (this.showMobile) {
            this.usernameForm.setValue(this.emailForm.value);
        }
        else {
            this.usernameForm.setValue(this.mobileForm.value);
        }
        this.showMobile = !this.showMobile;
    }
    _login() {
        this.errorType = ErrorType.NONE;
        this.form.disable();
        if (this.loading$.value === false) {
            this.loading$.next(true);
            this.login(this.form.value)
                .pipe(first())
                .subscribe({
                complete: () => {
                    this.loading$.next(false);
                    this.form.enable();
                },
                error: (response) => {
                    this.errorType = response.error;
                    if (response.error === ErrorType.LOGIN_INVALID_PASSWORD) {
                        this._clearPassword();
                    }
                    if (response.error === ErrorType.LOGIN_NOT_VERIFIED) {
                        this._snackbar.open(this._translate.instant('error.login.not-verified'), null, {
                            duration: 5000,
                        });
                        this.modeService.password = this.passwordForm.value;
                        this.modeService.setMode('verification', {
                            verificationValue: this.usernameForm.value,
                        });
                    }
                    this.loading$.next(false);
                    this.form.enable();
                },
            });
        }
    }
    _clearPassword() {
        this.passwordForm.reset();
        this.passwordForm.markAsUntouched();
    }
}
LoginFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LoginFormComponent, deps: [{ token: i1.ModeService }, { token: i2.MatLegacySnackBar }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
LoginFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: LoginFormComponent, selector: "ax-login-form", inputs: { form: "form", login: "login", allowMobile: "allowMobile" }, ngImport: i0, template: "<ax-auth-form-header\n  [title]=\"'label.login'\"\n  [subTexts]=\"['register.individual.complete.title' | translate]\"\n></ax-auth-form-header>\n\n<ax-snackbar\n  *ngIf=\"errorType !== ErrorType.NONE && errorType !== ErrorType.LOGIN_NOT_VERIFIED\"\n  [dismissible]=\"false\"\n  color=\"red\"\n>\n  <ng-container [ngSwitch]=\"errorType\">\n    <span *ngSwitchCase=\"ErrorType.FORBIDDEN\">{{\n      'error.login.too-many-requests' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.INVALID_LOGIN\">{{\n      'error.login.invalid.login' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.LOGIN_NOT_REGISTERED\">{{\n      'error.login.invalid.login' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.LOGIN_INVALID_PASSWORD\">{{\n      'error.login.invalid.password' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.INVALID_TOKEN\">{{ 'register.invalid.token' | translate }}</span>\n    <span *ngSwitchDefault>{{ 'error.default.title' | translate }}</span>\n  </ng-container>\n</ax-snackbar>\n\n<form class=\"login-form form\" name=\"login\" [formGroup]=\"form\" (ngSubmit)=\"_login()\">\n  <div *ngIf=\"errorType !== ErrorType.LOGIN_NOT_VERIFIED\">\n    <div class=\"value\">\n      <ax-value-edit\n        class=\"input\"\n        *ngIf=\"!showMobile\"\n        [form]=\"emailForm\"\n        [label]=\"'EMAIL' | propertyTypeLabel\"\n        type=\"EMAIL\"\n        name=\"login username\"\n        [errorsTemplate]=\"errorsTemplate\"\n        [autofocus]=\"true\"\n      ></ax-value-edit>\n      <ax-value-edit\n        class=\"input\"\n        *ngIf=\"showMobile\"\n        [form]=\"mobileForm\"\n        [label]=\"'PHONE' | propertyTypeLabel\"\n        type=\"PHONE\"\n        name=\"login username\"\n        [errorsTemplate]=\"errorsTemplate\"\n        [autofocus]=\"true\"\n      ></ax-value-edit>\n      <button\n        class=\"link\"\n        axButton\n        *ngIf=\"allowMobile\"\n        type=\"button\"\n        (click)=\"switchMobileOrEmail()\"\n      >\n        {{ 'login.use-' + (showMobile ? 'email' : 'mobile') | translate }}\n      </button>\n    </div>\n\n    <div class=\"value\">\n      <ax-password-edit\n        class=\"input\"\n        [form]=\"passwordForm\"\n        name=\"login password\"\n        profileType=\"individual\"\n        showToggle=\"true\"\n      ></ax-password-edit>\n      <button class=\"link\" axButton type=\"button\" (click)=\"modeService.setMode('reset')\">\n        {{ 'login.forgot.password' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <ax-button\n    class=\"action\"\n    filled\n    fullWidth\n    type=\"submit\"\n    color=\"accent\"\n    [loading]=\"loading$ | async\"\n    (click)=\"_login()\"\n  >\n    {{ 'label.login' | translate }}\n  </ax-button>\n</form>\n\n<ax-mode-switch></ax-mode-switch>\n\n<ng-template #errorsTemplate>\n  <ax-login-value-form-error\n    *ngIf=\"emailForm.touched && !showMobile\"\n    [form]=\"emailForm\"\n    [propertyType]=\"'EMAIL'\"\n  ></ax-login-value-form-error>\n  <ax-login-value-form-error\n    *ngIf=\"mobileForm.touched && showMobile\"\n    [form]=\"mobileForm\"\n    [propertyType]=\"'MOBILE_PHONE'\"\n  ></ax-login-value-form-error>\n</ng-template>\n", styles: [".login-form{display:flex;flex-direction:column}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n", ".link{text-transform:none;text-decoration:underline;height:1rem;line-height:1rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.PasswordEditComponent, selector: "ax-password-edit", inputs: ["profileType", "username", "showToggle", "forgotPasswordHint", "pendingLink", "saveInPasswordManager", "minLength"] }, { kind: "component", type: i6.ValueEditComponent, selector: "ax-value-edit", inputs: ["type", "numberConfig"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i8.ButtonComponent, selector: "ax-button" }, { kind: "component", type: i9.SnackbarComponent, selector: "ax-snackbar", inputs: ["type", "timeout", "dismissible", "open", "icon", "color"], outputs: ["didClose"] }, { kind: "component", type: i10.LoginValueFormErrorComponent, selector: "ax-login-value-form-error", inputs: ["form", "propertyType"] }, { kind: "component", type: i11.ModeSwitchComponent, selector: "ax-mode-switch" }, { kind: "component", type: i12.AuthFormHeaderComponent, selector: "ax-auth-form-header", inputs: ["title", "subTexts"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PropertyTypeLabelPipe, name: "propertyTypeLabel" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LoginFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-login-form', template: "<ax-auth-form-header\n  [title]=\"'label.login'\"\n  [subTexts]=\"['register.individual.complete.title' | translate]\"\n></ax-auth-form-header>\n\n<ax-snackbar\n  *ngIf=\"errorType !== ErrorType.NONE && errorType !== ErrorType.LOGIN_NOT_VERIFIED\"\n  [dismissible]=\"false\"\n  color=\"red\"\n>\n  <ng-container [ngSwitch]=\"errorType\">\n    <span *ngSwitchCase=\"ErrorType.FORBIDDEN\">{{\n      'error.login.too-many-requests' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.INVALID_LOGIN\">{{\n      'error.login.invalid.login' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.LOGIN_NOT_REGISTERED\">{{\n      'error.login.invalid.login' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.LOGIN_INVALID_PASSWORD\">{{\n      'error.login.invalid.password' | translate\n    }}</span>\n    <span *ngSwitchCase=\"ErrorType.INVALID_TOKEN\">{{ 'register.invalid.token' | translate }}</span>\n    <span *ngSwitchDefault>{{ 'error.default.title' | translate }}</span>\n  </ng-container>\n</ax-snackbar>\n\n<form class=\"login-form form\" name=\"login\" [formGroup]=\"form\" (ngSubmit)=\"_login()\">\n  <div *ngIf=\"errorType !== ErrorType.LOGIN_NOT_VERIFIED\">\n    <div class=\"value\">\n      <ax-value-edit\n        class=\"input\"\n        *ngIf=\"!showMobile\"\n        [form]=\"emailForm\"\n        [label]=\"'EMAIL' | propertyTypeLabel\"\n        type=\"EMAIL\"\n        name=\"login username\"\n        [errorsTemplate]=\"errorsTemplate\"\n        [autofocus]=\"true\"\n      ></ax-value-edit>\n      <ax-value-edit\n        class=\"input\"\n        *ngIf=\"showMobile\"\n        [form]=\"mobileForm\"\n        [label]=\"'PHONE' | propertyTypeLabel\"\n        type=\"PHONE\"\n        name=\"login username\"\n        [errorsTemplate]=\"errorsTemplate\"\n        [autofocus]=\"true\"\n      ></ax-value-edit>\n      <button\n        class=\"link\"\n        axButton\n        *ngIf=\"allowMobile\"\n        type=\"button\"\n        (click)=\"switchMobileOrEmail()\"\n      >\n        {{ 'login.use-' + (showMobile ? 'email' : 'mobile') | translate }}\n      </button>\n    </div>\n\n    <div class=\"value\">\n      <ax-password-edit\n        class=\"input\"\n        [form]=\"passwordForm\"\n        name=\"login password\"\n        profileType=\"individual\"\n        showToggle=\"true\"\n      ></ax-password-edit>\n      <button class=\"link\" axButton type=\"button\" (click)=\"modeService.setMode('reset')\">\n        {{ 'login.forgot.password' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <ax-button\n    class=\"action\"\n    filled\n    fullWidth\n    type=\"submit\"\n    color=\"accent\"\n    [loading]=\"loading$ | async\"\n    (click)=\"_login()\"\n  >\n    {{ 'label.login' | translate }}\n  </ax-button>\n</form>\n\n<ax-mode-switch></ax-mode-switch>\n\n<ng-template #errorsTemplate>\n  <ax-login-value-form-error\n    *ngIf=\"emailForm.touched && !showMobile\"\n    [form]=\"emailForm\"\n    [propertyType]=\"'EMAIL'\"\n  ></ax-login-value-form-error>\n  <ax-login-value-form-error\n    *ngIf=\"mobileForm.touched && showMobile\"\n    [form]=\"mobileForm\"\n    [propertyType]=\"'MOBILE_PHONE'\"\n  ></ax-login-value-form-error>\n</ng-template>\n", styles: [".login-form{display:flex;flex-direction:column}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n", ".link{text-transform:none;text-decoration:underline;height:1rem;line-height:1rem;padding:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ModeService }, { type: i2.MatLegacySnackBar }, { type: i3.TranslateService }]; }, propDecorators: { form: [{
                type: Input
            }], login: [{
                type: Input
            }], allowMobile: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 