layout e state v1

src/App.js

@@ -1,25 +1,73 @@
-import logo from './logo.svg';
-import './App.css';
-
-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>
-    </div>
-  );
-}
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import GenerateButton from './components/GenerateButton';
+import RangeInput from './components/RangeInput';
+import TogleSwith from './components/TogleSwith';
+import { Container, Form, Row } from 'react-bootstrap';
+
+export default class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      length: 4,
+      uppercase: false,
+      lowercase: false,
+      numbers: false,
+      symbols: false,
+      password: '',
+    }
+  }
+
+  handleChange = ({ target }) => {
+    const { name } = target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  // Codigo adaptado de webtutorial.com.br
+  generatePass = () => {
+    const { uppercase, lowercase, numbers, symbols, length} = this.state;
+    let stringAleatoria = '';
+    let caracteres = ''
+    lowercase ? caracteres += 'abcdefghijklmnopqrstuvwxyz' : ''
+    uppercase ? caracteres += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' : ''
+    numbers ? caracteres += '0123456789' : ''
+    symbols ? caracteres += '!@#$%¨&*()_+': ''
+    for (var i = 0; i < length; i++) {
+      stringAleatoria += caracteres.charAt(Math.floor(Math.random() * caracteres.length));
+    }
+    this.setState({
+      password: stringAleatoria,
+    })
+  }
+
+  render(){
+    const { length, password } = this.state;
+    return (
+      <Container>
+        <Row>
+          <h1>Password Generator</h1>
+        </Row>
+        <Row>
+          { password.length > 0 ? <h2>{ password }</h2> : <h2> CLICK TO GENERATE </h2> }
+        </Row>
+        <Form>
+          <RangeInput handleChange= {this.handleChange} name='length' length={ length }/>
 
-export default App;
+          <TogleSwith handleChange= {this.handleChange} name='uppercase'/>
+
+          <TogleSwith handleChange= {this.handleChange} name='lowercase'/>
+
+          <TogleSwith handleChange= {this.handleChange} name='numbers'/>
+
+          <TogleSwith handleChange= {this.handleChange} name='symbols'/>
+
+          <GenerateButton generatePass= {this.generatePass}/>
+        </Form>
+      </Container>
+    );
+  }
+}

src/components/GenerateButton.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+
+export default class GenerateButton extends React.Component {
+  render() {
+    const { generatePass } = this.props
+    return(
+    <Button variant="primary" type="button" onClick={ generatePass }>
+      GENERATE PASSWORD
+    </Button>
+    )
+  }
+}

src/components/RangeInput.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+
+export default class RangeInput extends React.Component {
+  render() {
+    const { handleChange, name, length } = this.props;
+    return(
+      <>
+        <Form.Label>{ `${name}: ${length}` }</Form.Label>
+        <Form.Range min="4" max="32" step="1" value={ length } name={ name.toLowerCase() } onChange={ handleChange }/>
+      </>
+    )
+  }
+}

src/components/TogleSwith.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+
+export default class TogleSwith extends React.Component {
+  render() {
+    const { name,  handleChange } = this.props;
+    return(
+    <Form.Check
+      type='checkbox'
+      label={name}
+      name={name}
+      value={name}
+      onChange={handleChange}
+    />
+    )
+  }
+}