1 00:00:01,040 --> 00:00:03,600 ‫Jonas: Agora vamos usar a página da 2 00:00:03,600 --> 00:00:06,803 ‫conta do usuário para permitir que os usuários atualizem seus dados. 3 00:00:08,410 --> 00:00:10,770 ‫Então, o que vamos fazer é permitir 4 00:00:10,770 --> 00:00:15,030 ‫que o usuário atualize o nome e o endereço de e-mail por enquanto. 5 00:00:15,030 --> 00:00:17,060 ‫E adicionaremos a foto do usuário aqui um 6 00:00:17,060 --> 00:00:18,843 ‫pouco mais tarde na próxima seção. 7 00:00:19,826 --> 00:00:23,670 ‫Ok, agora existem duas maneiras de fazermos isso. 8 00:00:23,670 --> 00:00:27,420 ‫O primeiro é enviar uma solicitação de postagem à nossa API, 9 00:00:27,420 --> 00:00:31,150 ‫assim como fizemos com o formulário de login, lembra disso? 10 00:00:31,150 --> 00:00:33,950 ‫E, na verdade, faremos isso na próxima aula. 11 00:00:33,950 --> 00:00:36,600 ‫Mas neste, eu quero mostrar a vocês 12 00:00:36,600 --> 00:00:39,950 ‫outra forma que é uma forma normal mais tradicional. 13 00:00:39,950 --> 00:00:41,840 ‫Portanto, dessa forma mais 14 00:00:41,840 --> 00:00:45,150 ‫tradicional, especificamos o método de postagem diretamente no formulário, 15 00:00:45,150 --> 00:00:49,710 ‫junto com a URL para onde a solicitação de postagem deve ser enviada. 16 00:00:49,710 --> 00:00:52,980 ‫Então, basicamente, usando este método, não precisamos de 17 00:00:52,980 --> 00:00:55,660 ‫JavaScript para fazer a solicitação, isso 18 00:00:55,660 --> 00:00:59,450 ‫acontece automaticamente com o formulário HTML que postará os 19 00:00:59,450 --> 00:01:03,580 ‫dados no endpoint da URL em nosso back-end que especificamos. 20 00:01:03,580 --> 00:01:06,980 ‫Agora, pessoalmente, eu realmente não gosto dessa solução, porque 21 00:01:06,980 --> 00:01:09,270 ‫ela força o recarregamento da página 22 00:01:09,270 --> 00:01:11,200 ‫e também exige que criemos 23 00:01:11,200 --> 00:01:14,750 ‫outra rota e um manipulador de rotas em nosso back-end. 24 00:01:14,750 --> 00:01:16,830 ‫E, por fim, também torna um 25 00:01:16,830 --> 00:01:19,120 ‫pouco mais difícil lidar com os erros. 26 00:01:19,120 --> 00:01:22,510 ‫No entanto, ainda acredito que é muito importante que 27 00:01:22,510 --> 00:01:25,700 ‫você saiba como trabalhar com formulários dessa forma, 28 00:01:25,700 --> 00:01:27,910 ‫porque pode fazer mais 29 00:01:27,910 --> 00:01:30,630 ‫sentido no aplicativo que você está construindo. 30 00:01:30,630 --> 00:01:34,140 ‫Por exemplo, seu aplicativo pode nem mesmo precisar de uma API 31 00:01:34,140 --> 00:01:36,200 ‫e, nesse caso, quando você está 32 00:01:36,200 --> 00:01:39,140 ‫apenas construindo um site renderizado, é claro que não 33 00:01:39,140 --> 00:01:41,770 ‫faz sentido enviar formulários usando uma chamada de 34 00:01:41,770 --> 00:01:43,490 ‫API e, em vez disso, 35 00:01:43,490 --> 00:01:46,020 ‫você faça da maneira que faremos neste vídeo. 36 00:01:46,020 --> 00:01:48,760 ‫Tudo bem, é por isso que faremos dessa forma 37 00:01:48,760 --> 00:01:50,580 ‫nesta aula e, em seguida, 38 00:01:50,580 --> 00:01:53,320 ‫usaremos a forma de API na próxima aula. 39 00:01:53,320 --> 00:01:55,910 ‫Então, o que precisamos fazer em 40 00:01:55,910 --> 00:01:57,960 ‫nosso formulário a fim 41 00:01:57,960 --> 00:01:59,930 ‫de enviá-lo automaticamente, 42 00:01:59,930 --> 00:02:02,030 ‫sem ter que passar por 43 00:02:02,030 --> 00:02:05,240 ‫JavaScript como mencionei antes, então, basicamente postar os 44 00:02:05,240 --> 00:02:10,240 ‫dados automaticamente em nosso endpoint, é especificar esse endpoint, e então fazemos 45 00:02:10,550 --> 00:02:15,133 ‫isso aqui no formulário, onde especificamos o atributo de ação. 46 00:02:17,380 --> 00:02:21,410 ‫Então, a ação, e digamos que vamos criar 47 00:02:21,410 --> 00:02:26,410 ‫um ponto de extremidade chamado enviar dados do usuário, como este. 48 00:02:27,740 --> 00:02:30,433 ‫Ok, e também especificamos o 49 00:02:33,180 --> 00:02:37,400 ‫método, que é post, ok, então isso sempre precisa 50 00:02:37,400 --> 00:02:41,310 ‫acontecer no elemento do formulário que estamos enviando, ok. 51 00:02:41,310 --> 00:02:43,963 ‫Vamos dar um pouco mais de espaço 52 00:02:45,020 --> 00:02:47,170 ‫aqui, para ficar mais fácil 53 00:02:47,170 --> 00:02:49,920 ‫de entender, então tudo isso aqui é 54 00:02:49,920 --> 00:02:52,500 ‫o nosso formulário, e quando clicarmos 55 00:02:52,500 --> 00:02:56,260 ‫neste elemento do botão, automaticamente o formulário será enviado e 56 00:02:56,260 --> 00:03:01,260 ‫os dados serão enviados usando uma solicitação de postagem para este URL, certo. 57 00:03:01,410 --> 00:03:03,540 ‫Existem também maneiras diferentes nas quais os 58 00:03:03,540 --> 00:03:06,850 ‫dados são realmente enviados, mas a forma padrão é chamada de codificação 59 00:03:06,850 --> 00:03:09,540 ‫de URL e é essa que estamos usando aqui. 60 00:03:09,540 --> 00:03:11,440 ‫Basicamente, o que isso fará 61 00:03:11,440 --> 00:03:14,050 ‫é codificar todos os dados que estamos enviando na 62 00:03:14,050 --> 00:03:16,650 ‫URL, um pouco como uma string de consulta. 63 00:03:16,650 --> 00:03:19,480 ‫Ok, mas mais sobre isso quando estamos realmente 64 00:03:19,480 --> 00:03:22,790 ‫trabalhando para obter os dados no servidor e trabalhar com eles. 65 00:03:22,790 --> 00:03:26,880 ‫Portanto, esta é a primeira etapa para fazer esse método funcionar, e 66 00:03:26,880 --> 00:03:30,220 ‫a segunda é especificar as propriedades do nome nos 67 00:03:30,220 --> 00:03:32,423 ‫campos que realmente queremos enviar. 68 00:03:33,310 --> 00:03:35,950 ‫Portanto, é esta entrada e esta entrada, 69 00:03:35,950 --> 00:03:38,460 ‫e seus valores serão enviados com 70 00:03:38,460 --> 00:03:41,420 ‫uma solicitação baseada em seus atributos de nome. 71 00:03:41,420 --> 00:03:46,420 ‫Ok, então vamos dizer aqui, nome é igual a nome, ok, então 72 00:03:48,360 --> 00:03:53,180 ‫esse é o nome de usuário e então este aqui 73 00:03:53,180 --> 00:03:56,083 ‫terá o nome igual a e-mail. 74 00:03:57,680 --> 00:04:01,910 ‫Ok, então este será o nome deste campo, e o 75 00:04:01,910 --> 00:04:04,370 ‫corpo que nosso aplicativo recebe. 76 00:04:04,370 --> 00:04:07,840 ‫Tudo bem, e agora, quando enviarmos o formulário, o corpo 77 00:04:07,840 --> 00:04:09,750 ‫que iremos receber terá apenas 78 00:04:09,750 --> 00:04:12,410 ‫o nome e o e-mail, porque esses são 79 00:04:12,410 --> 00:04:14,290 ‫os únicos dois campos 80 00:04:14,290 --> 00:04:16,640 ‫que realmente têm um atributo de nome. 81 00:04:16,640 --> 00:04:20,233 ‫Tudo bem, vamos agora implementar essa rota aqui, ok, então 82 00:04:21,730 --> 00:04:23,930 ‫como eu disse com esse método, 83 00:04:23,930 --> 00:04:25,993 ‫precisamos implementar mais uma rota. 84 00:04:28,550 --> 00:04:33,550 ‫Ok, então roteador, e lembre-se de que esta é uma solicitação de postagem. 85 00:04:36,200 --> 00:04:40,713 ‫Ok, e então este estará em viewsController, e digamos 86 00:04:44,500 --> 00:04:48,467 ‫updateUserData, certo, salve-o e agora vamos realmente 87 00:04:54,934 --> 00:04:57,100 ‫criar este manipulador. 88 00:04:58,440 --> 00:04:59,993 ‫Então, aqui neste arquivo. 89 00:05:10,580 --> 00:05:12,310 ‫E a primeira coisa que quero 90 00:05:12,310 --> 00:05:14,733 ‫fazer aqui é realmente dar uma olhada no corpo. corpo, ok, e basicamente neste caso, apenas 91 00:05:19,437 --> 00:05:22,800 ‫para mostrar a você que na verdade não funcionará assim. 92 00:05:22,800 --> 00:05:26,550 ‫Ok, e eu vou te dizer o porquê 93 00:05:26,550 --> 00:05:29,380 ‫depois de experimentarmos, ok, então 94 00:05:29,380 --> 00:05:33,200 ‫por enquanto vamos ver se já estamos realmente conectados. 95 00:05:33,200 --> 00:05:35,380 ‫Portanto, se o envio desse 96 00:05:35,380 --> 00:05:38,390 ‫formulário realmente acionar este manipulador aqui, ok, também 97 00:05:38,390 --> 00:05:41,700 ‫vamos adicionar uma string aqui apenas para ter certeza. 98 00:05:41,700 --> 00:05:43,500 ‫Tudo bem, vamos recarregar isso 99 00:05:47,620 --> 00:05:50,980 ‫aqui para obter nosso novo formulário e, apenas para ter 100 00:05:52,040 --> 00:05:54,020 ‫certeza, vamos dar uma olhada nele. 101 00:05:54,020 --> 00:05:56,020 ‫Tudo bem, então você 102 00:05:58,210 --> 00:06:01,080 ‫vê aqui, a ação e o método que 103 00:06:01,080 --> 00:06:04,023 ‫adicionamos e, claro, também esses nomes, ok, e 104 00:06:04,870 --> 00:06:09,253 ‫então vamos adicionar algum nome do meio aqui, não sei, digamos Sarah, 105 00:06:10,890 --> 00:06:13,010 ‫então aqui o e-mail vamos adicionar 106 00:06:13,010 --> 00:06:17,473 ‫o sobrenome dele, agora a gente pega esse erro, por favor forneça 107 00:06:19,500 --> 00:06:23,460 ‫e-mail e senha, e então isso meio que vem do formulário 108 00:06:23,460 --> 00:06:25,730 ‫de login né, isso é estranho. 109 00:06:25,730 --> 00:06:29,063 ‫Então, vamos dar uma olhada em nosso formulário aqui 110 00:06:30,770 --> 00:06:34,660 ‫e, de fato, este formulário aqui tem a classe de formulário. 111 00:06:34,660 --> 00:06:38,130 ‫E eu acho que é o que usamos também em 112 00:06:38,130 --> 00:06:39,270 ‫nosso índice. js, certo. 113 00:06:39,270 --> 00:06:42,377 ‫Então aqui basicamente obtemos esse 114 00:06:45,200 --> 00:06:48,070 ‫formulário usando a classe de formulário e, quando ela existe 115 00:06:48,070 --> 00:06:50,830 ‫e é enviada, tentamos fazer o login, bem aqui. 116 00:06:50,830 --> 00:06:54,990 ‫Ok, claro que isso não está correto, então devemos selecionar 117 00:06:54,990 --> 00:06:58,450 ‫nosso formulário de login de alguma outra forma. 118 00:06:58,450 --> 00:07:02,170 ‫Então vamos consertar isso rapidamente, aqui temos login, então vamos 119 00:07:02,170 --> 00:07:03,783 ‫apenas adicionar outra 120 00:07:05,310 --> 00:07:10,310 ‫classe aqui, login de formulário, e isso é um pouco estranho porque já 121 00:07:12,300 --> 00:07:14,970 ‫temos formulário de login aqui, mas não 122 00:07:14,970 --> 00:07:17,460 ‫está realmente em um elemento de formulário. 123 00:07:17,460 --> 00:07:20,040 ‫Então não devemos usar isso, então 124 00:07:20,040 --> 00:07:23,820 ‫vamos criar aqui um formulário com um modificador de login, ok. 125 00:07:23,820 --> 00:07:28,493 ‫Então, vamos colocar isso aqui, salvá-lo, e agora isso não deve 126 00:07:31,890 --> 00:07:34,853 ‫mais estar acontecendo, porque agora não temos 127 00:07:36,970 --> 00:07:39,270 ‫mais aquele manipulador de eventos anexado 128 00:07:40,270 --> 00:07:42,010 ‫a este formulário. 129 00:07:42,010 --> 00:07:44,173 ‫Então, vamos recarregá-lo rapidamente e tentar 130 00:07:45,120 --> 00:07:48,473 ‫novamente, e agora você verá que ele está realmente fazendo algo, mas 131 00:07:50,953 --> 00:07:53,340 ‫é claro que nunca vai parar de girar 132 00:07:53,340 --> 00:07:56,290 ‫aqui, porque na verdade não enviamos nenhuma resposta de volta, 133 00:07:56,290 --> 00:07:59,470 ‫e assim o ciclo de solicitação de resposta nunca é terminou. 134 00:07:59,470 --> 00:08:03,160 ‫Mas enfim, eu só queria olhar o corpo do 135 00:08:03,160 --> 00:08:04,870 ‫pedido, lembra disso? 136 00:08:04,870 --> 00:08:07,680 ‫E como mencionei antes, agora é MT. 137 00:08:07,680 --> 00:08:10,853 ‫Ok, como eu estava dizendo, isso não vai 138 00:08:11,960 --> 00:08:15,100 ‫funcionar exatamente assim, porque precisamos adicionar outro 139 00:08:15,100 --> 00:08:18,510 ‫middleware para analisar os dados vindos de um formulário. 140 00:08:18,510 --> 00:08:21,540 ‫Então, vamos fazer isso em nosso aplicativo. js. 141 00:08:21,540 --> 00:08:23,843 ‫Mas primeiro, vamos fechar alguns desses arquivos aqui. 142 00:08:24,870 --> 00:08:28,333 ‫Tudo bem, este também, e agora, indo para o app. js, vamos adicionar essa cláusula ao nosso analisador 143 00:08:30,880 --> 00:08:35,880 ‫de corpo, então aqui 144 00:08:37,290 --> 00:08:40,373 ‫estamos, porque na verdade é muito semelhante. 145 00:08:41,860 --> 00:08:45,273 ‫Então, app. usar, e ainda é um middleware integrado 146 00:08:47,340 --> 00:08:51,423 ‫Express, então expresse. urlencoded, ok, e é chamado assim porque 147 00:08:52,940 --> 00:08:56,837 ‫lembre-se, a maneira como o 148 00:09:00,280 --> 00:09:03,380 ‫formulário envia dados ao servidor também é chamada de codificação 149 00:09:03,380 --> 00:09:06,830 ‫de URL e, portanto, precisamos desse middleware para analisar basicamente os dados 150 00:09:06,830 --> 00:09:09,000 ‫provenientes de um formulário codificado de URL. 151 00:09:09,000 --> 00:09:13,440 ‫Em seguida, passamos algumas configurações, e podemos dizer extendido verdadeiro, 152 00:09:13,440 --> 00:09:16,630 ‫e isso simplesmente nos permitirá passar alguns 153 00:09:16,630 --> 00:09:21,630 ‫dados mais complexos, que neste caso não são realmente necessários, mas ainda 154 00:09:22,000 --> 00:09:23,720 ‫vamos usá-los aqui, 155 00:09:23,720 --> 00:09:25,650 ‫e também podemos definir 156 00:09:25,650 --> 00:09:29,530 ‫o limite como fizemos no analisador de corpo, então 157 00:09:29,530 --> 00:09:33,010 ‫aqui em cima, e digamos novamente 10 kilobytes. 158 00:09:33,010 --> 00:09:37,113 ‫Tudo bem, se tentarmos novamente aqui, devemos realmente 159 00:09:38,930 --> 00:09:42,930 ‫obter esses dados, e esses dados. 160 00:09:42,930 --> 00:09:46,670 ‫Vamos adicionar novamente esses dados diferentes aqui, para termos certeza 161 00:09:46,670 --> 00:09:50,370 ‫de que eles realmente não estão obtendo o usuário atual, 162 00:09:50,370 --> 00:09:53,620 ‫mas sim os dados provenientes do formulário, ok, e 163 00:09:54,480 --> 00:09:56,090 ‫novamente continua girando para 164 00:09:56,090 --> 00:09:57,593 ‫sempre aqui, ou 165 00:09:59,820 --> 00:10:02,860 ‫até que o tempo limite, mas o que 166 00:10:02,860 --> 00:10:07,720 ‫nos interessa é realmente obter esses novos dados aqui agora em nosso corpo. 167 00:10:07,720 --> 00:10:11,850 ‫Ótimo, isso funciona e agora temos nosso formulário 168 00:10:11,850 --> 00:10:16,410 ‫HTML realmente conectado a este manipulador de rotas aqui. 169 00:10:16,410 --> 00:10:19,920 ‫E agora podemos ir em frente e realmente atualizar o 170 00:10:19,920 --> 00:10:22,860 ‫usuário com base nesses novos dados, certo. 171 00:10:22,860 --> 00:10:25,490 ‫Então, vamos nos livrar disso, 172 00:10:25,490 --> 00:10:29,010 ‫e depois atualizar o usuário como já sabemos fazer. 173 00:10:29,010 --> 00:10:31,610 ‫Agora, primeiro de tudo, vamos ter que importar o 174 00:10:31,610 --> 00:10:33,900 ‫modelo do usuário, então vamos fazer isso. 175 00:10:33,900 --> 00:10:37,873 ‫Usuário, aqui com um U 176 00:10:39,160 --> 00:10:44,160 ‫minúsculo, tudo bem, então agora digamos que 177 00:10:46,930 --> 00:10:51,910 ‫o usuário é igual a aguardar Usuário. findByIdAndUpdate. 178 00:10:51,910 --> 00:10:55,013 ‫Certo, então é claro 179 00:11:00,780 --> 00:11:04,850 ‫como sempre, marque este como assíncrono e pegue todos os erros. 180 00:11:04,850 --> 00:11:07,473 ‫Agora tudo bem, então qual é a ID que estamos procurando? 181 00:11:12,920 --> 00:11:17,890 ‫E espero que neste momento você saiba onde 182 00:11:17,890 --> 00:11:21,120 ‫está, será a pedido. do utilizador. identificação. 183 00:11:21,120 --> 00:11:25,640 ‫Ah, e uma 184 00:11:25,640 --> 00:11:27,980 ‫coisa importante que precisamos fazer, o que 185 00:11:27,980 --> 00:11:30,490 ‫eu ainda não fiz, é realmente proteger 186 00:11:30,490 --> 00:11:32,600 ‫essa rota aqui também, ok, porque 187 00:11:32,600 --> 00:11:35,430 ‫só então teremos esse usuário na solicitação, certo, 188 00:11:35,430 --> 00:11:38,810 ‫e claro além disso, só queremos poder acessar essa rota 189 00:11:38,810 --> 00:11:41,050 ‫se estivermos logados, caso contrário, qualquer 190 00:11:41,050 --> 00:11:44,470 ‫pessoa pode simplesmente ir em frente e atualizar alguns dados. 191 00:11:44,470 --> 00:11:46,683 ‫Então, aqui na 192 00:11:48,210 --> 00:11:50,880 ‫rota, vamos adicionar o authController. proteger. 193 00:11:50,880 --> 00:11:53,300 ‫Tudo bem, 194 00:11:58,450 --> 00:12:03,390 ‫então, esse é o ID, então precisamos dos novos dados 195 00:12:03,390 --> 00:12:08,343 ‫e, então, digamos que queremos um nome igual a request. corpo. nome e o e-mail definido como 196 00:12:08,343 --> 00:12:13,320 ‫pedido. corpo. o email. 197 00:12:18,710 --> 00:12:23,233 ‫E lembre-se de que esses são 198 00:12:25,010 --> 00:12:27,960 ‫os nomes dos campos, porque demos a eles o atributo name no formulário HTML. 199 00:12:27,960 --> 00:12:31,630 ‫Lembre-se, antes, quando atualizávamos alguns dados, costumávamos passar toda a 200 00:12:31,630 --> 00:12:35,470 ‫solicitação aqui para o método de atualização, certo, mas neste 201 00:12:35,470 --> 00:12:37,970 ‫caso, realmente queremos apenas atualizar o 202 00:12:37,970 --> 00:12:41,020 ‫nome e o e-mail, e assim, estamos certifique-se 203 00:12:41,020 --> 00:12:44,520 ‫de que qualquer outra coisa está sendo basicamente removida 204 00:12:44,520 --> 00:12:47,210 ‫do corpo, porque algum hacker pode, é 205 00:12:47,210 --> 00:12:50,710 ‫claro, ir em frente e adicionar alguns campos adicionais 206 00:12:50,710 --> 00:12:53,040 ‫ao HTML e, por exemplo, 207 00:12:53,040 --> 00:12:55,770 ‫enviar dados como senhas e coisas assim, 208 00:12:55,770 --> 00:12:58,330 ‫e é claro que fazemos não 209 00:12:58,330 --> 00:13:01,020 ‫quero armazenar esses dados maliciosos em nosso 210 00:13:01,020 --> 00:13:03,070 ‫banco de dados, certo. 211 00:13:03,070 --> 00:13:06,720 ‫Além disso, as senhas são mais uma vez 212 00:13:06,720 --> 00:13:10,700 ‫tratadas separadamente, porque lembre-se de que nunca podemos atualizar 213 00:13:10,700 --> 00:13:13,250 ‫as senhas usando findByIdAndUpdate. 214 00:13:13,250 --> 00:13:17,120 ‫Novamente, porque isso não executará o middleware seguro 215 00:13:17,120 --> 00:13:20,580 ‫que se encarregará de criptografar nossas senhas. 216 00:13:20,580 --> 00:13:23,860 ‫Ok, é por isso que temos uma rota separada para 217 00:13:23,860 --> 00:13:26,560 ‫isso em nossa API, e também temos 218 00:13:26,560 --> 00:13:29,950 ‫uma rota separada para isso em nossa interface de usuário. 219 00:13:29,950 --> 00:13:32,090 ‫E normalmente é isso que você sempre 220 00:13:32,090 --> 00:13:34,550 ‫vê em aplicativos da web quando deseja atualizar 221 00:13:34,550 --> 00:13:36,610 ‫suas senhas, geralmente você tem um formulário 222 00:13:36,610 --> 00:13:38,430 ‫separado apenas para isso, ok. 223 00:13:38,430 --> 00:13:41,493 ‫De qualquer forma, vamos continuar aqui com nossas 224 00:13:42,830 --> 00:13:45,373 ‫opções, onde dizemos que queremos 225 00:13:46,640 --> 00:13:50,063 ‫obter o novo, então basicamente o documento atualizado como 226 00:13:51,140 --> 00:13:54,463 ‫resultado, e também que queremos executar os validadores. 227 00:13:55,350 --> 00:13:59,053 ‫Então, é exatamente como fizemos antes em nossa API. 228 00:14:00,500 --> 00:14:03,193 ‫Ótimo, então vamos chamá-lo de updatedUser. 229 00:14:05,410 --> 00:14:08,613 ‫Ok, então o que queremos fazer agora? 230 00:14:12,800 --> 00:14:16,070 ‫Bem, depois de enviar os dados em nosso site, 231 00:14:16,070 --> 00:14:18,763 ‫basicamente o que queremos é simplesmente voltar a 232 00:14:19,790 --> 00:14:22,350 ‫esta página aqui, mas claro, com os 233 00:14:22,350 --> 00:14:24,760 ‫dados atualizados aqui, tudo bem. 234 00:14:24,760 --> 00:14:27,660 ‫Isso é fácil, tudo o que teremos que fazer é 235 00:14:27,660 --> 00:14:30,170 ‫basicamente renderizar a página da conta novamente. 236 00:14:30,170 --> 00:14:32,873 ‫E isso é semelhante a este, vamos 237 00:14:34,160 --> 00:14:36,340 ‫apenas copiá-lo, ok, mas agora 238 00:14:36,340 --> 00:14:39,900 ‫há uma diferença importante, porque agora, nós também precisamos 239 00:14:39,900 --> 00:14:41,910 ‫passar o usuário, 240 00:14:41,910 --> 00:14:44,120 ‫então o usuário atualizado, caso 241 00:14:44,120 --> 00:14:47,600 ‫contrário, o usuário que o modelo vai usar, é 242 00:14:47,600 --> 00:14:49,920 ‫aquele que vem do middleware de 243 00:14:49,920 --> 00:14:52,190 ‫proteção, lembre-se, então esse não 244 00:14:52,190 --> 00:14:54,330 ‫vai ser o usuário atualizado. 245 00:14:54,330 --> 00:14:57,223 ‫Certo, então precisamos passar o usuário é updatedUser. 246 00:14:58,720 --> 00:15:03,720 ‫Tudo bem, isso deve ser o suficiente. 247 00:15:06,050 --> 00:15:08,933 ‫Portanto, se agora recarregarmos ou salvarmos aqui, você 248 00:15:10,450 --> 00:15:14,943 ‫verá que, na verdade, voltamos exatamente para a mesma página e os dados 249 00:15:16,000 --> 00:15:17,890 ‫ainda são os mesmos. 250 00:15:17,890 --> 00:15:20,970 ‫Então, vamos provar isso, vá para 251 00:15:20,970 --> 00:15:25,000 ‫outra página e depois volte para a página de configurações. 252 00:15:25,000 --> 00:15:27,450 ‫E assim, isso prova que os 253 00:15:27,450 --> 00:15:29,500 ‫dados agora foram efetivamente atualizados. 254 00:15:29,500 --> 00:15:31,603 ‫Então, se sairmos agora, vamos tentar 255 00:15:33,090 --> 00:15:35,440 ‫fazer o login com este novo e-mail. 256 00:15:35,440 --> 00:15:37,423 ‫Então, eu queria fazer logout, certo, e agora efetuar login novamente. 257 00:15:39,530 --> 00:15:44,530 ‫E agora, vamos usar este novo e-mail e, claro, ainda a senha antiga, 258 00:15:44,950 --> 00:15:47,493 ‫test1234 e, de fato, agora é 259 00:15:48,780 --> 00:15:51,130 ‫o novo endereço de e-mail 260 00:15:53,810 --> 00:15:56,500 ‫que precisamos usar para fazer o login. 261 00:15:56,500 --> 00:15:59,670 ‫Agora vamos ver o que acontece quando passamos alguns 262 00:15:59,670 --> 00:16:01,120 ‫dados errados aqui. 263 00:16:01,120 --> 00:16:04,860 ‫Por exemplo, o Google Chrome nos permite enviar um endereço 264 00:16:04,860 --> 00:16:07,120 ‫de e-mail como este, mas é 265 00:16:07,120 --> 00:16:09,530 ‫claro, nosso modelo Mongoose não permite um 266 00:16:09,530 --> 00:16:11,550 ‫e-mail com este formato. 267 00:16:11,550 --> 00:16:14,250 ‫Agora devemos obter um erro e, de 268 00:16:14,250 --> 00:16:15,950 ‫fato, obteremos esse 269 00:16:17,620 --> 00:16:20,540 ‫erro, forneça um e-mail válido, mas isso é 270 00:16:20,540 --> 00:16:23,690 ‫uma experiência de usuário terrível, certo, então estávamos apenas 271 00:16:23,690 --> 00:16:26,530 ‫enviando nossos dados e, de repente, fomos 272 00:16:26,530 --> 00:16:28,470 ‫para uma página completamente nova. 273 00:16:28,470 --> 00:16:31,740 ‫E, na verdade, vemos que também chegamos 274 00:16:31,740 --> 00:16:36,740 ‫a esse novo URL, aquele para o qual enviamos os dados. 275 00:16:36,850 --> 00:16:39,420 ‫E então sim, isso é um pouco terrível, e 276 00:16:39,420 --> 00:16:41,470 ‫como eu estava dizendo no começo, 277 00:16:41,470 --> 00:16:43,930 ‫essa maneira de fazer as coisas é na 278 00:16:43,930 --> 00:16:46,420 ‫verdade um pouco pior para lidar com erros, 279 00:16:46,420 --> 00:16:48,960 ‫que é uma das razões pelas quais eu pessoalmente 280 00:16:48,960 --> 00:16:51,840 ‫prefiro usar a API que nós já criado para atualizar 281 00:16:51,840 --> 00:16:55,640 ‫os dados do usuário, e em geral para fazer este tipo de coisas. 282 00:16:55,640 --> 00:16:57,740 ‫Tudo bem, então vamos 283 00:16:57,740 --> 00:17:00,720 ‫fazer exatamente isso no próximo vídeo.