‫Jonas: Agora vamos usar a página da
‫conta do usuário para permitir que os usuários atualizem seus dados.
‫Então, o que vamos fazer é permitir
‫que o usuário atualize o nome e o endereço de e-mail por enquanto.
‫E adicionaremos a foto do usuário aqui um
‫pouco mais tarde na próxima seção.
‫Ok, agora existem duas maneiras de fazermos isso.
‫O primeiro é enviar uma solicitação de postagem à nossa API,
‫assim como fizemos com o formulário de login, lembra disso?
‫E, na verdade, faremos isso na próxima aula.
‫Mas neste, eu quero mostrar a vocês
‫outra forma que é uma forma normal mais tradicional.
‫Portanto, dessa forma mais
‫tradicional, especificamos o método de postagem diretamente no formulário,
‫junto com a URL para onde a solicitação de postagem deve ser enviada.
‫Então, basicamente, usando este método, não precisamos de
‫JavaScript para fazer a solicitação, isso
‫acontece automaticamente com o formulário HTML que postará os
‫dados no endpoint da URL em nosso back-end que especificamos.
‫Agora, pessoalmente, eu realmente não gosto dessa solução, porque
‫ela força o recarregamento da página
‫e também exige que criemos
‫outra rota e um manipulador de rotas em nosso back-end.
‫E, por fim, também torna um
‫pouco mais difícil lidar com os erros.
‫No entanto, ainda acredito que é muito importante que
‫você saiba como trabalhar com formulários dessa forma,
‫porque pode fazer mais
‫sentido no aplicativo que você está construindo.
‫Por exemplo, seu aplicativo pode nem mesmo precisar de uma API
‫e, nesse caso, quando você está
‫apenas construindo um site renderizado, é claro que não
‫faz sentido enviar formulários usando uma chamada de
‫API e, em vez disso,
‫você faça da maneira que faremos neste vídeo.
‫Tudo bem, é por isso que faremos dessa forma
‫nesta aula e, em seguida,
‫usaremos a forma de API na próxima aula.
‫Então, o que precisamos fazer em
‫nosso formulário a fim
‫de enviá-lo automaticamente,
‫sem ter que passar por
‫JavaScript como mencionei antes, então, basicamente postar os
‫dados automaticamente em nosso endpoint, é especificar esse endpoint, e então fazemos
‫isso aqui no formulário, onde especificamos o atributo de ação.
‫Então, a ação, e digamos que vamos criar
‫um ponto de extremidade chamado enviar dados do usuário, como este.
‫Ok, e também especificamos o
‫método, que é post, ok, então isso sempre precisa
‫acontecer no elemento do formulário que estamos enviando, ok.
‫Vamos dar um pouco mais de espaço
‫aqui, para ficar mais fácil
‫de entender, então tudo isso aqui é
‫o nosso formulário, e quando clicarmos
‫neste elemento do botão, automaticamente o formulário será enviado e
‫os dados serão enviados usando uma solicitação de postagem para este URL, certo.
‫Existem também maneiras diferentes nas quais os
‫dados são realmente enviados, mas a forma padrão é chamada de codificação
‫de URL e é essa que estamos usando aqui.
‫Basicamente, o que isso fará
‫é codificar todos os dados que estamos enviando na
‫URL, um pouco como uma string de consulta.
‫Ok, mas mais sobre isso quando estamos realmente
‫trabalhando para obter os dados no servidor e trabalhar com eles.
‫Portanto, esta é a primeira etapa para fazer esse método funcionar, e
‫a segunda é especificar as propriedades do nome nos
‫campos que realmente queremos enviar.
‫Portanto, é esta entrada e esta entrada,
‫e seus valores serão enviados com
‫uma solicitação baseada em seus atributos de nome.
‫Ok, então vamos dizer aqui, nome é igual a nome, ok, então
‫esse é o nome de usuário e então este aqui
‫terá o nome igual a e-mail.
‫Ok, então este será o nome deste campo, e o
‫corpo que nosso aplicativo recebe.
‫Tudo bem, e agora, quando enviarmos o formulário, o corpo
‫que iremos receber terá apenas
‫o nome e o e-mail, porque esses são
‫os únicos dois campos
‫que realmente têm um atributo de nome.
‫Tudo bem, vamos agora implementar essa rota aqui, ok, então
‫como eu disse com esse método,
‫precisamos implementar mais uma rota.
‫Ok, então roteador, e lembre-se de que esta é uma solicitação de postagem.
‫Ok, e então este estará em viewsController, e digamos
‫updateUserData, certo, salve-o e agora vamos realmente
‫criar este manipulador.
‫Então, aqui neste arquivo.
‫E a primeira coisa que quero
‫fazer aqui é realmente dar uma olhada no corpo. corpo, ok, e basicamente neste caso, apenas
‫para mostrar a você que na verdade não funcionará assim.
‫Ok, e eu vou te dizer o porquê
‫depois de experimentarmos, ok, então
‫por enquanto vamos ver se já estamos realmente conectados.
‫Portanto, se o envio desse
‫formulário realmente acionar este manipulador aqui, ok, também
‫vamos adicionar uma string aqui apenas para ter certeza.
‫Tudo bem, vamos recarregar isso
‫aqui para obter nosso novo formulário e, apenas para ter
‫certeza, vamos dar uma olhada nele.
‫Tudo bem, então você
‫vê aqui, a ação e o método que
‫adicionamos e, claro, também esses nomes, ok, e
‫então vamos adicionar algum nome do meio aqui, não sei, digamos Sarah,
‫então aqui o e-mail vamos adicionar
‫o sobrenome dele, agora a gente pega esse erro, por favor forneça
‫e-mail e senha, e então isso meio que vem do formulário
‫de login né, isso é estranho.
‫Então, vamos dar uma olhada em nosso formulário aqui
‫e, de fato, este formulário aqui tem a classe de formulário.
‫E eu acho que é o que usamos também em
‫nosso índice. js, certo.
‫Então aqui basicamente obtemos esse
‫formulário usando a classe de formulário e, quando ela existe
‫e é enviada, tentamos fazer o login, bem aqui.
‫Ok, claro que isso não está correto, então devemos selecionar
‫nosso formulário de login de alguma outra forma.
‫Então vamos consertar isso rapidamente, aqui temos login, então vamos
‫apenas adicionar outra
‫classe aqui, login de formulário, e isso é um pouco estranho porque já
‫temos formulário de login aqui, mas não
‫está realmente em um elemento de formulário.
‫Então não devemos usar isso, então
‫vamos criar aqui um formulário com um modificador de login, ok.
‫Então, vamos colocar isso aqui, salvá-lo, e agora isso não deve
‫mais estar acontecendo, porque agora não temos
‫mais aquele manipulador de eventos anexado
‫a este formulário.
‫Então, vamos recarregá-lo rapidamente e tentar
‫novamente, e agora você verá que ele está realmente fazendo algo, mas
‫é claro que nunca vai parar de girar
‫aqui, porque na verdade não enviamos nenhuma resposta de volta,
‫e assim o ciclo de solicitação de resposta nunca é terminou.
‫Mas enfim, eu só queria olhar o corpo do
‫pedido, lembra disso?
‫E como mencionei antes, agora é MT.
‫Ok, como eu estava dizendo, isso não vai
‫funcionar exatamente assim, porque precisamos adicionar outro
‫middleware para analisar os dados vindos de um formulário.
‫Então, vamos fazer isso em nosso aplicativo. js.
‫Mas primeiro, vamos fechar alguns desses arquivos aqui.
‫Tudo bem, este também, e agora, indo para o app. js, vamos adicionar essa cláusula ao nosso analisador
‫de corpo, então aqui
‫estamos, porque na verdade é muito semelhante.
‫Então, app. usar, e ainda é um middleware integrado
‫Express, então expresse. urlencoded, ok, e é chamado assim porque
‫lembre-se, a maneira como o
‫formulário envia dados ao servidor também é chamada de codificação
‫de URL e, portanto, precisamos desse middleware para analisar basicamente os dados
‫provenientes de um formulário codificado de URL.
‫Em seguida, passamos algumas configurações, e podemos dizer extendido verdadeiro,
‫e isso simplesmente nos permitirá passar alguns
‫dados mais complexos, que neste caso não são realmente necessários, mas ainda
‫vamos usá-los aqui,
‫e também podemos definir
‫o limite como fizemos no analisador de corpo, então
‫aqui em cima, e digamos novamente 10 kilobytes.
‫Tudo bem, se tentarmos novamente aqui, devemos realmente
‫obter esses dados, e esses dados.
‫Vamos adicionar novamente esses dados diferentes aqui, para termos certeza
‫de que eles realmente não estão obtendo o usuário atual,
‫mas sim os dados provenientes do formulário, ok, e
‫novamente continua girando para
‫sempre aqui, ou
‫até que o tempo limite, mas o que
‫nos interessa é realmente obter esses novos dados aqui agora em nosso corpo.
‫Ótimo, isso funciona e agora temos nosso formulário
‫HTML realmente conectado a este manipulador de rotas aqui.
‫E agora podemos ir em frente e realmente atualizar o
‫usuário com base nesses novos dados, certo.
‫Então, vamos nos livrar disso,
‫e depois atualizar o usuário como já sabemos fazer.
‫Agora, primeiro de tudo, vamos ter que importar o
‫modelo do usuário, então vamos fazer isso.
‫Usuário, aqui com um U
‫minúsculo, tudo bem, então agora digamos que
‫o usuário é igual a aguardar Usuário. findByIdAndUpdate.
‫Certo, então é claro
‫como sempre, marque este como assíncrono e pegue todos os erros.
‫Agora tudo bem, então qual é a ID que estamos procurando?
‫E espero que neste momento você saiba onde
‫está, será a pedido. do utilizador. identificação.
‫Ah, e uma
‫coisa importante que precisamos fazer, o que
‫eu ainda não fiz, é realmente proteger
‫essa rota aqui também, ok, porque
‫só então teremos esse usuário na solicitação, certo,
‫e claro além disso, só queremos poder acessar essa rota
‫se estivermos logados, caso contrário, qualquer
‫pessoa pode simplesmente ir em frente e atualizar alguns dados.
‫Então, aqui na
‫rota, vamos adicionar o authController. proteger.
‫Tudo bem,
‫então, esse é o ID, então precisamos dos novos dados
‫e, então, digamos que queremos um nome igual a request. corpo. nome e o e-mail definido como
‫pedido. corpo. o email.
‫E lembre-se de que esses são
‫os nomes dos campos, porque demos a eles o atributo name no formulário HTML.
‫Lembre-se, antes, quando atualizávamos alguns dados, costumávamos passar toda a
‫solicitação aqui para o método de atualização, certo, mas neste
‫caso, realmente queremos apenas atualizar o
‫nome e o e-mail, e assim, estamos certifique-se
‫de que qualquer outra coisa está sendo basicamente removida
‫do corpo, porque algum hacker pode, é
‫claro, ir em frente e adicionar alguns campos adicionais
‫ao HTML e, por exemplo,
‫enviar dados como senhas e coisas assim,
‫e é claro que fazemos não
‫quero armazenar esses dados maliciosos em nosso
‫banco de dados, certo.
‫Além disso, as senhas são mais uma vez
‫tratadas separadamente, porque lembre-se de que nunca podemos atualizar
‫as senhas usando findByIdAndUpdate.
‫Novamente, porque isso não executará o middleware seguro
‫que se encarregará de criptografar nossas senhas.
‫Ok, é por isso que temos uma rota separada para
‫isso em nossa API, e também temos
‫uma rota separada para isso em nossa interface de usuário.
‫E normalmente é isso que você sempre
‫vê em aplicativos da web quando deseja atualizar
‫suas senhas, geralmente você tem um formulário
‫separado apenas para isso, ok.
‫De qualquer forma, vamos continuar aqui com nossas
‫opções, onde dizemos que queremos
‫obter o novo, então basicamente o documento atualizado como
‫resultado, e também que queremos executar os validadores.
‫Então, é exatamente como fizemos antes em nossa API.
‫Ótimo, então vamos chamá-lo de updatedUser.
‫Ok, então o que queremos fazer agora?
‫Bem, depois de enviar os dados em nosso site,
‫basicamente o que queremos é simplesmente voltar a
‫esta página aqui, mas claro, com os
‫dados atualizados aqui, tudo bem.
‫Isso é fácil, tudo o que teremos que fazer é
‫basicamente renderizar a página da conta novamente.
‫E isso é semelhante a este, vamos
‫apenas copiá-lo, ok, mas agora
‫há uma diferença importante, porque agora, nós também precisamos
‫passar o usuário,
‫então o usuário atualizado, caso
‫contrário, o usuário que o modelo vai usar, é
‫aquele que vem do middleware de
‫proteção, lembre-se, então esse não
‫vai ser o usuário atualizado.
‫Certo, então precisamos passar o usuário é updatedUser.
‫Tudo bem, isso deve ser o suficiente.
‫Portanto, se agora recarregarmos ou salvarmos aqui, você
‫verá que, na verdade, voltamos exatamente para a mesma página e os dados
‫ainda são os mesmos.
‫Então, vamos provar isso, vá para
‫outra página e depois volte para a página de configurações.
‫E assim, isso prova que os
‫dados agora foram efetivamente atualizados.
‫Então, se sairmos agora, vamos tentar
‫fazer o login com este novo e-mail.
‫Então, eu queria fazer logout, certo, e agora efetuar login novamente.
‫E agora, vamos usar este novo e-mail e, claro, ainda a senha antiga,
‫test1234 e, de fato, agora é
‫o novo endereço de e-mail
‫que precisamos usar para fazer o login.
‫Agora vamos ver o que acontece quando passamos alguns
‫dados errados aqui.
‫Por exemplo, o Google Chrome nos permite enviar um endereço
‫de e-mail como este, mas é
‫claro, nosso modelo Mongoose não permite um
‫e-mail com este formato.
‫Agora devemos obter um erro e, de
‫fato, obteremos esse
‫erro, forneça um e-mail válido, mas isso é
‫uma experiência de usuário terrível, certo, então estávamos apenas
‫enviando nossos dados e, de repente, fomos
‫para uma página completamente nova.
‫E, na verdade, vemos que também chegamos
‫a esse novo URL, aquele para o qual enviamos os dados.
‫E então sim, isso é um pouco terrível, e
‫como eu estava dizendo no começo,
‫essa maneira de fazer as coisas é na
‫verdade um pouco pior para lidar com erros,
‫que é uma das razões pelas quais eu pessoalmente
‫prefiro usar a API que nós já criado para atualizar
‫os dados do usuário, e em geral para fazer este tipo de coisas.
‫Tudo bem, então vamos
‫fazer exatamente isso no próximo vídeo.