Better Validations
This commit is contained in:
@@ -34,6 +34,7 @@
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<button class="btn"
|
||||
[disabled]="loginForm.invalid"
|
||||
type="submit">
|
||||
Login
|
||||
</button>
|
||||
|
||||
@@ -10,6 +10,8 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
|
||||
import UserChecker from 'src/app/shared/model/user/user.checker';
|
||||
import { User } from 'src/app/shared/model/user/user.model';
|
||||
import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
|
||||
import {ValidatePasswordValidator} from "../../../shared/validators/validate-password.validator";
|
||||
import {ValidateNotEmptyValidator} from "../../../shared/validators/validate-not-empty.validator";
|
||||
|
||||
|
||||
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
|
||||
@@ -123,8 +125,8 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loginForm = new FormGroup({
|
||||
'username': new FormControl(null, [Validators.required]),
|
||||
'password': new FormControl(null, [Validators.required])
|
||||
'username': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
|
||||
'password': new FormControl(null, [Validators.required, ValidatePasswordValidator])
|
||||
});
|
||||
this.errorMessage = null;
|
||||
this.authSubject = this.authService.authSubject.subscribe(
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<button class="btn"
|
||||
[disabled]="!signupForm.valid"
|
||||
type="submit">
|
||||
SignUp
|
||||
</button>
|
||||
|
||||
@@ -10,6 +10,9 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
|
||||
import UserChecker from 'src/app/shared/model/user/user.checker';
|
||||
import { User } from 'src/app/shared/model/user/user.model';
|
||||
import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
|
||||
import {ValidateEmailValidator} from "../../../shared/validators/validate-email.validator";
|
||||
import {ValidatePasswordValidator} from "../../../shared/validators/validate-password.validator";
|
||||
import {ValidateNotEmptyValidator} from "../../../shared/validators/validate-not-empty.validator";
|
||||
|
||||
|
||||
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
|
||||
@@ -125,12 +128,12 @@ export class SignupComponent implements OnInit {
|
||||
|
||||
ngOnInit(): void {
|
||||
this.signupForm = new FormGroup({
|
||||
'fullname': new FormControl(null, [Validators.required]),
|
||||
'fullname': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
|
||||
// Create a Email Validator
|
||||
'email': new FormControl(null, [Validators.required]),
|
||||
'username': new FormControl(null, [Validators.required]),
|
||||
'email': new FormControl(null, [Validators.required, ValidateEmailValidator]),
|
||||
'username': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
|
||||
// Create a Password Validator
|
||||
'password': new FormControl(null, [Validators.required])
|
||||
'password': new FormControl(null, [Validators.required, ValidatePasswordValidator])
|
||||
});
|
||||
this.errorMessage = null;
|
||||
this.authSubject = this.authService.authSubject.subscribe(
|
||||
|
||||
11
src/app/shared/validators/validate-email.validator.ts
Normal file
11
src/app/shared/validators/validate-email.validator.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import {AbstractControl} from "@angular/forms";
|
||||
|
||||
export function ValidateEmailValidator(control: AbstractControl) {
|
||||
const email = control.value;
|
||||
const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
|
||||
const emailValid = emailRegex.test(email);
|
||||
if (!emailValid) {
|
||||
return { invalidEmail: true };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import {AbstractControl} from "@angular/forms";
|
||||
|
||||
export function ValidateNotEmptyValidator(control: AbstractControl) {
|
||||
const value = control.value;
|
||||
if (!value || value.length === 0) {
|
||||
return { invalidNotEmpty: true };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
11
src/app/shared/validators/validate-password.validator.ts
Normal file
11
src/app/shared/validators/validate-password.validator.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import {AbstractControl} from "@angular/forms";
|
||||
|
||||
export function ValidatePasswordValidator(control: AbstractControl) {
|
||||
var password = control.value;
|
||||
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/g;
|
||||
var passwordValid = passwordRegex.test(password);
|
||||
if (!passwordValid) {
|
||||
return { invalidPassword: true };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user