1 00:00:01,030 --> 00:00:03,420 ‫-: E agora, para encerrar esta seção, 2 00:00:03,420 --> 00:00:05,630 ‫vamos usar novamente a nossa API, 3 00:00:05,630 --> 00:00:08,803 ‫desta vez para atualizar também a senha do usuário. 4 00:00:10,750 --> 00:00:12,170 ‫Basicamente, o que vamos 5 00:00:12,170 --> 00:00:14,463 ‫fazer é fazer com que este formulário funcione. 6 00:00:17,060 --> 00:00:18,530 ‫Já criamos a 7 00:00:18,530 --> 00:00:21,460 ‫função de atualização de dados na última aula, e 8 00:00:21,460 --> 00:00:23,440 ‫agora podemos prosseguir e criar 9 00:00:23,440 --> 00:00:25,760 ‫uma função de atualização de senha também. 10 00:00:25,760 --> 00:00:29,670 ‫Mas essa função basicamente teria a mesma aparência. 11 00:00:29,670 --> 00:00:31,500 ‫E então, em vez de 12 00:00:31,500 --> 00:00:33,560 ‫fazer isso, vou mudar um pouco essa 13 00:00:33,560 --> 00:00:37,003 ‫função e permitir que ela atualize os dados e a senha. 14 00:00:38,030 --> 00:00:39,980 ‫Então, vamos chamar isso de configurações de atualização. 15 00:00:45,330 --> 00:00:47,780 ‫E aqui, o que vamos passar é, em 16 00:00:47,780 --> 00:00:49,480 ‫vez de nome e e-mail, 17 00:00:49,480 --> 00:00:52,800 ‫um objeto contendo todos os dados que queremos atualizar e, em 18 00:00:52,800 --> 00:00:55,010 ‫seguida, também uma string para o tipo. 19 00:00:55,010 --> 00:00:57,773 ‫Que podem ser dados ou senha. 20 00:01:00,760 --> 00:01:03,800 ‫Aqui, teremos os dados, que novamente serão um objeto 21 00:01:03,800 --> 00:01:07,593 ‫de todos os dados a serem atualizados e, em seguida, o tipo. 22 00:01:08,840 --> 00:01:10,093 ‫Então, vamos escrever isso aqui. 23 00:01:11,680 --> 00:01:12,830 ‫O tipo é 24 00:01:16,800 --> 00:01:17,940 ‫senha ou 25 00:01:19,400 --> 00:01:20,233 ‫dados. 26 00:01:21,340 --> 00:01:23,890 ‫Então, aqui, os dados que estamos enviando 27 00:01:23,890 --> 00:01:26,543 ‫são, na verdade, apenas o objeto de dados. 28 00:01:27,670 --> 00:01:29,050 ‫Porque quando chamarmos 29 00:01:29,050 --> 00:01:32,233 ‫esta função, já estaremos criando um objeto semelhante a este. 30 00:01:33,440 --> 00:01:36,760 ‫E aqui, simplesmente precisamos usar os dados. 31 00:01:36,760 --> 00:01:40,023 ‫E então, tudo o que precisamos fazer é realmente isso. 32 00:01:42,910 --> 00:01:43,790 ‫Então, 33 00:01:43,790 --> 00:01:45,520 ‫é claro, quando estamos 34 00:01:45,520 --> 00:01:48,150 ‫atualizando as senhas, também usamos outro URL. 35 00:01:48,150 --> 00:01:50,660 ‫E então vamos usar um operador ternário 36 00:01:50,660 --> 00:01:53,414 ‫para determinar qual URL queremos chamar dependendo 37 00:01:53,414 --> 00:01:55,483 ‫do tipo de string. 38 00:01:58,180 --> 00:02:01,040 ‫Vamos ao Postman e realmente copiar o URL 39 00:02:01,040 --> 00:02:02,597 ‫da senha de atualização. 40 00:02:05,820 --> 00:02:07,600 ‫Aqui embaixo na autenticação, 41 00:02:07,600 --> 00:02:09,883 ‫atualizamos a senha do usuário atual. 42 00:02:10,791 --> 00:02:14,560 ‫E para que se necessite a senha atual, as senhas, 43 00:02:14,560 --> 00:02:17,060 ‫então basicamente a nova, e depois 44 00:02:17,060 --> 00:02:19,050 ‫a confirmação da senha. 45 00:02:19,050 --> 00:02:22,623 ‫E o caminho aqui é atualizar minha senha. 46 00:02:24,950 --> 00:02:26,063 ‫Semelhante a este, 47 00:02:28,900 --> 00:02:33,900 ‫então, vamos encontrar uma URL aqui e dizer se o tipo 48 00:02:34,380 --> 00:02:38,403 ‫é igual a senha, então que a URL 49 00:02:40,260 --> 00:02:41,230 ‫esteja 50 00:02:43,350 --> 00:02:47,533 ‫bem, tudo isso, e então barra atualizar minha senha. 51 00:02:50,470 --> 00:02:52,993 ‫E mais, será este aqui. 52 00:02:58,430 --> 00:03:02,023 ‫E é isso que usamos este parâmetro de tipo aqui. 53 00:03:03,730 --> 00:03:06,773 ‫Aqui, então, simplesmente precisamos do URL 54 00:03:08,370 --> 00:03:10,010 ‫e é isso. 55 00:03:10,010 --> 00:03:12,620 ‫E também aqui na string de 56 00:03:12,620 --> 00:03:15,980 ‫sucesso, provavelmente devemos colocar se as senhas ou os 57 00:03:15,980 --> 00:03:18,273 ‫dados foram atualizados com sucesso. 58 00:03:22,720 --> 00:03:26,703 ‫E então, basicamente aqui, vamos colocar o tipo agora. 59 00:03:28,390 --> 00:03:31,210 ‫Ah, e também vamos converter para 60 00:03:31,210 --> 00:03:35,063 ‫maiúsculas aqui, porque senão o tipo ficará em minúsculas, assim. 61 00:03:40,147 --> 00:03:43,430 ‫Isso já me parece bom assim. 62 00:03:43,430 --> 00:03:46,080 ‫Vamos agora, apenas para ver se funciona, 63 00:03:46,080 --> 00:03:48,860 ‫use realmente essas configurações de atualização aqui para 64 00:03:48,860 --> 00:03:50,410 ‫atualizar os dados. 65 00:03:50,410 --> 00:03:52,090 ‫Então o que fizemos na 66 00:03:52,090 --> 00:03:54,443 ‫última aula, mas agora com essa nova função. 67 00:03:55,320 --> 00:03:57,930 ‫Em primeiro lugar, o que precisamos importar aqui agora 68 00:03:57,930 --> 00:04:00,233 ‫é a função de configurações de atualização. 69 00:04:01,750 --> 00:04:05,650 ‫E aqui, precisamos chamar as configurações de atualização, com é 70 00:04:05,650 --> 00:04:07,363 ‫claro e objeto agora. 71 00:04:08,270 --> 00:04:09,603 ‫E então é esse aqui. 72 00:04:10,650 --> 00:04:12,733 ‫E agora o tipo de string que é dados. 73 00:04:15,200 --> 00:04:16,683 ‫Vamos testar isso muito rápido. 74 00:04:18,210 --> 00:04:19,510 ‫Vamos novamente 75 00:04:20,365 --> 00:04:22,270 ‫adicionar aqui algum nome 76 00:04:22,270 --> 00:04:23,820 ‫salvo nas configurações 77 00:04:23,820 --> 00:04:26,003 ‫e dados atualizados com sucesso. 78 00:04:27,320 --> 00:04:28,980 ‫Basta uma recarga rápida 79 00:04:28,980 --> 00:04:30,993 ‫e, de fato, tudo está funcionando. 80 00:04:32,690 --> 00:04:35,470 ‫E agora tudo o que precisamos fazer é ler 81 00:04:35,470 --> 00:04:37,460 ‫os dados desses três campos de 82 00:04:37,460 --> 00:04:41,163 ‫entrada e, em seguida, passá-los para a função de configurações de atualização. 83 00:04:44,440 --> 00:04:47,570 ‫Vamos primeiro selecionar o formulário de senha e, 84 00:04:47,570 --> 00:04:50,533 ‫portanto, de volta ao nosso modelo de 85 00:04:51,500 --> 00:04:55,493 ‫conta, este é chamado de configurações do usuário do formulário. 86 00:04:55,493 --> 00:04:57,883 ‫Vamos selecionar com base nisso. 87 00:05:01,240 --> 00:05:02,783 ‫Então, apenas duplicando. 88 00:05:05,260 --> 00:05:08,290 ‫Configurações do usuário do formulário, e provavelmente isso 89 00:05:08,290 --> 00:05:11,013 ‫deve ser chamado de senha agora. 90 00:05:11,910 --> 00:05:14,160 ‫Sim, vamos chamar essa senha aqui. 91 00:05:15,650 --> 00:05:17,343 ‫Isso faz um pouco mais de sentido. 92 00:05:20,070 --> 00:05:25,070 ‫Portanto, formulário de senha de usuário, e agora aqui 93 00:05:27,410 --> 00:05:30,263 ‫temos algo muito semelhante. 94 00:05:31,960 --> 00:05:32,913 ‫Vamos apenas 95 00:05:35,770 --> 00:05:37,473 ‫copiá-lo, o formulário de senha 96 00:05:39,400 --> 00:05:42,893 ‫do usuário, e agora precisamos apenas obter as três senhas. 97 00:05:44,370 --> 00:05:47,530 ‫E são chamados de senha atual, senha e 98 00:05:47,530 --> 00:05:49,963 ‫senha de confirmação com travessões. 99 00:05:57,510 --> 00:05:59,440 ‫A senha atual 100 00:05:59,440 --> 00:06:03,424 ‫é aqui chamada com o ID da senha atual, 101 00:06:03,424 --> 00:06:06,483 ‫e agora apenas a duplica três vezes. 102 00:06:11,450 --> 00:06:12,810 ‫Confirme. 103 00:06:12,810 --> 00:06:15,313 ‫E aqui, confirme também. 104 00:06:16,447 --> 00:06:20,270 ‫E agora vamos rapidamente ao Postman novamente, apenas para realmente ter 105 00:06:20,270 --> 00:06:23,400 ‫certeza de que esses são os nomes de variáveis 106 00:06:23,400 --> 00:06:25,300 ‫que nossa API espera. 107 00:06:25,300 --> 00:06:27,973 ‫Vamos apenas copiar estes aqui para compará-los rapidamente. 108 00:06:32,910 --> 00:06:36,010 ‫E, de fato, eles são chamados de senha 109 00:06:36,010 --> 00:06:37,820 ‫atual, então exatamente o 110 00:06:37,820 --> 00:06:40,720 ‫mesmo nome aqui, senha e senha de confirmação. 111 00:06:40,720 --> 00:06:44,170 ‫E se agora criarmos um objeto com esses três, esses 112 00:06:44,170 --> 00:06:46,080 ‫serão exatamente os dados 113 00:06:46,080 --> 00:06:49,220 ‫que serão enviados para a API e, assim, 114 00:06:49,220 --> 00:06:51,783 ‫nosso manipulador poderá ler esses dados corretamente. 115 00:06:52,879 --> 00:06:57,879 ‫Senha atual, senha e confirmação de senha. 116 00:07:03,620 --> 00:07:04,900 ‫E agora só 117 00:07:04,900 --> 00:07:08,593 ‫pra terminar, aqui é claro que tem que ser a senha. 118 00:07:10,070 --> 00:07:12,573 ‫Agora vamos testar isso. 119 00:07:14,120 --> 00:07:18,490 ‫E então a senha atual é test1234, e agora vou 120 00:07:18,490 --> 00:07:20,280 ‫criar uma nova senha, 121 00:07:20,280 --> 00:07:21,833 ‫chamada newpassword. 122 00:07:26,382 --> 00:07:29,530 ‫Newpassword novamente, e como já mencionei, precisamos inserir 123 00:07:29,530 --> 00:07:31,740 ‫a senha atual, para que caso 124 00:07:31,740 --> 00:07:33,690 ‫alguém encontre seu computador aberto, 125 00:07:33,690 --> 00:07:35,400 ‫por exemplo, não possa 126 00:07:35,400 --> 00:07:37,250 ‫simplesmente mudar sua senha sem 127 00:07:37,250 --> 00:07:38,923 ‫saber a atual. 128 00:07:39,796 --> 00:07:42,500 ‫E então é claro que precisamos confirmar 129 00:07:42,500 --> 00:07:45,483 ‫a senha, para não errarmos na senha original. 130 00:07:46,890 --> 00:07:48,520 ‫Então vamos salvá-lo 131 00:07:48,520 --> 00:07:51,528 ‫agora, e a senha atualizada corretamente. 132 00:07:51,528 --> 00:07:53,349 ‫Excelente. 133 00:07:53,349 --> 00:07:56,360 ‫Vamos dar uma olhada no cookie 134 00:07:56,360 --> 00:07:59,873 ‫agora, porque deveríamos ter comprado um novo imediatamente. 135 00:08:02,840 --> 00:08:06,495 ‫E, na verdade, é exatamente agora. 136 00:08:06,495 --> 00:08:10,330 ‫Essa é a hora em que estou gravando este vídeo, 137 00:08:10,330 --> 00:08:13,470 ‫o que significa que agora ainda estamos conectados. 138 00:08:13,470 --> 00:08:16,180 ‫Só para lembrar porque isso acontece, é 139 00:08:16,180 --> 00:08:19,320 ‫porque aqui no controlador de autenticação, aqui em atualizar 140 00:08:19,320 --> 00:08:21,360 ‫a senha, no final realmente 141 00:08:21,360 --> 00:08:23,810 ‫efetuamos o login do usuário, então 142 00:08:23,810 --> 00:08:25,780 ‫aqui no criar token 143 00:08:25,780 --> 00:08:27,910 ‫enviado, enviamos um novo cookie imediatamente. 144 00:08:27,910 --> 00:08:31,393 ‫E isso significa que ainda estamos logados. 145 00:08:33,744 --> 00:08:35,950 ‫Se vamos recarregar esta página agora, e 146 00:08:35,950 --> 00:08:37,910 ‫na verdade não vou 147 00:08:37,910 --> 00:08:39,950 ‫recarregá-la, vou apenas abri-la em uma 148 00:08:39,950 --> 00:08:41,990 ‫nova aba, porque quero mostrar mais 149 00:08:41,990 --> 00:08:45,773 ‫uma coisa, mas, o que importa aqui é que ainda estamos logados. 150 00:08:48,710 --> 00:08:50,260 ‫O que eu queria mostrar 151 00:08:50,260 --> 00:08:52,740 ‫a vocês é que agora ainda temos as senhas aqui. 152 00:08:52,740 --> 00:08:54,930 ‫E realmente não queremos isso. 153 00:08:54,930 --> 00:08:57,210 ‫Depois que a chamada API for bem-sucedida, 154 00:08:57,210 --> 00:08:59,040 ‫devemos prosseguir e excluir 155 00:08:59,040 --> 00:09:00,943 ‫o conteúdo desses campos de entrada. 156 00:09:03,670 --> 00:09:07,520 ‫Isso é algo que devemos fazer também aqui neste arquivo, 157 00:09:07,520 --> 00:09:10,090 ‫porque dissemos que é aqui que 158 00:09:10,090 --> 00:09:12,990 ‫tratamos de tudo relacionado à interface do usuário. 159 00:09:12,990 --> 00:09:15,960 ‫Agora, lembre-se de que esta função de configuração de atualização aqui 160 00:09:15,960 --> 00:09:17,883 ‫é, na verdade, uma função assíncrona. 161 00:09:21,030 --> 00:09:23,281 ‫E então vai retornar uma promessa. 162 00:09:23,281 --> 00:09:26,848 ‫Como você já sabe, neste momento podemos aguardar 163 00:09:26,848 --> 00:09:29,003 ‫essa promessa aqui mesmo. 164 00:09:31,180 --> 00:09:33,608 ‫E, neste caso, não é realmente para salvar 165 00:09:33,608 --> 00:09:35,860 ‫o resultado da promessa para nada, é 166 00:09:35,860 --> 00:09:37,870 ‫apenas esperar até que ela 167 00:09:37,870 --> 00:09:40,460 ‫termine, para que depois disso possamos fazer outras coisas. 168 00:09:40,460 --> 00:09:42,830 ‫E, neste caso, é para limpar esses campos de 169 00:09:42,830 --> 00:09:44,783 ‫entrada que acabei de mostrar a vocês. 170 00:09:45,950 --> 00:09:49,520 ‫Agora, é claro, para poder usar o await, 171 00:09:49,520 --> 00:09:53,660 ‫precisamos marcar essa função aqui como assíncrona, mas isso 172 00:09:53,660 --> 00:09:55,540 ‫é muito fácil. 173 00:09:55,540 --> 00:09:59,160 ‫Agora, tudo o que precisamos fazer é selecionar esses campos novamente e, 174 00:09:59,160 --> 00:10:00,443 ‫em seguida, limpá-los. 175 00:10:01,700 --> 00:10:02,980 ‫Então, vamos pegar 176 00:10:04,610 --> 00:10:05,563 ‫isso aqui. 177 00:10:07,672 --> 00:10:09,022 ‫E, em seguida, defina-os como vazios. 178 00:10:10,300 --> 00:10:11,340 ‫E é isso. 179 00:10:11,340 --> 00:10:12,540 ‫Então isso é muito simples. 180 00:10:14,010 --> 00:10:15,673 ‫E vamos apenas duplicar 181 00:10:17,010 --> 00:10:18,613 ‫isso e confirmar. 182 00:10:20,760 --> 00:10:22,843 ‫Então, vamos tentar de novo. 183 00:10:29,154 --> 00:10:31,750 ‫E agora vamos ter em mente que 184 00:10:31,750 --> 00:10:33,503 ‫a senha atualmente é newpassword, 185 00:10:35,480 --> 00:10:37,223 ‫e agora vamos voltar 186 00:10:39,883 --> 00:10:41,403 ‫para test1234, test1234. 187 00:10:45,052 --> 00:10:47,490 ‫E agora, na verdade, os campos estão limpos. 188 00:10:47,490 --> 00:10:49,960 ‫Mas talvez você também tenha notado, assim como 189 00:10:49,960 --> 00:10:52,250 ‫eu, que demorou um certo tempo até 190 00:10:52,250 --> 00:10:54,300 ‫que recebêssemos nosso alerta aqui. 191 00:10:54,300 --> 00:10:56,130 ‫E isso porque definir 192 00:10:56,130 --> 00:10:59,820 ‫uma nova senha define algum tempo devido ao processo de criptografia. 193 00:10:59,820 --> 00:11:02,555 ‫Portanto, devemos dar ao usuário algum tipo de feedback de 194 00:11:02,555 --> 00:11:05,010 ‫que há realmente algo acontecendo em segundo plano. 195 00:11:05,010 --> 00:11:09,133 ‫E, normalmente, você vê alguns botões giratórios de carregamento em algum lugar 196 00:11:09,133 --> 00:11:11,220 ‫da página, mas vamos mantê-lo bem 197 00:11:11,220 --> 00:11:13,170 ‫simples aqui, e tudo o 198 00:11:13,170 --> 00:11:16,770 ‫que farei é atualizar o texto aqui assim que clicarmos nele 199 00:11:16,770 --> 00:11:18,270 ‫e, em seguida, 200 00:11:18,270 --> 00:11:20,370 ‫quando a chamada de API for 201 00:11:20,370 --> 00:11:23,427 ‫concluída, vamos configurá-lo de volta para salvar a senha. 202 00:11:23,427 --> 00:11:27,200 ‫Esse é um pequeno toque muito bom que podemos adicionar às 203 00:11:27,200 --> 00:11:29,710 ‫nossas interfaces de usuário, e poderíamos fazer 204 00:11:29,710 --> 00:11:33,180 ‫o mesmo aqui para o formulário de dados do 205 00:11:33,180 --> 00:11:36,260 ‫usuário, mas esse geralmente é muito rápido e, 206 00:11:36,260 --> 00:11:38,073 ‫portanto, não precisamos dele. 207 00:11:38,073 --> 00:11:41,020 ‫Vou voltar a este modelo aqui 208 00:11:41,020 --> 00:11:44,010 ‫novamente, porque preciso selecionar este botão aqui. 209 00:11:44,010 --> 00:11:46,570 ‫Nenhum deles aqui é realmente único, 210 00:11:46,570 --> 00:11:48,473 ‫então vamos adicionar outro. 211 00:11:51,150 --> 00:11:55,783 ‫Então, o botão salvar a senha. 212 00:12:02,530 --> 00:12:04,490 ‫E então vamos fazer 213 00:12:04,490 --> 00:12:05,693 ‫isso bem 214 00:12:10,070 --> 00:12:15,070 ‫aqui, bem no começo, documento. queryselector, esse era o errado, 215 00:12:16,351 --> 00:12:19,700 ‫então queryselector. forlcass. valor 216 00:12:27,120 --> 00:12:32,080 ‫e defina-o como "Atualizando ... "E então, quando terminarmos, 217 00:12:32,080 --> 00:12:36,763 ‫então, depois de aguardar, configuramos de volta 218 00:12:38,570 --> 00:12:42,943 ‫para atualizar, ou salvar, eu acredito que 219 00:12:44,780 --> 00:12:47,210 ‫é, sim, 220 00:12:47,210 --> 00:12:50,833 ‫é realmente salvar a senha. 221 00:12:52,523 --> 00:12:55,200 ‫Salve e veja se funciona, e se 222 00:12:55,200 --> 00:12:57,663 ‫funcionar, então estamos realmente prontos. 223 00:12:59,550 --> 00:13:03,260 ‫E então, novamente, agora a senha é test1234, e estou 224 00:13:03,260 --> 00:13:05,803 ‫configurando-a de volta para newpassword, e agora 225 00:13:10,160 --> 00:13:12,413 ‫vamos dar uma olhada aqui 226 00:13:13,483 --> 00:13:18,483 ‫em nosso botão, ah, isso não funcionou, e eu já sei o porquê. 227 00:13:19,590 --> 00:13:21,000 ‫E isso porque, 228 00:13:21,000 --> 00:13:22,910 ‫é claro, não podemos usar 229 00:13:22,910 --> 00:13:26,210 ‫valor para alterar o conteúdo de alguns elementos html. 230 00:13:26,210 --> 00:13:30,650 ‫Então, para isso, usamos html interno, ou também conteúdo de texto. 231 00:13:30,650 --> 00:13:33,120 ‫Então, poderíamos usar conteúdo de texto também, então 232 00:13:33,120 --> 00:13:34,133 ‫vamos fazer isso. 233 00:13:38,230 --> 00:13:41,950 ‫E então, uma última vez, e agora 234 00:13:41,950 --> 00:13:46,180 ‫podemos realmente defini-la de volta para a senha padrão. 235 00:13:46,180 --> 00:13:50,160 ‫A senha atual agora é newpassword 236 00:13:50,160 --> 00:13:53,245 ‫e, em seguida, test1234, 237 00:13:53,245 --> 00:13:54,633 ‫test1234. 238 00:13:55,700 --> 00:13:57,300 ‫E agora vamos 239 00:13:57,300 --> 00:13:59,040 ‫ver, ah, e agora funciona. 240 00:13:59,040 --> 00:14:00,390 ‫Lindo. 241 00:14:00,390 --> 00:14:04,230 ‫E novamente, você verá que ainda estamos logados. 242 00:14:04,230 --> 00:14:05,610 ‫Perfeito. 243 00:14:05,610 --> 00:14:09,070 ‫E com isso, realmente encerramos esta seção. 244 00:14:09,070 --> 00:14:12,550 ‫Parabéns, mais uma vez, por chegar tão longe 245 00:14:12,550 --> 00:14:16,320 ‫e por todo esse progresso incrível que você vem fazendo. 246 00:14:16,320 --> 00:14:19,010 ‫Na verdade, estamos quase terminando nosso projeto, 247 00:14:19,010 --> 00:14:20,280 ‫mas na 248 00:14:20,280 --> 00:14:23,460 ‫próxima seção, continuaremos adicionando mais algumas coisas a ele. 249 00:14:23,460 --> 00:14:25,140 ‫Faremos uploads 250 00:14:25,140 --> 00:14:27,930 ‫de arquivos, criaremos alguns modelos de 251 00:14:27,930 --> 00:14:29,760 ‫e-mail muito legais e 252 00:14:29,760 --> 00:14:32,320 ‫também incluiremos pagamentos neste aplicativo. 253 00:14:32,320 --> 00:14:34,730 ‫Ainda há muito conteúdo incrível pela frente para 254 00:14:34,730 --> 00:14:36,663 ‫tornar este projeto ainda melhor.