feat: improve password validation feedback display

client/src/app/app.component.ts

@@ -18,7 +18,7 @@ export class AppComponent {
   #sanitizer = inject(DomSanitizer);
 
   constructor() {
-    for (const name of ["visibility", "visibility_off", "info"]) {
+    for (const name of ["error", "info", "visibility", "visibility_off"]) {
       this.#registerIcon(name);
     }
 

client/src/app/components/password-strength-meter/password-strength-meter.component.html

@@ -15,11 +15,18 @@
     <div [style.left.%]="score() * 25" class="meter-empty"></div>
   </div>
 </div>
+@if (warning()) {
+  <div class="warning mat-body-medium">
+    <!-- I'm using the error icon here purely for aesthetic reasons. -->
+    <mat-icon class="icon" svgIcon="error" />
+    <span>{{ warning() }}</span>
+  </div>
+}
 @if (suggestions().length) {
   <ul class="suggestion-list">
     @for (suggestion of suggestions(); track $index) {
       <li class="suggestion mat-body-medium">
-        <mat-icon class="suggestion-icon" svgIcon="info" />
+        <mat-icon class="icon" svgIcon="info" />
         <span>{{ suggestion }}</span>
       </li>
     }

client/src/app/components/password-strength-meter/password-strength-meter.component.scss

@@ -37,7 +37,8 @@
   background: linear-gradient(to right, #01d5e2, #114ef7);
 }
 
-.suggestion {
+.suggestion,
+.warning {
   display: block;
 
   &-list {
@@ -49,7 +50,7 @@
   }
 }
 
-.suggestion-icon {
+.icon {
   $size: 1em;
 
   width: $size;

client/src/app/components/password-strength-meter/password-strength-meter.component.ts

@@ -28,6 +28,7 @@ export class PasswordStrengthMeterComponent {
   isPasswordValid = computed(() => this.score() >= 3);
   suggestions = computed(() => this.result().feedback.suggestions);
   tooltip = computed(() => this.#tooltipText);
+  warning = computed(() => this.result().feedback.warning);
 
   get #scoreLabel(): string {
     const score = this.score();

client/src/app/pipes/password-error.pipe.ts

@@ -12,7 +12,7 @@ export class PasswordErrorPipe implements PipeTransform {
 
     if (errors["required"]) return "This field is required";
     if (errors["maxlength"]) return "Maximum length exceeded";
-    if (errors["strength"]) return errors["strength"];
+    if (errors["strength"]) return "Vulnerable password";
 
     throw new Error(`Unexpected validation error: ${JSON.stringify(errors)}`);
   }

client/src/app/validators/password-validator-factory.ts

@@ -1,14 +1,8 @@
 import { AbstractControl, ValidationErrors } from "@angular/forms";
 import { ZXCVBN_MIN_SCORE } from "_server/constants/password";
-import { ZxcvbnResult } from "_server/types/zxcvbn-result";
 import { map, Observable, of } from "rxjs";
 import { PasswordStrengthService } from "../services/password-strength.service";
 
-const getValidationErrors = (result: ZxcvbnResult): ValidationErrors | null =>
-  result.score >= ZXCVBN_MIN_SCORE
-    ? null
-    : { strength: result.feedback.warning || "Vulnerable password" };
-
 export const passwordValidatorFactory = (
   passwordStrength: PasswordStrengthService,
   ...otherControls: AbstractControl[]
@@ -24,6 +18,10 @@ export const passwordValidatorFactory = (
 
     return passwordStrength
       .validate(password, userInputs)
-      .pipe(map((result) => getValidationErrors(result)));
+      .pipe(
+        map((result) =>
+          result.score >= ZXCVBN_MIN_SCORE ? null : { strength: true },
+        ),
+      );
   };
 };