1
00:00:01,050 --> 00:00:02,950
‫Jonas: Nas próximas duas

2
00:00:02,950 --> 00:00:06,940
‫palestras, adicionaremos a funcionalidade de login ao nosso site.

3
00:00:06,940 --> 00:00:07,940
‫E nesta

4
00:00:07,940 --> 00:00:10,420
‫aula, começaremos realmente renderizando a tela

5
00:00:10,420 --> 00:00:12,610
‫de login para facilitar o

6
00:00:12,610 --> 00:00:14,083
‫login dos usuários.

7
00:00:15,880 --> 00:00:19,620
‫Mais uma vez, quero que isso seja um desafio para

8
00:00:19,620 --> 00:00:22,810
‫você, para que possa realmente praticar algumas das

9
00:00:22,810 --> 00:00:24,890
‫habilidades que vem aprendendo.

10
00:00:24,890 --> 00:00:28,230
‫O que eu quero que você faça é criar uma rota

11
00:00:28,230 --> 00:00:29,463
‫de login de barra.

12
00:00:31,550 --> 00:00:33,240
‫Em seguida, crie um controlador

13
00:00:33,240 --> 00:00:34,930
‫e, é claro, um modelo.

14
00:00:34,930 --> 00:00:36,720
‫E esse modelo é muito fácil.

15
00:00:36,720 --> 00:00:39,610
‫É apenas um HTML estático e não precisamos

16
00:00:39,610 --> 00:00:41,783
‫passar nenhuma variável para ele.

17
00:00:43,030 --> 00:00:45,050
‫Na verdade, existe um modelo

18
00:00:45,050 --> 00:00:47,375
‫para isso aqui na pasta de modelos.

19
00:00:47,375 --> 00:00:50,623
‫Portanto, isso deve ser realmente fácil para você concluir.

20
00:00:52,211 --> 00:00:55,133
‫Portanto, pause este vídeo e volte quando estiver pronto.

21
00:00:58,580 --> 00:00:59,850
‫Ok, bem-vindo de volta.

22
00:00:59,850 --> 00:01:04,300
‫Espero que você tenha concluído este desafio com sucesso.

23
00:01:04,300 --> 00:01:05,963
‫Então aqui está minha opinião sobre isso.

24
00:01:07,080 --> 00:01:09,670
‫O ponto de roteador obter a rota

25
00:01:09,670 --> 00:01:11,360
‫é o login de

26
00:01:11,360 --> 00:01:12,380
‫barra e

27
00:01:14,661 --> 00:01:17,223
‫então usamos o formulário de login de

28
00:01:19,430 --> 00:01:20,650
‫ponto de controlador.

29
00:01:20,650 --> 00:01:23,783
‫Então, esse é o manipulador de rota que vou criar a seguir.

30
00:01:29,820 --> 00:01:33,150
‫Exporte o ponto para obter a resposta do formulário de

31
00:01:35,740 --> 00:01:36,680
‫login e

32
00:01:39,470 --> 00:01:41,540
‫aqui não precisamos mais do que

33
00:01:41,540 --> 00:01:43,590
‫apenas a solicitação e a resposta.

34
00:01:43,590 --> 00:01:45,100
‫Na verdade, aqui em cima estou vendo

35
00:01:45,100 --> 00:01:46,563
‫que estamos perdendo o próximo.

36
00:01:48,190 --> 00:01:51,360
‫Sempre, quando temos funções assíncronas agrupadas em catchAsync,

37
00:01:51,360 --> 00:01:53,833
‫devemos sempre especificar a seguir.

38
00:01:55,950 --> 00:01:57,980
‫Mas aqui, tudo o que

39
00:01:57,980 --> 00:02:01,270
‫realmente precisamos fazer é renderizar um modelo de login.

40
00:02:01,270 --> 00:02:03,950
‫Portanto, ainda não criamos esse modelo.

41
00:02:03,950 --> 00:02:06,320
‫Mas será chamado de login.

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

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

44
00:02:13,390 --> 00:02:14,940
‫modelo de

45
00:02:16,060 --> 00:02:17,640
‫renderização chamado login.

46
00:02:17,640 --> 00:02:19,790
‫Então, como com todas as nossas

47
00:02:19,790 --> 00:02:23,090
‫outras páginas, realmente queremos dar a ele um título personalizado.

48
00:02:23,090 --> 00:02:26,010
‫Para isso sempre passamos um objeto

49
00:02:26,010 --> 00:02:28,240
‫com a propriedade title.

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

51
00:02:29,090 --> 00:02:32,010
‫Assim, o template base irá então ler aquele título

52
00:02:32,010 --> 00:02:34,543
‫e colocá-lo no elemento title html.

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

54
00:02:38,770 --> 00:02:43,770
‫o título é simplesmente entrar em sua conta.

55
00:02:43,890 --> 00:02:46,690
‫E é isso para o gerenciador de rotas.

56
00:02:46,690 --> 00:02:47,963
‫Agora vamos

57
00:02:48,820 --> 00:02:51,520
‫de cabeça, abra o modelo de

58
00:02:51,520 --> 00:02:53,230
‫login, selecione tudo,

59
00:02:53,230 --> 00:02:57,663
‫copie tudo, feche-o e crie a nova visão aqui.

60
00:02:59,860 --> 00:03:02,923
‫Chame, é claro, login ponto pug.

61
00:03:04,480 --> 00:03:06,380
‫Então, colando esse código aqui,

62
00:03:06,380 --> 00:03:09,900
‫e agora vem de novo aquele truque em que estendemos

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

64
00:03:14,740 --> 00:03:19,740
‫Este estende a extensão do arquivo de base, não se esqueça que aqui precisamos

65
00:03:20,120 --> 00:03:22,660
‫criar um bloco com exatamente o

