From 154730caf5427815302bfb74618153ac7f69a471 Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Tue, 1 Feb 2022 16:38:05 -0300 Subject: [PATCH 1/7] primeiro commit --- public/index.html | 32 +++----------------------------- src/App.js | 17 +++-------------- 2 files changed, 6 insertions(+), 43 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..5094d63 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,17 @@ - + - + - - - React App + Password Generator
- diff --git a/src/App.js b/src/App.js index 3784575..1215921 100644 --- a/src/App.js +++ b/src/App.js @@ -4,20 +4,9 @@ import './App.css'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+

Password Generator

+
); } From 02a9181fc327a459c013c4fd98eda4ceb5a1afc7 Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Tue, 1 Feb 2022 17:53:34 -0300 Subject: [PATCH 2/7] add componentes --- src/App.css | 67 ++++++++++++++++++++++++++++++++++------------------- src/App.js | 3 ++- 2 files changed, 45 insertions(+), 25 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..b72395f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,57 @@ -.App { - text-align: center; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -.App-logo { - height: 40vmin; - pointer-events: none; +main { + padding: 8px 3%; + margin: 20px auto; + width: 60%; + border-radius: 10px; + background-color: rgb(23, 23, 67); + display: flex; + flex-direction: column; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +main h1 { + color: white; + margin-bottom: 20px; } -.App-header { - background-color: #282c34; - min-height: 100vh; +form { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); +} + +form button { + background-color: rgb(35, 35, 121); + border: 0; + width: 100%; + border-radius: 8px; + padding: 14px; color: white; + font-size: 15px; + cursor: pointer; + margin-bottom: 20px; } -.App-link { - color: #61dafb; +.container { + background-color: rgb(35, 35, 121); + padding: 14px; + display: flex; + margin-bottom: 12px; + border-radius: 8px; + flex-direction: column; +} + +label { + display: flex; + align-items: center; + justify-content: space-between; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +p { + margin: 4px; } + diff --git a/src/App.js b/src/App.js index 1215921..71b2963 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,12 @@ -import logo from './logo.svg'; import './App.css'; +import Form from './components/form'; function App() { return (

Password Generator

+
); From 980e04ec84ac21faa9187bdc78a04e38a1f3310a Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Tue, 1 Feb 2022 17:54:12 -0300 Subject: [PATCH 3/7] add componentes --- src/components/Checkbox.js | 17 +++++++++++++++++ src/components/Number.js | 16 ++++++++++++++++ src/components/form.js | 37 +++++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 src/components/Checkbox.js create mode 100644 src/components/Number.js create mode 100644 src/components/form.js diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js new file mode 100644 index 0000000..af0f474 --- /dev/null +++ b/src/components/Checkbox.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +class Checkbox extends Component { + render() { + const { textLabel } = this.props; + return ( +
+ +
+ ) + } +} + +export default Checkbox; \ No newline at end of file diff --git a/src/components/Number.js b/src/components/Number.js new file mode 100644 index 0000000..b022a63 --- /dev/null +++ b/src/components/Number.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +class Number extends Component { + render() { + return ( +
+ +
+ ) + } +} + +export default Number; \ No newline at end of file diff --git a/src/components/form.js b/src/components/form.js new file mode 100644 index 0000000..b460d88 --- /dev/null +++ b/src/components/form.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react'; +import Checkbox from './Checkbox'; +import Number from './Number'; + +class Form extends Component { + constructor() { + super() + this.state = { + upperCase: false, + lowererCase: false, + numbers: false, + symbols: false, + } + } + render() { + return ( + +
+ +
+
+

length: 23

+ +
+
+

settings

+ + + + +
+ + ) + } +} + +export default Form; \ No newline at end of file From b3dd27a9ec7f2d300c11dad6c4abb274aa368230 Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Wed, 2 Feb 2022 07:27:05 -0300 Subject: [PATCH 4/7] add services e estilo --- src/App.css | 24 +++++++---- src/App.js | 2 +- src/components/Checkbox.js | 31 ++++++++------ src/components/Form.js | 85 ++++++++++++++++++++++++++++++++++++++ src/components/Number.js | 31 ++++++++------ src/components/form.js | 37 ----------------- src/services/password.js | 22 ++++++++++ 7 files changed, 162 insertions(+), 70 deletions(-) create mode 100644 src/components/Form.js delete mode 100644 src/components/form.js create mode 100644 src/services/password.js diff --git a/src/App.css b/src/App.css index b72395f..8065003 100644 --- a/src/App.css +++ b/src/App.css @@ -5,11 +5,11 @@ } main { - padding: 8px 3%; + padding: 12px 3%; margin: 20px auto; width: 60%; border-radius: 10px; - background-color: rgb(23, 23, 67); + background-color: #0B112F; display: flex; flex-direction: column; } @@ -25,20 +25,21 @@ form { } form button { - background-color: rgb(35, 35, 121); + background-color: #1D223F; border: 0; width: 100%; border-radius: 8px; - padding: 14px; + padding: 20px 0; color: white; - font-size: 15px; + font-size: 18px; cursor: pointer; margin-bottom: 20px; + text-transform: uppercase; } .container { - background-color: rgb(35, 35, 121); - padding: 14px; + background-color: #1D223F; + padding: 18px 3%; display: flex; margin-bottom: 12px; border-radius: 8px; @@ -49,9 +50,18 @@ label { display: flex; align-items: center; justify-content: space-between; + color: white; } p { margin: 4px; } +.generate { + background-color: #1D223F; + color: white; + text-align: center; + font-weight: bold; + margin-top: 10px; +} + diff --git a/src/App.js b/src/App.js index 71b2963..dead4fb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import './App.css'; -import Form from './components/form'; +import Form from './components/Form'; function App() { return ( diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index af0f474..313720a 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -1,17 +1,22 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; class Checkbox extends Component { - render() { - const { textLabel } = this.props; - return ( -
- -
- ) - } + render() { + const { textLabel, name, handleChange } = this.props; + return ( +
+ +
+ ); + } } -export default Checkbox; \ No newline at end of file +export default Checkbox; diff --git a/src/components/Form.js b/src/components/Form.js new file mode 100644 index 0000000..2da7e8e --- /dev/null +++ b/src/components/Form.js @@ -0,0 +1,85 @@ +import React, { Component } from "react"; +import Checkbox from "./Checkbox"; +import Number from "./Number"; +import { generatePass } from "../services/password"; + +class Form extends Component { + constructor() { + super(); + this.state = { + upperCase: false, + lowereCase: false, + numbers: false, + symbols: false, + symbols: false, + length: 8, + password: "GENERATE PASSWORD", + }; + this.handleChange = this.handleChange.bind(this); + this.getPass = this.getPass.bind(this); + this.addPass = this.addPass.bind(this); + } + + handleChange({ target }) { + const { name } = target; + const value = target.type !== "checkbox" ? target.value : target.checked; + this.setState( + { + [name]: value, + }, + () => this.getPass() + ); + } + + getPass() { + const { upperCase, symbols, numbers, length } = this.state; + return generatePass(upperCase, symbols, numbers, length); + } + + addPass() { + this.setState({ password: this.getPass() }); + } + + render() { + const { length, password } = this.state; + return ( +
+
+ +
+
+

Length: {length}

+ +
+
+

settings

+ + + + +
+
{password}
+
+ ); + } +} + +export default Form; diff --git a/src/components/Number.js b/src/components/Number.js index b022a63..9785a42 100644 --- a/src/components/Number.js +++ b/src/components/Number.js @@ -1,16 +1,23 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; class Number extends Component { - render() { - return ( -
- -
- ) - } + render() { + const { handleChange, name } = this.props; + return ( +
+ +
+ ); + } } -export default Number; \ No newline at end of file +export default Number; diff --git a/src/components/form.js b/src/components/form.js deleted file mode 100644 index b460d88..0000000 --- a/src/components/form.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { Component } from 'react'; -import Checkbox from './Checkbox'; -import Number from './Number'; - -class Form extends Component { - constructor() { - super() - this.state = { - upperCase: false, - lowererCase: false, - numbers: false, - symbols: false, - } - } - render() { - return ( -
-
- -
-
-

length: 23

- -
-
-

settings

- - - - -
-
- ) - } -} - -export default Form; \ No newline at end of file diff --git a/src/services/password.js b/src/services/password.js new file mode 100644 index 0000000..481cc5f --- /dev/null +++ b/src/services/password.js @@ -0,0 +1,22 @@ +const letras = "abcdefghijklmnopqrstuvwxyz"; +const maiusculas = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +const caracter = "*&%$#-_:><~^"; +const numbers = "0123456789"; +const mai = false; +const car = false; +const num = false; +export const generatePass = (mai, car, num, len) => { + let senha = ""; + for (let i = 0; i < len; i++) { + if (mai) { + senha += maiusculas[Math.floor(Math.random() * maiusculas.length)]; + }if (car) { + senha += caracter[Math.floor(Math.random() * caracter.length)]; + } + if (num) { + senha += numbers[Math.floor(Math.random() * numbers.length)]; + } + senha += letras[Math.floor(Math.random() * letras.length)]; + } + return senha.substring(0, len); +}; From e90e30f803f8caa9776568d8e18780aa5d5a1853 Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Wed, 2 Feb 2022 08:27:54 -0300 Subject: [PATCH 5/7] add checkbox estilizada --- src/App.css | 47 +++++++++++++++++++++++++++++++++++++- src/components/Checkbox.js | 13 +++++++++-- src/components/Form.js | 14 ++++++++---- src/components/Number.js | 6 +++-- 4 files changed, 70 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index 8065003..f2b116d 100644 --- a/src/App.css +++ b/src/App.css @@ -7,7 +7,7 @@ main { padding: 12px 3%; margin: 20px auto; - width: 60%; + width: 98%; border-radius: 10px; background-color: #0B112F; display: flex; @@ -65,3 +65,48 @@ p { margin-top: 10px; } +.number p { + font-size: 12px; + color: #242744; + text-transform: uppercase; +} + +.number span { + color: white; +} + +.settings p { + font-size: 12px; + color: #242744; + text-transform: uppercase; +} + +input[type=range] { + width: 80%; + height: 3px; +} + +input[type=checkbox] { + display: none; +} + +.check { + width: 60px; + height: 35px; + border-radius: 20px; + background-color: #6E7081; + padding: 4px; +} + +.check div { + height: 27px; + background-color: white; + width: 30px; + border-radius: 50%; +} + +.select { + background-color: #5E6BDA; + padding-left: 26px; +} + diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 313720a..8e9ea1e 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -2,17 +2,26 @@ import React, { Component } from "react"; class Checkbox extends Component { render() { - const { textLabel, name, handleChange } = this.props; + const { textLabel, name, handleChange, checked } = this.props; return (
); diff --git a/src/components/Form.js b/src/components/Form.js index 2da7e8e..613a913 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -8,11 +8,11 @@ class Form extends Component { super(); this.state = { upperCase: false, - lowereCase: false, + lowerCase: false, numbers: false, symbols: false, symbols: false, - length: 8, + length: 4, password: "GENERATE PASSWORD", }; this.handleChange = this.handleChange.bind(this); @@ -41,7 +41,7 @@ class Form extends Component { } render() { - const { length, password } = this.state; + const { length, password, upperCase, lowerCase, symbols, numbers } = this.state; return (
@@ -50,7 +50,7 @@ class Form extends Component {
-

Length: {length}

+

Length: {length}

@@ -59,21 +59,25 @@ class Form extends Component { handleChange={this.handleChange} name="upperCase" textLabel="Include Uppercase" + checked={upperCase} />
{password}
diff --git a/src/components/Number.js b/src/components/Number.js index 9785a42..9a88438 100644 --- a/src/components/Number.js +++ b/src/components/Number.js @@ -6,14 +6,16 @@ class Number extends Component { return (
); From 0d37b843567db73404fdc30b35e4de4162edf68a Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Wed, 2 Feb 2022 10:00:13 -0300 Subject: [PATCH 6/7] add testes --- src/App.css | 9 +++++---- src/App.test.js | 35 +++++++++++++++++++++++++++++++---- src/components/Form.js | 5 +++-- src/components/Number.js | 2 +- 4 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index f2b116d..ac6e7d5 100644 --- a/src/App.css +++ b/src/App.css @@ -7,7 +7,7 @@ main { padding: 12px 3%; margin: 20px auto; - width: 98%; + width: 90%; border-radius: 10px; background-color: #0B112F; display: flex; @@ -58,7 +58,7 @@ p { } .generate { - background-color: #1D223F; + background-image: linear-gradient(to left, rgb(94, 107, 218), rgb(122, 135, 253)); color: white; text-align: center; font-weight: bold; @@ -67,7 +67,7 @@ p { .number p { font-size: 12px; - color: #242744; + color: #696B7F; text-transform: uppercase; } @@ -77,7 +77,7 @@ p { .settings p { font-size: 12px; - color: #242744; + color: #696B7F; text-transform: uppercase; } @@ -96,6 +96,7 @@ input[type=checkbox] { border-radius: 20px; background-color: #6E7081; padding: 4px; + cursor: pointer; } .check div { diff --git a/src/App.test.js b/src/App.test.js index 1f03afe..efd6d8a 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,8 +1,35 @@ import { render, screen } from '@testing-library/react'; import App from './App'; -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); +beforeEach(() => { + render() +}); + +test('Verifica se existe o titulo "Password Generator"', () => { + const title = screen.getByRole('heading', { name: /password generator/i }) + const tamanho = "Password Generator".length; + expect(title.innerHTML.length).toBe(tamanho); + expect(title).toBeInTheDocument(); +}); + +test('Verifica se existe o botao com o texto "Click Generate"', () => { + const btn = screen.getByText(/click generate/i); + const tamanho = "Click Generate".length; + expect(btn.innerHTML.length).toBe(tamanho); + expect(btn).toBeInTheDocument(); +}); + +test('Verifica se ao carregar a página existe o texto "GENERATE PASSWORD"', () => { + const textGenerate = screen.getByText(/generate password/i); + const tamanho = "GENERATE PASSWORD".length; + expect(textGenerate.innerHTML.length).toBe(tamanho); + expect(textGenerate).toBeInTheDocument(); +}); + +test('Verifica se existe uma label com o texto "Include Uppercase"', () => { + const include = screen.getByLabelText(/include uppercase/i); + const tamanho = "Include Uppercase".length; + console.log(include.id); + expect(include.id.length).toBe(tamanho); + expect(include).toBeInTheDocument(); }); diff --git a/src/components/Form.js b/src/components/Form.js index 613a913..1374c7a 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -12,7 +12,7 @@ class Form extends Component { numbers: false, symbols: false, symbols: false, - length: 4, + length: 32, password: "GENERATE PASSWORD", }; this.handleChange = this.handleChange.bind(this); @@ -38,6 +38,7 @@ class Form extends Component { addPass() { this.setState({ password: this.getPass() }); + localStorage.setItem("password", JSON.stringify(this.getPass())); } render() { @@ -77,7 +78,7 @@ class Form extends Component { handleChange={this.handleChange} name="symbols" textLabel="Include Symbols" - checked={symbols} + checked={symbols} />
{password}
diff --git a/src/components/Number.js b/src/components/Number.js index 9a88438..65fe12d 100644 --- a/src/components/Number.js +++ b/src/components/Number.js @@ -12,7 +12,7 @@ class Number extends Component { onChange={handleChange} id="number" type="range" - min="8" + min="4" max="30" /> 32 From 7361aea556f69c0ad74b162b27e2585964f55854 Mon Sep 17 00:00:00 2001 From: Fabio Augusto Mazuchi Date: Wed, 2 Feb 2022 15:47:50 -0300 Subject: [PATCH 7/7] altera css --- public/index.html | 2 +- src/App.css | 14 ++++++++++++-- src/components/Form.js | 21 +++++++++++++-------- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 5094d63..1634bcc 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - Password Generator + Password Generator - Fábio Augusto Mazuchi diff --git a/src/App.css b/src/App.css index ac6e7d5..1d04334 100644 --- a/src/App.css +++ b/src/App.css @@ -63,10 +63,15 @@ p { text-align: center; font-weight: bold; margin-top: 10px; + font-size: 20px; +} + +.generate p { + word-break: break-all; } .number p { - font-size: 12px; + font-size: 14px; color: #696B7F; text-transform: uppercase; } @@ -76,7 +81,7 @@ p { } .settings p { - font-size: 12px; + font-size: 14px; color: #696B7F; text-transform: uppercase; } @@ -111,3 +116,8 @@ input[type=checkbox] { padding-left: 26px; } +@media screen and (min-width: 700px) { + main { + width: 60%; + } +} diff --git a/src/components/Form.js b/src/components/Form.js index 1374c7a..3ed04c7 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -10,7 +10,7 @@ class Form extends Component { upperCase: false, lowerCase: false, numbers: false, - symbols: false, + symbols: false, symbols: false, length: 32, password: "GENERATE PASSWORD", @@ -42,7 +42,8 @@ class Form extends Component { } render() { - const { length, password, upperCase, lowerCase, symbols, numbers } = this.state; + const { length, password, upperCase, lowerCase, symbols, numbers } = + this.state; return (
@@ -51,7 +52,9 @@ class Form extends Component {
-

Length: {length}

+

+ Length: {length} +

@@ -60,28 +63,30 @@ class Form extends Component { handleChange={this.handleChange} name="upperCase" textLabel="Include Uppercase" - checked={upperCase} + checked={upperCase} />
-
{password}
+
+

{password}

+
); }