import { Component } from '@angular/core';
import { Validators, UntypedFormControl } from '@angular/forms';
import { TechlifyFormComponentInterface } from '../base-model';
import { finalize } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./reset-password.service";
import * as i2 from "../core";
import * as i3 from "@angular/router";
import * as i4 from "../user";
import * as i5 from "@angular/forms";
import * as i6 from "../user-config";
import * as i7 from "@angular/common";
import * as i8 from "@angular/material/input";
import * as i9 from "@angular/material/form-field";
import * as i10 from "@angular/material/button";
import * as i11 from "@angular/material/icon";
import * as i12 from "../password-requirement-check/password-requirement-check/password-requirement-check.component";
export class ResetPasswordComponent extends TechlifyFormComponentInterface {
    constructor(resetPasswordService, alertService, router, currentUserService, fb, formValidatorService, userConfigService, activatedRoute) {
        super(formValidatorService);
        this.resetPasswordService = resetPasswordService;
        this.alertService = alertService;
        this.router = router;
        this.currentUserService = currentUserService;
        this.fb = fb;
        this.formValidatorService = formValidatorService;
        this.userConfigService = userConfigService;
        this.activatedRoute = activatedRoute;
        this.passwordHide = true;
        this.passwordConfirmationHide = true;
        this.isWorking = false;
        this.errorMessages = {
            otp: {
                required: 'OTP is required',
                email: 'Invalid email'
            },
            email: {
                required: 'Email is required',
                email: 'Invalid email'
            },
            password: {
                required: 'New password is required',
                capitalLetter: 'Password should contain at-least 1 capital letter',
                symbol: 'Password should contain at-least 1 symbol',
                digit: 'Password should contain at-least 1 digit',
                minLength: 'Should have minimum length',
            },
            password_confirmation: {
                required: 'Confirm password is required',
                passwordMismatch: 'Password should match'
            }
        };
        this.form = fb.group({
            otp: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: new UntypedFormControl('', Validators.required),
            password_confirmation: new UntypedFormControl('', Validators.required),
        });
        this.userConfig = this.userConfigService.getConfig();
    }
    ngOnInit() {
        this.activatedRoute.queryParamMap.subscribe((queryParamMap) => {
            this.form.patchValue({
                otp: queryParamMap.get('otp') ?? '',
                email: queryParamMap.get('email') ?? ''
            });
        });
    }
    submit() {
        if (!this.form.valid) {
            this.form.markAllAsTouched();
            return;
        }
        this.isWorking = true;
        this.resetPasswordService.store(this.form.value)
            .pipe(finalize(() => this.isWorking = false))
            .subscribe((res) => {
            this.isWorking = false;
            this.alertService.addAlert('Successfully changed your password', 'success');
            this.router.navigate(['/login']);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1.ResetPasswordService }, { token: i2.AlertService }, { token: i3.Router }, { token: i4.CurrentUserService }, { token: i5.UntypedFormBuilder }, { token: i2.FormValidatorService }, { token: i6.UserConfigService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "app-reset-password", usesInheritance: true, ngImport: i0, template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center mt-4\">Reset Password</h4>\n\n            <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>Email</mat-label>\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required readonly />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>OTP</mat-label>\n                        <input matInput formControlName=\"otp\" placeholder=\"OTP\" type=\"string\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('otp')\">{{getErrorMessage('otp')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>New Password</mat-label>\n                        <input matInput formControlName=\"password\" placeholder=\"New Password\"\n                            [type]=\"passwordHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n                        <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n                            <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"isFieldValid('password')\">\n                            {{getErrorMessage('password')}}\n                        </mat-error>\n                        <mat-hint>The new password you would like to use.</mat-hint>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8 mt-3\">\n                        <mat-label>Confirm Password</mat-label>\n                        <input matInput formControlName=\"password_confirmation\" placeholder=\"Confirm Password\"\n                            [type]=\"passwordConfirmationHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n                        <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\"\n                            type=\"button\">\n                            <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"isFieldValid('password_confirmation')\">\n                            {{getErrorMessage('password_confirmation')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"mt-4 row\">\n                    <techlify-password-requirement-check class=\"offset-2 col-8\" [password]=\"form.get('password').value\"\n                        [email]=\"form.get('email').value\"></techlify-password-requirement-check>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"offset-2 col-8 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                            Submit\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:100px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: ["password", "email"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-reset-password', template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center mt-4\">Reset Password</h4>\n\n            <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>Email</mat-label>\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required readonly />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>OTP</mat-label>\n                        <input matInput formControlName=\"otp\" placeholder=\"OTP\" type=\"string\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('otp')\">{{getErrorMessage('otp')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>New Password</mat-label>\n                        <input matInput formControlName=\"password\" placeholder=\"New Password\"\n                            [type]=\"passwordHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n                        <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n                            <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"isFieldValid('password')\">\n                            {{getErrorMessage('password')}}\n                        </mat-error>\n                        <mat-hint>The new password you would like to use.</mat-hint>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8 mt-3\">\n                        <mat-label>Confirm Password</mat-label>\n                        <input matInput formControlName=\"password_confirmation\" placeholder=\"Confirm Password\"\n                            [type]=\"passwordConfirmationHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n                        <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\"\n                            type=\"button\">\n                            <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"isFieldValid('password_confirmation')\">\n                            {{getErrorMessage('password_confirmation')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"mt-4 row\">\n                    <techlify-password-requirement-check class=\"offset-2 col-8\" [password]=\"form.get('password').value\"\n                        [email]=\"form.get('email').value\"></techlify-password-requirement-check>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"offset-2 col-8 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                            Submit\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:100px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"] }]
        }], ctorParameters: () => [{ type: i1.ResetPasswordService }, { type: i2.AlertService }, { type: i3.Router }, { type: i4.CurrentUserService }, { type: i5.UntypedFormBuilder }, { type: i2.FormValidatorService }, { type: i6.UserConfigService }, { type: i3.ActivatedRoute }] });
//# sourceMappingURL=data:application/json;base64, 