Merge pull request #25 from antoantonyk/angular-10-upgrade

Angular 10 upgrade and issue fixes

README.md

@@ -2,7 +2,7 @@
 [![npm version](https://badge.fury.io/js/angular-password-strength-meter.svg)](https://badge.fury.io/js/angular-password-strength-meter)
 [![Coverage Status](https://coveralls.io/repos/github/antoantonyk/password-strength-meter/badge.svg?branch=master)](https://coveralls.io/github/antoantonyk/password-strength-meter?branch=master)
 
-# Password Strength Meter For angular 9
+# Password Strength Meter For angular 10
 
 To display the strength of the password with a visual feedback.
 
@@ -27,7 +27,7 @@ Need lib for Vue.js? [Click here](https://github.com/antoantonyk/vue-password-st
 **Step 1:** Since this lib was depending upon the [zxcvbn](https://github.com/dropbox/zxcvbn) lib, install it first
 
 ```sh
-npm install [email protected] --save
+npm install zxcvbn3 --save
 ```
 
 **Step 2:** Install password-strength-meter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "password-strength-meter",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "scripts": {
     "ng": "ng",
     "serve": "ng serve",
@@ -19,52 +19,52 @@
     "postinstall": "ngcc"
   },
   "keywords": [
-    "angular 9",
+    "angular 10",
     "password-strength",
     "password-strength-component",
     "password-strength-meter",
     "password-strength-meter-component",
     "angular password strength meter"
   ],
   "dependencies": {
-    "@angular/animations": "~9.1.3",
-    "@angular/common": "~9.1.3",
-    "@angular/compiler": "~9.1.3",
-    "@angular/core": "~9.1.3",
-    "@angular/forms": "~9.1.3",
-    "@angular/platform-browser": "~9.1.3",
-    "@angular/platform-browser-dynamic": "~9.1.3",
-    "@angular/router": "~9.1.3",
+    "@angular/animations": "~10.1.5",
+    "@angular/common": "~10.1.5",
+    "@angular/compiler": "~10.1.5",
+    "@angular/core": "~10.1.5",
+    "@angular/forms": "~10.1.5",
+    "@angular/platform-browser": "~10.1.5",
+    "@angular/platform-browser-dynamic": "~10.1.5",
+    "@angular/router": "~10.1.5",
     "bootstrap": "^4.4.1",
     "rxjs": "~6.5.5",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2",
-    "zxcvbn": "^4.4.2"
+    "zxcvbn3": "^0.1.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.3",
-    "@angular-devkit/build-ng-packagr": "~0.901.3",
-    "@angular/cli": "~9.1.3",
-    "@angular/compiler-cli": "~9.1.3",
-    "@angular/language-service": "~9.1.3",
+    "@angular-devkit/build-angular": "~0.1001.6",
+    "@angular-devkit/build-ng-packagr": "~0.1001.6",
+    "@angular/cli": "~10.1.6",
+    "@angular/compiler-cli": "~10.1.5",
+    "@angular/language-service": "~10.1.5",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "coveralls": "^3.0.14",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.1",
-    "karma": "~5.0.2",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.3",
-    "ng-packagr": "^9.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^10.1.0",
     "npm-run-all": "^4.1.5",
-    "protractor": "~5.4.4",
+    "protractor": "~7.0.0",
     "ts-node": "~8.9.0",
-    "tslint": "~6.1.1",
-    "typescript": "~3.8.3",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.3",
     "typescript-tslint-plugin": "^0.5.5"
   },
   "repository": {

projects/password-strength-meter-showcase/e2e/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

projects/password-strength-meter-showcase/src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
@@ -11,17 +11,19 @@ describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, PasswordStrengthMeterModule],
-      declarations: [AppComponent]
-    }).compileComponents();
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [ReactiveFormsModule, PasswordStrengthMeterModule],
+        declarations: [AppComponent],
+      }).compileComponents();
 
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.debugElement.componentInstance;
-  }));
+      fixture = TestBed.createComponent(AppComponent);
+      component = fixture.debugElement.componentInstance;
+    })
+  );
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     expect(component).toBeTruthy();
   }));
 
