import { Component } from '@angular/core';
import { ADMIN_UI_VERSION, AUTH_REDIRECT_PARAM, getAppConfig } from '@vendure/admin-ui/core';
import * as i0 from "@angular/core";
import * as i1 from "@vendure/admin-ui/core";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common/http";
import * as i4 from "@clr/angular";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "@angular/cdk/bidi";
import * as i8 from "@ngx-translate/core";
export class LoginComponent {
    constructor(authService, router, httpClient, localizationService) {
        this.authService = authService;
        this.router = router;
        this.httpClient = httpClient;
        this.localizationService = localizationService;
        this.username = '';
        this.password = '';
        this.rememberMe = false;
        this.version = ADMIN_UI_VERSION;
        this.brand = getAppConfig().brand;
        this.hideVendureBranding = getAppConfig().hideVendureBranding;
        this.hideVersion = getAppConfig().hideVersion;
        this.customImageUrl = getAppConfig().loginImageUrl;
        this.imageUrl = '';
        this.imageUnsplashUrl = '';
        this.imageLocation = '';
        this.imageCreator = '';
        this.imageCreatorUrl = '';
        if (this.customImageUrl) {
            this.imageUrl = this.customImageUrl;
        }
        else {
            this.loadImage();
        }
    }
    ngOnInit() {
        this.direction$ = this.localizationService.direction$;
    }
    logIn() {
        this.errorMessage = undefined;
        this.authService.logIn(this.username, this.password, this.rememberMe).subscribe(result => {
            switch (result.__typename) {
                case 'CurrentUser':
                    const redirect = this.getRedirectRoute();
                    this.router.navigateByUrl(redirect ? redirect : '/');
                    break;
                case 'InvalidCredentialsError':
                case 'NativeAuthStrategyError':
                    this.errorMessage = result.message;
                    break;
            }
        });
    }
    loadImage() {
        this.httpClient
            .get('https://login-image.vendure.io')
            .toPromise()
            .then(res => {
            this.updateImage(res);
        });
    }
    updateImage(res) {
        const user = res.user;
        const location = res.location;
        this.imageUrl = res.urls.regular + '?utm_source=Vendure+Login+Image&utm_medium=referral';
        this.imageCreator = user.name;
        this.imageLocation = location.name;
        this.imageCreatorUrl = user.links.html + '?utm_source=Vendure+Login+Image&utm_medium=referral';
        this.imageUnsplashUrl = res.links.html;
    }
    /**
     * Attempts to read a redirect param from the current url and parse it into a
     * route from which the user was redirected after a 401 error.
     */
    getRedirectRoute() {
        let redirectTo;
        const re = new RegExp(`${AUTH_REDIRECT_PARAM}=(.*)`);
        try {
            const redirectToParam = window.location.search.match(re);
            if (redirectToParam && 1 < redirectToParam.length) {
                redirectTo = atob(decodeURIComponent(redirectToParam[1]));
            }
        }
        catch (e) {
            // ignore
        }
        return redirectTo;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LoginComponent, deps: [{ token: i1.AuthService }, { token: i2.Router }, { token: i3.HttpClient }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: LoginComponent, selector: "vdr-login", ngImport: i0, template: "<div class=\"login-wrapper\" [dir]=\"direction$ | async\">\n    <div class=\"login-wrapper-inner\">\n        <div class=\"login-wrapper-image\">\n            <div class=\"login-wrapper-image-content\">\n                <div class=\"login-wrapper-image-title\">\n                    {{ 'common.login-image-title' | translate }}\n                </div>\n                <div class=\"login-wrapper-image-copyright\">\n                    <p *ngIf=\"imageCreator\" class=\"creator\">\n                        Photo by <a [href]=\"imageCreatorUrl\" target=\"_blank\">{{ imageCreator }}</a> on\n                        <a [href]=\"imageUnsplashUrl\" target=\"_blank\">Unsplash</a>\n                    </p>\n                    <p *ngIf=\"imageLocation\" class=\"location\">{{ imageLocation }}</p>\n                </div>\n            </div>\n            <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" [alt]=\"imageUrl\" />\n        </div>\n        <div class=\"login-wrapper-form\">\n            <p class=\"login-title\">\n                {{ 'common.login-title' | translate : { brand: hideVendureBranding ? brand : 'Vendure' } }}\n            </p>\n            <form class=\"login-form\">\n                <div class=\"login-group\">\n                    <input\n                        class=\"username\"\n                        type=\"text\"\n                        name=\"username\"\n                        id=\"login_username\"\n                        [(ngModel)]=\"username\"\n                        [placeholder]=\"'common.username' | translate\"\n                    />\n                    <input\n                        class=\"password\"\n                        name=\"password\"\n                        type=\"password\"\n                        id=\"login_password\"\n                        [(ngModel)]=\"password\"\n                        [placeholder]=\"'common.password' | translate\"\n                    />\n                    <clr-alert\n                        [clrAlertType]=\"'danger'\"\n                        [clrAlertClosable]=\"false\"\n                        [class.visible]=\"errorMessage\"\n                        class=\"login-error\"\n                    >\n                        <clr-alert-item>\n                            <span class=\"alert-text\">\n                                {{ errorMessage }}\n                            </span>\n                        </clr-alert-item>\n                    </clr-alert>\n                    <clr-checkbox-wrapper>\n                        <input\n                            type=\"checkbox\"\n                            clrCheckbox\n                            id=\"rememberme\"\n                            name=\"rememberme\"\n                            [(ngModel)]=\"rememberMe\"\n                        />\n                        <label>{{ 'common.remember-me' | translate }}</label>\n                    </clr-checkbox-wrapper>\n                    <div>\n                        <button\n                            type=\"submit\"\n                            class=\"button primary login-button\"\n                            (click)=\"logIn()\"\n                            [disabled]=\"!username || !password\"\n                        >\n                            {{ 'common.login' | translate }}\n                        </button>\n                    </div>\n                </div>\n                <div class=\"version\">\n                    <span *ngIf=\"brand\"\n                        >{{ brand }} <span *ngIf=\"!hideVendureBranding || !hideVersion\">-</span></span\n                    >\n                    <span *ngIf=\"!hideVendureBranding\">vendure</span>\n                    <span *ngIf=\"!hideVersion\">v{{ version }}</span>\n                </div>\n            </form>\n        </div>\n        <img class=\"login-wrapper-logo\" src=\"assets/logo-login.webp\" *ngIf=\"!hideVendureBranding\" />\n    </div>\n</div>\n", styles: [".login-wrapper{background:var(--color-login-page-bg);background-image:none;height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-wrapper .login-wrapper-inner{background:#fff;width:1120px;height:590px;display:flex;justify-content:flex-start;align-items:stretch;position:relative;border-radius:var(--border-radius);border:1px solid var(--color-weight-150);overflow:hidden}@media (max-width: 992px){.login-wrapper .login-wrapper-inner{flex-direction:column;height:auto;width:100%}}.login-wrapper .login-wrapper-inner .login-wrapper-image{height:100%;flex-grow:1;position:relative}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-image{height:300px}}.login-wrapper .login-wrapper-inner .login-wrapper-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;position:relative;z-index:1}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content{width:100%;height:100%;position:absolute;left:0;bottom:0;z-index:10;background:rgb(2,0,36);background:linear-gradient(180deg,rgba(2,0,36,0) 0%,rgba(0,0,0,.75) 100%);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:30px}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-title{font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:20px}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-title{font-size:1.2rem}}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright{opacity:.8}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright p{font-size:.6rem;color:#fff;margin:0!important}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright a{color:#fff;text-decoration:underline}.login-wrapper .login-wrapper-inner .login-wrapper-form{height:100%;width:400px;padding:40px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;box-shadow:0 20px 25px #0000001a;overflow:hidden;border-radius:5px;flex-shrink:0}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-form{height:auto;width:100%;padding:20px}}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-title{font-weight:700;font-size:1.2rem;margin-bottom:20px;color:var(--color-weight-600)}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group input.username,.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group input.password{display:block;width:100%;margin-bottom:15px;padding:12px 16px!important;background:#fff;font-size:14px;line-height:22px;color:#52667a;outline:none;-webkit-appearance:none}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group .btn{width:100%!important;margin-top:20px!important}.login-wrapper .login-wrapper-inner .login-wrapper-logo{width:60px;height:auto;position:absolute;right:20px;top:20px}.login-button{width:100%;margin-top:var(--space-unit);justify-content:center}.version{flex:1;flex-grow:1;display:flex;align-items:flex-end;justify-content:center;color:var(--color-grey-300)}.version span+span{margin-inline-start:5px}.login-error{max-height:0;overflow:hidden}.login-error.visible{max-height:46px;transition:max-height .2s;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation-delay:.2s;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.login-wrapper[dir=rtl] .login-wrapper-inner .login-wrapper-logo{right:auto;left:20px}.login-wrapper[dir=rtl] .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content{left:auto;right:0}\n"], dependencies: [{ kind: "component", type: i4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i4.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LoginComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-login', template: "<div class=\"login-wrapper\" [dir]=\"direction$ | async\">\n    <div class=\"login-wrapper-inner\">\n        <div class=\"login-wrapper-image\">\n            <div class=\"login-wrapper-image-content\">\n                <div class=\"login-wrapper-image-title\">\n                    {{ 'common.login-image-title' | translate }}\n                </div>\n                <div class=\"login-wrapper-image-copyright\">\n                    <p *ngIf=\"imageCreator\" class=\"creator\">\n                        Photo by <a [href]=\"imageCreatorUrl\" target=\"_blank\">{{ imageCreator }}</a> on\n                        <a [href]=\"imageUnsplashUrl\" target=\"_blank\">Unsplash</a>\n                    </p>\n                    <p *ngIf=\"imageLocation\" class=\"location\">{{ imageLocation }}</p>\n                </div>\n            </div>\n            <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" [alt]=\"imageUrl\" />\n        </div>\n        <div class=\"login-wrapper-form\">\n            <p class=\"login-title\">\n                {{ 'common.login-title' | translate : { brand: hideVendureBranding ? brand : 'Vendure' } }}\n            </p>\n            <form class=\"login-form\">\n                <div class=\"login-group\">\n                    <input\n                        class=\"username\"\n                        type=\"text\"\n                        name=\"username\"\n                        id=\"login_username\"\n                        [(ngModel)]=\"username\"\n                        [placeholder]=\"'common.username' | translate\"\n                    />\n                    <input\n                        class=\"password\"\n                        name=\"password\"\n                        type=\"password\"\n                        id=\"login_password\"\n                        [(ngModel)]=\"password\"\n                        [placeholder]=\"'common.password' | translate\"\n                    />\n                    <clr-alert\n                        [clrAlertType]=\"'danger'\"\n                        [clrAlertClosable]=\"false\"\n                        [class.visible]=\"errorMessage\"\n                        class=\"login-error\"\n                    >\n                        <clr-alert-item>\n                            <span class=\"alert-text\">\n                                {{ errorMessage }}\n                            </span>\n                        </clr-alert-item>\n                    </clr-alert>\n                    <clr-checkbox-wrapper>\n                        <input\n                            type=\"checkbox\"\n                            clrCheckbox\n                            id=\"rememberme\"\n                            name=\"rememberme\"\n                            [(ngModel)]=\"rememberMe\"\n                        />\n                        <label>{{ 'common.remember-me' | translate }}</label>\n                    </clr-checkbox-wrapper>\n                    <div>\n                        <button\n                            type=\"submit\"\n                            class=\"button primary login-button\"\n                            (click)=\"logIn()\"\n                            [disabled]=\"!username || !password\"\n                        >\n                            {{ 'common.login' | translate }}\n                        </button>\n                    </div>\n                </div>\n                <div class=\"version\">\n                    <span *ngIf=\"brand\"\n                        >{{ brand }} <span *ngIf=\"!hideVendureBranding || !hideVersion\">-</span></span\n                    >\n                    <span *ngIf=\"!hideVendureBranding\">vendure</span>\n                    <span *ngIf=\"!hideVersion\">v{{ version }}</span>\n                </div>\n            </form>\n        </div>\n        <img class=\"login-wrapper-logo\" src=\"assets/logo-login.webp\" *ngIf=\"!hideVendureBranding\" />\n    </div>\n</div>\n", styles: [".login-wrapper{background:var(--color-login-page-bg);background-image:none;height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-wrapper .login-wrapper-inner{background:#fff;width:1120px;height:590px;display:flex;justify-content:flex-start;align-items:stretch;position:relative;border-radius:var(--border-radius);border:1px solid var(--color-weight-150);overflow:hidden}@media (max-width: 992px){.login-wrapper .login-wrapper-inner{flex-direction:column;height:auto;width:100%}}.login-wrapper .login-wrapper-inner .login-wrapper-image{height:100%;flex-grow:1;position:relative}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-image{height:300px}}.login-wrapper .login-wrapper-inner .login-wrapper-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;position:relative;z-index:1}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content{width:100%;height:100%;position:absolute;left:0;bottom:0;z-index:10;background:rgb(2,0,36);background:linear-gradient(180deg,rgba(2,0,36,0) 0%,rgba(0,0,0,.75) 100%);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:30px}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-title{font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:20px}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-title{font-size:1.2rem}}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright{opacity:.8}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright p{font-size:.6rem;color:#fff;margin:0!important}.login-wrapper .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content .login-wrapper-image-copyright a{color:#fff;text-decoration:underline}.login-wrapper .login-wrapper-inner .login-wrapper-form{height:100%;width:400px;padding:40px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;box-shadow:0 20px 25px #0000001a;overflow:hidden;border-radius:5px;flex-shrink:0}@media (max-width: 992px){.login-wrapper .login-wrapper-inner .login-wrapper-form{height:auto;width:100%;padding:20px}}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-title{font-weight:700;font-size:1.2rem;margin-bottom:20px;color:var(--color-weight-600)}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group input.username,.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group input.password{display:block;width:100%;margin-bottom:15px;padding:12px 16px!important;background:#fff;font-size:14px;line-height:22px;color:#52667a;outline:none;-webkit-appearance:none}.login-wrapper .login-wrapper-inner .login-wrapper-form .login-group .btn{width:100%!important;margin-top:20px!important}.login-wrapper .login-wrapper-inner .login-wrapper-logo{width:60px;height:auto;position:absolute;right:20px;top:20px}.login-button{width:100%;margin-top:var(--space-unit);justify-content:center}.version{flex:1;flex-grow:1;display:flex;align-items:flex-end;justify-content:center;color:var(--color-grey-300)}.version span+span{margin-inline-start:5px}.login-error{max-height:0;overflow:hidden}.login-error.visible{max-height:46px;transition:max-height .2s;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation-delay:.2s;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.login-wrapper[dir=rtl] .login-wrapper-inner .login-wrapper-logo{right:auto;left:20px}.login-wrapper[dir=rtl] .login-wrapper-inner .login-wrapper-image .login-wrapper-image-content{left:auto;right:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.AuthService }, { type: i2.Router }, { type: i3.HttpClient }, { type: i1.LocalizationService }]; } });
//# sourceMappingURL=data:application/json;base64, 