pr: fix user authentication and enhance register page

src/App.jsx

@@ -10,4 +10,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/Input.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function Input({id, label, type, placeholder, onChange}) {
+  return (
+    <div>
+      <label htmlFor={id}>{label}</label>
+        <input
+            type={type}
+            id={id}
+            placeholder={placeholder}
+            onChange={onChange}
+        />
+    </div>
+  )
+}

src/pages/Register/Register.jsx

@@ -1,81 +1,79 @@
 import "./Register.css";
 import { useState } from "react";
+import Input from "../../components/Input";
 
 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);
-};
 
-//onchange 2
-const onPasswordChange = (e) => {
-setPassword(e.target.value);
-console.log(e.target.value);
+  const [email, setEmail] = useState("");
 
-};
+  const [password, setPassword] = useState("");
 
-// 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 autorizedUsers = [
+    {
+      email: "commitzen@glide.com.br",
+      password: "123456",
+    },
+  ];
+
+  //onchange 1
+  const onEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  //onchange 2
+  const onPasswordChange = (e) => {
+    setPassword(e.target.value);
+    console.log(e.target.value);
+  };
+
+  // submit
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const user = autorizedUsers.find(
+      (user) => user.email === email && user.password === password
+    );
+    console.log(user);
+
+    if (!user) {
+      alert("Usuário não autorizado.");
+    } else {
+      alert("Usuário autorizado.");
+      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>
-</>
-);
+  return (
+    <>
+      <div className="container">
+        <div className="header">
+          <h2>Entrar</h2>
+        </div>
+        <form id="form" className="form">
+          <div className="form-control">
+            <Input type="email" id="email" label="Email" placeholder="Digite seu e-mail..." onChange={onEmailChange}></Input>
+            </div>
+          <div className="form-control">
+            <label htmlFor="password">Senha</label>
+            <input
+              type="password"
+              id="password"
+              placeholder="Digite sua senha..."
+              onChange={onPasswordChange}
+            />
+          </div>
+          <div className="form-control">
+            <input
+              type="submit"
+              id="enviar"
+              placeholder="Enviar"
+              onClick={handleSubmit}
+            />
+          </div>
+        </form>
+      </div>
+    </>
+  );
 };
 
 export default Register;