improve(client): load zxcvbn on demand

Author: gustavotoyota

apps/client/quasar.config.js

@@ -71,7 +71,6 @@ module.exports = configure(function (ctx) {
       { path: 'syncedstore.client', server: false },
       { path: 'tiptap.client', server: false },
       { path: 'stripe.client', server: false },
-      { path: 'zxcvbn.client', server: false },
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

apps/client/src/code/api-interface/pages/create.ts

@@ -2,14 +2,14 @@ import type { Keyring, SymmetricKeyring } from '@stdlib/crypto';
 import { createSymmetricKeyring } from '@stdlib/crypto';
 import { DataLayer } from '@stdlib/crypto';
 import { textToBytes } from '@stdlib/misc';
-import { zxcvbn } from '@zxcvbn-ts/core';
 import { nanoid } from 'nanoid';
 import {
   generateGroupValues,
   unlockGroupContentKeyring,
 } from 'src/code/crypto';
 import { groupContentKeyrings } from 'src/code/pages/computed/group-content-keyrings';
 import { asyncDialog } from 'src/code/utils/misc';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 
 export async function createPage(input: {
   parentPageId: string;

apps/client/src/code/api-interface/pages/move.ts

@@ -8,7 +8,6 @@ import { createSymmetricKeyring } from '@stdlib/crypto';
 import { DataLayer } from '@stdlib/crypto';
 import { objEntries, objFromEntries, textToBytes } from '@stdlib/misc';
 import { Y } from '@syncedstore/core';
-import { zxcvbn } from '@zxcvbn-ts/core';
 import {
   generateGroupValues,
   unlockGroupContentKeyring,
@@ -18,6 +17,7 @@ import { pageKeyrings } from 'src/code/pages/computed/page-keyrings';
 import { createPageDoc } from 'src/code/pages/utils';
 import { asyncDialog } from 'src/code/utils/misc';
 import { createWebsocketRequest } from 'src/code/utils/websocket-requests';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 
 export async function movePage(input: {
   pageId: string;

apps/client/src/boot/zxcvbn.client.ts apps/client/src/code/utils/zxcvbn.tsapps/client/src/boot/zxcvbn.client.ts renamed to apps/client/src/code/utils/zxcvbn.ts

@@ -1,6 +1,7 @@
 import { zxcvbnOptions } from '@zxcvbn-ts/core';
 import zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
 import zxcvbnEnPackage from '@zxcvbn-ts/language-en';
+export { zxcvbn } from '@zxcvbn-ts/core';
 
 zxcvbnOptions.setOptions({
   translations: zxcvbnEnPackage.translations,

apps/client/src/components/EvaluatedPasswordField.vue

@@ -60,8 +60,8 @@
 </template>
 
 <script setup lang="ts">
-import { zxcvbn } from '@zxcvbn-ts/core';
 import { useResizeObserver } from 'src/code/utils/misc';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 import type { ComponentPublicInstance } from 'vue';
 
 import type { PasswordFieldProps } from './PasswordField.vue';

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/GeneralTab/Protection/EnablePasswordDialog.vue

@@ -52,8 +52,8 @@
 </template>
 
 <script setup lang="ts">
-import { zxcvbn } from '@zxcvbn-ts/core';
 import { asyncDialog, handleError } from 'src/code/utils/misc';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 import type { Ref } from 'vue';
 
 const dialogRef = ref() as Ref<InstanceType<typeof CustomDialog>>;

apps/client/src/pages/home/Account/Security/ChangePassword.vue

@@ -38,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { zxcvbn } from '@zxcvbn-ts/core';
 import { QForm } from 'quasar';
 import { changePassword } from 'src/code/api-interface/users/change-password';
 import { logout } from 'src/code/auth/logout';
 import { asyncDialog, handleError } from 'src/code/utils/misc';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 
 // Change password
 

apps/client/src/pages/home/Register.vue

@@ -152,11 +152,11 @@
 <script setup lang="ts">
 import { maxNameLength } from '@deeplib/misc';
 import { maxEmailLength, w3cEmailRegex } from '@stdlib/misc';
-import { zxcvbn } from '@zxcvbn-ts/core';
 import { enterDemo } from 'src/code/auth/demo';
 import { getRegistrationValues } from 'src/code/auth/register';
 import { deriveUserValues } from 'src/code/crypto';
 import { asyncDialog, handleError } from 'src/code/utils/misc';
+import { zxcvbn } from 'src/code/utils/zxcvbn';
 
 useMeta(() => ({
   title: 'Register - DeepNotes',