feat: show more explicit error for too short password

farscrl · Nov 10, 2023 · 4238731 · 4238731
1 parent 9d9d83f
commit 4238731
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 deletions.
diff --git a/src/app/user-area/pages/change-password/change-password.component.html b/src/app/user-area/pages/change-password/change-password.component.html
@@ -31,7 +31,12 @@ <h1>Midar il pled-clav</h1>
                    formControlName="newPassword"
                    [class.is-invalid]="isFieldInvalid('newPassword')">
             <div class="invalid-feedback" *ngIf="isFieldInvalid('newPassword')">
-                Endatescha tes pled-clav nov cun almain 8 caracters.
+                <ng-container *ngIf="isFieldError('newPassword', 'required')">
+                    Endatescha in pled-clav nov.
+                </ng-container>
+                <ng-container *ngIf="isFieldError('newPassword', 'minlength')">
+                    Il pled-clav nov sto avair ina lunghezza dad almain 8 caracters.
+                </ng-container>
             </div>
         </div>
 

diff --git a/src/app/user-area/pages/change-password/change-password.component.ts b/src/app/user-area/pages/change-password/change-password.component.ts
@@ -26,6 +26,11 @@ export class ChangePasswordComponent {
         return this.f.get(fieldName)!.invalid && (this.f.get(fieldName)!.dirty || this.f.get(fieldName)!.touched);
     }
 
+    isFieldError(fieldName: string, errorName: string) {
+        const field = this.f.get(fieldName)!;
+        return field.hasError(errorName);
+    }
+
     update() {
         this.f.markAllAsTouched();
 

diff --git a/src/app/user-area/pages/confirm-password/confirm-password.component.html b/src/app/user-area/pages/confirm-password/confirm-password.component.html
@@ -22,7 +22,12 @@ <h1>Midar tes pled-clav</h1>
                 <input type="password" id="password" name="password" class="form-control" formControlName="password"
                        [class.is-invalid]="isFieldInvalid('password')">
                 <div class="invalid-feedback" *ngIf="isFieldInvalid('password')">
-                    Endatescha tes pled-clav.
+                    <ng-container *ngIf="isFieldError('password', 'required')">
+                        Endatescha in pled-clav.
+                    </ng-container>
+                    <ng-container *ngIf="isFieldError('password', 'minlength')">
+                        Il pled-clav sto avair ina lunghezza dad almain 8 caracters.
+                    </ng-container>
                 </div>
             </div>
 

diff --git a/src/app/user-area/pages/confirm-password/confirm-password.component.ts b/src/app/user-area/pages/confirm-password/confirm-password.component.ts
@@ -25,7 +25,7 @@ export class ConfirmPasswordComponent {
         private fb: FormBuilder,
     ) {
         this.f = this.fb.group({
-            password: ['', [Validators.required]],
+            password: ['', [Validators.required, Validators.minLength(8)]],
         });
     }
 
@@ -68,4 +68,9 @@ export class ConfirmPasswordComponent {
     isFieldInvalid(fieldName: string) {
         return this.f.get(fieldName)!.invalid && (this.f.get(fieldName)!.dirty || this.f.get(fieldName)!.touched);
     }
+
+    isFieldError(fieldName: string, errorName: string) {
+        const field = this.f.get(fieldName)!;
+        return field.hasError(errorName);
+    }
 }
diff --git a/src/app/user-area/pages/login/login.component.ts b/src/app/user-area/pages/login/login.component.ts
@@ -48,13 +48,13 @@ export class LoginComponent implements OnInit, OnDestroy {
                 this.errorMessage = {
                     type: 'danger',
                     title: 'Conto betg activà',
-                    message: "Tes conto n'è betg activ. Controllescha sche ti has confermà tia adressa dad e-mail"
+                    message: "Tes conto n'è betg activ. Controllescha sche ti has confermà tia adressa dad e-mail."
                 };
             } else {
                 this.errorMessage = {
                     type: 'danger',
                     title: 'Errur',
-                    message: "Betg pussaivel da s'annunziar cun questas datas"
+                    message: "Betg pussaivel da s'annunziar cun questas datas."
                 };
             }
             console.error(error);

diff --git a/src/app/user-area/pages/register/register.component.html b/src/app/user-area/pages/register/register.component.html
@@ -43,7 +43,12 @@ <h1>Crear in nov conto d’utilisad*ra</h1>
             <input type="password" id="password" name="password" class="form-control" formControlName="password"
                    [class.is-invalid]="isFieldInvalid('password')">
             <div class="invalid-feedback" *ngIf="isFieldInvalid('password')">
-                Endatescha p.pl. ina pled-clav cun almain 8 caracters.
+                <ng-container *ngIf="isFieldError('password', 'required')">
+                    Endatescha in pled-clav.
+                </ng-container>
+                <ng-container *ngIf="isFieldError('password', 'minlength')">
+                    Il pled-clav sto avair ina lunghezza dad almain 8 caracters.
+                </ng-container>
             </div>
         </div>
 

diff --git a/src/app/user-area/pages/register/register.component.ts b/src/app/user-area/pages/register/register.component.ts
@@ -67,6 +67,11 @@ export class RegisterComponent implements OnInit {
         return this.f.get(fieldName)!.invalid && (this.f.get(fieldName)!.dirty || this.f.get(fieldName)!.touched);
     }
 
+    isFieldError(fieldName: string, errorName: string) {
+        const field = this.f.get(fieldName)!;
+        return field.hasError(errorName);
+    }
+
     private initForm() {
         this.f = this.fb.group({
             firstName: ['', Validators.required],