1
00:00:01,050 --> 00:00:02,950
‫Jonas: En las próximas conferencias

2
00:00:02,950 --> 00:00:06,940
‫agregaremos la funcionalidad de inicio de sesión a nuestro sitio web.

3
00:00:06,940 --> 00:00:07,940
‫Y en

4
00:00:07,940 --> 00:00:10,420
‫esta conferencia, comenzaremos por mostrar la pantalla de

5
00:00:10,420 --> 00:00:12,610
‫inicio de sesión para facilitar el inicio

6
00:00:12,610 --> 00:00:14,083
‫de sesión de los usuarios.

7
00:00:15,880 --> 00:00:19,620
‫Una vez más, quiero que esto sea un desafío para

8
00:00:19,620 --> 00:00:22,810
‫ti para que puedas practicar algunas de las

9
00:00:22,810 --> 00:00:24,890
‫habilidades que has estado aprendiendo.

10
00:00:24,890 --> 00:00:28,230
‫Lo que quiero que hagas es crear una ruta de inicio

11
00:00:28,230 --> 00:00:29,463
‫de sesión con barra.

12
00:00:31,550 --> 00:00:33,240
‫Luego crea un controlador y,

13
00:00:33,240 --> 00:00:34,930
‫por supuesto, una plantilla.

14
00:00:34,930 --> 00:00:36,720
‫Y esa plantilla es realmente fácil.

15
00:00:36,720 --> 00:00:39,610
‫Es solo un html estático y no

16
00:00:39,610 --> 00:00:41,783
‫necesitamos pasarle ninguna variable.

17
00:00:43,030 --> 00:00:45,050
‫Hay una plantilla para eso, en

18
00:00:45,050 --> 00:00:47,375
‫realidad, aquí en la carpeta de plantillas.

19
00:00:47,375 --> 00:00:50,623
‫Entonces, eso debería ser realmente fácil de completar para usted.

20
00:00:52,211 --> 00:00:55,133
‫Así que pausa este video y vuelve una vez que estés listo.

21
00:00:58,580 --> 00:00:59,850
‫Bien, bienvenido de nuevo.

22
00:00:59,850 --> 00:01:04,300
‫Espero que hayas completado este desafío con éxito.

23
00:01:04,300 --> 00:01:05,963
‫Así que aquí está mi opinión.

24
00:01:07,080 --> 00:01:09,670
‫El punto del enrutador obtiene la ruta es

25
00:01:09,670 --> 00:01:11,360
‫barra de inicio de sesión y

26
00:01:11,360 --> 00:01:12,380
‫luego usamos

27
00:01:14,661 --> 00:01:17,223
‫el punto del controlador para obtener el formulario

28
00:01:19,430 --> 00:01:20,650
‫de inicio de sesión.

29
00:01:20,650 --> 00:01:23,783
‫Así que ese es el controlador de ruta que voy a crear a continuación.

30
00:01:29,820 --> 00:01:33,150
‫Exportar punto obtener la respuesta del formulario de inicio de

31
00:01:35,740 --> 00:01:36,680
‫sesión y

32
00:01:39,470 --> 00:01:41,540
‫aquí no necesitamos nada más que

33
00:01:41,540 --> 00:01:43,590
‫la solicitud y la respuesta.

34
00:01:43,590 --> 00:01:45,100
‫En realidad, aquí arriba veo que

35
00:01:45,100 --> 00:01:46,563
‫nos estamos perdiendo el siguiente.

36
00:01:48,190 --> 00:01:51,360
‫Siempre, cuando tenemos funciones asíncronas envueltas en

37
00:01:51,360 --> 00:01:53,833
‫catchAsync, siempre debemos especificar next.

38
00:01:55,950 --> 00:01:57,980
‫Pero aquí, todo lo que realmente

39
00:01:57,980 --> 00:02:01,270
‫tenemos que hacer es renderizar una plantilla de inicio de sesión.

40
00:02:01,270 --> 00:02:03,950
‫Así que todavía no creamos esa plantilla.

41
00:02:03,950 --> 00:02:06,320
‫Pero, se llamará inicio de sesión.

42
00:02:06,320 --> 00:02:09,240
‫Entonces, digamos res dot status

43
00:02:10,280 --> 00:02:11,113
‫200,

