From 9d47d5ec35d2e454d3670a49337d15d0179bfb39 Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 11:22:22 -0300
Subject: [PATCH 1/4] gerador de senha de acordo com o tamanho escolhido

---
 src/components/BtnGenerate/BtnGenerate.js     |  8 +++-
 src/components/BtnGenerate/style.css          |  0
 .../LengthCaracters/LengthCaracters.js        | 19 ++------
 src/components/Main/Main.js                   | 44 +++++++++++++++++--
 src/components/Settings/Settings.js           |  3 +-
 src/data/letters.js                           |  4 ++
 src/data/numbers.js                           |  3 ++
 src/data/symbols.js                           |  5 +++
 8 files changed, 66 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/BtnGenerate/style.css
 create mode 100644 src/data/letters.js
 create mode 100644 src/data/numbers.js
 create mode 100644 src/data/symbols.js

diff --git a/src/components/BtnGenerate/BtnGenerate.js b/src/components/BtnGenerate/BtnGenerate.js
index 14637e0..79c2788 100644
--- a/src/components/BtnGenerate/BtnGenerate.js
+++ b/src/components/BtnGenerate/BtnGenerate.js
@@ -3,8 +3,14 @@ import './BtnGenerate.css';
 
 export default class BtnGenerate extends Component {
   render() {
+    const { onClick } = this.props;
+
     return (
-      <button className="btn" type="submit">
+      <button
+        className="btn"
+        type="submit"
+        onClick={ onClick }
+      >
         GENERATE PASSWORD
       </button>  
     );
diff --git a/src/components/BtnGenerate/style.css b/src/components/BtnGenerate/style.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/LengthCaracters/LengthCaracters.js b/src/components/LengthCaracters/LengthCaracters.js
index f4123a4..ec7177f 100644
--- a/src/components/LengthCaracters/LengthCaracters.js
+++ b/src/components/LengthCaracters/LengthCaracters.js
@@ -2,20 +2,9 @@ import React, { Component } from 'react';
 import './LengthCaracters.css';
 
 export default class LengthCaracters extends Component {
-  constructor() {
-    super ();
-
-    this.state = {
-      length: '4',
-    }
-  }
-
-  handleChange = ({ target }) => {
-    this.setState({ length: target.value })
-  }
 
   render() {
-    const { length } = this.state;
+    const { onChange, length } = this.props;
 
     return (
       <section className="main_length">
@@ -24,14 +13,14 @@ export default class LengthCaracters extends Component {
           <span className="min_length">4</span>
           <input
             className="slider"
-            onChange={ this.handleChange }
             type="range"
             min="4"
-            max="32"
+            max="20"
             value={ length }
+            onChange={ onChange }
           />
           
-          <span className="max_length">32</span>
+          <span className="max_length">20</span>
         </div>
         
       </section>
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 60ba1ea..5acb666 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -1,16 +1,54 @@
 import React, { Component } from 'react';
 import LengthCaracters from '../LengthCaracters/LengthCaracters';
 import Settings from '../Settings/Settings';
+import letters from '../../data/letters';
 import './Main.css'
 
 export default class Main extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      password: '',
+      lengthPassword: '4',
+    }
+  }
+
+  handleLength = ({ target: { value } }) => {
+    this.setState({ lengthPassword: value });
+  }
+
+  createPassword = () => {
+    const { lengthPassword } = this.state;
+    let password = '';
+
+    for (let index = 1; index <= lengthPassword; index += 1) {
+      const index = Math.round(Math.random() * letters.length);
+      password += letters[index];
+    };
+
+    return password;
+  }
+
+  handleClick = (event) => {
+    event.preventDefault();
+    const password = this.createPassword();
+
+    console.log(password);
+  }
+
   render() {
+    const { password, lengthPassword } = this.state;
+
     return (
       <main className="body_main">
-        <p className="main_password">CLICK GENERATE</p>
+        { password.length === 0
+          ? <p className="main_password">CLICK GENERATE</p>
+          : <p className="main_password">{ password }</p>
+        }
 
-        <LengthCaracters />
-        <Settings />
+        <LengthCaracters length={ lengthPassword } onChange={ this.handleLength } />
+        <Settings onClick={ this.handleClick } />
       </main>
     );
   }
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
index a1db8e6..deb660c 100644
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@@ -5,6 +5,7 @@ import './Settings.css';
 
 export default class Settings extends Component {
   render() {
+    const { onClick } = this.props;
     return (
       <form className="main__form">
         <p className="legend">SETTINGS</p>
@@ -28,7 +29,7 @@ export default class Settings extends Component {
           id="settings_symbols"
         />
 
-        <BtnGenerate />
+        <BtnGenerate onClick={ onClick }/>
       </form>
     );
   }
diff --git a/src/data/letters.js b/src/data/letters.js
new file mode 100644
index 0000000..143b364
--- /dev/null
+++ b/src/data/letters.js
@@ -0,0 +1,4 @@
+const letters = ['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'];
+
+export default letters;
diff --git a/src/data/numbers.js b/src/data/numbers.js
new file mode 100644
index 0000000..49f4586
--- /dev/null
+++ b/src/data/numbers.js
@@ -0,0 +1,3 @@
+const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+export default numbers;
diff --git a/src/data/symbols.js b/src/data/symbols.js
new file mode 100644
index 0000000..469e4d1
--- /dev/null
+++ b/src/data/symbols.js
@@ -0,0 +1,5 @@
+const symbols = ['>', '<', '@', '?', '/', '+', '-', '!', '#', '$', '%', '¨', '&', '*',
+  '(', ')', '_', '=', '°', '®', 'ŧ', 'ø', '[', ']', '~', '^', '}', '{', '|', '.', ',',
+  ':', ';'];
+
+export default symbols;

From a9923e0ef21bf0746da466fb67ac03aac305a69f Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 11:28:52 -0300
Subject: [PATCH 2/4] prop-types das props

---
 src/components/LengthCaracters/LengthCaracters.js | 6 ++++++
 src/components/Settings/Settings.js               | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/LengthCaracters/LengthCaracters.js b/src/components/LengthCaracters/LengthCaracters.js
index ec7177f..eae01f5 100644
--- a/src/components/LengthCaracters/LengthCaracters.js
+++ b/src/components/LengthCaracters/LengthCaracters.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './LengthCaracters.css';
 
 export default class LengthCaracters extends Component {
@@ -28,3 +29,8 @@ export default class LengthCaracters extends Component {
     );
   }
 }
+
+LengthCaracters.propTypes = {
+  onChange: PropTypes.func,
+  length: PropTypes.string,
+}.isRequired;
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
index deb660c..4703a5e 100644
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Checkbox from '../Checkbox/Checkbox';
 import BtnGenerate from '../BtnGenerate/BtnGenerate';
 import './Settings.css';
@@ -34,3 +35,7 @@ export default class Settings extends Component {
     );
   }
 }
+
+Settings.propTypes = {
+  onClick: PropTypes.func,
+}.isRequired;

From 7724dccf061d799059dd085d892cc047b206093f Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 11:39:29 -0300
Subject: [PATCH 3/4] =?UTF-8?q?corre=C3=A7ao=20do=20bug=20undefined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/Main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 5acb666..0912f6a 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -23,7 +23,7 @@ export default class Main extends Component {
     let password = '';
 
     for (let index = 1; index <= lengthPassword; index += 1) {
-      const index = Math.round(Math.random() * letters.length);
+      const index = Math.ceil(Math.random() * letters.length) - 1;
       password += letters[index];
     };
 

From 5588d831cc51fbb48c641368ca9fbefd67c71316 Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 13:05:39 -0300
Subject: [PATCH 4/4] gerador de senhas de acordo com o tamanho: done

---
 src/components/Main/Main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 0912f6a..cb0683c 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -34,7 +34,7 @@ export default class Main extends Component {
     event.preventDefault();
     const password = this.createPassword();
 
-    console.log(password);
+    this.setState({ password });
   }
 
   render() {