urbisoft-app-structure/esm2015/src/app/urbisoft-auth/components/urbisoft-register-form/urbisoft-register-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 UrbisoftRegisterFormComponent {
    constructor(fb) {
        this.fb = fb;
        this.registerForm = new EventEmitter();
        this.continueWithGoogle = new EventEmitter();
        this.registerConfig = {
            title: 'Register',
            emailLabel: 'Email',
            emailPlaceHolder: 'user@user.com',
            passwordLabel: 'Password',
            passwordPlaceHolder: 'Password',
            nameLabel: 'Name',
            namePlaceHolder: 'Name',
            registerButton: 'Register',
            haveAccountSpan: 'Have an account?',
            loginLabel: 'Login',
            loginLink: '',
            continueWithGoogle: 'Continue With Google'
        };
    }
    ngOnInit() {
        this.formGroup = this.fb.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', Validators.required],
        });
    }
    createUser() {
        if (!this.formGroup.invalid) {
            const { name, email, password } = this.formGroup.value;
            this.registerForm.emit({ name, email, password });
        }
    }
    continueWithGoogleOnClick() {
        this.continueWithGoogle.emit(true);
    }
}
UrbisoftRegisterFormComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-urbisoft-register-form',
                template: "<div class=\"registerComponent\"\r\n     [ngStyle]=\"{'background-color': registerConfig.styles?.backgroundColor, 'background-image': registerConfig.styles?.backgroundImage}\">\r\n\r\n  <div class=\"registerComponent-logo-main\">\r\n    <ng-content select=\"[main]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-card class=\"registerComponent-form\"\r\n            [ngStyle]=\"{'background-color': registerConfig.styles?.backgroundColorCard, 'background-image': registerConfig.styles?.backgroundImageCard}\">\r\n    <mat-card-title>\r\n      <div class=\"registerComponent-form-logo-card\">\r\n        <ng-content select=\"[card]\"></ng-content>\r\n      </div>\r\n      <div class=\"registerComponent-form-title\">\r\n        <h2>{{registerConfig.title }}</h2>\r\n      </div>\r\n    </mat-card-title>\r\n\r\n    <mat-card-content>\r\n      <form [formGroup]=\"formGroup\" (ngSubmit)=\"createUser()\">\r\n\r\n        <div class=\"registerComponent-form-inside-title\">\r\n          <h2>{{ registerConfig.title }}</h2>\r\n        </div>\r\n\r\n        <mat-form-field appearance=\"fill\">\r\n          <mat-label>{{registerConfig.nameLabel }}</mat-label>\r\n          <input matInput type=\"text\" placeholder=\"{{registerConfig.namePlaceHolder }}\"\r\n                 formControlName=\"name\" required>\r\n          <mat-icon [ngClass]=\"{ 'mat-icon-valid': !formGroup.get('name').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>{{registerConfig.emailLabel }}</mat-label>\r\n          <input matInput type=\"email\" placeholder=\"{{registerConfig.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>{{registerConfig.passwordLabel }}</mat-label>\r\n          <input matInput type=\"password\" placeholder=\"{{registerConfig.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 [disabled]=\"formGroup.invalid\" type=\"submit\" mat-raised-button\r\n                color=\"primary\">{{registerConfig.registerButton }}</button>\r\n\r\n        <div class=\"registerComponent-form-or\">\r\n          <hr>\r\n          <span>OR</span>\r\n          <hr>\r\n        </div>\r\n\r\n        <div class=\"registerComponent-form-google\">\r\n          <cool-google-button color=\"light\" [disabled]=\"false\" (click)=\"continueWithGoogleOnClick()\">\r\n            {{registerConfig.continueWithGoogle}}\r\n          </cool-google-button>\r\n        </div>\r\n\r\n        <div class=\"registerComponent-form-account\">\r\n          <span class=\"text-small font-weight-semibold\">{{registerConfig.haveAccountSpan }}</span>\r\n          <a routerLink=\"{{registerConfig.loginLink}}\" class=\"text-black text-small\">{{registerConfig.loginLabel }}</a>\r\n        </div>\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n",
                styles: [".registerComponent{background-image:inherit;background-position:inherit;background-size:inherit;height:100vh;position:relative}.registerComponent-logo-main{display:initial;left:15%;position:absolute;top:10%;transform:translate(-50%,-50%)}@media (max-width:425px){.registerComponent-logo-main{display:none}}.registerComponent-form{padding:32px}@media (min-width:425px){.registerComponent-form{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}}.registerComponent-form-logo-card{display:none}@media (max-width:425px){.registerComponent-form-logo-card{display:initial}}.registerComponent-form-title{color:#25434e;display:initial}@media (max-width:425px){.registerComponent-form-title{display:none}}.registerComponent-form-inside-title{color:#25434e;display:none}@media (max-width:425px){.registerComponent-form-inside-title{display:initial;margin-bottom:32px}}.registerComponent-form-account{text-align:center}.registerComponent-form-google{margin-bottom:16px;text-align:center}.registerComponent-form-google cool-google-button{display:grid}.registerComponent-form-or{margin:24px 0;text-align:center}.registerComponent-form-or hr{display:inline-block;width:30%}.registerComponent-form-or span{font-weight:500;margin:0 8px}.registerComponent mat-card{height:450px;width:320px}@media (max-width:425px){.registerComponent mat-card{background-color:initial;height:-webkit-fill-available;width:auto}}.registerComponent .mat-form-field{min-width:300px;width:100%}.registerComponent mat-card-content,.registerComponent mat-card-title{display:flex;justify-content:center}.registerComponent mat-card-title{color:#25434e;margin-bottom:0}@media (max-width:425px){.registerComponent mat-card-title{margin-bottom:32px}}.registerComponent button{display:block;margin-bottom:32px;width:100%}.registerComponent a,.registerComponent span{color:#25434e}.registerComponent a{margin-left:5.3333333333px;margin-top:5.3333333333px}"]
            },] }
];
UrbisoftRegisterFormComponent.ctorParameters = () => [
    { type: FormBuilder }
];
UrbisoftRegisterFormComponent.propDecorators = {
    registerForm: [{ type: Output }],
    continueWithGoogle: [{ type: Output }],
    registerConfig: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXJiaXNvZnQtcmVnaXN0ZXItZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3VyYmlzb2Z0LWF1dGgvY29tcG9uZW50cy91cmJpc29mdC1yZWdpc3Rlci1mb3JtL3VyYmlzb2Z0LXJlZ2lzdGVyLWZvcm0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDN0UsT0FBTyxFQUFDLFdBQVcsRUFBYSxVQUFVLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQVFsRSxNQUFNLE9BQU8sNkJBQTZCO0lBb0J4QyxZQUFvQixFQUFlO1FBQWYsT0FBRSxHQUFGLEVBQUUsQ0FBYTtRQW5CekIsaUJBQVksR0FBK0IsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDNUUsdUJBQWtCLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUFDekUsbUJBQWMsR0FBNEI7WUFDakQsS0FBSyxFQUFFLFVBQVU7WUFDakIsVUFBVSxFQUFFLE9BQU87WUFDbkIsZ0JBQWdCLEVBQUUsZUFBZTtZQUNqQyxhQUFhLEVBQUUsVUFBVTtZQUN6QixtQkFBbUIsRUFBRSxVQUFVO1lBQy9CLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLGVBQWUsRUFBRSxNQUFNO1lBQ3ZCLGNBQWMsRUFBRSxVQUFVO1lBQzFCLGVBQWUsRUFBRSxrQkFBa0I7WUFDbkMsVUFBVSxFQUFFLE9BQU87WUFDbkIsU0FBUyxFQUFFLEVBQUU7WUFDYixrQkFBa0IsRUFBRSxzQkFBc0I7U0FDM0MsQ0FBQztJQUtGLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQztZQUM3QixJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUUsVUFBVSxDQUFDLFFBQVEsQ0FBQztZQUMvQixLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNwRCxRQUFRLEVBQUUsQ0FBQyxFQUFFLEVBQUUsVUFBVSxDQUFDLFFBQVEsQ0FBQztTQUNwQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU0sVUFBVTtRQUNmLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRTtZQUMzQixNQUFNLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQztZQUNyRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFDLENBQUMsQ0FBQztTQUNqRDtJQUNILENBQUM7SUFFTSx5QkFBeUI7UUFDOUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNyQyxDQUFDOzs7WUE3Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSw0QkFBNEI7Z0JBQ3RDLGcwR0FBc0Q7O2FBRXZEOzs7WUFQTyxXQUFXOzs7MkJBU2hCLE1BQU07aUNBQ04sTUFBTTs2QkFDTixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtGb3JtQnVpbGRlciwgRm9ybUdyb3VwLCBWYWxpZGF0b3JzfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7UmVnaXN0ZXJDb21wb25lbnRDb25maWcsIFJlZ2lzdGVyRm9ybX0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9yZWdpc3Rlci1mb3JtLmludGVyZmFjZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC11cmJpc29mdC1yZWdpc3Rlci1mb3JtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdXJiaXNvZnQtcmVnaXN0ZXItZm9ybS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdXJiaXNvZnQtcmVnaXN0ZXItZm9ybS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVcmJpc29mdFJlZ2lzdGVyRm9ybUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQE91dHB1dCgpIHJlZ2lzdGVyRm9ybTogRXZlbnRFbWl0dGVyPFJlZ2lzdGVyRm9ybT4gPSBuZXcgRXZlbnRFbWl0dGVyPFJlZ2lzdGVyRm9ybT4oKTtcclxuICBAT3V0cHV0KCkgY29udGludWVXaXRoR29vZ2xlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgQElucHV0KCkgcmVnaXN0ZXJDb25maWc6IFJlZ2lzdGVyQ29tcG9uZW50Q29uZmlnID0ge1xyXG4gICAgdGl0bGU6ICdSZWdpc3RlcicsXHJcbiAgICBlbWFpbExhYmVsOiAnRW1haWwnLFxyXG4gICAgZW1haWxQbGFjZUhvbGRlcjogJ3VzZXJAdXNlci5jb20nLFxyXG4gICAgcGFzc3dvcmRMYWJlbDogJ1Bhc3N3b3JkJyxcclxuICAgIHBhc3N3b3JkUGxhY2VIb2xkZXI6ICdQYXNzd29yZCcsXHJcbiAgICBuYW1lTGFiZWw6ICdOYW1lJyxcclxuICAgIG5hbWVQbGFjZUhvbGRlcjogJ05hbWUnLFxyXG4gICAgcmVnaXN0ZXJCdXR0b246ICdSZWdpc3RlcicsXHJcbiAgICBoYXZlQWNjb3VudFNwYW46ICdIYXZlIGFuIGFjY291bnQ/JyxcclxuICAgIGxvZ2luTGFiZWw6ICdMb2dpbicsXHJcbiAgICBsb2dpbkxpbms6ICcnLFxyXG4gICAgY29udGludWVXaXRoR29vZ2xlOiAnQ29udGludWUgV2l0aCBHb29nbGUnXHJcbiAgfTtcclxuXHJcbiAgZm9ybUdyb3VwOiBGb3JtR3JvdXA7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZmI6IEZvcm1CdWlsZGVyKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuZm9ybUdyb3VwID0gdGhpcy5mYi5ncm91cCh7XHJcbiAgICAgIG5hbWU6IFsnJywgVmFsaWRhdG9ycy5yZXF1aXJlZF0sXHJcbiAgICAgIGVtYWlsOiBbJycsIFtWYWxpZGF0b3JzLnJlcXVpcmVkLCBWYWxpZGF0b3JzLmVtYWlsXV0sXHJcbiAgICAgIHBhc3N3b3JkOiBbJycsIFZhbGlkYXRvcnMucmVxdWlyZWRdLFxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgY3JlYXRlVXNlcigpOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy5mb3JtR3JvdXAuaW52YWxpZCkge1xyXG4gICAgICBjb25zdCB7bmFtZSwgZW1haWwsIHBhc3N3b3JkfSA9IHRoaXMuZm9ybUdyb3VwLnZhbHVlO1xyXG4gICAgICB0aGlzLnJlZ2lzdGVyRm9ybS5lbWl0KHtuYW1lLCBlbWFpbCwgcGFzc3dvcmR9KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBjb250aW51ZVdpdGhHb29nbGVPbkNsaWNrKCk6IHZvaWQge1xyXG4gICAgdGhpcy5jb250aW51ZVdpdGhHb29nbGUuZW1pdCh0cnVlKTtcclxuICB9XHJcbn1cclxuIl19