En este video se está utilizando el componente de Tailwind UI:
https://tailwindui.com/components/application-ui/forms/sign-in-forms
Pueden corregir el error reemplazando los tags
<Form></Form> por <form></form> y <Field/> por <input/>
Saludos!
Introducción
Construye un dashboard de productos con Next.js
Configuración del proyecto
Inicializando nuestro proyecto con Next.js
Configuración de ESLint y Prettier
Integrando PostCSS y TailwindCSS a nuestro proyecto
Configuración del archivo jsconfig.js
Cómo integrar componentes predefinidos con TailwindUI
Commons Components
Creación del layout principal e integración de los Page Components
Autenticación
Creando la lógica del componente login
Presentación de la API
Creación del custom hook useAuth
Autenticándonos en la API usando Axios
Obteniendo el token de la API
Guardado del token en una cookie para mantener la sesión
Usando nuestro useAuth para cargar la información del usuario
Integración de la API
Obteniendo la lista de productos desde la API
Creando el componente Chart
Implementación de nuestro componente Chart en el dashboard
Conexión del modal para crear productos
Construcción del modal para crear productos
Inserción de los datos del producto en la API
Creación del componente Alert
Implementación de nuestro componente Alert
Eliminado de productos en la API
Creación y cargado de datos para actualizar un producto
Actualizado del producto en la API
Implementación del logout
Deploy a producción
Haciendo el deploy de nuestra aplicación en Vercel
Conexión de un subdominio a nuestra aplicación
Cierre
Continúa alimentando tu proyecto
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 12
Preguntas 5
En este video se está utilizando el componente de Tailwind UI:
https://tailwindui.com/components/application-ui/forms/sign-in-forms
Pueden corregir el error reemplazando los tags
<Form></Form> por <form></form> y <Field/> por <input/>
Saludos!
Me empieza a cansar que cada 5 minutos dice: “valores que van a ser clave”… Jaja
Vamos integrar la sesión de Login. Para ello existen varias formas, en el ejemplo de la clase, se crea el archivo login.js dentro de la carpeta pages:
import LoginPage from "@components/LoginPage";
export default function Login(){
return <LoginPage />;
}
Guardamos y ejecutamos en consola npm run dev
Para poder interpretar la información de email y password de la interfaz de login e integrarlo a la aplicación, vamos a editar el archivo LoginPage.js de la ruta src/components: vamos agregar en la primera línea un import para conectar la información del Login:
import { useRef } from 'react';
Luego en la función LoginPage, fuera del return, se declaran 2 constantes emailRef y passwordRef para hacer referencias a estos elementos que son parte del DOM:
const emailRef = useRef(null);
const passwordRef = useRef(null);
Para que el input pueda tomar cada referencia, en cada input al final (después del placeholder) se coloca el ref correspondiente:
ref={emailRef}
ref={passwordRef}
const submitHandler = (event) => {
event.preventDefault(); //Evita que el comportamiento de un formulario sea desancadenado
const email = emailRef.current.value;//Obtiene la info del email de forma interna
const password = passwordRef.current.value; //Obtiene el password de forma interna
//Validar si la info suministrada cumple con los estándares
console.log(email,password); //Solo para este ejemplo, no es recomendable
}
Dentro del return, en el form eliminamos: action="#" method="POST"
Y agregamos:
onSubmit={submitHandler}
Guardamos y vamos a la consola y corremos npm run dev
cuando abrimos la página, al dar en Login, se nos abre la interfaz para suministrar el email y el password, si damos click derecho y a Inspeccionar y luego a Console, podemos ver el console.log de la información suministrada al dar Sign in (el submit).
Una solución hasta que se encuentre de donde provienen los componentes Form y Field (En el repositorio de gitHub del enlace no aparece el import de dichos componentes)
es cambiarlos por un “<form>” y por un “<input>” respectivamente, de puro html.
<form className='mt-8 space-y-6' action='#' method='POST'>
<input
id='email-address'
name='email'
type='email'
autoComplete='email'
required
className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
placeholder='Email address'
/>
y el resultado es similar para poder continuar el curso
Si usan typescript:
const emailRef = useRef<HTMLInputElement>(null);
const passwordRef = useRef<HTMLInputElement>(null);
const submitHandle = (event: React.FormEvent) => {
event.preventDefault();
const email = emailRef.current?.value;
const password = passwordRef.current?.value;
console.log({ email, password });
};
Para los que les da error por la V2 de heroicons, yo resolví lo de LoginPages sólo agregando un /24, así:
//import { LockClosedIcon } from ‘@heroicons/react/solid’;
import { LockClosedIcon } from ‘@heroicons/react/24/solid’;
En caso de que estén utilizando Mui con TextField en lugar de utilizar “ref” pueden usar “inputRef”
Comparto una página donde podemos repasar el uso de useRef
Ahora parece que Next.js usa rutas anidadas, mi login esta en: /dashboard/login
Tambien podemos usar el handler de la sig. forma (Sacado del curso de React de Oscar):
const form = useRef(null);
const submitHanlder = (event) => {
event.preventDefault();
const submittedValues = new FormData(form.current);
const email = submittedValues.get('email');
const password = submittedValues.get('password');
console.log(email, password);
};
Y ya despues solo colocamos el valor ref
en su respectiva propiedad en el elemento <form>
.
en la que esta construyendo de heroicons se esta usando la version 1, si tienes la version 2 debes cambiar la linea de codigo 66, en el archivo loginPages porque la version reciente de heroicons ya no la soporta,
Y lo de Field y Form, sólo cambié las mayusculas por minúsculas y me quitó el error. Alguien que me ayude a explicarme si eso está bien?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.