estados do checkbox

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;
 }

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,
+}

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;

src/components/Main/Main.js

@@ -11,6 +11,11 @@ export default class Main extends Component {
     this.state = {
       password: '',
       lengthPassword: '4',
+      uppercase: false,
+      lowercase: false,
+      numbers: false,
+      symbols: false,
+      buttonDisabled: true,
     }
   }
 
@@ -30,6 +35,22 @@ 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) => {
     event.preventDefault();
     const password = this.createPassword();
@@ -38,7 +59,7 @@ export default class Main extends Component {
   }
 
   render() {
-    const { password, lengthPassword } = this.state;
+    const { password, lengthPassword, uppercase, lowercase, numbers, symbols, buttonDisabled } = this.state;
 
     return (
       <main className="body_main">
@@ -48,7 +69,15 @@ 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 }
+          buttonDisabled={ buttonDisabled }
+        />
       </main>
     );
   }

src/components/Settings/Settings.js

@@ -6,36 +6,54 @@ import './Settings.css';
 
 export default class Settings extends Component {
   render() {
-    const { onClick } = this.props;
+    const { onClick, onChange, uppercase, lowercase, numbers, symbols, buttonDisabled } = 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 }/>
+        <BtnGenerate buttonDisabled={ buttonDisabled } onClick={ onClick }/>
       </form>
     );
   }
 }
 
 Settings.propTypes = {
   onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  uppercase: PropTypes.bool,
+  lowercase: PropTypes.bool,
+  numbers: PropTypes.bool,
+  symbols: PropTypes.bool,
+  buttonDisabled: PropTypes.bool,
 }.isRequired;