No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Creando la l贸gica del componente login

9/31
Recursos

Aportes 12

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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: 鈥渧alores 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=鈥漞mail-address鈥 鈫 ref={emailRef}
  • Para el id=鈥漰assword鈥 鈫 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 鈥渞ef鈥 pueden usar 鈥渋nputRef鈥

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?