pr: Refactor Login function, added component, format and clean code.

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.  
 

src/components/InputComponent.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const InputComponent = ({type, id, placeholder, onChange}) => {
+  return (
+    <>
+      <input type={type} id={id} placeholder={placeholder} onChange={onChange} 
+
+        />
+    </>
+  );
+}
+export default InputComponent;

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 (
-<>
-<div className="container">
-<div className="header">
-<h2>Entrar</h2>
-</div>
-<form id="form" className="form">
-<div className="form-control">
-<label htmlFor="email">Email</label>
-<input
-type="text"
-id="email"
-placeholder="Digite seu email.."
-onChange={onEmailChange}
-/>
-</div>
-<div className="form-control">
-<label htmlFor="password">Senha</label>
-<input
-type="password"
-id="password"
-placeholder="Digite sua senha..."
-onChange={onPasswordChange}
-/>
-</div>
-{/*  */}
-</form>
-</div>
-</>
-);
+        <>
+            <div className="container">
+                <div className="header">
+                    <h2>Entrar</h2>
+                </div>
+                <form id="form" className="form" onSubmit={handleSubmit}>
+                    <div className="form-control">
+                        <label htmlFor="email">Email</label>
+
+                        <InputComponent type="text" id="email" placeholder="Digite seu email..." onChange={onEmailChange}  />
+                    </div>
+                    <div className="form-control">
+                        <label htmlFor="password">Senha</label>
+
+
+                        <InputComponent type="password" id="password" placeholder="Digite sua senha..." onChange={onPasswordChange}  />
+                    </div>
+                    <div className="form-control">
+                        <input type="submit" value="Enviar"/>
+
+                    </div>
+                </form>
+            </div>
+        </>
+    );
 };
 
 export default Register;