@@ -72,7 +74,9 @@ describe('AppComponent', () => {
       fixture.detectChanges();
       let errors = {};
       const password = component.userForm.controls['password'];
-      const passwordStrengthMeter = fixture.debugElement.query(By.css('.strength-meter-fill'));
+      const passwordStrengthMeter = fixture.debugElement.query(
+        By.css('.strength-meter-fill')
+      );
 
       // Email field is required
       errors = password.errors || {};

projects/password-strength-meter/README.md

@@ -2,7 +2,7 @@
 [![npm version](https://badge.fury.io/js/angular-password-strength-meter.svg)](https://badge.fury.io/js/angular-password-strength-meter)
 [![Coverage Status](https://coveralls.io/repos/github/antoantonyk/password-strength-meter/badge.svg?branch=master)](https://coveralls.io/github/antoantonyk/password-strength-meter?branch=master)
 
-# Password Strength Meter For angular 8
+# Password Strength Meter For angular 10
 
 To display the strength of the password with a visual feedback.
 
@@ -27,7 +27,7 @@ Need lib for Vue.js? [Click here](https://github.com/antoantonyk/vue-password-st
 **Step 1:** Since this lib was depending upon the [zxcvbn](https://github.com/dropbox/zxcvbn) lib, install it first
 
 ```sh
-npm install [email protected] --save
+npm install zxcvbn3 --save
 ```
 
 **Step 2:** Install password-strength-meter

projects/password-strength-meter/ng-package.json

@@ -4,7 +4,7 @@
   "lib": {
     "entryFile": "src/public-api.ts",
     "umdModuleIds": {
-      "zxcvbn": "zxcvbn_"
+      "zxcvbn3": "zxcvbn3"
     }
   }
 }

projects/password-strength-meter/package.json

@@ -1,14 +1,13 @@
 {
   "name": "angular-password-strength-meter",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "peerDependencies": {
-    "@angular/common": "~9.1.3",
-    "@angular/core": "~9.1.3",
-    "zxcvbn": "4.4.2",
-    "@types/zxcvbn": "4.4.0"
+    "@angular/common": "^10.1.5",
+    "@angular/core": "^10.1.5",
+    "zxcvbn3": "^0.1.1"
   },
   "keywords": [
-    "angular 9",
+    "angular 10",
     "password-strength",
     "password-strength-component",
     "password-strength-meter",
@@ -23,5 +22,8 @@
   "bugs": {
     "url": "https://github.com/antoantonyk/password-strength-meter/issues"
   },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
   "homepage": "https://github.com/antoantonyk/password-strength-meter"
 }

projects/password-strength-meter/src/lib/password-strength-meter.component.scss

@@ -67,6 +67,6 @@
   font-size: 70%;
   font-weight: 400;
   color: #6c757d !important;
-  display: inline-block;
+  display: block;
   margin-top: 0.25rem;
 }

projects/password-strength-meter/src/lib/password-strength-meter.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
@@ -11,17 +11,21 @@ describe('PasswordStrengthMeterComponent', () => {
   let fixture: ComponentFixture<PasswordStrengthMeterComponent>;
   let passwordStrengthMeterService: PasswordStrengthMeterService;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [PasswordStrengthMeterComponent],
-      providers: []
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [PasswordStrengthMeterComponent],
+        providers: [],
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PasswordStrengthMeterComponent);
     component = fixture.componentInstance;
-    passwordStrengthMeterService = fixture.debugElement.injector.get(PasswordStrengthMeterService);
+    passwordStrengthMeterService = fixture.debugElement.injector.get(
+      PasswordStrengthMeterService
+    );
     fixture.detectChanges();
   });
 
@@ -33,7 +37,7 @@ describe('PasswordStrengthMeterComponent', () => {
     spyOn<any>(component, 'calculatePasswordStrength');
     component.password = '123456';
     component.ngOnChanges({
-      password: new SimpleChange(null, component.password, true)
+      password: new SimpleChange(null, component.password, true),
     });
     fixture.detectChanges();
     expect(component['calculatePasswordStrength']).toHaveBeenCalled();
@@ -44,13 +48,15 @@ describe('PasswordStrengthMeterComponent', () => {
     component['calculatePasswordStrength']();
     fixture.detectChanges();
     expect(component.passwordStrength).toBeNull();
+    expect(component.feedback).toBeNull();
   });
 
   it('should change the password strength as 0 on fail to meet the min password length', () => {
     component.password = '123';
     component['calculatePasswordStrength']();
     fixture.detectChanges();
     expect(component.passwordStrength).toBe(0);
+    expect(component.feedback).toBeNull();
   });
 
   it('should update the password strength meter', () => {
@@ -60,7 +66,9 @@ describe('PasswordStrengthMeterComponent', () => {
     component.password = '123asd123';
     component['calculatePasswordStrength']();
     fixture.detectChanges();
-    const passwordMeter = fixture.debugElement.query(By.css('.strength-meter-fill'));
+    const passwordMeter = fixture.debugElement.query(
+      By.css('.strength-meter-fill')
+    );
 
     expect(passwordMeter.attributes['data-strength']).toBe('2');
     expect(component.passwordStrength).toBe(2);
@@ -89,8 +97,8 @@ describe('PasswordStrengthMeterComponent', () => {
       score: 2,
       feedback: {
         suggestions: ['Add another word or two', 'Uncommon words are better.'],
-        warning: 'This is a very common password'
-      }
+        warning: 'This is a very common password',
+      },
     });
 
     component.password = '123asd123';
@@ -99,20 +107,36 @@ describe('PasswordStrengthMeterComponent', () => {
     fixture.detectChanges();
 
     expect(fixture.debugElement.query(By.css('.password-feedback'))).toBeNull();
-    expect(fixture.debugElement.query(By.css('.password-suggetion'))).toBeNull();
-    expect(passwordStrengthMeterService.scoreWithFeedback).toHaveBeenCalledTimes(0);
+    expect(
+      fixture.debugElement.query(By.css('.password-suggetion'))
+    ).toBeNull();
+    expect(
+      passwordStrengthMeterService.scoreWithFeedback
+    ).toHaveBeenCalledTimes(0);
 
     component.enableFeedback = true;
     component['calculatePasswordStrength']();
     fixture.detectChanges();
 
-    expect(passwordStrengthMeterService.scoreWithFeedback).toHaveBeenCalledTimes(1);
-    expect(fixture.debugElement.query(By.css('.password-feedback'))).toBeTruthy();
-    expect(fixture.debugElement.query(By.css('.password-suggetion'))).toBeTruthy();
+    expect(
+      passwordStrengthMeterService.scoreWithFeedback
+    ).toHaveBeenCalledTimes(1);
+    expect(
+      fixture.debugElement.query(By.css('.password-feedback'))
+    ).toBeTruthy();
+    expect(
+      fixture.debugElement.query(By.css('.password-suggetion'))
+    ).toBeTruthy();
   });
 
   it('should use the custom colors', () => {
-    component.colors = ['darkred', 'orangered', 'purple', 'yellowgreen', 'green'];
+    component.colors = [
+      'darkred',
+      'orangered',
+      'purple',
+      'yellowgreen',
+      'green',
+    ];
     expect(component.getMeterFillColor(2)).toEqual('purple');
   });
 });

projects/password-strength-meter/src/lib/password-strength-meter.component.ts

@@ -57,8 +57,10 @@ export class PasswordStrengthMeterComponent implements OnInit, OnChanges {
     // TODO validation logic optimization
     if (!this.password) {
       this.passwordStrength = null;
+      this.feedback = null;
     } else if (this.password && this.password.length < this.minPasswordLength) {
       this.passwordStrength = 0;
+      this.feedback = null;
     } else {
       if (this.enableFeedback) {
         const result = this.passwordStrengthMeterService.scoreWithFeedback(

projects/password-strength-meter/src/lib/password-strength-meter.service.ts

@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import * as zxcvbn_ from 'zxcvbn';
-
-const zxcvbn = zxcvbn_;
+import { zxcvbn } from 'zxcvbn3';
 
 @Injectable()
 export class PasswordStrengthMeterService {
@@ -29,7 +27,9 @@ export class PasswordStrengthMeterService {
    *
    * @param password - Password
    */
-  scoreWithFeedback(password): { score: number; feedback: { suggestions: string[]; warning: string } } {
+  scoreWithFeedback(
+    password
+  ): { score: number; feedback: { suggestions: string[]; warning: string } } {
     const result = zxcvbn(password);
     return { score: result.score, feedback: result.feedback };
   }

tsconfig.json

@@ -7,7 +7,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",