‫Instrutor: Neste
‫vídeo, vamos construir a página da conta
‫do usuário usando principalmente conceitos que já conhecemos
‫e já usamos antes.
‫E vamos começar dando uma olhada no
‫que eu realmente quero dizer com a página da conta do usuário
‫em nosso site de referência, então aqui no natours. dev.
‫Então já renderizamos este menu aqui
‫em nosso
‫site, mas quando clicamos então neste usuário obtemos
‫acesso à página da conta do usuário.
‫E então aqui, podemos alterar algumas configurações básicas,
‫também fazer o upload de uma nova
‫foto, mas esta vamos
‫fazer na próxima
‫seção na verdade, e o usuário também pode atualizar sua senha nesta página.
‫Então, no lado esquerdo há alguns itens de
‫menu, que não iremos realmente
‫implementar, então vamos apenas implementar o
‫menu, mas não realmente as páginas para as
‫quais eles apontam, e então se o usuário
‫for um administrador, também renderizamos esta parte aqui.
‫Ok, então é isso que construiremos nesta aula, e
‫nas próximas aulas iremos
‫cuidar de realmente atualizar as configurações.
‫Então, basicamente fazendo esses botões funcionarem.
‫Tudo bem?
‫Mas, por enquanto, é apenas renderizar esta página
‫aqui neste. me URL.
‫OK?
‫Então, vamos começar com o modelo pug.
‫Tudo bem, e como
‫sempre, já tenho esse modelo de conta aqui.
‫Então, vamos pegá-lo, copiá-lo e, em
‫seguida, criar uma nova visualização aqui, que
‫estou chamando de conta.
‫E agora queremos estender
‫a base e queremos criar um bloco chamado conteúdo como sempre.
‫E aqui é onde realmente colamos nosso conteúdo.
‫Tudo bem?
‫Agora precisamos recuar
‫tudo isso para torná-lo dentro do bloco.
‫Ótimo, então aqui primeiro temos a nossa navegação, certo?
‫Então, configurações, reservas, resenhas e faturamentos que
‫vimos lá no lado esquerdo
‫da página, e também temos a navegação de administrador, certo?
‫E eles já veem muitos códigos duplicados aqui.
‫Então, basicamente, esses elementos de item de lista
‫aqui, eles aparecem na verdade oito vezes.
‫Então, quatro vezes aqui em cima e quatro vezes aqui em baixo,
‫vamos criar rapidamente um mixin para eles para fazer
‫nosso código parecer um pouco mais limpo.
‫Tudo bem, então vou seguir
‫em frente e realmente copiar um destes.
‫E então crie um novo mixin chamado navItem.
‫Ok, então fizemos isso antes.
‫Portanto, isso é muito semelhante.
‫Então, o que precisamos passar para
‫este mixin a fim de personalizar basicamente cada um desses itens?
‫Bem, o que vai mudar é o link.
‫Também o texto, configurações, reservas, etc.
‫Então isso é texto.
‫Aí também o ícone vai mudar, e
‫finalmente você vê que esse
‫primeiro aqui tem o side-nav - classe ativa, certo?
‫E então também especificaremos um ativo como aqui, basicamente.
‫E então, quando quisermos marcar um item
‫como ativo, simplesmente passaremos por aqui.
‫OK?
‫Portanto, agora precisamos corrigir o recuo aqui.
‫E então passe nossos dados.
‫O próximo é o texto.
‫Então, é claro que neste
‫ponto, não é nada novo, então estou fazendo isso bem rápido aqui, certo?
‫Então, ícone e, em seguida, o nome do ícone que passamos.
‫Assim como fizemos antes, e
‫finalmente este ativo
‫aqui, lembre-se, será verdadeiro ou falso.
‫E se for verdade, então queremos adicionar esta classe.
‫Então, vamos copiá-lo.
‫E então vamos especificar o atributo de classe.
‫E então, assim como
‫fizemos, vamos fazer uma declaração turnery aqui.
‫Dizendo se ativo, basicamente, então aqui queremos
‫ter side-nav - ativo.
‫E se não, não queremos nada.
‫Portanto, um nome de classe vazio, basicamente.
‫Tudo bem.
‫E agora podemos substituir isso pelo nosso mixin.
‫Isso é chamado de navItem e, portanto, lembre-se,
‫escrevemos + e, em seguida, navItem.
‫Portanto, aqui o link é um link vazio.
‫E, na verdade, para todos eles, por enquanto.
‫Em seguida,
‫Configurações e, em
‫seguida, o nome do ícone, que também é configurações,
‫mas em letras minúsculas.
‫E então, finalmente, este está realmente ativo, então
‫passamos o verdadeiro.
‫Tudo bem, vamos duplicar.
‫Tenha uma pasta e nós temos Minhas Reservas.
‫Vamos fazer isso em minúsculas.
‫Certo, duplique mais duas vezes.
‫Aqui temos
‫estrela e aqui
‫cartão de crédito para cobrança.
‫Tudo bem.
‫E agora temos a navegação de administrador.
‫E este só estará
‫visível se o usuário atual for um administrador.
‫Então, vamos definir isso usando uma instrução if.
‫E aqui precisamos testar se a função do usuário
‫é igual a admin, certo?
‫E essa
‫é, novamente, uma dessas instruções if mais
‫complexas e, portanto, temos que usar JavaScript para isso.
‫Portanto, estou usando aqui código sem buffer novamente.
‫E então, se
‫e assim, teremos acesso à variável de usuário aqui.
‫Assim como fizemos em outros modelos.
‫Então, basicamente, vamos passar para aqui.
‫E então, é claro, o usuário tem o atributo role,
‫e então testamos se é admin.
‫E se for, então queremos mostrar tudo isso.
‫E agora precisa ter um recuo de nível.
‫OK?
‫E, claro, agora queremos substituir
‫tudo isso aqui pelo nosso mixin também.
‫Então, quatro vezes.
‫Este é chamado de mapa.
‫Gerenciar passeios.
‫Este é Gerenciar usuários.
‫Gerenciar avaliações.
‫E finalmente temos um com a pasta.
‫E este aqui não tem o texto,
‫mas é Gerenciar reservas.
‫Tudo bem.
‫Então, vamos nos livrar disso e continuar nosso trabalho aqui.
‫Portanto, este aqui será o
‫formulário para alterar as configurações do usuário.
‫E assim os dados pessoais ficarão aqui nestes valores, ok?
‫Então, basicamente, em um elemento de entrada HTML, o valor é
‫uma espécie de texto predefinido que
‫podemos colocar dentro de um elemento de entrada.
‫E normalmente o que
‫colocamos lá é o valor atual dessa
‫entrada, desse campo.
‫E agora, esse é, obviamente, o nome do usuário.
‫E então vamos colocar isso aqui.
‫Do utilizador. nome.
‫E aqui está o e-mail,
‫é claro.
‫E aqui também temos a imagem do usuário.
‫Assim, os usuários de barra de imagem cortam o próprio nome da imagem.
‫OK.
‫Então aqui embaixo não há nada a fazer.
‫Tudo bem?
‫E na verdade é isso.
‫Então, esses são realmente todos os dados
‫que vêm do objeto de usuário que
‫temos que inserir.
‫Ok, então esse é o modelo.
‫Vamos agora adicionar a rota ao viewRouter.
‫Bem aqui, e este vai se chamar / me.
‫E então teremos um controlador chamado getAccount.
‫Agora, esta aqui,
‫é claro, vai ser uma rota protegida, certo?
‫Porque somente se estivermos realmente
‫logados teremos acesso a esta página.
‫E, portanto, precisamos usar nosso middleware de proteção aqui.
‫Então esse é um authController. proteger.
‫OK?
‫Assim como fizemos com todas ou outras rotas protegidas.
‫Agora, um problema que vejo com
‫isso é que este middleware
‫de proteção aqui é muito semelhante ao isLoggedIn.
‫E então faremos algumas operações duplicadas lá, o que
‫não é o ideal.
‫Porque lembre-se de que este
‫isLoggedIn será executado para todas as solicitações, certo?
‫Então, vamos dar uma olhada rápida neles para que eu
‫possa deixar meu ponto de vista.
‫Então, em proteger, colocamos o usuário atual aqui.
‫Portanto, temos este findById aqui.
‫Mas fazemos
‫o mesmo aqui em logado, ok?
‫E então, usando isLoggedIn e protect ao mesmo tempo, faremos essa
‫consulta duas vezes.
‫E isso não é o ideal, é claro.
‫E então vamos colocar isLoggedIn aqui apenas em
‫rotas que não são protegidas, ok?
‫Porque na
‫rota protegida essa verificação se
‫o usuário está logado vai realmente acontecer também, certo?
‫Mas não neste middleware,
‫mas no middleware
‫de proteção, porque basicamente verifica isso também, certo?
‫Portanto, vamos cortar daqui e simplesmente colá-lo em
‫outras rotas que não estejam protegidas.
‫Ok, faz sentido?
‫E assim não temos esse problema de
‫basicamente fazer exatamente a mesma consulta duas vezes
‫em todos os middlewares protegidos.
‫E isso é um pouco melhor para o nosso desempenho.
‫Agora, uma coisa que fazemos no
‫isLoggedIn que atualmente não
‫fazemos no proteger é isso aqui.
‫Portanto, colocamos um usuário atual na resposta. habitantes locais.
‫E então vamos realmente
‫fazer o mesmo agora no currentUser.
‫E então vamos fazer o mesmo aqui no middleware de proteção.
‫Então, você coloca o currentUser sob solicitação. usuário e na
‫resposta. moradores locais, certo?
‫Para que possamos usá-lo
‫automaticamente em todos os modelos posteriores.
‫Então, neste caso, em nosso modelo de conta, certo?
‫Então, dê uma chance.
‫E agora precisamos adicionar este controlador getAccount para,
‫é claro, corrigir esse erro que
‫recebemos atualmente.
‫Isso está em viewsController. solicitação e resposta getAccount.
‫E você verá em um segundo por que só precisamos desses dois.
‫Portanto, para obter a página da conta, tudo o que realmente precisamos
‫fazer é simplesmente renderizar essa página.
‫Nem mesmo precisamos consultar o usuário atual porque
‫isso já foi feito no middleware
‫de proteção, certo?
‫E então tudo o que realmente precisamos
‫fazer é fazer algo assim.
‫Então copie este código, e então
‫a conta aqui.
‫E vamos dar a ele um título de sua conta.
‫Tudo bem, então isso faz com que o erro desapareça.
‫E agora, como peça final do quebra-cabeça, vamos adicionar o link
‫correto, na verdade, no cabeçalho.
‫Então, aqui em nosso cabeçalho agora, o link não
‫aponta para a página desta conta, certo?
‫Portanto, não aponta para lugar nenhum.
‫E agora deve apontar para / mim.
‫Ok, então essa deve ser
‫a peça final para realmente fazer funcionar.
‫E então vamos entrar aqui
‫agora com o teste um, dois, três, quatro.
‫Estamos logados com sucesso.
‫E agora ao clicar aqui temos a nossa página.
‫Fantástico.
‫Agora há um erro aqui com a foto do usuário.
‫Então, vamos consertar isso.
‫Mas, além disso, na verdade, tudo está funcionando bem.
‫Também obtemos este menu aqui porque estamos atualmente em administração
‫e, portanto, vamos testá-lo também em um segundo para ver se
‫ele desaparece para outros usuários.
‫E, na verdade, também recebemos esse erro
‫aqui porque temos uma solicitação com falha para a imagem.
‫E então já vimos que provavelmente estamos fazendo
‫algo errado aí.
‫E aqui
‫na imagem, claro, não é usuário. nome, é o usuário. foto.
‫Então salve, recarregue aqui.
‫E agora, de fato, lá vamos nós.
‫Tudo bem?
‫Então, agora vamos sair e ver o que acontece então.
‫E então temos esse tipo de erro.
‫E isso é basicamente porque estamos
‫tentando acessar essa rota protegida sem estar logados.
‫Tudo bem?
‫Então, vamos tentar de novo agora.
‫Então, se tentarmos fazer o
‫login comigo, descobriremos que você não está conectado, certo?
‫E antes de recebermos aquele erro de aparência estranha,
‫porque, na verdade, estamos em desenvolvimento agora.
‫Mas na produção, é claro, não veríamos aquele erro
‫estranho que vimos antes.
‫Direito?
‫Mas o que
‫vemos agora é que, claro, nossa rota está realmente protegida.
‫Portanto, não podemos acessá-lo se não estivermos logados.
‫Agora só para terminar, vamos realmente logar com alguma outra
‫conta só para
‫ver se a parte do administrador também funciona.
‫Então, vamos, novamente, usar Laura aqui.
‫E você vê que ela é apenas uma usuária regular.
‫Tudo bem.
‫E agora temos
‫sua conta de usuário, sem, é claro, o menu de administração.
‫Ok, perfeito.
‫Então essa é a construção da página da conta.
‫E como eu disse antes,
‫no próximo vídeo, cuidaremos da atualização
‫dessas configurações de conta.