switch to zxcvbn-ts

xmmedia · Oct 9, 2024 · 2f8d20e · 2f8d20e
1 parent 80c9129
commit 2f8d20e
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,9 @@
     "@vuelidate/validators": "^2.0.2",
     "@xstate/vue": "^3.0.2",
     "@zootools/email-spell-checker": "^1.12.0",
+    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/language-common": "^3.0.4",
+    "@zxcvbn-ts/language-en": "^3.0.2",
     "apollo-upload-client": "^18.0.1",
     "core-js": "^3.4.3",
     "cuid": "^3.0.0",
@@ -56,8 +59,7 @@
     "vue-multiselect": "^3.0.0-beta.2",
     "vue-router": "^4.0.0",
     "vuedraggable": "^4.1.0",
-    "xstate": "^5.4.0",
-    "zxcvbn": "^4.4.2"
+    "xstate": "^5.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

diff --git a/public/js/src/common/password_score.vue b/public/js/src/common/password_score.vue
@@ -13,7 +13,8 @@
 </template>
 
 <script setup>
-import zxcvbn from 'zxcvbn';
+import { zxcvbn } from '@zxcvbn-ts/core';
+import { install as installZxcvbn } from '@/common/zxcvbn';
 import userValidation from '@/common/validation/user';
 import { computed } from 'vue';
 
@@ -30,6 +31,8 @@ const props = defineProps({
     },
 });
 
+installZxcvbn();
+
 const result = computed(() => zxcvbn(props.password || '', userDataCompiled.value));
 const score = computed(() => {
     if (!userValidation().password.minLength.$validator(props.password)) {

diff --git a/public/js/src/common/validation/user.js b/public/js/src/common/validation/user.js
@@ -7,7 +7,7 @@ import {
 } from '@vuelidate/validators';
 import { validPhone } from '@/common/validators';
 import { pwnedPassword } from 'hibp';
-import zxcvbn from 'zxcvbn';
+import { zxcvbn } from '@zxcvbn-ts/core';
 import { apolloClient } from '@/common/apollo';
 import { UserEmailUnique } from '@/common/queries/user.query.graphql';
 

diff --git a/public/js/src/common/zxcvbn.js b/public/js/src/common/zxcvbn.js
@@ -0,0 +1,23 @@
+import { zxcvbnOptions } from '@zxcvbn-ts/core';
+import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
+import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en';
+
+let zxcvbnInstalled = false;
+
+export const install = () => {
+    if (zxcvbnInstalled) {
+        return;
+    }
+
+    zxcvbnOptions.setOptions({
+        translations: zxcvbnEnPackage.translations,
+        graphs: zxcvbnCommonPackage.adjacencyGraphs,
+        useLevenshteinDistance: true,
+        dictionary: {
+            ...zxcvbnCommonPackage.dictionary,
+            ...zxcvbnEnPackage.dictionary,
+        },
+    });
+
+    zxcvbnInstalled = true;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1665,6 +1665,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@zxcvbn-ts/core@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@zxcvbn-ts/core@npm:3.0.4"
+  dependencies:
+    fastest-levenshtein: 1.0.16
+  checksum: b2c4a5d875f8329b4d742ee1a6a81519e786bc2f0a0657b496a44e8ee70333673f33f388e5dd500bb735765e8c7ef46ac41cd95a266a97b50f1f480116b90873
+  languageName: node
+  linkType: hard
+
+"@zxcvbn-ts/language-common@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@zxcvbn-ts/language-common@npm:3.0.4"
+  checksum: c9f80cca0237b8c159e3c1633ffd60fd4fcdb507699de491a1c2e1213d1c1fe2838a6cba2e80c3b5f84b8f04e3d5881f87f0023623cce4d2f65000961b1045d8
+  languageName: node
+  linkType: hard
+
+"@zxcvbn-ts/language-en@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@zxcvbn-ts/language-en@npm:3.0.2"
+  checksum: e3abc2e6896fc5af87d563777514036bb59404a74e9ebfb98d33ee6a9ef3c09a0fba1d6fac7621985f5e516527c895387c34a37d591ef18aa89bcad6149b2d1e
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -2797,7 +2820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fastest-levenshtein@npm:^1.0.16":
+"fastest-levenshtein@npm:1.0.16, fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
   checksum: a78d44285c9e2ae2c25f3ef0f8a73f332c1247b7ea7fb4a191e6bb51aa6ee1ef0dfb3ed113616dcdc7023e18e35a8db41f61c8d88988e877cf510df8edafbc71
@@ -6120,6 +6143,9 @@ __metadata:
     "@vuelidate/validators": ^2.0.2
     "@xstate/vue": ^3.0.2
     "@zootools/email-spell-checker": ^1.12.0
+    "@zxcvbn-ts/core": ^3.0.4
+    "@zxcvbn-ts/language-common": ^3.0.4
+    "@zxcvbn-ts/language-en": ^3.0.2
     apollo-upload-client: ^18.0.1
     autoprefixer: ^10.0.2
     core-js: ^3.4.3
@@ -6160,7 +6186,6 @@ __metadata:
     vue-router: ^4.0.0
     vuedraggable: ^4.1.0
     xstate: ^5.4.0
-    zxcvbn: ^4.4.2
   languageName: unknown
   linkType: soft
 
@@ -6244,10 +6269,3 @@ __metadata:
   checksum: 22836aa6947b27d35176cde40e3f5b19c24e0f46ee52d860e8df674a35aec07b34f6c78437323c797d1dc37ec0847e61e4f07ab605d519cc742245b5fa25b889
   languageName: node
   linkType: hard
-
-"zxcvbn@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "zxcvbn@npm:4.4.2"
-  checksum: 76ab32c066082ac73491b7cd7f93ad0595c59b6d45ae80a0745e9e1661237388beb2f0c2ba0ae3dc330ca3ecdb87edcb7a21e0c09137ab81d5b32e584cda1e5d
-  languageName: node
-  linkType: hard