Fixed an issue that caused incorrect number parsing, generate passwords when clicking on generate buttons

Author: CodeDead

src/routes/Advanced/index.jsx

@@ -9,24 +9,73 @@ import { useNavigate } from 'react-router-dom';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
-import { setPageIndex } from '../../reducers/MainReducer/Actions';
+import { createWorkerFactory, useWorker } from '@shopify/react-web-worker';
+import { setError, setPageIndex } from '../../reducers/MainReducer/Actions';
 import { MainContext } from '../../contexts/MainContextProvider';
 import { PasswordContext } from '../../contexts/PasswordContextProvider';
 import {
   setAllowDuplicates,
-  setCharacterSet,
+  setCharacterSet, setPasswords,
   setUseAdvanced,
 } from '../../reducers/PasswordReducer/Actions';
 
+const createWorker = createWorkerFactory(() => import('../../utils/PasswordGenerator/index'));
+
 const Advanced = () => {
   const [state1, d1] = useContext(MainContext);
   const [state2, d2] = useContext(PasswordContext);
 
   const { languageIndex } = state1;
-  const { characterSet, useAdvanced, allowDuplicates } = state2;
+  const {
+    characterSet, useAdvanced, allowDuplicates, smallLetters, capitalLetters, spaces,
+    specialCharacters, numbers, brackets, min, max, amount,
+  } = state2;
 
   const language = state1.languages[languageIndex];
+
   const navigate = useNavigate();
+  const worker = useWorker(createWorker);
+
+  /**
+   * Generate passwords
+   */
+  const generatePasswords = () => {
+    let simpleCharacterSet = characterSet;
+    if (!useAdvanced) {
+      simpleCharacterSet = '';
+      if (smallLetters) {
+        simpleCharacterSet += 'abcdefghijklmnopqrstuvwxyz';
+      }
+      if (capitalLetters) {
+        simpleCharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      }
+      if (spaces) {
+        simpleCharacterSet += ' ';
+      }
+      if (specialCharacters) {
+        simpleCharacterSet += '=+-_!?.,;:\'\\"/%^*$€£&µ@#';
+      }
+      if (numbers) {
+        simpleCharacterSet += '0123456789';
+      }
+      if (brackets) {
+        simpleCharacterSet += '[]{}()<>';
+      }
+    }
+
+    if (!simpleCharacterSet || simpleCharacterSet.length === 0 || min > max || max < min) {
+      return;
+    }
+
+    worker.PasswordGenerator(min, max, simpleCharacterSet, amount, allowDuplicates)
+      .then((res) => {
+        d2(setPasswords(res));
+        navigate('/generate');
+      })
+      .catch((e) => {
+        d1(setError(e));
+      });
+  };
 
   useEffect(() => {
     d1(setPageIndex(1));
@@ -85,7 +134,7 @@ const Advanced = () => {
         color="primary"
         style={{ float: 'right' }}
         sx={{ mt: 2 }}
-        onClick={() => navigate('/generate')}
+        onClick={generatePasswords}
       >
         {language.generate}
       </Button>

src/routes/Home/index.jsx

@@ -9,21 +9,24 @@ import FormGroup from '@mui/material/FormGroup';
 import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import { useNavigate } from 'react-router-dom';
+import { createWorkerFactory, useWorker } from '@shopify/react-web-worker';
 import { MainContext } from '../../contexts/MainContextProvider';
-import { setPageIndex } from '../../reducers/MainReducer/Actions';
+import { setError, setPageIndex } from '../../reducers/MainReducer/Actions';
 import { PasswordContext } from '../../contexts/PasswordContextProvider';
 import {
   setBrackets,
   setCapitalLetters,
   setNumbers,
   setPasswordAmount,
   setPasswordLengthMax,
-  setPasswordLengthMin,
+  setPasswordLengthMin, setPasswords,
   setSmallLetters,
   setSpaces,
   setSpecialCharacters,
 } from '../../reducers/PasswordReducer/Actions';
 
+const createWorker = createWorkerFactory(() => import('../../utils/PasswordGenerator/index'));
+
 const Home = () => {
   const [state, d1] = useContext(MainContext);
   const [state2, d2] = useContext(PasswordContext);
@@ -42,9 +45,53 @@ const Home = () => {
     numbers,
     brackets,
     useAdvanced,
+    characterSet,
+    allowDuplicates,
   } = state2;
 
   const navigate = useNavigate();
+  const worker = useWorker(createWorker);
+
+  /**
+   * Generate passwords
+   */
+  const generatePasswords = () => {
+    let simpleCharacterSet = characterSet;
+    if (!useAdvanced) {
+      simpleCharacterSet = '';
+      if (smallLetters) {
+        simpleCharacterSet += 'abcdefghijklmnopqrstuvwxyz';
+      }
+      if (capitalLetters) {
+        simpleCharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      }
+      if (spaces) {
+        simpleCharacterSet += ' ';
+      }
+      if (specialCharacters) {
+        simpleCharacterSet += '=+-_!?.,;:\'\\"/%^*$€£&µ@#';
+      }
+      if (numbers) {
+        simpleCharacterSet += '0123456789';
+      }
+      if (brackets) {
+        simpleCharacterSet += '[]{}()<>';
+      }
+    }
+
+    if (!simpleCharacterSet || simpleCharacterSet.length === 0 || min > max || max < min) {
+      return;
+    }
+
+    worker.PasswordGenerator(min, max, simpleCharacterSet, amount, allowDuplicates)
+      .then((res) => {
+        d2(setPasswords(res));
+        navigate('/generate');
+      })
+      .catch((e) => {
+        d1(setError(e));
+      });
+  };
 
   useEffect(() => {
     d1(setPageIndex(0));
@@ -162,7 +209,7 @@ const Home = () => {
         color="primary"
         style={{ float: 'right' }}
         sx={{ mt: 2, ml: 2 }}
-        onClick={() => navigate('/generate')}
+        onClick={generatePasswords}
       >
         {language.generate}
       </Button>

src/utils/PasswordGenerator/index.js

@@ -1,3 +1,15 @@
+/**
+ * Generate a random number between min and max
+ * @param min The minimum
+ * @param max The maximum
+ * @returns {number} The random number between min and max (inclusive)
+ */
+const getRandomInt = (min, max) => {
+  const newMin = Math.ceil(min);
+  const newMax = Math.floor(max);
+  return Math.floor(Math.random() * (newMax - newMin + 1)) + newMin;
+};
+
 /**
  * Generate an array of passwords
  * @param minLength The minimum length of the password
@@ -14,8 +26,8 @@ export function PasswordGenerator(minLength, maxLength, characterSet, amount, al
 
   let maxCount = 0;
   if (!allowDuplicates) {
-    let current = minLength;
-    while (current <= maxLength) {
+    let current = parseInt(minLength, 10);
+    while (current <= parseInt(maxLength, 10)) {
       // eslint-disable-next-line no-restricted-properties,prefer-exponentiation-operator
       maxCount += Math.pow(characterSet.length, current);
       current += 1;
@@ -27,7 +39,7 @@ export function PasswordGenerator(minLength, maxLength, characterSet, amount, al
 
     while (!canContinue) {
       let password = '';
-      const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;
+      const length = getRandomInt(minLength, maxLength);
       for (let j = 0; j < length; j += 1) {
         password += characterSet[Math.floor(Math.random() * characterSet.length)];
       }