From d0c5fac853f37850c88ce0a73ba462a1e8b49d86 Mon Sep 17 00:00:00 2001
From: Martin Tan <martinwdtan@gmail.com>
Date: Sat, 26 Aug 2023 16:52:09 +0800
Subject: [PATCH] Add password strength meter

---
 src-ui/package-lock.json                      | 38 +++++++++++++++++++
 src-ui/package.json                           |  3 ++
 src-ui/src/app/app.module.ts                  |  4 +-
 .../input/password/password.component.html    | 26 +++++++++++--
 4 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 473f6c565..368cfff48 100644
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -20,6 +20,9 @@
         "@ng-select/ng-select": "^10.0.4",
         "@ngneat/dirty-check-forms": "^3.0.3",
         "@popperjs/core": "^2.11.7",
+        "@zxcvbn-ts/core": "^2.2.1",
+        "@zxcvbn-ts/language-en": "^2.1.0",
+        "angular-password-strength-meter": "^6.0.0",
         "bootstrap": "^5.2.3",
         "file-saver": "^2.0.5",
         "mime-names": "^1.0.0",
@@ -5609,6 +5612,19 @@
       "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
       "devOptional": true
     },
+    "node_modules/@zxcvbn-ts/core": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@zxcvbn-ts/core/-/core-2.2.1.tgz",
+      "integrity": "sha512-Cg1JyRpCDIF+Dh3nauqygmmCYxogNVZDxSn+9PgkPD1HZ2QiJe4elruVJrGmYRS7muGmZ1hNJq8ySQdPv6GHaw==",
+      "dependencies": {
+        "fastest-levenshtein": "1.0.16"
+      }
+    },
+    "node_modules/@zxcvbn-ts/language-en": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@zxcvbn-ts/language-en/-/language-en-2.1.0.tgz",
+      "integrity": "sha512-I3n4AAbArjPAZtwCrk9MQnSrcj5+9rq8sic2rUU44fP5QaR17Vk8zDt61+R9dnP9ZRsj09aAUYML4Ash05qZjQ=="
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -5794,6 +5810,20 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-password-strength-meter": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/angular-password-strength-meter/-/angular-password-strength-meter-6.0.0.tgz",
+      "integrity": "sha512-lSnoXkV4dcH4nzRA3Eo2bdK9NXM/FASU0wI1pLYyhJDvsjqQcfBcetn30JzINuAXHA3YOC5Ax0eBE3hZWsSsfg==",
+      "dependencies": {
+        "tslib": "^2.5.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^15.0.0",
+        "@angular/core": "^15.0.0",
+        "@zxcvbn-ts/core": "^2.0.1",
+        "@zxcvbn-ts/language-en": "^2.0.1"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -9112,6 +9142,14 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
diff --git a/src-ui/package.json b/src-ui/package.json
index a156d63a3..9e60c0b5c 100644
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -25,6 +25,9 @@
     "@ng-select/ng-select": "^10.0.4",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.7",
+    "@zxcvbn-ts/core": "^2.2.1",
+    "@zxcvbn-ts/language-en": "^2.1.0",
+    "angular-password-strength-meter": "^6.0.0",
     "bootstrap": "^5.2.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index a5b9d2f2d..22c09d178 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -113,7 +113,8 @@ import localeSl from '@angular/common/locales/sl'
 import localeSr from '@angular/common/locales/sr'
 import localeSv from '@angular/common/locales/sv'
 import localeTr from '@angular/common/locales/tr'
-import localeZh from '@angular/common/locales/zh';
+import localeZh from '@angular/common/locales/zh'
+import { PasswordStrengthMeterModule } from 'angular-password-strength-meter'
 import { FolderCreateDialogComponent } from './components/common/create-dialog/folder-create-dialog/folder-create-dialog.component'
 
 registerLocaleData(localeAr)
@@ -230,6 +231,7 @@ function initializeApp(settings: SettingsService) {
     NgSelectModule,
     ColorSliderModule,
     TourNgBootstrapModule,
+    PasswordStrengthMeterModule.forRoot(),
   ],
   providers: [
     {
diff --git a/src-ui/src/app/components/common/input/password/password.component.html b/src-ui/src/app/components/common/input/password/password.component.html
index 57cdd6de8..d9c76428c 100644
--- a/src-ui/src/app/components/common/input/password/password.component.html
+++ b/src-ui/src/app/components/common/input/password/password.component.html
@@ -1,8 +1,26 @@
 <div class="mb-3">
-  <label class="form-label" [for]="inputId">{{title}}</label>
-  <input #inputField type="password" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
-  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  <label class="form-label" [for]="inputId">{{ title }}</label>
+
+  <input
+    #inputField
+    type="password"
+    class="form-control"
+    [class.is-invalid]="error"
+    [id]="inputId"
+    [(ngModel)]="value"
+    (change)="onChange(value)"
+  />
+  <password-strength-meter
+    [(password)]="value"
+    [enableFeedback]="true"
+  ></password-strength-meter>
+
+  <small
+    *ngIf="hint"
+    class="form-text text-muted"
+    [innerHTML]="hint | safeHtml"
+  ></small>
   <div class="invalid-feedback">
-    {{error}}
+    {{ error }}
   </div>
 </div>