[Diogo - TRIBO - C ] Logica de gerar senha aplicada

README.md

@@ -21,3 +21,7 @@ Nesse exercício iremos replicar o layout de um gerador de senhas. Este layout 
 
 ![Tela principal](/password-generator-layout.png)
 ![Tela com senha gerada](/password-final.png)
+
+# Exemplo
+
+https://pass-generator-ogoiddev.netlify.app/

package.json

@@ -6,12 +6,16 @@
     "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",
+    "redux": "^4.2.0",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.css

@@ -1,38 +1,10 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   align-items: center;
+  background-color: #499bf6;
+  display: flex;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  height: 100vh;
+  z-index: -10;
 }
 
-.App-link {
-  color: #61dafb;
-}
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,23 +1,14 @@
-import logo from './logo.svg';
 import './App.css';
+import {FormGenerator} from './components/FormGenerator.jsx';
+import {Provider} from 'react-redux'
+import store from './app/store'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <Provider store={store}>
+      <FormGenerator/>
+    </Provider>
     </div>
   );
 }

src/app/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import setConfigReducer from '../features/setPassword';
+
+export default configureStore({
+  reducer: {
+    userConfig: setConfigReducer,
+  },
+});

src/components/FormGenerator.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setPassword } from '../features/setPassword';
+import DATA from './helpers/Data';
+import * as S from './styled'
+
+export const FormGenerator = () => {
+  const [config, setConfig] = useState({
+      length: 16,
+      upper: true,
+      lower: true,
+      numbers: true,
+      symbols: false,
+  })
+
+  const dispatch = useDispatch()
+  const passwordData = useSelector(({userConfig:{ password }}) => password)
+  console.log(passwordData);
+
+  const handleChange = ({ target: { name, checked, value } }) => {
+    setConfig((config) => ({ ...config, [name]: name === 'length' ? value : checked }));
+  }
+
+  const passwordGenerator = () => {
+    let arrayToMath = []
+    let password = '';
+    const ramdomIndex = () => Math.floor(Math.random() * arrayToMath.length)
+    const passwordLength = Array.from({ length: config.length })
+
+    const needAlert = Object.values(config).slice(1).every((e)=> !e)
+    if (needAlert) { return alert('Escolha uma opcao de base para incluir') }
+
+    const createWith = Object.entries(config).map((each) => (each[1] === true) && each[0])
+      .filter((each) => each)
+    createWith.forEach((each) => arrayToMath = arrayToMath.concat(DATA[each]))
+    passwordLength.forEach((_e) => password += arrayToMath[ramdomIndex()])
+
+    dispatch(setPassword(password))
+  }
+
+  return (
+    <S.Container>
+      <h1>Password Generator</h1>
+      <S.DivPass>{ passwordData ? passwordData : `CLICK GENERATOR` }</S.DivPass>
+
+      <S.Form>
+
+        <h4>{ `LENGTH: ${config.length}` }</h4>
+
+        <label htmlFor="length" className="range-container">
+          <h3>4</h3>
+          <input
+            onChange={ handleChange }
+            value={ config.length } name='length' type="range" min="4" max='32' />
+          <h3>32</h3>
+        </label>
+
+        <h4>SETTINGS</h4>
+
+        <label htmlFor="upper" className="checkbox">
+          <span>Include Uppercase</span>
+          <div className="form-check form-switch">
+            <input
+              className="form-check-input"
+              onChange={ handleChange }
+              checked={ config.upper } type="checkbox" name="upper" id="upper" />
+          </div>
+        </label>
+
+        <label htmlFor="lower" className="checkbox">
+          <span>Include Lowercase</span>
+          <div className="form-check form-switch">
+            <input
+              className="form-check-input"
+              onChange={ handleChange }
+              checked={ config.lower } type="checkbox" name="lower" id="lower" />
+          </div>
+        </label>
+
+        <label htmlFor="numbers" className="checkbox">
+          <span>Include Numbers</span>
+          <div className="form-check form-switch">
+            <input
+              className="form-check-input"
+              onChange={ handleChange }
+              checked={ config.numbers } type="checkbox" name="numbers" id="numbers" />
+          </div>
+        </label>
+
+        <label htmlFor="symbols" className="checkbox">
+          <span>Include Symbols</span>
+          <div className="form-check form-switch">
+            <input
+              className="form-check-input"
+              onChange={ handleChange }
+              checked={ config.symbols } type="checkbox" name="symbols" id="symbols" />
+          </div>
+        </label>
+
+        <S.BtnGenerator onClick={ passwordGenerator } type='button' >GENERATE PASSWORD</S.BtnGenerator>
+
+      </S.Form>
+    </S.Container >);
+};

