File

projects/app-base-library/src/lib/angular/modules/login/login-form.component.ts

Implements

OnInit OnChanges

Metadata

selector ab-login-form
template
<div *ngIf="!authenticated">


    <h2>FIXME: ab-login-form</h2>

    <ng-content></ng-content>

    <form [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm.value)">

        <div class="form-group"
             [ngClass]="{'has-error':!loginForm.controls['name'].valid && loginForm.controls['name'].touched}">
            <label>{{ nameLabel }}</label>
            <input name="name" class="form-control" type="text" required placeholder="{{ namePlaceholder }}"
                   [formControl]="loginForm.controls['name']">
            <div *ngIf="loginForm.controls['name'].hasError('pattern') && loginForm.controls['name'].touched"
                 class="form-error">{{ nameError }}.
            </div>
        </div>

        <div class="form-group"
             [ngClass]="{'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched}">
            <label>{{ passwordLabel }}</label>
            <input name="password" class="form-control" type="password" required placeholder="{{ passwordPlaceholder }}"
                   [formControl]="loginForm.controls['password']">
            <div *ngIf="loginForm.controls['password'].hasError('pattern') && loginForm.controls['password'].touched"
                 class="form-error">{{ passwordError }}.
            </div>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">{{ submitLabel }}
            </button>
            <div *ngIf="submitError !== ''"
                 class="form-error">{{ submitError }}.
            </div>
        </div>

    </form>
</div>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(fb: FormBuilder)
Parameters :
Name Type Optional
fb FormBuilder no

Inputs

nameError

Default value: 'NAME ERROR'

nameLabel

Default value: 'NAME'

namePlaceholder

Default value: ''

nameRegex

Default value: /[0-9a-zA-Z]{1,}/

passwordError

Default value: 'PASSWORD REQUIRED'

passwordLabel

Default value: 'PASSWORD'

passwordPlaceholder

Default value: ''

passwordRegex

Default value: /[0-9a-zA-Z]{1,}/

submitError

Default value: ''

submitLabel

Default value: 'SUBMIT'

translateService

Type: any

Outputs

login $event type: EventEmitter<any>

Methods

ngOnChanges
ngOnChanges(changes: )
Parameters :
Name Optional
changes no
Returns : void
ngOnInit
ngOnInit()
Returns : void
submitForm
submitForm(form: any)
Parameters :
Name Type Optional
form any no
Returns : void
translateForm
translateForm()
Returns : void

Properties

authenticated
authenticated: boolean
Type : boolean
Public fb
fb: FormBuilder
Type : FormBuilder
labels
labels: []
Type : []
Default value : ['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder']
loginForm
loginForm: FormGroup
Type : FormGroup
submitted
submitted: boolean
Type : boolean
import {Component, EventEmitter, OnInit, OnChanges, Input, Output} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
    selector: 'ab-login-form',
    template: `
        <div *ngIf="!authenticated">
            
            
            <h2>FIXME: ab-login-form</h2>

            <ng-content></ng-content>

            <form [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm.value)">

                <div class="form-group"
                     [ngClass]="{'has-error':!loginForm.controls['name'].valid && loginForm.controls['name'].touched}">
                    <label>{{ nameLabel }}</label>
                    <input name="name" class="form-control" type="text" required placeholder="{{ namePlaceholder }}"
                           [formControl]="loginForm.controls['name']">
                    <div *ngIf="loginForm.controls['name'].hasError('pattern') && loginForm.controls['name'].touched"
                         class="form-error">{{ nameError }}.
                    </div>
                </div>

                <div class="form-group"
                     [ngClass]="{'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched}">
                    <label>{{ passwordLabel }}</label>
                    <input name="password" class="form-control" type="password" required placeholder="{{ passwordPlaceholder }}"
                           [formControl]="loginForm.controls['password']">
                    <div *ngIf="loginForm.controls['password'].hasError('pattern') && loginForm.controls['password'].touched"
                         class="form-error">{{ passwordError }}.
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">{{ submitLabel }}
                    </button>
                    <div *ngIf="submitError !== ''"
                         class="form-error">{{ submitError }}.
                    </div>
                </div>

            </form>
        </div>
    `
})
export class LoginFormComponent implements OnInit, OnChanges {
    @Input() translateService: any;
    // @Input() nameRegex;
    @Input() nameRegex = /[0-9a-zA-Z]{1,}/;
    // @Input() passwordRegex;
    @Input() passwordRegex = /[0-9a-zA-Z]{1,}/;
    @Input() nameLabel = 'NAME';
    @Input() passwordLabel = 'PASSWORD';
    @Input() submitLabel = 'SUBMIT';
    @Input() submitError = '';
    @Input() passwordError = 'PASSWORD REQUIRED';
    @Input() nameError = 'NAME ERROR';
    @Input() namePlaceholder = '';
    @Input() passwordPlaceholder = '';
    @Output() login: EventEmitter<any> = new EventEmitter();

    loginForm: FormGroup;
    authenticated: boolean;
    submitted: boolean;
    labels = ['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder'];

    constructor(public fb: FormBuilder) { }

    ngOnInit() {
        // let nameValidators = [Validators.required];
        // let passwordValidators = [Validators.required];
        // if(this.nameRegex) {
        //     nameValidators.push(Validators.pattern(this.nameRegex));
        // }
        // if(this.passwordRegex) {
        //     passwordValidators.push(Validators.pattern(this.passwordRegex));
        // }
        this.loginForm = this.fb.group({
            'name': [null, Validators.pattern(this.nameRegex)],
            'password': [null, Validators.pattern(this.passwordRegex)],
        });
        this.translateForm();
    }

    ngOnChanges(changes) {
        this.translateForm();
    }

    submitForm(form: any) {
        this.submitted = true;
        this.login.emit(form);
    }

    translateForm() {
        if (this.translateService) {
            this.labels.forEach((label) => {
                if(this[label] && this[label] !== ''){
                    this[label] = this.translateService.instant(this[label]);
                }
            });
        }
    }

    // logout() {
    //     localStorage.removeItem('jwt');
    //     localStorage.removeItem('profile');
    //     this.authenticated = false;
    // }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""