Add password strength meter

This commit is contained in:
Martin Tan 2023-08-26 16:52:09 +08:00
parent 1301b4eecf
commit d0c5fac853
4 changed files with 66 additions and 5 deletions

View File

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

View File

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

View File

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

View File

@ -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>