feat: add translations for custom matchers

* feat: get feedback from translations * feat: add translations * chore: update readme * refactor: change patterns names * chore: update README * chore: update README * tests: update test matcher strings * fix: update translations + suggestions * tests: add translations assertions * fix: minor bug fix * fix: minor bug fix * chore: update readme * chore: update readme * fix: update matcher suggestions * fix: add v4 beta as peer dependenvy * chore: update readme regarding version * fix: add translated suggestions to matchers * tests: refactor tests to go through the zxcvbn-ts/core package * tests: add suggestions assertions * tests: remove redundant lines --------- Co-authored-by: Ilan Kushnir <[email protected]>
PayU · Nov 27, 2024 · 69e1b95 · 69e1b95
1 parent 7e19b06
commit 69e1b95
Show file tree

Hide file tree

Showing 11 changed files with 231 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # @zxcvbn-custom-matchers
 
 The package is adding custom matchers to the zxcvbn-ts package. The matchers enforce specific character requirements in passwords and provide feedback and scoring.
+> Please note! this package works only with zxcvbn-ts v.4 and above.
 
 ## Installation
 ```sh
@@ -9,25 +10,33 @@ npm install zxcvbn-custom-matchers
 
 ### Usage
 ```ts
-import { zxcvbnOptions } from '@zxcvbn-ts/core';
+import { ZxcvbnFactory } from '@zxcvbn-ts/core';
 import {
-    lowercaseMatcher,
     numberMatcher,
     specialMatcher,
+    lowercaseMatcher,
     uppercaseMatcher,
-    minLengthMatcher
+    minLengthMatcher,
+    customMatchersTranslations
 } from 'zxcvbn-custom-matchers';
-
-// Add the matchers
-zxcvbnOptions.addMatcher('lowercase', lowercaseMatcher);
-zxcvbnOptions.addMatcher('number', numberMatcher);
-zxcvbnOptions.addMatcher('special', specialMatcher);
-zxcvbnOptions.addMatcher('uppercase', uppercaseMatcher);
-zxcvbnOptions.addMatcher('minLength', minLengthMatcher(10));
+import { merge } from 'lodash';
+
+// Add the custom matchers and their translations
+const options = {
+    translations: merge({}, zxcvbnEnPackage.translations, customMatchersTranslations)
+};
+const customMatchers = {
+    minLength: minLengthMatcher(commons.MIN_PASSWORD_LENGTH),
+    specialRequired: specialMatcher,
+    numberRequired: numberMatcher,
+    lowercaseRequired: lowercaseMatcher,
+    uppercaseRequired: uppercaseMatcher
+};
+const zxcvbn = new ZxcvbnFactory(options, customMatchers);
 
 // Use zxcvbn as usual
 import { zxcvbn } from '@zxcvbn-ts/core';
-const result = zxcvbn('password123');
+const result = zxcvbn.check('password123');
 console.log(result);
 ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,17 +28,22 @@
     "@types/mocha": "^10.0.10",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
-    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/core": "^4.0.0-beta.2",
+    "@zxcvbn-ts/language-en": "^3.0.2",
     "chai": "^4.5.0",
     "depcheck": "^1.4.3",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.1",
+    "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "nyc": "^17.1.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "@zxcvbn-ts/core": "^4.0.0-beta.2"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,6 @@
-export { uppercaseMatcher } from './matchers/uppercaseMatcher';
 export { minLengthMatcher } from './matchers/minLengthMatcher';
+export { uppercaseMatcher } from './matchers/uppercaseMatcher';
 export { lowercaseMatcher } from './matchers/lowercaseMatcher';
 export { numberMatcher } from './matchers/numberMatcher';
 export { specialMatcher } from './matchers/specialMatcher';
+export { customMatchersTranslations } from './translations';
diff --git a/src/matchers/lowercaseMatcher.ts b/src/matchers/lowercaseMatcher.ts
@@ -1,4 +1,4 @@
-import { Matcher, Match } from '@zxcvbn-ts/core/dist/types';
+import { Matcher, Match } from '@zxcvbn-ts/core';
 
 export const lowercaseMatcher: Matcher = {
   Matching: class LowercaseMatcher {
@@ -9,14 +9,17 @@ export const lowercaseMatcher: Matcher = {
           return matches;
         }
       }
-      matches.push({ pattern: 'lowercase', token: password, i: 0, j: password.length - 1 });
+      matches.push({ pattern: 'lowercaseRequired', token: password, i: 0, j: password.length - 1 });
       return matches;
     }
   },