44
00:02:13,390 --> 00:02:14,940
‫renderizar plantilla

45
00:02:16,060 --> 00:02:17,640
‫llamada login.

46
00:02:17,640 --> 00:02:19,790
‫Luego, al igual que con

47
00:02:19,790 --> 00:02:23,090
‫todas nuestras otras páginas, queremos darle un título personalizado.

48
00:02:23,090 --> 00:02:26,010
‫Para eso siempre hemos pasado un objeto

49
00:02:26,010 --> 00:02:28,240
‫con la propiedad title.

50
00:02:28,240 --> 00:02:29,090
‫¿Derecha?

51
00:02:29,090 --> 00:02:32,010
‫Entonces, la plantilla base leerá ese título y lo

52
00:02:32,010 --> 00:02:34,543
‫colocará en el elemento html del título.

53
00:02:35,581 --> 00:02:37,480
‫En este caso,

54
00:02:38,770 --> 00:02:43,770
‫el título es simplemente iniciar sesión en su cuenta.

55
00:02:43,890 --> 00:02:46,690
‫Y eso es todo para el controlador de ruta.

56
00:02:46,690 --> 00:02:47,963
‫Ahora vayamos,

57
00:02:48,820 --> 00:02:51,520
‫abra la plantilla de inicio de

58
00:02:51,520 --> 00:02:53,230
‫sesión, seleccione todo,

59
00:02:53,230 --> 00:02:57,663
‫copie todo, ciérrelo y cree la nueva vista aquí.

60
00:02:59,860 --> 00:03:02,923
‫Llame, por supuesto, login dot pug.

61
00:03:04,480 --> 00:03:06,380
‫Luego, pegando ese código aquí,

62
00:03:06,380 --> 00:03:09,900
‫y ahora viene nuevamente ese truco donde extendemos nuestra

63
00:03:09,900 --> 00:03:11,063
‫plantilla base.

64
00:03:14,740 --> 00:03:19,740
‫Este se extiende a la extensión del archivo base, no olvides que aquí necesitamos

65
00:03:20,120 --> 00:03:22,660
‫crear un bloque con el mismo

66
00:03:22,660 --> 00:03:25,443
‫nombre exacto que tenemos en el archivo base.

67
00:03:26,950 --> 00:03:28,163
‫Así que eso es contenido.

68
00:03:29,610 --> 00:03:33,130
‫Y con esto realmente hemos terminado,

69
00:03:33,130 --> 00:03:33,963
‫creo.

70
00:03:36,000 --> 00:03:38,770
‫Por supuesto, necesitamos sangrar para convertirlo en un niño

71
00:03:38,770 --> 00:03:39,913
‫de este bloque.

72
00:03:40,760 --> 00:03:42,233
‫Pero eso es realmente.

73
00:03:43,602 --> 00:03:46,110
‫Ahora, solo una cosa más que debemos

74
00:03:46,110 --> 00:03:49,160
‫hacer es establecer un enlace a la página de

75
00:03:49,160 --> 00:03:52,163
‫inicio de sesión para que podamos acceder a ella.

76
00:03:54,462 --> 00:03:57,480
‫En este momento, los botones de inicio de sesión y registro

77
00:03:57,480 --> 00:03:59,393
‫están usando el elemento de botón.

78
00:04:00,630 --> 00:04:03,260
‫Pero así, realmente no podemos especificar

79
00:04:03,260 --> 00:04:05,110
‫el atributo href.

80
00:04:05,110 --> 00:04:09,360
‫Así que cambiémoslos en realidad a un enlace real.

81
00:04:09,360 --> 00:04:12,763
‫Y aquí, podemos especificar el href.

82
00:04:16,290 --> 00:04:20,543
‫Así que este simplemente apunta a iniciar sesión.

83
00:04:21,970 --> 00:04:23,400
‫Y un segundo aquí,

84
00:04:23,400 --> 00:04:25,540
‫el registro en realidad no implementaremos, por

85
00:04:27,210 --> 00:04:29,080
‫lo que puede implementar esto por

86
00:04:29,080 --> 00:04:30,660
‫su cuenta si lo desea.

87
00:04:30,660 --> 00:04:33,190
‫Básicamente, un formulario de registro.

