Merge pull request #78 from CodeDead/feature/vault_password_generator_fix

feature/vault_password_generator_fix

Author: CodeDead

package.json

@@ -7,7 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.5",
     "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
+    "@mui/material": "^5.14.2",
     "@mui/system": "^5.14.1",
     "@mui/x-data-grid": "^6.10.1",
     "@shopify/react-web-worker": "^5.0.13",
@@ -54,7 +54,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "vite": "^4.4.5",
+    "vite": "^4.4.7",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "^3.2.0"
   }

src/components/CreatePasswordDialog/index.jsx

@@ -11,13 +11,16 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import Tooltip from '@mui/material/Tooltip';
+import { createWorkerFactory, useWorker } from '@shopify/react-web-worker';
 import { MainContext } from '../../contexts/MainContextProvider';
 import PasswordStrength from '../../utils/PasswordStrength';
 import LinearProgressWithLabel from '../LinearProgressWithLabel';
 import { setError } from '../../reducers/MainReducer/Actions';
 import { generatePasswordArray, getFullCharacterSet } from '../../reducers/PasswordReducer/Actions';
 import { PasswordContext } from '../../contexts/PasswordContextProvider';
 
+const createWorker = createWorkerFactory(() => import('../../utils/PasswordGenerator/index'));
+
 const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
   const [state, d1] = useContext(MainContext);
   const [state2] = useContext(PasswordContext);
@@ -55,6 +58,8 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
     brackets,
   );
 
+  const worker = useWorker(createWorker);
+
   const cannotGenerate = !simpleCharacterSet || simpleCharacterSet.length === 0
     || min > max || max < min;
 
@@ -100,7 +105,7 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
       return;
     }
 
-    generatePasswordArray(min, max, simpleCharacterSet, 1, allowDuplicates, null)
+    generatePasswordArray(min, max, simpleCharacterSet, 1, allowDuplicates, worker)
       .then((res) => {
         setPassword(res[0]);
       })