[Brendon Lopes] Password Generator

.eslintrc.json

@@ -13,6 +13,11 @@
   },
   "plugins": [
     "react",
-    "sonarjs"
-  ]
+    "sonarjs",
+    "react-hooks"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
 }

package.json

@@ -6,12 +6,15 @@
     "node": "16"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './components/Header';
+import Settings from './components/Settings';
+import LengthSlider from './components/LengthSlider';
+import GeneratePasswordButton from './components/GeneratePasswordButton';
+
+function App() {
+  return (
+    <div>
+      <Header />
+      <LengthSlider />
+      <Settings />
+      <GeneratePasswordButton />
+    </div>
+  );
+}
+
+export default App;

src/__tests__/Header.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '../helpers/test-utils';
+import App from '../App';
+
+describe('Header tests', () => {
+  it('renders header', () => {
+    render(<App />);
+    const headerElement = screen.getByText(/password generator/i);
+    expect(headerElement).toBeInTheDocument();
+  });
+
+  it('renders placeholder text', () => {
+    render(<App />);
+    const placeholderText = screen.getByText(/click generate/i);
+    expect(placeholderText).toBeInTheDocument();
+  });
+});

src/__tests__/LengthSlider.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../helpers/test-utils';
+import App from '../App';
+
+describe('Length slider tests', () => {
+  it('renders length slider', () => {
+    render(<App />);
+    const lengthSliderElement = screen.getByLabelText(/length: 4/i);
+    expect(lengthSliderElement).toBeInTheDocument();
+  });
+
+  it('changes the "length" value correctly after changing the slider value', () => {
+    render(<App />);
+    const newValue = '5';
+    const lengthSliderElement = screen.getByLabelText(/length: 4/i);
+    fireEvent.change(lengthSliderElement, { target: { value: newValue } });
+    expect(lengthSliderElement).toHaveValue(newValue);
+    const labelWithNewValue = screen.getByText(/length: 5/i);
+    expect(labelWithNewValue).toBeInTheDocument();
+  });
+});

src/components/GeneratePasswordButton.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import * as actionCreators from '../slices/passwordSlice';
+import { bindActionCreators } from '@reduxjs/toolkit';
+import passwordGenerator from '../functions/passwordGenerator';
+
+function GeneratePasswordButton() {
+  const { value } = useSelector((state) => state.length);
+  const { settings } = useSelector((state) => state);
+
+  const dispatch = useDispatch();
+
+  const { setPassword } = bindActionCreators(actionCreators, dispatch);
+
+  const handleClick = () => {
+    try {
+      const generatedPassword = passwordGenerator(value, settings);
+      setPassword(generatedPassword);
+      localStorage.setItem('lastPassword', JSON.stringify(generatedPassword));
+    } catch (error) {
+      alert('Escolha pelo menos uma opção');
+    }
+  }
+
+  useEffect(() => {
+    const lastPassword = JSON.parse(localStorage.getItem('lastPassword'));
+    if (lastPassword) {
+      setPassword(lastPassword);
+    }
+  }, [])
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+    >
+      Generate Password
+    </button>
+  );
+}
+
+export default GeneratePasswordButton;

src/components/Header.jsx

@@ -0,0 +1,14 @@
+import { useSelector } from 'react-redux';
+
+function Header() {
+  const { password } = useSelector((state) => state.password);
+
+  return (
+    <header>
+      <h2>Password Generator</h2>
+      <section>{password || 'CLICK GENERATE'}</section>
+    </header>
+  );
+}
+
+export default Header;

src/components/LengthSlider.jsx

@@ -0,0 +1,32 @@
+import { useSelector, useDispatch } from 'react-redux';
+import * as actionCreators from '../slices/lengthSlice';
+import { bindActionCreators } from '@reduxjs/toolkit'
+
+function LengthSlider() {
+  const value = useSelector((state) => state.length.value);
+  const dispatch = useDispatch();
+
+  const { changeValue } = bindActionCreators(actionCreators, dispatch);
+
+  const handleChange = ({ target: { value } }) => {
+    changeValue(value);
+  }
+
+  return (
+    <section>
+      <label>
+        LENGTH: {value}
+        <br />
+        <input
+          type="range"
+          min="4"
+          max="32"
+          onChange={handleChange}
+          value={value}
+        />
+      </label>
+    </section>
+  );
+}
+
+export default LengthSlider;

src/components/Settings.jsx

