urbisoft-app-structure/esm2015/src/app/urbisoft-auth/components/urbisoft-login-form/urbisoft-login-form.component.js

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.2.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
export class UrbisoftLoginFormComponent {
    constructor(fb) {
        this.fb = fb;
        this.loginForm = new EventEmitter();
        this.loginWithGoogle = new EventEmitter();
        this.loginConfig = {
            title: 'Login',
            emailLabel: 'Email',
            emailPlaceHolder: 'user@user.com',
            passwordLabel: 'Password',
            passwordPlaceHolder: 'Password',
            loginButton: 'Login',
            noAccountSpan: 'Do not have account?',
            createAccountLabel: 'Create Account',
            createAccountLink: '/',
            loginWithGoogleButton: 'Login with Google',
            styles: {}
        };
    }
    ngOnInit() {
        this.formGroup = this.fb.group({
            email: ['', [Validators.required, Validators.email]],
            password: ['', Validators.required],
        });
    }
    login() {
        if (!this.formGroup.invalid) {
            const { email, password } = this.formGroup.value;
            this.loginForm.emit({ email, password });
        }
    }
    loginWithGoogleOnClick() {
        this.loginWithGoogle.emit(true);
    }
}
UrbisoftLoginFormComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-urbisoft-login-form',
                template: "<div class=\"loginComponent\"\r\n     [ngStyle]=\"{'background-color': loginConfig.styles?.backgroundColor, 'background-image': loginConfig.styles?.backgroundImage}\">\r\n\r\n  <div class=\"loginComponent-logo-main\">\r\n    <ng-content select=\"[main]\"></ng-content>\r\n  </div>\r\n\r\n\r\n  <mat-card class=\"loginComponent-form\"\r\n            [ngStyle]=\"{'background-color': loginConfig.styles?.backgroundColorCard, 'background-image': loginConfig.styles?.backgroundImageCard}\">\r\n    <mat-card-title>\r\n      <div class=\"loginComponent-form-logo-card\">\r\n        <ng-content select=\"[card]\"></ng-content>\r\n      </div>\r\n      <div class=\"loginComponent-form-title\">\r\n        <h2>{{ loginConfig.title }}</h2>\r\n      </div>\r\n    </mat-card-title>\r\n    <mat-card-content>\r\n      <form [formGroup]=\"formGroup\" (ngSubmit)=\"login()\">\r\n\r\n        <div class=\"loginComponent-form-inside-title\">\r\n          <h2>{{ loginConfig.title }}</h2>\r\n        </div>\r\n\r\n\r\n        <mat-form-field appearance=\"fill\">\r\n          <mat-label>{{loginConfig.emailLabel }}</mat-label>\r\n          <input matInput type=\"email\" placeholder=\"{{loginConfig.emailPlaceHolder }}\"\r\n                 formControlName=\"email\" required>\r\n          <mat-icon [ngClass]=\"{ 'mat-icon-valid': !formGroup.get('email').invalid }\" matSuffix>check_circle_outline\r\n          </mat-icon>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\">\r\n          <mat-label>{{loginConfig.passwordLabel }}</mat-label>\r\n          <input matInput type=\"password\" placeholder=\"{{loginConfig.passwordPlaceHolder}}\"\r\n                 formControlName=\"password\" required>\r\n          <mat-icon [ngClass]=\"{ 'mat-icon-valid': !formGroup.get('password').invalid }\" matSuffix>\r\n            check_circle_outline\r\n          </mat-icon>\r\n        </mat-form-field>\r\n\r\n        <button class=\"loginComponent-form-login-button\" [disabled]=\"formGroup.invalid\" type=\"submit\" mat-raised-button\r\n                color=\"primary\">{{loginConfig.loginButton }}</button>\r\n\r\n        <div class=\"loginComponent-form-or\">\r\n          <hr>\r\n          <span>OR</span>\r\n          <hr>\r\n        </div>\r\n\r\n\r\n        <div class=\"loginComponent-form-google\">\r\n          <cool-google-button color=\"light\" [disabled]=\"false\" (click)=\"loginWithGoogleOnClick()\">\r\n            {{loginConfig.loginWithGoogleButton}}\r\n          </cool-google-button>\r\n        </div>\r\n\r\n        <div class=\"loginComponent-form-account\">\r\n          <span class=\"text-small font-weight-semibold\">{{loginConfig.noAccountSpan }}</span>\r\n          <a routerLink=\"{{loginConfig.createAccountLink}}\"\r\n             class=\"text-black text-small\">{{loginConfig.createAccountLabel}}</a>\r\n        </div>\r\n\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n",
                styles: [".loginComponent{background-image:inherit;background-position:inherit;background-size:inherit;height:100%;position:relative}.loginComponent-logo-main{display:initial;left:15%;position:absolute;top:10%;transform:translate(-50%,-50%)}@media (max-width:425px){.loginComponent-logo-main{display:none}}.loginComponent-form{padding:32px}@media (min-width:425px){.loginComponent-form{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}}.loginComponent-form-google{margin-bottom:16px;text-align:center}.loginComponent-form-google cool-google-button{display:grid}.loginComponent-form-or{margin:24px 0;text-align:center}.loginComponent-form-or hr{display:inline-block;width:30%}.loginComponent-form-or span{font-weight:500;margin:0 8px}.loginComponent-form-account{text-align:center}.loginComponent-form-login-button{display:block;width:100%}.loginComponent-form-logo-card{display:none}@media (max-width:425px){.loginComponent-form-logo-card{display:initial}}.loginComponent-form-title{display:initial}@media (max-width:425px){.loginComponent-form-title{display:none}}.loginComponent-form-inside-title{color:#25434e;display:none}@media (max-width:425px){.loginComponent-form-inside-title{display:initial;margin-bottom:32px}}.loginComponent mat-card{height:380px;width:300px}@media (max-width:425px){.loginComponent mat-card{background-color:initial;height:-webkit-fill-available;width:auto}}.loginComponent .mat-form-field{min-width:300px;width:100%}.loginComponent mat-card-content,.loginComponent mat-card-title{display:flex;justify-content:center}.loginComponent mat-card-title{color:#25434e;margin-bottom:0}@media (max-width:425px){.loginComponent mat-card-title{margin-bottom:32px}}.loginComponent a,.loginComponent span{color:#25434e}.loginComponent a{margin-left:5.3333333333px;margin-top:5.3333333333px}"]
            },] }
];
UrbisoftLoginFormComponent.ctorParameters = () => [
    { type: FormBuilder }
];
UrbisoftLoginFormComponent.propDecorators = {
    loginForm: [{ type: Output }],
    loginWithGoogle: [{ type: Output }],
    loginConfig: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXJiaXNvZnQtbG9naW4tZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3VyYmlzb2Z0LWF1dGgvY29tcG9uZW50cy91cmJpc29mdC1sb2dpbi1mb3JtL3VyYmlzb2Z0LWxvZ2luLWZvcm0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDN0UsT0FBTyxFQUFDLFdBQVcsRUFBYSxVQUFVLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQVFsRSxNQUFNLE9BQU8sMEJBQTBCO0lBbUJyQyxZQUFvQixFQUFlO1FBQWYsT0FBRSxHQUFGLEVBQUUsQ0FBYTtRQWxCekIsY0FBUyxHQUE0QixJQUFJLFlBQVksRUFBYSxDQUFDO1FBQ25FLG9CQUFlLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUFDdEUsZ0JBQVcsR0FBeUI7WUFDM0MsS0FBSyxFQUFFLE9BQU87WUFDZCxVQUFVLEVBQUUsT0FBTztZQUNuQixnQkFBZ0IsRUFBRSxlQUFlO1lBQ2pDLGFBQWEsRUFBRSxVQUFVO1lBQ3pCLG1CQUFtQixFQUFFLFVBQVU7WUFDL0IsV0FBVyxFQUFFLE9BQU87WUFDcEIsYUFBYSxFQUFFLHNCQUFzQjtZQUNyQyxrQkFBa0IsRUFBRSxnQkFBZ0I7WUFDcEMsaUJBQWlCLEVBQUUsR0FBRztZQUN0QixxQkFBcUIsRUFBRSxtQkFBbUI7WUFDMUMsTUFBTSxFQUFFLEVBQUU7U0FDWCxDQUFDO0lBS0YsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDO1lBQzdCLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3BELFFBQVEsRUFBRSxDQUFDLEVBQUUsRUFBRSxVQUFVLENBQUMsUUFBUSxDQUFDO1NBQ3BDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTSxLQUFLO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFO1lBQzNCLE1BQU0sRUFBQyxLQUFLLEVBQUUsUUFBUSxFQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUM7WUFDL0MsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBQyxLQUFLLEVBQUUsUUFBUSxFQUFDLENBQUMsQ0FBQztTQUN4QztJQUNILENBQUM7SUFFTSxzQkFBc0I7UUFDM0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7O1lBM0NGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUseUJBQXlCO2dCQUNuQyxxNEZBQW1EOzthQUVwRDs7O1lBUE8sV0FBVzs7O3dCQVNoQixNQUFNOzhCQUNOLE1BQU07MEJBQ04sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7Rm9ybUJ1aWxkZXIsIEZvcm1Hcm91cCwgVmFsaWRhdG9yc30gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQge0xvZ2luQ29tcG9uZW50Q29uZmlnLCBMb2dpbkZvcm19IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvbG9naW4tZm9ybS5pbnRlcmZhY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtdXJiaXNvZnQtbG9naW4tZm9ybScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3VyYmlzb2Z0LWxvZ2luLWZvcm0uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3VyYmlzb2Z0LWxvZ2luLWZvcm0uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVXJiaXNvZnRMb2dpbkZvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBPdXRwdXQoKSBsb2dpbkZvcm06IEV2ZW50RW1pdHRlcjxMb2dpbkZvcm0+ID0gbmV3IEV2ZW50RW1pdHRlcjxMb2dpbkZvcm0+KCk7XHJcbiAgQE91dHB1dCgpIGxvZ2luV2l0aEdvb2dsZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBJbnB1dCgpIGxvZ2luQ29uZmlnOiBMb2dpbkNvbXBvbmVudENvbmZpZyA9IHtcclxuICAgIHRpdGxlOiAnTG9naW4nLFxyXG4gICAgZW1haWxMYWJlbDogJ0VtYWlsJyxcclxuICAgIGVtYWlsUGxhY2VIb2xkZXI6ICd1c2VyQHVzZXIuY29tJyxcclxuICAgIHBhc3N3b3JkTGFiZWw6ICdQYXNzd29yZCcsXHJcbiAgICBwYXNzd29yZFBsYWNlSG9sZGVyOiAnUGFzc3dvcmQnLFxyXG4gICAgbG9naW5CdXR0b246ICdMb2dpbicsXHJcbiAgICBub0FjY291bnRTcGFuOiAnRG8gbm90IGhhdmUgYWNjb3VudD8nLFxyXG4gICAgY3JlYXRlQWNjb3VudExhYmVsOiAnQ3JlYXRlIEFjY291bnQnLFxyXG4gICAgY3JlYXRlQWNjb3VudExpbms6ICcvJyxcclxuICAgIGxvZ2luV2l0aEdvb2dsZUJ1dHRvbjogJ0xvZ2luIHdpdGggR29vZ2xlJyxcclxuICAgIHN0eWxlczoge31cclxuICB9O1xyXG5cclxuICBmb3JtR3JvdXA6IEZvcm1Hcm91cDtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBmYjogRm9ybUJ1aWxkZXIpIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5mb3JtR3JvdXAgPSB0aGlzLmZiLmdyb3VwKHtcclxuICAgICAgZW1haWw6IFsnJywgW1ZhbGlkYXRvcnMucmVxdWlyZWQsIFZhbGlkYXRvcnMuZW1haWxdXSxcclxuICAgICAgcGFzc3dvcmQ6IFsnJywgVmFsaWRhdG9ycy5yZXF1aXJlZF0sXHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBsb2dpbigpOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy5mb3JtR3JvdXAuaW52YWxpZCkge1xyXG4gICAgICBjb25zdCB7ZW1haWwsIHBhc3N3b3JkfSA9IHRoaXMuZm9ybUdyb3VwLnZhbHVlO1xyXG4gICAgICB0aGlzLmxvZ2luRm9ybS5lbWl0KHtlbWFpbCwgcGFzc3dvcmR9KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBsb2dpbldpdGhHb29nbGVPbkNsaWNrKCk6IHZvaWQge1xyXG4gICAgdGhpcy5sb2dpbldpdGhHb29nbGUuZW1pdCh0cnVlKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==