Crear Formulario de Login

Clase 16 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

David Behar

student•

Tengan en cuenta que su botón tiene que ser de tipo submit para que funcione.

Jesús Miguel Quinto Teran

student•

En realidad no tuve que agregar el tipo submit sobre el botón, lo cual es algo curioso.

rusbel bermúdez rivera

student•

En mi caso agregue el type=submit al botón para que hiciera lo propio.

Seba Cardoso

student•

En esta clase de React con Richard se explica como se agregan los valores dinamicos del formulario. Minuto 4:00. Clase de React

silvana murgo

student•

Gracias :D

Salvador Galliano

student•

Otra forma de hacerlo es usando useReducer de React Hooks. Dejo mi codigo y el resultado.

Andrés Felipe Eslava Zuluaga

student•

Esta forma se ve excelente! No sabía el uso de useReduce. Investigaré sobre este hook

William Rodriguez

student•

Interesante tu implementación se ve limpia con useReducer.

Andrés Campuzano Garzón

student•

🦄 Acá el código de lo realizado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/381a70e544dd29de467e57416d1d3822f33ed632

Marco Antonio Macedo Preciado

student•

¿Qué significan los "[]" en [event.target.name]? ¿Cuál es su función?

Alexis Alberto Texis Auza

student•

Hola marco,el uso de corchetes se utiliza para poder aplicarle el valor de una variable a un key dentro de un objeto. De lo contrario estarías asignándole o en este caso buscando un atributo(key) con el nombre event.target.value.

En este caso necesitamos el valor del atributo name del tag input correspondiente. Salida : e.target.name-> 'email' o 'password' De esta forma podremos hacer referencia a que key modificar en el estado

Armando de jesus santiz lopez

student•

Es buen práctica mezclar estados locales con Redux ?

Daniel Alberto Esquinazi

student•

En mi opinión deberías usar Redux solamente cuando sea necesario, entonces si tenes el state de un componente que no necesita ser global como el caso del estado del formulario es mejor utilizar el manejo de estado nativo de React y no con Redux.

Sebastián Buitrago

student•

Si usan prettier agreguen esta linea a su config para que él quite los parentesis cuando solo haya un parametro

"prettier.arrowParens": "avoid",

Orlando Manuel Mendoza Vargas

student•

Reto completado, aquí está mi UI mejorada del Login y de Register 💚💚💚 .

Jonh Pertuz pertuz

student•

En que curso enseñan el tema de login y como manejar y mantener el inicio de sesion ?

Héctor Eduardo López Carballo

student•

Hola!

Podrías echarle un ojo al Curso de Backend con Node.js

Abraham Serrano Montiel

student•

Una duda, ¿Por que se pone event.target ?

Gabriel De Andrade

student•

El event.target hace referencia al Elemento que llamó al evento, de esta manera podemos por ejemplo obtener el valor de ese Elemento :D

Luis Alberto Ruiz Sarmiento

student•

Debes tener en cuenta que no siempre lo vas a encontrar así, hay ocaciones que lo veras de la siguiente forma:

handleInput={(e) => e.target}

La e es una variable y la puedes nombrar a tu gusto, solo que habitualmente se maneja con event o e

Manuel Rivera

student•

en las devtools podemos observar los props que tiene cada componente, es una ayuda muy grande para debuggear también

Javier Fuentes Mora

teacher•

Tambien pueden usar react-redux-form les ayuda . amanejar los estados y les ayud a aimplementar validaciones

Andrés Felipe Eslava Zuluaga

student•

Login.jsx

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import googleIcon from '../assets/img/google-icon.png';
import twitterIcon from '../assets/img/twitter-icon.png';
import '../assets/styles/containers/Login.scss';

