‫Jonas: Nas próximas duas
‫palestras, adicionaremos a funcionalidade de login ao nosso site.
‫E nesta
‫aula, começaremos realmente renderizando a tela
‫de login para facilitar o
‫login dos usuários.
‫Mais uma vez, quero que isso seja um desafio para
‫você, para que possa realmente praticar algumas das
‫habilidades que vem aprendendo.
‫O que eu quero que você faça é criar uma rota
‫de login de barra.
‫Em seguida, crie um controlador
‫e, é claro, um modelo.
‫E esse modelo é muito fácil.
‫É apenas um HTML estático e não precisamos
‫passar nenhuma variável para ele.
‫Na verdade, existe um modelo
‫para isso aqui na pasta de modelos.
‫Portanto, isso deve ser realmente fácil para você concluir.
‫Portanto, pause este vídeo e volte quando estiver pronto.
‫Ok, bem-vindo de volta.
‫Espero que você tenha concluído este desafio com sucesso.
‫Então aqui está minha opinião sobre isso.
‫O ponto de roteador obter a rota
‫é o login de
‫barra e
‫então usamos o formulário de login de
‫ponto de controlador.
‫Então, esse é o manipulador de rota que vou criar a seguir.
‫Exporte o ponto para obter a resposta do formulário de
‫login e
‫aqui não precisamos mais do que
‫apenas a solicitação e a resposta.
‫Na verdade, aqui em cima estou vendo
‫que estamos perdendo o próximo.
‫Sempre, quando temos funções assíncronas agrupadas em catchAsync,
‫devemos sempre especificar a seguir.
‫Mas aqui, tudo o que
‫realmente precisamos fazer é renderizar um modelo de login.
‫Portanto, ainda não criamos esse modelo.
‫Mas será chamado de login.
‫Então, digamos res dot status
‫200,
‫modelo de
‫renderização chamado login.
‫Então, como com todas as nossas
‫outras páginas, realmente queremos dar a ele um título personalizado.
‫Para isso sempre passamos um objeto
‫com a propriedade title.
‫Direito?
‫Assim, o template base irá então ler aquele título
‫e colocá-lo no elemento title html.
‫Neste caso,
‫o título é simplesmente entrar em sua conta.
‫E é isso para o gerenciador de rotas.
‫Agora vamos
‫de cabeça, abra o modelo de
‫login, selecione tudo,
‫copie tudo, feche-o e crie a nova visão aqui.
‫Chame, é claro, login ponto pug.
‫Então, colando esse código aqui,
‫e agora vem de novo aquele truque em que estendemos
‫nosso modelo base.
‫Este estende a extensão do arquivo de base, não se esqueça que aqui precisamos
‫criar um bloco com exatamente o
‫mesmo nome que temos no arquivo de base.
‫Então isso é conteúdo.
‫E com isso nós realmente terminamos, eu
‫acredito.
‫Claro, precisamos recuar para torná-lo um filho
‫deste bloco.
‫Mas, é realmente isso.
‫Agora, só mais uma coisa que
‫precisamos fazer é definir um link para a
‫página de login para que possamos realmente acessá-la.
‫No momento, os botões de login e inscrição estão, na
‫verdade, usando o elemento de botão.
‫Mas assim, não podemos realmente especificar
‫o atributo href.
‫Então, vamos mudá-los de fato para um link real.
‫E aqui, podemos especificar o href.
‫Portanto, este simplesmente aponta para o login.
‫E um segundo
‫aqui, o registro que não implementaremos na
‫verdade, para que você possa implementar
‫por conta própria, se desejar.
‫Basicamente, um formulário de inscrição.
‫Mas, desde tudo
‫isso, então todo o processo de inscrição vai
‫ser muito semelhante ao login,
‫decidi não incluir isso aqui nesta seção porque
‫seria apenas muito conteúdo duplicado e não
‫quero torne o curso desnecessário por muito tempo.
‫Dê um seguro, não sei
‫se isso agora reinicia o servidor, na verdade não,
‫então vamos
‫salvar um desses arquivos de script java.
‫Agora, este
‫é o nosso site de referência.
‫Lembre-se, é isso que queremos,
‫é este.
‫Vamos a todos os
‫passeios e agora vamos tentar nossa rota de login.
‫E, de fato, aqui vai nosso formulário.
‫Excelente.
‫Agora aqui podemos colocar
‫algum e-mail,
‫digamos admin ponto naders ponto
‫io.
‫E você vê que ele
‫formata muito bem essa entrada aqui, quer o endereço
‫de e-mail seja realmente válido ou não.
‫Por exemplo, se eu não tiver a extensão correta
‫aqui, ela ficará laranja
‫me informando que algo está errado.
‫E a mesma coisa com a senha.
‫Contanto que eu tenha menos de oito caracteres,
‫isso sempre será vermelho,
‫basicamente me informando que há um erro.
‫Que agora que tenho oito
‫caracteres, fica verde.
‫E se você estiver interessado em como
‫fazer esse tipo de mágica com
‫css, sinta-se à vontade para verificar o arquivo css que codifiquei
‫apenas para este curso.
‫De qualquer forma, é claro, clicar neste
‫botão aqui agora faz absolutamente qualquer coisa, certo?
‫Portanto, no próximo vídeo, vamos realmente
‫começar a implementar a funcionalidade de login, na
‫verdade, fazendo uma solicitação para nosso endpoint de API
‫que já criamos.