src/components/helpers/Data.js

@@ -0,0 +1,12 @@
+const DATA = {
+  numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  upper: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+  lower: ['a','b',	'c',	'd',	'e',	'f',	'g',	'h',	'i',	'j',	'k',	'l',	'm',	'n',	'o',	'p',	'q',	'r',	's',	't',	'u',	'v',	'w',	'x',	'y',	'z'],
+  symbols: ['!','"','#','$','%','&','(',')','*',',','-','.','/',':',';','<','>','?','@','[',']','^','_','`','{','|','}','~'],
+}
+
+export default DATA;
+
+
+
+

src/components/styled.js

@@ -0,0 +1,108 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  align-items: center;
+  background-color: #0b0f2f;
+  border-radius: 16px;
+  box-sizing: border-box;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  height: 90%; 
+  justify-content: space-between;
+  margin-bottom: 3%;
+  width: 93%;
+
+  h1 {
+    margin-top: 15px;
+  }
+`
+
+export const Form = styled.form`
+  align-items: center;
+  display: flex;  
+  flex-direction: column;
+  flex: 1;
+  font-size: 1rem;
+  justify-content: space-between;
+  max-width: 600px;
+  width: 85%;
+
+  input[type="range"] {
+    width: 80%;
+  }
+
+  h3 {
+    flex: 1;
+    font-size: 0.7rem;
+    text-align: center;
+    margin: auto 0;
+  }
+
+  h4 {
+    font-size: 0.7rem;
+    text-align: start;
+    width: 95%;
+  }
+
+  label {
+    align-items: center;
+    background-color: #1e233e;
+    border-radius: 8px;
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    margin: 5px;
+    width: 100%;
+
+    span {
+      margin-left: 20px;
+    }
+
+    .form-check {
+        align-items: center;
+        color: white;
+        display: flex;
+        margin-right: 20px;
+
+      input[type="checkbox"] {
+          background-color: #6e5254;
+          height: 27px;
+          width: 50px;
+
+      &:checked {
+          background-color: #5e6adb;
+        }
+      }
+    }
+  }
+`
+
+export const DivPass = styled.h2`
+  background-color: #1e233e;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: normal;
+  height: 63px;
+  line-height: 65px;
+  margin: 7px 0;
+  text-align: center;
+  display: inline-block;
+  overflow: hidden;
+  width: 85%;
+  max-width: 600px;
+`
+
+export const BtnGenerator = styled.button`
+  background: linear-gradient(-45deg, rgb(111, 84, 164), rgb(106, 123, 221));
+  border-radius: 8px;
+  border: none;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 700;
+  height: 55px;
+  margin: 5px 0 12px 0;
+  object-fit:  fit-content;
+  padding: 8px;
+  width: 100%;
+`

src/features/setPassword.js

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const setConfigSlice = createSlice({
+  name: 'userConfig',
+  initialState: {
+    password: undefined,
+  },
+
+  reducers: {
+    setPassword: (state, action) => {
+      localStorage.setItem('pass', JSON.stringify(action.payload));
+      state.password = action.payload;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setPassword } = setConfigSlice.actions;
+
+export default setConfigSlice.reducer;

src/index.css

@@ -1,13 +1,27 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  z-index: -1;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #499bf6;
+}