custom hook useForm finalizado

src/Components/Forms/Input.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Input.module.css';
 
-const Input = ({ label, type, name, value, onChange }) => {
+const Input = ({ label, type, name, value, onChange, error, onBlur }) => {
   return (
     <div className={styles.wrapper}>
       <label htmlFor={name} className={styles.label}>
@@ -14,8 +14,9 @@ const Input = ({ label, type, name, value, onChange }) => {
         type={type}
         value={value}
         onChange={onChange}
+        onBlur={onBlur}
       />
-      <p className={styles.error}>Error</p>
+      {error && <p className={styles.error}>{error}</p>}
     </div>
   );
 };

src/Components/Login/LoginForm.jsx

@@ -5,24 +5,28 @@ import Button from '../Forms/Button';
 import Input from '../Forms/Input';
 
 const LoginForm = () => {
-  const username = useForm('email');
+  const username = useForm();
   const password = useForm();
-  console.log(password.value);
 
   function handleSubmit(event) {
     event.preventDefault();
-    fetch('https://dogsapi.origamid.dev/json/jwt-auth/v1/token', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(),
-    })
-      .then((response) => {
-        console.log(response);
-        return response.json();
+
+    if (username.validate() && password.validate()) {
+      fetch('https://dogsapi.origamid.dev/json/jwt-auth/v1/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(),
       })
-      .then((json) => console.log(json));
+        .then((response) => {
+          console.log(response);
+          return response.json();
+        })
+        .then((json) => {
+          console.log(json);
+        });
+    }
   }
 
   return (
@@ -31,7 +35,7 @@ const LoginForm = () => {
       <form action="" onSubmit={handleSubmit}>
         <Input label="Usuário" type="text" name="username" {...username} />
         <Input label="Senha" type="password" name="password" {...password} />
-        <Button disabled>Entrar</Button>
+        <Button>Entrar</Button>
       </form>
       <Link to="/login/criar">Cadastro</Link>
     </section>

src/Hooks/useForm.js

@@ -14,8 +14,8 @@ const useForm = (type) => {
 
   function validate(value) {
     if (type === false) return true;
-    if (value.lenght === 0) {
-      setError('Preencha um valor');
+    if (value.length === 0) {
+      setError('Preencha um valor.');
       return false;
     } else if (types[type] && !types[type].regex.test(value)) {
       setError(types[type].message);
@@ -27,14 +27,17 @@ const useForm = (type) => {
   }
 
   function onChange({ target }) {
+    if (error) validate(target.value);
     setValue(target.value);
   }
 
   return {
     value,
     setValue,
     onChange,
+    error,
     validate: () => validate(value),
+    onBlur: () => validate(value),
   };
 };