projects/app-base-library/src/lib/angular/components/login/login-form.component.ts
selector | ab-login-form |
template |
|
Properties |
|
Methods |
Inputs |
Outputs |
constructor(fb: FormBuilder)
|
||||||
Parameters :
|
nameError
|
Default value: |
nameLabel
|
Default value: |
namePlaceholder
|
Default value: |
nameRegex
|
Default value: |
passwordError
|
Default value: |
passwordLabel
|
Default value: |
passwordPlaceholder
|
Default value: |
passwordRegex
|
Default value: |
submitError
|
Default value: |
submitLabel
|
Default value: |
translateService
|
Type: |
login
|
$event type: EventEmitter<any>
|
ngOnChanges | ||||
ngOnChanges(changes: )
|
||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
submitForm | ||||||
submitForm(form: any)
|
||||||
Parameters :
Returns :
void
|
translateForm |
translateForm()
|
Returns :
void
|
authenticated |
authenticated:
|
Type : boolean
|
Public fb |
fb:
|
Type : FormBuilder
|
labels |
labels:
|
Type : []
|
Default value : ['nameLabel','passwordLabel','submitLabel','submitError','passwordError','nameError','namePlaceholder','passwordPlaceholder']
|
loginForm |
loginForm:
|
Type : FormGroup
|
submitted |
submitted:
|
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">
<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;
// }
}