diff --git a/README.md b/README.md index bb748df..373b409 100644 --- a/README.md +++ b/README.md @@ -62,10 +62,10 @@ O **Commitizen** facilita a padronização de commits seguindo as convenções. 1.2. Adicione **escopos** e descrições (opcional). ### Lista de Tarefas: -- [ ] Indente o código corretamente e remova as linhas de debug e comentários desnecessários. -- [ ] Adicione um botão de envio na tela de cadastro e vincule o form à função `handleSubmit()`. -- [ ] Verifique e corrija a autorização de usuarios autenticados após o submit do formulário. -- [ ] Crie um componente ao input do formulário, para reutilização em outras partes do projeto. +- [X] Indente o código corretamente e remova as linhas de debug e comentários desnecessários. +- [X] Adicione um botão de envio na tela de cadastro e vincule o form à função `handleSubmit()`. +- [X] Verifique e corrija a autorização de usuarios autenticados após o submit do formulário. +- [X] Crie um componente ao input do formulário, para reutilização em outras partes do projeto. 2. Atualize a documentação do projeto marcando as tarefas cumpridas `[X]`, seguindo os padrões descritos. diff --git a/src/components/InputComponent.jsx b/src/components/InputComponent.jsx new file mode 100644 index 0000000..a53e13e --- /dev/null +++ b/src/components/InputComponent.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + + +const InputComponent = ({type, id, placeholder, onChange}) => { + return ( + <> + + + ); +} +export default InputComponent; diff --git a/src/pages/Register/Register.jsx b/src/pages/Register/Register.jsx index 10335c1..339fbaf 100644 --- a/src/pages/Register/Register.jsx +++ b/src/pages/Register/Register.jsx @@ -1,81 +1,73 @@ +import Input from "../../components/InputComponent"; import "./Register.css"; import { useState } from "react"; +import InputComponent from "../../components/InputComponent"; const Register = () => { -//state 1 -const [email, setEmail] = useState(""); -//state 2 -const [password, setPassword] = useState(""); -//array de usuários autorizados -const autorizedUsers = [ -{ -email: "commitzen@glide.com.br", -password: "123456", -}, -]; - -//onchange 1 -const onEmailChange = (e) => { -setEmail(e.target.value); -console.log(e.target.value); -}; + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const autorizedUsers = [ + { + email: "commitzen@glide.com.br", + password: "123456", + }, + ]; + + const onEmailChange = (e) => { + setEmail(e.target.value); + }; -//onchange 2 -const onPasswordChange = (e) => { -setPassword(e.target.value); -console.log(e.target.value); -}; + const onPasswordChange = (e) => { + setPassword(e.target.value); + }; -// submit -const handleSubmit = (e) => { -e.preventDefault(); -//if ternário -const user = autorizedUsers.find( -(user) => user.email != password || user.password !== email -); -console.log(user); -//alerta -if (!user) { -console.log("não passei"); -alert("Usuário não autorizado."); -} else { -console.log("passeiKKKK"); -alert("Usuário autorizado."); -e.target.reset(); -} -}; + const handleSubmit = (e) => { + e.preventDefault(); + + const user = autorizedUsers.find( + (user) => user.email == email && user.password == password + ); + + + if (!user) { + alert("Usuário não autorizado."); + console.log(user); + } else { + alert("Usuário autorizado."); + console.log(user); + e.target.reset(); + } + + + }; return ( -<> -
-
-

Entrar

-
-
-
- - -
-
- - -
-{/* */} -
-
- -); + <> +
+
+

Entrar

+
+
+
+ + + +
+
+ + + + +
+
+ + +
+
+
+ + ); }; export default Register;