66
00:03:22,660 --> 00:03:25,443
‫mesmo nome que temos no arquivo de base.

67
00:03:26,950 --> 00:03:28,163
‫Então isso é conteúdo.

68
00:03:29,610 --> 00:03:33,130
‫E com isso nós realmente terminamos, eu

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

70
00:03:36,000 --> 00:03:38,770
‫Claro, precisamos recuar para torná-lo um filho

71
00:03:38,770 --> 00:03:39,913
‫deste bloco.

72
00:03:40,760 --> 00:03:42,233
‫Mas, é realmente isso.

73
00:03:43,602 --> 00:03:46,110
‫Agora, só mais uma coisa que

74
00:03:46,110 --> 00:03:49,160
‫precisamos fazer é definir um link para a

75
00:03:49,160 --> 00:03:52,163
‫página de login para que possamos realmente acessá-la.

76
00:03:54,462 --> 00:03:57,480
‫No momento, os botões de login e inscrição estão, na

77
00:03:57,480 --> 00:03:59,393
‫verdade, usando o elemento de botão.

78
00:04:00,630 --> 00:04:03,260
‫Mas assim, não podemos realmente especificar

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

80
00:04:05,110 --> 00:04:09,360
‫Então, vamos mudá-los de fato para um link real.

81
00:04:09,360 --> 00:04:12,763
‫E aqui, podemos especificar o href.

82
00:04:16,290 --> 00:04:20,543
‫Portanto, este simplesmente aponta para o login.

83
00:04:21,970 --> 00:04:23,400
‫E um segundo

84
00:04:23,400 --> 00:04:25,540
‫aqui, o registro que não implementaremos na

85
00:04:27,210 --> 00:04:29,080
‫verdade, para que você possa implementar

86
00:04:29,080 --> 00:04:30,660
‫por conta própria, se desejar.

87
00:04:30,660 --> 00:04:33,190
‫Basicamente, um formulário de inscrição.

88
00:04:33,190 --> 00:04:34,490
‫Mas, desde tudo

89
00:04:34,490 --> 00:04:37,440
‫isso, então todo o processo de inscrição vai

90
00:04:37,440 --> 00:04:39,220
‫ser muito semelhante ao login,

91
00:04:39,220 --> 00:04:42,130
‫decidi não incluir isso aqui nesta seção porque

92
00:04:42,130 --> 00:04:44,800
‫seria apenas muito conteúdo duplicado e não

93
00:04:44,800 --> 00:04:47,663
‫quero torne o curso desnecessário por muito tempo.

94
00:04:50,240 --> 00:04:52,480
‫Dê um seguro, não sei

95
00:04:52,480 --> 00:04:55,730
‫se isso agora reinicia o servidor, na verdade não,

96
00:04:55,730 --> 00:04:56,730
‫então vamos

97
00:04:57,630 --> 00:05:00,113
‫salvar um desses arquivos de script java.

98
00:05:01,930 --> 00:05:02,763
‫Agora, este

99
00:05:03,980 --> 00:05:06,470
‫é o nosso site de referência.

100
00:05:06,470 --> 00:05:08,450
‫Lembre-se, é isso que queremos,

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

102
00:05:11,030 --> 00:05:12,890
‫Vamos a todos os

103
00:05:12,890 --> 00:05:16,320
‫passeios e agora vamos tentar nossa rota de login.

104
00:05:16,320 --> 00:05:19,550
‫E, de fato, aqui vai nosso formulário.

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

106
00:05:21,650 --> 00:05:23,950
‫Agora aqui podemos colocar

107
00:05:23,950 --> 00:05:25,730
‫algum e-mail,

108
00:05:25,730 --> 00:05:29,140
‫digamos admin ponto naders ponto

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

110
00:05:30,100 --> 00:05:32,100
‫E você vê que ele

111
00:05:32,100 --> 00:05:34,790
‫formata muito bem essa entrada aqui, quer o endereço

112
00:05:34,790 --> 00:05:36,860
‫de e-mail seja realmente válido ou não.

113
00:05:36,860 --> 00:05:40,770
‫Por exemplo, se eu não tiver a extensão correta

114
00:05:40,770 --> 00:05:43,100
‫aqui, ela ficará laranja

115
00:05:43,100 --> 00:05:45,580
‫me informando que algo está errado.

116
00:05:45,580 --> 00:05:47,730
‫E a mesma coisa com a senha.

117
00:05:47,730 --> 00:05:50,400
‫Contanto que eu tenha menos de oito caracteres,

118
00:05:50,400 --> 00:05:52,200
‫isso sempre será vermelho,

119
00:05:52,200 --> 00:05:54,423
‫basicamente me informando que há um erro.

120
00:05:56,520 --> 00:05:58,260
‫Que agora que tenho oito

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

122
00:05:59,690 --> 00:06:01,970
‫E se você estiver interessado em como

123
00:06:01,970 --> 00:06:04,020
‫fazer esse tipo de mágica com

124
00:06:04,020 --> 00:06:07,670
‫css, sinta-se à vontade para verificar o arquivo css que codifiquei

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

126
00:06:09,390 --> 00:06:12,270
‫De qualquer forma, é claro, clicar neste

127
00:06:12,270 --> 00:06:15,200
‫botão aqui agora faz absolutamente qualquer coisa, certo?

128
00:06:15,200 --> 00:06:17,390
‫Portanto, no próximo vídeo, vamos realmente

129
00:06:17,390 --> 00:06:20,390
‫começar a implementar a funcionalidade de login, na

130
00:06:20,390 --> 00:06:23,570
‫verdade, fazendo uma solicitação para nosso endpoint de API

131
00:06:23,570 --> 00:06:24,823
‫que já criamos.