From 4336e3976c7987ee46fe8b7021ac586da62e70bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johnny=20G=C3=A9rard?= <john@jgerard.dev>
Date: Sun, 10 Nov 2024 16:36:35 +0100
Subject: [PATCH] feat: improve password validation feedback display

---
 client/public/icons/error.svg                        |  1 +
 client/src/app/app.component.ts                      |  2 +-
 .../password-strength-meter.component.html           |  9 ++++++++-
 .../password-strength-meter.component.scss           |  5 +++--
 .../password-strength-meter.component.ts             |  1 +
 client/src/app/pipes/password-error.pipe.ts          |  2 +-
 .../src/app/validators/password-validator-factory.ts | 12 +++++-------
 7 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 client/public/icons/error.svg

diff --git a/client/public/icons/error.svg b/client/public/icons/error.svg
new file mode 100644
index 0000000..22625b2
--- /dev/null
+++ b/client/public/icons/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a7dc4dc..8383113 100644
--- a/client/src/app/app.component.ts
+++ b/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);
     }
 
diff --git a/client/src/app/components/password-strength-meter/password-strength-meter.component.html b/client/src/app/components/password-strength-meter/password-strength-meter.component.html
index b61aa12..0e8702e 100644
--- a/client/src/app/components/password-strength-meter/password-strength-meter.component.html
+++ b/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>
     }
diff --git a/client/src/app/components/password-strength-meter/password-strength-meter.component.scss b/client/src/app/components/password-strength-meter/password-strength-meter.component.scss
index e6d6935..ab1dde4 100644
--- a/client/src/app/components/password-strength-meter/password-strength-meter.component.scss
+++ b/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;
diff --git a/client/src/app/components/password-strength-meter/password-strength-meter.component.ts b/client/src/app/components/password-strength-meter/password-strength-meter.component.ts
index c583e93..bf05c0d 100644
--- a/client/src/app/components/password-strength-meter/password-strength-meter.component.ts
+++ b/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();
diff --git a/client/src/app/pipes/password-error.pipe.ts b/client/src/app/pipes/password-error.pipe.ts
index 105bbb4..211d7ce 100644
--- a/client/src/app/pipes/password-error.pipe.ts
+++ b/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)}`);
   }
diff --git a/client/src/app/validators/password-validator-factory.ts b/client/src/app/validators/password-validator-factory.ts
index 0e6ac84..38b9836 100644
--- a/client/src/app/validators/password-validator-factory.ts
+++ b/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 },
+        ),
+      );
   };
 };