Merge remote-tracking branch 'origin/master'

Author: ismaelramosmeta

src/app/modules/auth/pages/sign-up-page/sign-up-page.component.html

@@ -39,11 +39,10 @@
             >
               <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
             </button>
-            <mat-hint
-              >Must be minimum eight characters, at least one uppercase letter, one lowercase letter
+            <mat-hint [class.text-red]="passwordControls.invalid && passwordControls.touched"
+            >Must be minimum eight characters, at least one uppercase letter, one lowercase letter
               and one number</mat-hint
             >
-            <mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
           </mat-form-field>
         </p>
         <p>

src/app/modules/auth/pages/sign-up-page/sign-up-page.component.scss

@@ -55,3 +55,7 @@
     padding: 1rem;
   }
 }
+
+.text-red {
+  color: $red;
+}

src/app/modules/auth/pages/sign-up-page/sign-up-page.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { transition, trigger, useAnimation } from '@angular/animations';
 import { fadeIn } from 'ng-animate';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { AuthService } from '../../auth.service';
 import { UtilsService } from '~modules/core/services/utils.service';
 import { RoutesConfig } from '~app/configs/routes.config';
@@ -32,6 +32,7 @@ export class SignUpPageComponent {
     Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$'),
   ]);
   hide = true;
+  passwordControls: AbstractControl;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -45,6 +46,8 @@ export class SignUpPageComponent {
       email: this.email,
       password: this.password,
     });
+
+    this.passwordControls = this.signUpForm.controls['password'];
   }
 
   getErrorMessage(field: any): string | void {