gerador de senha de acordo com o tamanho escolhido

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

src/components/LengthCaracters/LengthCaracters.js

@@ -1,21 +1,11 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 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,18 +14,23 @@ 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>
 
     );
   }
 }
+
+LengthCaracters.propTypes = {
+  onChange: PropTypes.func,
+  length: PropTypes.string,
+}.isRequired;

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.ceil(Math.random() * letters.length) - 1;
+      password += letters[index];
+    };
+
+    return password;
+  }
+
+  handleClick = (event) => {
+    event.preventDefault();
+    const password = this.createPassword();
+
+    this.setState({ 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>
     );
   }

src/components/Settings/Settings.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Checkbox from '../Checkbox/Checkbox';
 import BtnGenerate from '../BtnGenerate/BtnGenerate';
 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,8 +30,12 @@ export default class Settings extends Component {
           id="settings_symbols"
         />
 
-        <BtnGenerate />
+        <BtnGenerate onClick={ onClick }/>
       </form>
     );
   }
 }
+
+Settings.propTypes = {
+  onClick: PropTypes.func,
+}.isRequired;

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;

src/data/numbers.js

@@ -0,0 +1,3 @@
+const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+export default numbers;

src/data/symbols.js

@@ -0,0 +1,5 @@
+const symbols = ['>', '<', '@', '?', '/', '+', '-', '!', '#', '$', '%', '¨', '&', '*',
+  '(', ')', '_', '=', '°', '®', 'ŧ', 'ø', '[', ']', '~', '^', '}', '{', '|', '.', ',',
+  ':', ';'];
+
+export default symbols;