@@ -0,0 +1,50 @@
+import { useSelector, useDispatch } from 'react-redux';
+import SettingsToggle from './SettingsToggle';
+import * as actionCreators from '../slices/settingsSlice';
+import { bindActionCreators } from '@reduxjs/toolkit'
+
+function Settings() {
+  const {
+    upperCase, lowerCase, numbers, symbols
+  } = useSelector((state) => state.settings);
+
+  const dispatch = useDispatch();
+
+  const {
+    toggleUpperCase,
+    toggleLowerCase,
+    toggleNumbers,
+    toggleSymbols,
+  } = bindActionCreators(actionCreators, dispatch);
+
+  return (
+    <section>
+      <p>SETTINGS</p>
+      <SettingsToggle
+        labelText="include Uppercase"
+        checked={upperCase}
+        toggle={toggleUpperCase}
+      />
+      <br />
+      <SettingsToggle
+        labelText="include Lowercase"
+        checked={lowerCase}
+        toggle={toggleLowerCase}
+      />
+      <br />
+      <SettingsToggle
+        labelText="include Numbers"
+        checked={numbers}
+        toggle={toggleNumbers}
+      />
+      <br />
+      <SettingsToggle
+        labelText="include Symbols"
+        checked={symbols}
+        toggle={toggleSymbols}
+      />
+    </section>
+  );
+}
+
+export default Settings;

src/components/SettingsToggle.jsx

@@ -0,0 +1,14 @@
+function SettingsToggle({ labelText, checked, toggle }) {
+  return (
+    <label>
+      {labelText}
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={() => toggle()}
+      />
+    </label>
+  );
+}
+
+export default SettingsToggle;

src/functions/generateRandomIndex.js

@@ -0,0 +1,6 @@
+const generateRandomIndex = (max) => {
+  const randomNumber = Math.floor(Math.random() * (max + 1));
+  return randomNumber;
+};
+
+export default generateRandomIndex;

src/functions/getRandomCharacter.js

@@ -0,0 +1,10 @@
+import generateRandomIndex from './generateRandomIndex';
+
+const getRandomCharacter = (characters) => {
+  const charactersArray = characters.split('');
+  const randomIndex = generateRandomIndex(charactersArray.length - 1);
+  const randomCharacter = charactersArray[randomIndex];
+  return randomCharacter;
+};
+
+export default getRandomCharacter;

src/functions/passwordGenerator.js

@@ -0,0 +1,48 @@
+import getRandomCharacter from './getRandomCharacter';
+import generateRandomIndex from './generateRandomIndex';
+
+const characters = {
+  0: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  1: 'abcdefghijklmnopqrstuvwxyz',
+  2: '0123456789',
+  3: '!@#$%^&*()_+-=[]{}|;\':",./<>?',
+};
+
+const passwordValidator = (password, selectedOptions) => {
+  let validated = false;
+  for (let i = 0; i < selectedOptions.length; i += 1) {
+    const charArray = characters[selectedOptions[i]].split('');
+    const passwordArray = password.split('');
+    validated = passwordArray.some((char) => charArray.includes(char));
+    if (!validated) return false;
+  }
+  return validated;
+};
+
+const passwordGenerator = (value, settings) => {
+  const settingsArray = Object.values(settings);
+
+  const selectedOptions = settingsArray.reduce((acc, curr, index) => {
+    if (curr) acc.push(index);
+    return acc;
+  }, []);
+
+  let validated = false;
+
+  let password = '';
+
+  while (!validated) {
+    for (let i = 0; i < value; i += 1) {
+      const randomIndex = generateRandomIndex(selectedOptions.length - 1);
+      const index = selectedOptions[randomIndex];
+      const newCharacter = getRandomCharacter(characters[index]);
+      password += newCharacter;
+    }
+    validated = passwordValidator(password, selectedOptions);
+    if (!validated) password = '';
+  }
+
+  return password;
+};
+
+export default passwordGenerator;

src/helpers/test-utils.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render as rtlRender } from '@testing-library/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import lengthReducer from '../slices/lengthSlice';
+import settingsReducer from '../slices/settingsSlice';
+
+const render = (
+  ui,
+  {
+    preloadedState,
+    store = configureStore(
+      { reducer: { length: lengthReducer, settings: settingsReducer }, preloadedState },
+    ),
+    ...renderOptions
+  } = {},
+) => {
+  // eslint-disable-next-line react/prop-types
+  const Wrapper = ({ children }) => (
+    <Provider store={ store }>{children}</Provider>
+  );
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+};
+
+// re-export everything
+export * from '@testing-library/react';
+// override render method
+export { render };

src/index.js

@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import store from './store';
+import { Provider } from 'react-redux';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
   document.getElementById('root')
 );