Better Validations

src/app/header/header-popup/login/login.component.html

@@ -34,6 +34,7 @@
                                    placeholder="Password">
                         </div>
                         <button class="btn"
+                                [disabled]="loginForm.invalid"
                                 type="submit">
                             Login
                         </button>

src/app/header/header-popup/login/login.component.ts

@@ -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]),
+            'username': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
-            'password': new FormControl(null, [Validators.required])
+            'password': new FormControl(null, [Validators.required, ValidatePasswordValidator])
         });
         this.errorMessage = null;
         this.authSubject = this.authService.authSubject.subscribe(

src/app/header/header-popup/signup/signup.component.html

@@ -53,6 +53,7 @@
                                 placeholder="Password">
                         </div>
                         <button class="btn"
+                                [disabled]="!signupForm.valid"
                             type="submit">
                             SignUp
                         </button>

src/app/header/header-popup/signup/signup.component.ts

@@ -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]),
+            'email': new FormControl(null, [Validators.required, ValidateEmailValidator]),
-            'username': new FormControl(null, [Validators.required]),
+            '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(

src/app/shared/validators/validate-email.validator.ts

@@ -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;
+}

src/app/shared/validators/validate-not-empty.validator.ts

@@ -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;
+}

src/app/shared/validators/validate-password.validator.ts

@@ -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;
+}