From bd355af5286872828fd1a7b6de5616b40c0ca2e6 Mon Sep 17 00:00:00 2001
From: Jean Viegas <jeanmelg@gmail.com>
Date: Tue, 1 Feb 2022 17:53:32 -0300
Subject: [PATCH 1/2] layout e state v1

---
 src/App.js                       | 75 ++++++++++++++++++++++----------
 src/components/GenerateButton.js | 12 +++++
 src/components/RangeInput.js     | 13 ++++++
 src/components/TogleSwith.js     | 16 +++++++
 4 files changed, 92 insertions(+), 24 deletions(-)
 create mode 100644 src/components/GenerateButton.js
 create mode 100644 src/components/RangeInput.js
 create mode 100644 src/components/TogleSwith.js

diff --git a/src/App.js b/src/App.js
index 3784575..298b48b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,52 @@
-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,
+    });
+  }
+
+  render(){
+    return (
+      <Container>
+        <Row>
+          <h1>Password Generator</h1>
+        </Row>
+        <Form>
+          <RangeInput handleChange= {this.handleChange} />
 
-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 />
+        </Form>
+      </Container>
+    );
+  }
+}
diff --git a/src/components/GenerateButton.js b/src/components/GenerateButton.js
new file mode 100644
index 0000000..729e384
--- /dev/null
+++ b/src/components/GenerateButton.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+
+export default class GenerateButton extends React.Component {
+  render() {
+    return(
+    <Button variant="primary" type="submit">
+      GENERATE PASSWORD
+    </Button>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/components/RangeInput.js b/src/components/RangeInput.js
new file mode 100644
index 0000000..d476430
--- /dev/null
+++ b/src/components/RangeInput.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+
+export default class RangeInput extends React.Component {
+  render() {
+    return(
+      <>
+        <Form.Label>Range</Form.Label>
+        <Form.Range min="4" max="32" step="1"/>
+      </>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/components/TogleSwith.js b/src/components/TogleSwith.js
new file mode 100644
index 0000000..42ebfd2
--- /dev/null
+++ b/src/components/TogleSwith.js
@@ -0,0 +1,16 @@
+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.toLowerCase()}
+      onChange={handleChange}
+    />
+    )
+  }
+}
\ No newline at end of file

From e2365b7cfa1a71777e99314507d64c6bf6b0ea60 Mon Sep 17 00:00:00 2001
From: Jean Viegas <jeanmelg@gmail.com>
Date: Tue, 1 Feb 2022 19:43:52 -0300
Subject: [PATCH 2/2] works, but its ugly

---
 src/App.js                       | 33 ++++++++++++++++++++++++++------
 src/components/GenerateButton.js |  3 ++-
 src/components/RangeInput.js     |  5 +++--
 src/components/TogleSwith.js     |  3 ++-
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 298b48b..c8618a4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,24 +27,45 @@ export default class App extends React.Component {
     });
   }
 
+  // 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} />
+          <RangeInput handleChange= {this.handleChange} name='length' length={ length }/>
 
-          <TogleSwith handleChange= {this.handleChange} name='Uppercase'/>
+          <TogleSwith handleChange= {this.handleChange} name='uppercase'/>
 
-          <TogleSwith handleChange= {this.handleChange} name='Lowercase'/>
+          <TogleSwith handleChange= {this.handleChange} name='lowercase'/>
 
-          <TogleSwith handleChange= {this.handleChange} name='Numbers'/>
+          <TogleSwith handleChange= {this.handleChange} name='numbers'/>
 
-          <TogleSwith handleChange= {this.handleChange} name='Symbols'/>
+          <TogleSwith handleChange= {this.handleChange} name='symbols'/>
 
-          <GenerateButton />
+          <GenerateButton generatePass= {this.generatePass}/>
         </Form>
       </Container>
     );
diff --git a/src/components/GenerateButton.js b/src/components/GenerateButton.js
index 729e384..3819f39 100644
--- a/src/components/GenerateButton.js
+++ b/src/components/GenerateButton.js
@@ -3,8 +3,9 @@ import { Button } from "react-bootstrap";
 
 export default class GenerateButton extends React.Component {
   render() {
+    const { generatePass } = this.props
     return(
-    <Button variant="primary" type="submit">
+    <Button variant="primary" type="button" onClick={ generatePass }>
       GENERATE PASSWORD
     </Button>
     )
diff --git a/src/components/RangeInput.js b/src/components/RangeInput.js
index d476430..ce3a49a 100644
--- a/src/components/RangeInput.js
+++ b/src/components/RangeInput.js
@@ -3,10 +3,11 @@ import { Form } from "react-bootstrap";
 
 export default class RangeInput extends React.Component {
   render() {
+    const { handleChange, name, length } = this.props;
     return(
       <>
-        <Form.Label>Range</Form.Label>
-        <Form.Range min="4" max="32" step="1"/>
+        <Form.Label>{ `${name}: ${length}` }</Form.Label>
+        <Form.Range min="4" max="32" step="1" value={ length } name={ name.toLowerCase() } onChange={ handleChange }/>
       </>
     )
   }
diff --git a/src/components/TogleSwith.js b/src/components/TogleSwith.js
index 42ebfd2..8b3a7a9 100644
--- a/src/components/TogleSwith.js
+++ b/src/components/TogleSwith.js
@@ -8,7 +8,8 @@ export default class TogleSwith extends React.Component {
     <Form.Check
       type='checkbox'
       label={name}
-      name={name.toLowerCase()}
+      name={name}
+      value={name}
       onChange={handleChange}
     />
     )