‫Jonas: En las próximas conferencias
‫agregaremos la funcionalidad de inicio de sesión a nuestro sitio web.
‫Y en
‫esta conferencia, comenzaremos por mostrar la pantalla de
‫inicio de sesión para facilitar el inicio
‫de sesión de los usuarios.
‫Una vez más, quiero que esto sea un desafío para
‫ti para que puedas practicar algunas de las
‫habilidades que has estado aprendiendo.
‫Lo que quiero que hagas es crear una ruta de inicio
‫de sesión con barra.
‫Luego crea un controlador y,
‫por supuesto, una plantilla.
‫Y esa plantilla es realmente fácil.
‫Es solo un html estático y no
‫necesitamos pasarle ninguna variable.
‫Hay una plantilla para eso, en
‫realidad, aquí en la carpeta de plantillas.
‫Entonces, eso debería ser realmente fácil de completar para usted.
‫Así que pausa este video y vuelve una vez que estés listo.
‫Bien, bienvenido de nuevo.
‫Espero que hayas completado este desafío con éxito.
‫Así que aquí está mi opinión.
‫El punto del enrutador obtiene la ruta es
‫barra de inicio de sesión y
‫luego usamos
‫el punto del controlador para obtener el formulario
‫de inicio de sesión.
‫Así que ese es el controlador de ruta que voy a crear a continuación.
‫Exportar punto obtener la respuesta del formulario de inicio de
‫sesión y
‫aquí no necesitamos nada más que
‫la solicitud y la respuesta.
‫En realidad, aquí arriba veo que
‫nos estamos perdiendo el siguiente.
‫Siempre, cuando tenemos funciones asíncronas envueltas en
‫catchAsync, siempre debemos especificar next.
‫Pero aquí, todo lo que realmente
‫tenemos que hacer es renderizar una plantilla de inicio de sesión.
‫Así que todavía no creamos esa plantilla.
‫Pero, se llamará inicio de sesión.
‫Entonces, digamos res dot status
‫200,
‫renderizar plantilla
‫llamada login.
‫Luego, al igual que con
‫todas nuestras otras páginas, queremos darle un título personalizado.
‫Para eso siempre hemos pasado un objeto
‫con la propiedad title.
‫¿Derecha?
‫Entonces, la plantilla base leerá ese título y lo
‫colocará en el elemento html del título.
‫En este caso,
‫el título es simplemente iniciar sesión en su cuenta.
‫Y eso es todo para el controlador de ruta.
‫Ahora vayamos,
‫abra la plantilla de inicio de
‫sesión, seleccione todo,
‫copie todo, ciérrelo y cree la nueva vista aquí.
‫Llame, por supuesto, login dot pug.
‫Luego, pegando ese código aquí,
‫y ahora viene nuevamente ese truco donde extendemos nuestra
‫plantilla base.
‫Este se extiende a la extensión del archivo base, no olvides que aquí necesitamos
‫crear un bloque con el mismo
‫nombre exacto que tenemos en el archivo base.
‫Así que eso es contenido.
‫Y con esto realmente hemos terminado,
‫creo.
‫Por supuesto, necesitamos sangrar para convertirlo en un niño
‫de este bloque.
‫Pero eso es realmente.
‫Ahora, solo una cosa más que debemos
‫hacer es establecer un enlace a la página de
‫inicio de sesión para que podamos acceder a ella.
‫En este momento, los botones de inicio de sesión y registro
‫están usando el elemento de botón.
‫Pero así, realmente no podemos especificar
‫el atributo href.
‫Así que cambiémoslos en realidad a un enlace real.
‫Y aquí, podemos especificar el href.
‫Así que este simplemente apunta a iniciar sesión.
‫Y un segundo aquí,
‫el registro en realidad no implementaremos, por
‫lo que puede implementar esto por
‫su cuenta si lo desea.
‫Básicamente, un formulario de registro.
‫Pero, dado que
‫todo eso, todo el proceso de registro será muy
‫similar al inicio de sesión,
‫decidí no incluir eso aquí en esta sección porque
‫sería una gran cantidad de contenido duplicado y
‫no quiero hacer que el curso sea innecesariamente largo.
‫Dale a esto una caja fuerte, no
‫sé si esto ahora reinicia el servidor, en realidad no lo
‫hace, así que
‫guardemos uno de estos archivos de script java.
‫Ahora bien,
‫este es nuestro sitio web de referencia.
‫Recuerde, eso es lo que queremos,
‫es éste.
‫Pasemos a todos los
‫recorridos y ahora probemos nuestra ruta de inicio de sesión.
‫Y, de hecho, aquí va nuestra forma.
‫Excelente.
‫Ahora aquí podemos poner
‫un correo
‫electrónico, digamos admin dot naders dot
‫io.
‫Y verá que formatea muy bien
‫esta entrada aquí, ya sea que la dirección de
‫correo electrónico sea realmente válida o no.
‫Por ejemplo, si no tengo la extensión aquí correcta,
‫entonces se volverá naranja y
‫me indicará que algo anda mal.
‫Y lo mismo para la contraseña.
‫Siempre que tenga menos de ocho caracteres, siempre
‫será rojo, lo que
‫básicamente me indica que hay un error.
‫Que ahora que tengo ocho
‫caracteres, se pone verde.
‫Y si está interesado en cómo hacer
‫este tipo de magia con
‫css, no dude en consultar el archivo css que codifiqué
‫solo para este curso.
‫De todos modos, por supuesto, hacer clic en
‫este botón aquí ahora hace absolutamente cualquier cosa, ¿verdad?
‫Entonces, en el siguiente video, realmente
‫comenzaremos a implementar la funcionalidad de inicio de sesión
‫haciendo una solicitud a nuestro punto final de API
‫que ya creamos.