Add password strength meter

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",

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",

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: [
     {

src-ui/src/app/components/common/input/password/password.component.html

@@ -1,7 +1,25 @@
 <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>
+  <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 }}
   </div>