88
00:04:33,190 --> 00:04:34,490
‫Pero, dado que

89
00:04:34,490 --> 00:04:37,440
‫todo eso, todo el proceso de registro será muy

90
00:04:37,440 --> 00:04:39,220
‫similar al inicio de sesión,

91
00:04:39,220 --> 00:04:42,130
‫decidí no incluir eso aquí en esta sección porque

92
00:04:42,130 --> 00:04:44,800
‫sería una gran cantidad de contenido duplicado y

93
00:04:44,800 --> 00:04:47,663
‫no quiero hacer que el curso sea innecesariamente largo.

94
00:04:50,240 --> 00:04:52,480
‫Dale a esto una caja fuerte, no

95
00:04:52,480 --> 00:04:55,730
‫sé si esto ahora reinicia el servidor, en realidad no lo

96
00:04:55,730 --> 00:04:56,730
‫hace, así que

97
00:04:57,630 --> 00:05:00,113
‫guardemos uno de estos archivos de script java.

98
00:05:01,930 --> 00:05:02,763
‫Ahora bien,

99
00:05:03,980 --> 00:05:06,470
‫este es nuestro sitio web de referencia.

100
00:05:06,470 --> 00:05:08,450
‫Recuerde, eso es lo que queremos,

101
00:05:08,450 --> 00:05:09,357
‫es éste.

102
00:05:11,030 --> 00:05:12,890
‫Pasemos a todos los

103
00:05:12,890 --> 00:05:16,320
‫recorridos y ahora probemos nuestra ruta de inicio de sesión.

104
00:05:16,320 --> 00:05:19,550
‫Y, de hecho, aquí va nuestra forma.

105
00:05:19,550 --> 00:05:20,383
‫Excelente.

106
00:05:21,650 --> 00:05:23,950
‫Ahora aquí podemos poner

107
00:05:23,950 --> 00:05:25,730
‫un correo

108
00:05:25,730 --> 00:05:29,140
‫electrónico, digamos admin dot naders dot

109
00:05:29,140 --> 00:05:30,100
‫io.

110
00:05:30,100 --> 00:05:32,100
‫Y verá que formatea muy bien

111
00:05:32,100 --> 00:05:34,790
‫esta entrada aquí, ya sea que la dirección de

112
00:05:34,790 --> 00:05:36,860
‫correo electrónico sea realmente válida o no.

113
00:05:36,860 --> 00:05:40,770
‫Por ejemplo, si no tengo la extensión aquí correcta,

114
00:05:40,770 --> 00:05:43,100
‫entonces se volverá naranja y

115
00:05:43,100 --> 00:05:45,580
‫me indicará que algo anda mal.

116
00:05:45,580 --> 00:05:47,730
‫Y lo mismo para la contraseña.

117
00:05:47,730 --> 00:05:50,400
‫Siempre que tenga menos de ocho caracteres, siempre

118
00:05:50,400 --> 00:05:52,200
‫será rojo, lo que

119
00:05:52,200 --> 00:05:54,423
‫básicamente me indica que hay un error.

120
00:05:56,520 --> 00:05:58,260
‫Que ahora que tengo ocho

121
00:05:58,260 --> 00:05:59,690
‫caracteres, se pone verde.

122
00:05:59,690 --> 00:06:01,970
‫Y si está interesado en cómo hacer

123
00:06:01,970 --> 00:06:04,020
‫este tipo de magia con

124
00:06:04,020 --> 00:06:07,670
‫css, no dude en consultar el archivo css que codifiqué

125
00:06:07,670 --> 00:06:09,390
‫solo para este curso.

126
00:06:09,390 --> 00:06:12,270
‫De todos modos, por supuesto, hacer clic en

127
00:06:12,270 --> 00:06:15,200
‫este botón aquí ahora hace absolutamente cualquier cosa, ¿verdad?

128
00:06:15,200 --> 00:06:17,390
‫Entonces, en el siguiente video, realmente

129
00:06:17,390 --> 00:06:20,390
‫comenzaremos a implementar la funcionalidad de inicio de sesión

130
00:06:20,390 --> 00:06:23,570
‫haciendo una solicitud a nuestro punto final de API

131
00:06:23,570 --> 00:06:24,823
‫que ya creamos.