‫-: E agora, para encerrar esta seção,
‫vamos usar novamente a nossa API,
‫desta vez para atualizar também a senha do usuário.
‫Basicamente, o que vamos
‫fazer é fazer com que este formulário funcione.
‫Já criamos a
‫função de atualização de dados na última aula, e
‫agora podemos prosseguir e criar
‫uma função de atualização de senha também.
‫Mas essa função basicamente teria a mesma aparência.
‫E então, em vez de
‫fazer isso, vou mudar um pouco essa
‫função e permitir que ela atualize os dados e a senha.
‫Então, vamos chamar isso de configurações de atualização.
‫E aqui, o que vamos passar é, em
‫vez de nome e e-mail,
‫um objeto contendo todos os dados que queremos atualizar e, em
‫seguida, também uma string para o tipo.
‫Que podem ser dados ou senha.
‫Aqui, teremos os dados, que novamente serão um objeto
‫de todos os dados a serem atualizados e, em seguida, o tipo.
‫Então, vamos escrever isso aqui.
‫O tipo é
‫senha ou
‫dados.
‫Então, aqui, os dados que estamos enviando
‫são, na verdade, apenas o objeto de dados.
‫Porque quando chamarmos
‫esta função, já estaremos criando um objeto semelhante a este.
‫E aqui, simplesmente precisamos usar os dados.
‫E então, tudo o que precisamos fazer é realmente isso.
‫Então,
‫é claro, quando estamos
‫atualizando as senhas, também usamos outro URL.
‫E então vamos usar um operador ternário
‫para determinar qual URL queremos chamar dependendo
‫do tipo de string.
‫Vamos ao Postman e realmente copiar o URL
‫da senha de atualização.
‫Aqui embaixo na autenticação,
‫atualizamos a senha do usuário atual.
‫E para que se necessite a senha atual, as senhas,
‫então basicamente a nova, e depois
‫a confirmação da senha.
‫E o caminho aqui é atualizar minha senha.
‫Semelhante a este,
‫então, vamos encontrar uma URL aqui e dizer se o tipo
‫é igual a senha, então que a URL
‫esteja
‫bem, tudo isso, e então barra atualizar minha senha.
‫E mais, será este aqui.
‫E é isso que usamos este parâmetro de tipo aqui.
‫Aqui, então, simplesmente precisamos do URL
‫e é isso.
‫E também aqui na string de
‫sucesso, provavelmente devemos colocar se as senhas ou os
‫dados foram atualizados com sucesso.
‫E então, basicamente aqui, vamos colocar o tipo agora.
‫Ah, e também vamos converter para
‫maiúsculas aqui, porque senão o tipo ficará em minúsculas, assim.
‫Isso já me parece bom assim.
‫Vamos agora, apenas para ver se funciona,
‫use realmente essas configurações de atualização aqui para
‫atualizar os dados.
‫Então o que fizemos na
‫última aula, mas agora com essa nova função.
‫Em primeiro lugar, o que precisamos importar aqui agora
‫é a função de configurações de atualização.
‫E aqui, precisamos chamar as configurações de atualização, com é
‫claro e objeto agora.
‫E então é esse aqui.
‫E agora o tipo de string que é dados.
‫Vamos testar isso muito rápido.
‫Vamos novamente
‫adicionar aqui algum nome
‫salvo nas configurações
‫e dados atualizados com sucesso.
‫Basta uma recarga rápida
‫e, de fato, tudo está funcionando.
‫E agora tudo o que precisamos fazer é ler
‫os dados desses três campos de
‫entrada e, em seguida, passá-los para a função de configurações de atualização.
‫Vamos primeiro selecionar o formulário de senha e,
‫portanto, de volta ao nosso modelo de
‫conta, este é chamado de configurações do usuário do formulário.
‫Vamos selecionar com base nisso.
‫Então, apenas duplicando.
‫Configurações do usuário do formulário, e provavelmente isso
‫deve ser chamado de senha agora.
‫Sim, vamos chamar essa senha aqui.
‫Isso faz um pouco mais de sentido.
‫Portanto, formulário de senha de usuário, e agora aqui
‫temos algo muito semelhante.
‫Vamos apenas
‫copiá-lo, o formulário de senha
‫do usuário, e agora precisamos apenas obter as três senhas.
‫E são chamados de senha atual, senha e
‫senha de confirmação com travessões.
‫A senha atual
‫é aqui chamada com o ID da senha atual,
‫e agora apenas a duplica três vezes.
‫Confirme.
‫E aqui, confirme também.
‫E agora vamos rapidamente ao Postman novamente, apenas para realmente ter
‫certeza de que esses são os nomes de variáveis
‫que nossa API espera.
‫Vamos apenas copiar estes aqui para compará-los rapidamente.
‫E, de fato, eles são chamados de senha
‫atual, então exatamente o
‫mesmo nome aqui, senha e senha de confirmação.
‫E se agora criarmos um objeto com esses três, esses
‫serão exatamente os dados
‫que serão enviados para a API e, assim,
‫nosso manipulador poderá ler esses dados corretamente.
‫Senha atual, senha e confirmação de senha.
‫E agora só
‫pra terminar, aqui é claro que tem que ser a senha.
‫Agora vamos testar isso.
‫E então a senha atual é test1234, e agora vou
‫criar uma nova senha,
‫chamada newpassword.
‫Newpassword novamente, e como já mencionei, precisamos inserir
‫a senha atual, para que caso
‫alguém encontre seu computador aberto,
‫por exemplo, não possa
‫simplesmente mudar sua senha sem
‫saber a atual.
‫E então é claro que precisamos confirmar
‫a senha, para não errarmos na senha original.
‫Então vamos salvá-lo
‫agora, e a senha atualizada corretamente.
‫Excelente.
‫Vamos dar uma olhada no cookie
‫agora, porque deveríamos ter comprado um novo imediatamente.
‫E, na verdade, é exatamente agora.
‫Essa é a hora em que estou gravando este vídeo,
‫o que significa que agora ainda estamos conectados.
‫Só para lembrar porque isso acontece, é
‫porque aqui no controlador de autenticação, aqui em atualizar
‫a senha, no final realmente
‫efetuamos o login do usuário, então
‫aqui no criar token
‫enviado, enviamos um novo cookie imediatamente.
‫E isso significa que ainda estamos logados.
‫Se vamos recarregar esta página agora, e
‫na verdade não vou
‫recarregá-la, vou apenas abri-la em uma
‫nova aba, porque quero mostrar mais
‫uma coisa, mas, o que importa aqui é que ainda estamos logados.
‫O que eu queria mostrar
‫a vocês é que agora ainda temos as senhas aqui.
‫E realmente não queremos isso.
‫Depois que a chamada API for bem-sucedida,
‫devemos prosseguir e excluir
‫o conteúdo desses campos de entrada.
‫Isso é algo que devemos fazer também aqui neste arquivo,
‫porque dissemos que é aqui que
‫tratamos de tudo relacionado à interface do usuário.
‫Agora, lembre-se de que esta função de configuração de atualização aqui
‫é, na verdade, uma função assíncrona.
‫E então vai retornar uma promessa.
‫Como você já sabe, neste momento podemos aguardar
‫essa promessa aqui mesmo.
‫E, neste caso, não é realmente para salvar
‫o resultado da promessa para nada, é
‫apenas esperar até que ela
‫termine, para que depois disso possamos fazer outras coisas.
‫E, neste caso, é para limpar esses campos de
‫entrada que acabei de mostrar a vocês.
‫Agora, é claro, para poder usar o await,
‫precisamos marcar essa função aqui como assíncrona, mas isso
‫é muito fácil.
‫Agora, tudo o que precisamos fazer é selecionar esses campos novamente e,
‫em seguida, limpá-los.
‫Então, vamos pegar
‫isso aqui.
‫E, em seguida, defina-os como vazios.
‫E é isso.
‫Então isso é muito simples.
‫E vamos apenas duplicar
‫isso e confirmar.
‫Então, vamos tentar de novo.
‫E agora vamos ter em mente que
‫a senha atualmente é newpassword,
‫e agora vamos voltar
‫para test1234, test1234.
‫E agora, na verdade, os campos estão limpos.
‫Mas talvez você também tenha notado, assim como
‫eu, que demorou um certo tempo até
‫que recebêssemos nosso alerta aqui.
‫E isso porque definir
‫uma nova senha define algum tempo devido ao processo de criptografia.
‫Portanto, devemos dar ao usuário algum tipo de feedback de
‫que há realmente algo acontecendo em segundo plano.
‫E, normalmente, você vê alguns botões giratórios de carregamento em algum lugar
‫da página, mas vamos mantê-lo bem
‫simples aqui, e tudo o
‫que farei é atualizar o texto aqui assim que clicarmos nele
‫e, em seguida,
‫quando a chamada de API for
‫concluída, vamos configurá-lo de volta para salvar a senha.
‫Esse é um pequeno toque muito bom que podemos adicionar às
‫nossas interfaces de usuário, e poderíamos fazer
‫o mesmo aqui para o formulário de dados do
‫usuário, mas esse geralmente é muito rápido e,
‫portanto, não precisamos dele.
‫Vou voltar a este modelo aqui
‫novamente, porque preciso selecionar este botão aqui.
‫Nenhum deles aqui é realmente único,
‫então vamos adicionar outro.
‫Então, o botão salvar a senha.
‫E então vamos fazer
‫isso bem
‫aqui, bem no começo, documento. queryselector, esse era o errado,
‫então queryselector. forlcass. valor
‫e defina-o como "Atualizando ... "E então, quando terminarmos,
‫então, depois de aguardar, configuramos de volta
‫para atualizar, ou salvar, eu acredito que
‫é, sim,
‫é realmente salvar a senha.
‫Salve e veja se funciona, e se
‫funcionar, então estamos realmente prontos.
‫E então, novamente, agora a senha é test1234, e estou
‫configurando-a de volta para newpassword, e agora
‫vamos dar uma olhada aqui
‫em nosso botão, ah, isso não funcionou, e eu já sei o porquê.
‫E isso porque,
‫é claro, não podemos usar
‫valor para alterar o conteúdo de alguns elementos html.
‫Então, para isso, usamos html interno, ou também conteúdo de texto.
‫Então, poderíamos usar conteúdo de texto também, então
‫vamos fazer isso.
‫E então, uma última vez, e agora
‫podemos realmente defini-la de volta para a senha padrão.
‫A senha atual agora é newpassword
‫e, em seguida, test1234,
‫test1234.
‫E agora vamos
‫ver, ah, e agora funciona.
‫Lindo.
‫E novamente, você verá que ainda estamos logados.
‫Perfeito.
‫E com isso, realmente encerramos esta seção.
‫Parabéns, mais uma vez, por chegar tão longe
‫e por todo esse progresso incrível que você vem fazendo.
‫Na verdade, estamos quase terminando nosso projeto,
‫mas na
‫próxima seção, continuaremos adicionando mais algumas coisas a ele.
‫Faremos uploads
‫de arquivos, criaremos alguns modelos de
‫e-mail muito legais e
‫também incluiremos pagamentos neste aplicativo.
‫Ainda há muito conteúdo incrível pela frente para
‫tornar este projeto ainda melhor.