const Login = () => {
  const [formValues, setFormValues] = useState({
    email: '',
    password: '',
  });

  const handleInput = (event) => {
    setFormValues({
      ...formValues,
      [event.target.name]: event.target.value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('formValues', formValues);
  };

  return (
    <section className='Login'>
      <section className='Login__container'>
        <h3>Inicia sesión</h3>
        <form
          className='Login__container--form'
          action=''
          onSubmit={handleSubmit}
        >
          <input
            className='input'
            type='text'
            name='email'
            id='email'
            placeholder='Correo'
            onChange={handleInput}
          />
          <input
            className='input'
            type='password'
            name='password'
            id='password'
            placeholder='Contraseña'
            onChange={handleInput}
          />
          <button className='button' type='submit'>Iniciar sesión</button>
          <div className='Login__container--remember-me'>
            <label htmlFor='cbox1'>
              <input type='checkbox' name='cbox1' id='cbox1' value='Checkbox' />
              Recuérdame
            </label>
            <Link to='/forgot-password'>
              Olvidé mi contraseña
            </Link>
          </div>
        </form>
        <section className='Login__container--social-media'>
          <div>
            <img src={googleIcon} alt='Google' />
            inicia sesión con Google
          </div>
          <div>
            <img src={twitterIcon} alt='Twitter' />
            inicia sesión con Twitter
          </div>
        </section>
        <p className='Login__container--register'>
          No tienes ninguna cuenta?
          <Link to='/register'>
            Regístrate
          </Link>
        </p>
      </section>
    </section>
  );
};

export default Login;

Juan Daniel Martínez Navarro

student•

Para quien le sirva encontré la forma de cambiar el color del header según la ruta en la que te encuentres.

Primero nos ubicamos en el componente Header para agregarle una propiedad y poder cambiarle el estilo "dinámicamente":

const Header = ({ color }) => (
  <header className={`header ${color}`} > ...

Como ven le agregué la propiedad llamada color (No se me ocurrió un mejor nombre 🥴) que esta la vamos a agregar al className de <header>, dejando su clase original .header para no afectar la estructura ni posicionamiento.

Luego nos dirijimos al componente Layout que es donde importamos el componente Header.

Necesitamos importar useLocation de router DOM

import { useLocation } from 'react-router-dom';

Ahora como ya lo hemos hecho con muchos componentes, necesitamos adaptar nuestro componente Layout para agregar lógica.

const Layout = ({ children }) => {
    const pathname = useLocation().pathname; //Obtenemos la ruta actual

    return (
        <div className="App">
            {
                pathname == '/login' | pathname == '/register' ?
                    <Header color='header__login' /> :

                    <Header />
            }

            {children}

            <Footer />
        </div>
    );
};

En una constante pathname guardamos la ruta en la que nos encontremos actualmente al navegar en nuestra app por medio de useLocation().pathname.

Lo siguiente que hicimos fue hacer un condicional, en caso de que la ruta actual sea /login o /register usamos la etiqueta de nuestro componente Header con el valor de color='header__login' la cual es la clase CSS la cual contendrá solamente el color verde.

Agregamos dicha clase en Header.scss:

.header__login {
  background-color: #21c08b;
}

Ya con esto les debería funcionar, prueben cambiando del Home al Login, Register y viceversa.

Miguel Angel Ochoa Torres

student•

trate de devolverme algunos videos para verlos de nuevo, pero aparecen al 100%. porfa que aparezca el avance pero que el video vuelva a iniciar de 0

José Enrique Pérez Aquino

student•

Puedes presionar 0 justo después de que carga el vídeo para regresarlo al principio

Rafael Mujica

student•

Hola, yo desactive el autoplay (en el engranaje ) asi que cuando me regreso a algún video ya visto no me redirecciona al siguiente y luego si ubico el video al inicio o al punto que necesite. Saludos

Steve Anthony Luzquiños Agama

student•

Hola, para hacer validaciones les sugiero usar los siguientes regex en el email y password:

const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const PASSWORD_REGEX = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[!"#\$%&'\(\)\*\+,-\.\/:;<=>\?@[\]\^_`\{\|}~])[a-zA-Z0-9!"#\$%&'\(\)\*\+,-\.\/:;<=>\?@[\]\^_`\{\|}~]{6,}$/

El primero lo obtuve de aquí, el segundo de aquí.

Para enviar al usuario un mensaje de éxito o fracaso puede usar SweetAlert2.

Finalmente, les comparto mis validaciones

const handleSubmit = e => {
  e.preventDefault()
  console.log(form)

  if (!EMAIL_REGEX.test(form.email))
    return Swal.fire({
      icon: 'error',
      title: 'Email inválido',
      text: 'Debes ingresar un email válido'
    })

  if (!PASSWORD_REGEX.test(form.password))
    return Swal.fire({
      icon: 'error',
      title: 'Contraseña inválida',
      html: 'Debes ingresar una contraseña con:<br><br>' + 
        '- 6 caracteres<br>' +
        '- Una minúsclia<br>' +
        '- Una mayúsclia<br>' +
        '- Un número<br>' +
        '- Un caracter especial<br>'
    })

  return Swal.fire({
    icon: 'success',
    title: 'Inicio de sesión exitoso',
    timer: 1500
  })
}

Happy coding!

Beto Martinez

student•

No entiendo como el setValues "setea" los valores Este codigo en especifico, lo desestructura el form y ¿Despues que?

 const handleInput = (event) => {
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };```

Christian Perez

student•

Hola! Recuerda que en hooks useState toma dos valores:

const [form, setValues] = useState({ email: '' })

Durante el renderizado inicial, el estado devuelto (form) es el mismo que el valor pasado como primer argumento ({email: " "}). Por la tanto comienza vacío.

El segundo argumento es con el que actualizamos el estado.

Cuando llamas a handleInput esta funcion destructura y toma el valor de form y en este caso crea un objeto dinámica mente el cual pasa a ser el nuevo estado

{ event.target.email: event.target.value; event.target.password: event.target.value }

Aquí esta la documentación de hooks, por si le quieres dar una revisada. No me encanta leer jeje pero personalmente se me hizo super clara.

David Antonio Garcia Saaib

student•

A ok xD, de manera general lo que pasa ahi es que cada cambio que hagas al string del un input se guarda en automatico el ...form es para que guarde su valor anterior y la linea que sigue es para si hay algun cambio en alguno de los dos inputs lo guarde en su espacio correspondiente

Todo eso esta en setValues que es una funcion que da valor a form.

Ponlo asi, cada letra o borrado de letra se actualiza el valor de form, no del form html si no del form hook, o la variable form , o el objeto form que estamos declarando con JS y useState

Mateo Buitrago

student•

Una pregunta, por qué se utilizan los [] en [event.target.name]:event.target.value ?

Cristian Fabian Tovar

student•

05:40 dice que es para obtener de forma dinámica la información, es decir que en esa línea puede estar alterando: event.target.email ó event.target.password Dependerá del input que se esté alterando en el momento, cualquier duda te invito a romper el código en esa sección y ver lo que pasa en la consola del navegador, es divertido y te ayuda a comprender por tí mismo lo que ocurre

David Antonio Garcia Saaib

student•

es como iterar en el target, en lugar de poner uno para email y uno para password que guarde el valor pone eso para que se guarde en el target.name correspontiene ya sea email, password u otro

Jhonatan David Ibarra Lavado

student•

repasando la clase , estupendo

Jorge Alberto Rodriguez Flores

student•

Igual también podemos poner un objeto vació en nuestro useState y funcionara.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import googleIcon from '../assets/img/google-icon.png';
import twitterIcon from '../assets/img/twitter-icon.png';
import '../assets/styles/containers/Login.scss';

const Login = () => {
  const [formValues, setFormValues] = useState({
    email: '',
    password: '',
  });

  const handleInput = (event) => {
    setFormValues({
      ...formValues,
      [event.target.name]: event.target.value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('formValues', formValues);
  };

  return (
    <section className='Login'>
      <section className='Login__container'>
        <h3>Inicia sesión</h3>
        <form
          className='Login__container--form'
          action=''
          onSubmit={handleSubmit}
        >
          <input
            className='input'
            type='text'
            name='email'
            id='email'
            placeholder='Correo'
            onChange={handleInput}
          />
          <input
            className='input'
            type='password'
            name='password'
            id='password'
            placeholder='Contraseña'
            onChange={handleInput}
          />
          <button className='button' type='submit'>Iniciar sesión</button>
          <div className='Login__container--remember-me'>
            <label htmlFor='cbox1'>
              <input type='checkbox' name='cbox1' id='cbox1' value='Checkbox' />
              Recuérdame
            </label>
            <Link to='/forgot-password'>
              Olvidé mi contraseña
            </Link>
          </div>
        </form>
        <section className='Login__container--social-media'>
          <div>
            <img src={googleIcon} alt='Google' />
            inicia sesión con Google
          </div>
          <div>
            <img src={twitterIcon} alt='Twitter' />
            inicia sesión con Twitter
          </div>
        </section>
        <p className='Login__container--register'>
          No tienes ninguna cuenta?
          <Link to='/register'>
            Regístrate
          </Link>
        </p>
      </section>
    </section>
  );
};

export default Login;

const Layout = ({ children }) => {
    const pathname = useLocation().pathname; //Obtenemos la ruta actual

    return (
        <div className="App">
            {
                pathname == '/login' | pathname == '/register' ?
                    <Header color='header__login' /> :

                    <Header />
            }

            {children}

            <Footer />
        </div>
    );
};

const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const PASSWORD_REGEX = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[!"#\$%&'\(\)\*\+,-\.\/:;<=>\?@[\]\^_`\{\|}~])[a-zA-Z0-9!"#\$%&'\(\)\*\+,-\.\/:;<=>\?@[\]\^_`\{\|}~]{6,}$/

const handleSubmit = e => {
  e.preventDefault()
  console.log(form)

  if (!EMAIL_REGEX.test(form.email))
    return Swal.fire({
      icon: 'error',
      title: 'Email inválido',
      text: 'Debes ingresar un email válido'
    })

  if (!PASSWORD_REGEX.test(form.password))
    return Swal.fire({
      icon: 'error',
      title: 'Contraseña inválida',
      html: 'Debes ingresar una contraseña con:<br><br>' + 
        '- 6 caracteres<br>' +
        '- Una minúsclia<br>' +
        '- Una mayúsclia<br>' +
        '- Un número<br>' +
        '- Un caracter especial<br>'
    })

  return Swal.fire({
    icon: 'success',
    title: 'Inicio de sesión exitoso',
    timer: 1500
  })
}

Crear Formulario de Login

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto