Creando la lógica del componente login

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

Clase #9: Creando la lógica del componente login 9/31 🔏

Continuando con el Proyecto: 🔨

 
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:

• Para el id=”email-address” → ref={emailRef}
• Para el id=”password” → ref={passwordRef}
   
  También vamos agregar 2 constante más antes del return para obtener la información del submit del formulario:

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?