From 2b529c2ed37e7f07ece216a30aabc216612d7abc Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 13:48:51 -0300
Subject: [PATCH 1/2] e

---
 src/components/Checkbox/Checkbox.js |  7 ++++++-
 src/components/Main/Main.js         | 22 ++++++++++++++++++++--
 src/components/Settings/Settings.js | 19 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index 1f1e577..56684bf 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -4,7 +4,7 @@ import './Checkbox.css';
 
 export default class Checkbox extends Component {
   render() {
-    const { id, label } = this.props;
+    const { id, label, checked, onChange, name } = this.props;
 
     return (
       <label className="box_style switch" htmlFor={ id }>
@@ -13,6 +13,9 @@ export default class Checkbox extends Component {
           <input
           id={ id }
           type="checkbox"
+          checked={ checked }
+          onChange={ onChange }
+          name={ name }
           />
           <span className="switch-button"></span>
         </div>
@@ -25,4 +28,6 @@ export default class Checkbox extends Component {
 Checkbox.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
+  name: PropTypes.string,
+  checked: PropTypes.bool,
 }.isRequired;
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index cb0683c..39c6adb 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -11,6 +11,10 @@ export default class Main extends Component {
     this.state = {
       password: '',
       lengthPassword: '4',
+      uppercase: false,
+      lowercase: false,
+      numbers: false,
+      symbols: false,
     }
   }
 
@@ -30,6 +34,13 @@ export default class Main extends Component {
     return password;
   }
 
+  handleChangeCheckbox = ({ target }) => {
+    const { name } = target;
+    this.setState((prevState) => ({
+      [name]: !prevState[name],
+    }));
+  }
+
   handleClick = (event) => {
     event.preventDefault();
     const password = this.createPassword();
@@ -38,7 +49,7 @@ export default class Main extends Component {
   }
 
   render() {
-    const { password, lengthPassword } = this.state;
+    const { password, lengthPassword, uppercase, lowercase, numbers, symbols } = this.state;
 
     return (
       <main className="body_main">
@@ -48,7 +59,14 @@ export default class Main extends Component {
         }
 
         <LengthCaracters length={ lengthPassword } onChange={ this.handleLength } />
-        <Settings onClick={ this.handleClick } />
+        <Settings
+          onClick={ this.handleClick }
+          onChange={ this.handleChangeCheckbox }
+          uppercase={ uppercase }
+          lowercase={ lowercase }
+          numbers={ numbers }
+          symbols={ symbols }
+        />
       </main>
     );
   }
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
index 4703a5e..8a707c7 100644
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@@ -6,28 +6,40 @@ import './Settings.css';
 
 export default class Settings extends Component {
   render() {
-    const { onClick } = this.props;
+    const { onClick, onChange, uppercase, lowercase, numbers, symbols } = this.props;
     return (
       <form className="main__form">
         <p className="legend">SETTINGS</p>
         <Checkbox
           label="Include Uppercase"
           id="settings_uppercase"
+          checked={ uppercase }
+          onChange={ onChange }
+          name="uppercase"
         />
 
         <Checkbox
           label="Include Lowercase"
           id="settings_lowercase"
+          checked={ lowercase }
+          onChange={ onChange }
+          name="lowercase"
         />
 
         <Checkbox
           label="Include Numbers"
           id="settings_numbers"
+          checked={ numbers }
+          onChange={ onChange }
+          name="numbers"
         />
 
         <Checkbox
           label="Include Symbols"
           id="settings_symbols"
+          checked={ symbols }
+          onChange={ onChange }
+          name="symbols"
         />
 
         <BtnGenerate onClick={ onClick }/>
@@ -38,4 +50,9 @@ export default class Settings extends Component {
 
 Settings.propTypes = {
   onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  uppercase: PropTypes.bool,
+  lowercase: PropTypes.bool,
+  numbers: PropTypes.bool,
+  symbols: PropTypes.bool,
 }.isRequired;

From 30c295127466a529fb66b3b00b61168fff348c13 Mon Sep 17 00:00:00 2001
From: Matheus-Ferreira <m.ferreira.araujo2016@gmail.com>
Date: Wed, 2 Feb 2022 14:30:50 -0300
Subject: [PATCH 2/2] validacao do botao done

---
 src/components/BtnGenerate/BtnGenerate.css |  5 +++++
 src/components/BtnGenerate/BtnGenerate.js  |  9 ++++++++-
 src/components/Main/Main.js                | 15 +++++++++++++--
 src/components/Settings/Settings.js        |  5 +++--
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/BtnGenerate/BtnGenerate.css b/src/components/BtnGenerate/BtnGenerate.css
index 0e18ef0..bc590e1 100644
--- a/src/components/BtnGenerate/BtnGenerate.css
+++ b/src/components/BtnGenerate/BtnGenerate.css
@@ -5,4 +5,9 @@
   padding: 15px;
   border-radius: 8px;
   font-weight: 800;
+  transition: .4s all ease;
+}
+
+.btn:disabled {
+  opacity: 0.5;
 }
diff --git a/src/components/BtnGenerate/BtnGenerate.js b/src/components/BtnGenerate/BtnGenerate.js
index 79c2788..79f6e99 100644
--- a/src/components/BtnGenerate/BtnGenerate.js
+++ b/src/components/BtnGenerate/BtnGenerate.js
@@ -1,18 +1,25 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './BtnGenerate.css';
 
 export default class BtnGenerate extends Component {
   render() {
-    const { onClick } = this.props;
+    const { onClick, buttonDisabled } = this.props;
 
     return (
       <button
         className="btn"
         type="submit"
         onClick={ onClick }
+        disabled={ buttonDisabled }
       >
         GENERATE PASSWORD
       </button>  
     );
   }
 }
+
+BtnGenerate.propTypes = {
+  onClick: PropTypes.func,
+  buttonDisabled: PropTypes.bool,
+}
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 39c6adb..52e39a5 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -15,6 +15,7 @@ export default class Main extends Component {
       lowercase: false,
       numbers: false,
       symbols: false,
+      buttonDisabled: true,
     }
   }
 
@@ -34,11 +35,20 @@ export default class Main extends Component {
     return password;
   }
 
+  validationButton = () => {
+    const { uppercase, lowercase, numbers, symbols } = this.state;
+
+    const checkedCases = [ uppercase, lowercase, numbers, symbols ];
+    const validationButton = checkedCases.some((elem) => elem);
+
+    this.setState({ buttonDisabled: !validationButton })
+  }
+
   handleChangeCheckbox = ({ target }) => {
     const { name } = target;
     this.setState((prevState) => ({
       [name]: !prevState[name],
-    }));
+    }), () => this.validationButton() );
   }
 
   handleClick = (event) => {
@@ -49,7 +59,7 @@ export default class Main extends Component {
   }
 
   render() {
-    const { password, lengthPassword, uppercase, lowercase, numbers, symbols } = this.state;
+    const { password, lengthPassword, uppercase, lowercase, numbers, symbols, buttonDisabled } = this.state;
 
     return (
       <main className="body_main">
@@ -66,6 +76,7 @@ export default class Main extends Component {
           lowercase={ lowercase }
           numbers={ numbers }
           symbols={ symbols }
+          buttonDisabled={ buttonDisabled }
         />
       </main>
     );
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
index 8a707c7..bfc5267 100644
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@@ -6,7 +6,7 @@ import './Settings.css';
 
 export default class Settings extends Component {
   render() {
-    const { onClick, onChange, uppercase, lowercase, numbers, symbols } = this.props;
+    const { onClick, onChange, uppercase, lowercase, numbers, symbols, buttonDisabled } = this.props;
     return (
       <form className="main__form">
         <p className="legend">SETTINGS</p>
@@ -42,7 +42,7 @@ export default class Settings extends Component {
           name="symbols"
         />
 
-        <BtnGenerate onClick={ onClick }/>
+        <BtnGenerate buttonDisabled={ buttonDisabled } onClick={ onClick }/>
       </form>
     );
   }
@@ -55,4 +55,5 @@ Settings.propTypes = {
   lowercase: PropTypes.bool,
   numbers: PropTypes.bool,
   symbols: PropTypes.bool,
+  buttonDisabled: PropTypes.bool,
 }.isRequired;