-  feedback(_match) {
-    return { warning: 'Include at least one lowercase letter.', suggestions: [] };
+  feedback: options => {
+    return {
+      warning: options.translations.warnings['lowercaseRequired'] || 'lowercaseRequired',
+      suggestions: [options.translations.suggestions['lowercaseRequired'] || 'lowercaseRequired'],
+    };
   },
-  scoring(_match) {
+  scoring() {
     return -100;
   },
 };
diff --git a/src/matchers/minLengthMatcher.ts b/src/matchers/minLengthMatcher.ts
@@ -1,4 +1,4 @@
-import { Matcher, Match } from '@zxcvbn-ts/core/dist/types';
+import { Matcher, Match } from '@zxcvbn-ts/core';
 
 export const minLengthMatcher = (minLength: number): Matcher => ({
   Matching: class MinLengthMatcher {
@@ -10,10 +10,13 @@ export const minLengthMatcher = (minLength: number): Matcher => ({
       return matches;
     }
   },
-  feedback(_match) {
-    return { warning: `Password may not be shorter than ${minLength} characters.`, suggestions: [] };
+  feedback: options => {
+    return {
+      warning: options.translations.warnings['minLength']?.replace('%s', minLength) || 'minLength',
+      suggestions: [options.translations.suggestions['minLength']?.replace('%s', minLength) || 'minLength'],
+    };
   },
-  scoring(_match) {
+  scoring() {
     return -100;
   },
 });
diff --git a/src/matchers/numberMatcher.ts b/src/matchers/numberMatcher.ts
@@ -1,4 +1,4 @@
-import { Matcher, Match } from '@zxcvbn-ts/core/dist/types';
+import { Matcher, Match } from '@zxcvbn-ts/core';
 
 export const numberMatcher: Matcher = {
   Matching: class NumberMatcher {
@@ -9,14 +9,17 @@ export const numberMatcher: Matcher = {
           return matches;
         }
       }
-      matches.push({ pattern: 'number', token: password, i: 0, j: password.length - 1 });
+      matches.push({ pattern: 'numberRequired', token: password, i: 0, j: password.length - 1 });
       return matches;
     }
   },
-  feedback(_match) {
-    return { warning: 'Include at least one number.', suggestions: [] };
+  feedback: options => {
+    return {
+      warning: options.translations.warnings['numberRequired'] || 'numberRequired',
+      suggestions: [options.translations.suggestions['numberRequired'] || 'numberRequired'],
+    };
   },
-  scoring(_match) {
+  scoring() {
     return -100;
   },
 };
diff --git a/src/matchers/specialMatcher.ts b/src/matchers/specialMatcher.ts
@@ -1,4 +1,4 @@
-import { Matcher, Match } from '@zxcvbn-ts/core/dist/types';
+import { Matcher, Match } from '@zxcvbn-ts/core';
 
 export const specialMatcher: Matcher = {
   Matching: class SpecialMatcher {
@@ -10,14 +10,17 @@ export const specialMatcher: Matcher = {
           return matches;
         }
       }
-      matches.push({ pattern: 'special', token: password, i: 0, j: password.length - 1 });
+      matches.push({ pattern: 'specialRequired', token: password, i: 0, j: password.length - 1 });
       return matches;
     }
   },
-  feedback(_match) {
-    return { warning: 'Include at least one special character.', suggestions: [] };
+  feedback: options => {
+    return {
+      warning: options.translations.warnings['specialRequired'] || 'specialRequired',
+      suggestions: [options.translations.suggestions['specialRequired'] || 'specialRequired'],
+    };
   },
-  scoring(_match) {
+  scoring() {
     return -100;
   },
 };
diff --git a/src/matchers/uppercaseMatcher.ts b/src/matchers/uppercaseMatcher.ts
@@ -1,4 +1,4 @@
-import { Matcher, Match } from '@zxcvbn-ts/core/dist/types';
+import { Matcher, Match } from '@zxcvbn-ts/core';
 
 export const uppercaseMatcher: Matcher = {
   Matching: class UppercaseMatcher {
@@ -9,14 +9,17 @@ export const uppercaseMatcher: Matcher = {
           return matches;
         }
       }
-      matches.push({ pattern: 'uppercase', token: password, i: 0, j: password.length - 1 });
+      matches.push({ pattern: 'uppercaseRequired', token: password, i: 0, j: password.length - 1 });
       return matches;
     }
   },
-  feedback(_match) {
-    return { warning: 'Include at least one uppercase letter.', suggestions: [] };
+  feedback: options => {
+    return {
+      warning: options.translations.warnings['uppercaseRequired'] || 'uppercaseRequired',
+      suggestions: [options.translations.suggestions['uppercaseRequired'] || 'uppercaseRequired'],
+    };
   },
-  scoring(_match) {
+  scoring() {
     return -100;
   },
 };
diff --git a/src/translations.ts b/src/translations.ts
@@ -0,0 +1,17 @@
+export const customMatchersTranslations = {
+  warnings: {
+    lowercaseRequired: 'At least one lowercase letter is required.',
+    minLength: 'Password must be at least %s characters long.',
+    numberRequired: 'At least one number is required.',
+    specialRequired: 'At least one special character is required.',
+    uppercaseRequired: 'At least one uppercase letter is required.',
+  },
+  suggestions: {
+    lowercaseRequired: 'Include at least one lowercase letter.',
+    minLength: 'Password may not be shorter than %s characters.',
+    numberRequired: 'Include at least one number.',
+    specialRequired: 'Include at least one special character.',
+    uppercaseRequired: 'Include at least one uppercase letter.',
+  },
+  timeEstimation: {},
+};