Fala galera nesse novo vídeo da série construindo uma aplicação full stack do zero a gente vai construir o nosso primeiro sistema de cadastro e de login no vídeo de hoje a gente vai construir todo o front end utilizando o angler e no segundo vídeo a gente vai construir o backend que vai ser responsável pelo cadastro dos usuários e o controle de autenticação Então nós vamos construir hoje tanto a tela de login quanto a tela de cadastro de usuários no nosso sistema e também as tratativas de erro e de sucesso para as requisições enviadas no backend e então sem mais enrolações Bora pro [Música] vídeo Então galera antes da gente começar a construção do código eu queria mostrar aqui rapidinho para vocês como vai ser o figma da aplicação que a gente vai construir Então a gente tem aqui a tela de login com e-mail e senha a tela de cadastro com nome e-mail e senha também e aqui a gente tem a tratativa de erro né caso venha algum um erro lá da requisição do backend eu gostaria também de falar para vocês Que esse design aqui eu me inspirei num design compartilhado pelo AJ aqui na comunidade do figma tá então eu usei aqui de inspiração esse design feito pela EJ para construir a interface que a gente vai usar no vídeo de hoje então agora bora começar o nosso projeto então para iniciar o nosso projeto a gente precisa abrir o nosso terminal então abri aqui meu terminal e a primeira coisa que a gente precisa ter certeza é que a gente tem o node instalado na nossa máquina eu já tenho node instalado aqui então rodando o comando node menos menos version já consigo ver a versão do node aqui na minha máquina se você não tiver node instalado aí na sua máquina pausa o vídeo e procura aqui na descrição do vídeo o link né do tutorial para você instalar o node na sua máquina com o node instalado a gente vai precisar instalar o angler de forma Global na nossa máquina também e como é que a gente faz isso a gente usa o node package Manager né o npm para fazer essa instalação desse dessa biblioteca então usando npm install menos G Por que menos G de forma global é a Flag que indica que isso aqui vai ser instalado pra nossa máquina toda @ angler barcal Vocês já vão instalar aí o angler de forma Global na máquina de vocês e o ideal aqui seria especificar uma versão que vai ser a versão que a gente vai usar no vídeo de hoje que é a versão 17 então colocando G New que é o comando que vem aqui da cal do angler então fazendo NG New ele já vai iniciar aqui a criação de um novo projeto angler e ele vai fazer algumas perguntas para nós então Ele nos pergunta qual o nome que você gostaria de usar né para esse novo projeto então eu vou dar um nome de login page aí ele pergunta qual o formato de Style sheet que eu quero usar eu vou colocar aqui como scss vou dar enter e ele pergunta se eu quero usar server Side rendering eu vou colocar aqui como como não né porque a gente tá fazendo aqui não é uma aplicação estática a gente tá fazendo uma aplicação dinâmica porque vai ter toda a interação ali com JavaScript para fazer a questão do login autenticação refresh token etc Então vou colocar como não mas se quisesse a gente poderia usar server S rendering aqui também ali distinguindo Quais componentes podem ser renderizados antes e quais podem ser renderizados depois então vamos esperar que ele terminar de criar a nossa aplicação pronto projeto criado então a gente já pode entrar na pasta do nosso projeto e abrir o vs code dentro dela então vou D aqui um CD login page né CD o comando para eu entrar dentro de uma pasta então eu entrei aqui para dentro da pasta login page e usando o comando code se eu já tiver o vest code instalado na minha máquina ele vai abrir aqui o vest code né dentro da pasta do nosso projeto e o vest code a primeira vez que a gente abre o projeto Ele pergunta se eu confio né nos autores desse projeto então Yes trust the aors que no caso sou eu e aqui eu já posso colocar em tela cheia pra gente começar aqui a programar Nossa tela de login e agora que dentro do nosso projeto angular a primeira coisa que a gente vai fazer é dar uma limpada em algumas coisas então vou abrir aqui a pasta source que é a pasta que mantém né os arquivos de código fonte do nosso projeto vou abrir a pasta app e aqui dentro da pasta app a gente já vai ver aqui o primeiro componente né O componente Inicial criado pelo NG New que é o app component esse App component ele já vem com alguma estilização Então a gente vai tirar tudo que tem aqui dentro vamos tirar tanto o CSS o Style que tem aqui e vamos limpar também o HTML Então vamos deixar só essa tag Main na verdade vamos tirar até essa tag Main e vamos deixar aqui só o router outlet que aqui é o Outlet das rotas né que vai ser o que vai exibir cada página de acordo com a Rota ali que o usuário tá navegando aqui no app.css não tem nada dentro então a gente pode manter assim e aqui o nosso app component.ts também tá vazio ele tem aqui só um título O a classe tem só uma propriedade que é o título da página que aqui no caso ele não tá mais usando no html Então vamos abrir o nosso terminal aqui dentro do vs code e iniciar o projeto PR ver se tá tudo certo né com o build Inicial então npm start ele já vai rodar aqui o comando para iniciar a aplicação angler e aqui a gente já consegue ver que a aplicação já pode ser acessada no local host porta 4200 então acessando aqui a gente consegue ver que já tá aparecendo nossa página né ela tá vazia porque não tem nada dentro lá do nosso HTML Mas a gente pode colocar um H1 aqui para testar então V colocar Oi vídeo abrir aqui o navegador e beleza a gente já tá vendo Oi vídeo Então quer dizer que o build aqui do projeto tá dando tudo com sucesso então a gente já pode partir pra criação dos nossos componentes então o primeiro componente que a gente vai construir aqui na nossa aplicação vai ser o componente de layout né porque vai ser a o layout que faz parte tanto da tela de login quanto da tela de cadastro vou mostrar aqui no figma para vocês então aqui no figma a gente consegue ver que a tela de cadastro e a tela de login são quase idênticas o que muda de uma para outra é só os campos que são solicitados aqui aqui no formulário pro usuário Então essas duas telas a gente vai usar um layout comum entre elas que vai ser o layout que vai conter essa imagem aqui que vai conter esse Card aqui na esquerda o título os botões aqui embaixo que são iguais e som dos textos tudo isso aqui a gente vai se manter né reaproveitar entre uma tela e a outra e a gente vai só mudar o miolo aqui de uma para outra né mudando o formulário que é colocado aqui no meio então vamos voltar ali pro código e criar o componente que vai ser correspondente aqui a o nosso default layout então aqui no vs code eu vou abrir mais um terminal e eu vou rodar o comando NG generate component então eu poderia escrever aqui generate component ou posso colocar só as abreviações né NG generate component e onde é que eu vou salvar esse component dentro da pasta components e aí eu vou dar um nome para esse componente que vai ser default login layout dando enter aqui ele já vai criar a pasta componentes para mim e o componente aqui dentro então vamos abrir aqui o ml desse componente começar a estruturar né o nosso layout Então como é que a gente vai fazer a gente vai ter uma tag Main dentro dessa tag Main eu vou ter duas sessões Então vai ser a sessão que contém o formulário e a sessão que contém a imagem essa sessão que contém imagem ela basicamente tem um H2 aqui né que vai ser you should you should move its que é o título e aqui uma imagem uma tag image beleza já essa outra sessão aqui essa sessão da esquerda é a sessão que vai ter o nosso formulário Então vamos abrir aqui o figm vamos ver o que que a gente vai precisar colocar a gente precisa colocar o logo esse título o formulário Então os botões então voltando aqui a gente vai primeiro colocar o logo que vai ser mais uma imagem Vou colocar aqui vou duplicar depois a gente coloca o caminho da imagem certinho o título que vai ser um H2 e esse aqui eu acho que eu posso mudar para um H1 né esse aqui é um H1 e aquele ali do formulário é um H2 e aqui esse título a gente vai receber como propriedade Então por enquanto eu não vou colocar nada aqui dentro embaixo disso a gente vai ter o formulário de Fato né aqui o formulário então aqui embaixo a gente vai ter os botões né o botão de login e o botão de signup né dependendo da da tela que o usuário estiver o botão a gente vai colocar ele aqui né o primeiro botão Button e o segundo Button só que entre esses dois botões aqui a gente tem essa divisória esse divisor aqui né que fala or que é seria tu quer abrir quer fazer o login ou tu quer abrir uma conta então aqui a gente vai criar uma div e aqui no meio dessa div eu vou colocar um spam vai ter a palavra or Beleza então a gente já tem a estrutura básica aqui do nosso default login layout e agora a gente vai criar a nossa página de login Vamos criar mais um componente para conter a nossa página de login então aqui nerg generate component só que em vez de components eu vou deixar dentro de Pages pages default e o nome dessa page vai ser a page de login e aqui ficou dois s é só um s então login Ele criou aqui a pasta pages e a minha pasta login esse meu component pages vai usar esse componente aqui Def login layout né então a gente precisa importar esse default login layout aqui no nosso componente então default login layout component e aqui no nosso componente login eu posso usar o App default login layout beleza e agora aqui na nossa aplicação app a gente vai mudar o app routes para criar uma nova rota que vai ser a rota de login ó aqui eu vou colocar o pef e o pef vai ser barra login aqui no caso só login né não precisa colocar barra e aí o componente que ele tem que usar é o login component beleza vamos ver aqui se deu algum erro não Beleza então voltando lá pro navegador que a nossa aplicação ainda tá executando Vamos acessar aqui a rota login e ele já vai abrir aqui né a nossa tela de login com o default layout que a gente tá criando por enquanto tá tudo muito estranho mas a gente vai fazer a estilização desses elementos agora a primeira coisa que a gente vai fazer é pegar as imagens lá do nosso figma e colocá-las aqui na nossa aplicação então eu vou abrir essa primeira imagem deixa eu abrir aqui a os os controles da lateral e eu quero essa imagem aqui essa ilustration eu vou exportar ela Export como um svg e vou exportar ela e aqui eu quero exportar também o logo então vamos exportar o l logo aqui da nossa aplicação Export o logo na verdade é tudo isso então vou fazer um um Create component aqui e vou exportar tudo isso daqui como um svg Export component com os dois arquivos exportados agora a gente vai ter que colocar eles lá nos assets da nossa aplicação Então se vocês verem aqui a nossa aplicação tem essa pasta assets e é aqui dentro que a gente vai deixar essas imagens Então vou criar aqui dentro de assets uma nova pasta que é svg e aqui eu vou colar tanto a animação a ilustração ali da página de login e de cadastro quanto o nosso logo vou colocar os dois aqui dentro e eu vou ter que renomear né esse aqui vai ser o nosso Main illustration e esse aqui vai ser o nosso logo né Logo Beleza agora voltando lá pro nosso default login layout e a gente vai vir aqui na nossa tag image Vamos colocar um source nela e aqui ela vai vir de assets bar svg bar logo.svg Por que que a gente pega direto aqui de assets né e não faz o caminho direitinho saindo aqui da pasta de components e acessando lá a pasta assets porque essa pasta assets vai estar disponível pra nossa aplicação lá no momento que o angler fizer o build da nossa aplicação final então quando ele fizer o build esse HTML aqui vai est ao lado dessa passa assets né No momento do build é por isso que a gente consegue acessar dessa maneira aqui então voltando lá pro navegador ó a gente já consegue ver que tá aparecendo o logo e agora a gente já pode substituir aqui o s da outra imagem né a imagem aqui de baixo que vai ser a Nossa main illustration Main illustration voltando aqui beleza a gente já tá vendo a ilustração e agora a gente pode partir pro CSS Então vou fechar todos os arquivos aqui que estão abertos eu vou comitar essas alterações iniciais Então vou colocar como Fit creating initial structure e agora vamos estilizar aqui o nosso default login layout então primeiro a gente vai selecionar a tag Main e colocar um display Flex nela então display Flex um Flex Direction de Row então para deixar aqui um elemento ao lado do outro né que seria essa sessão ao lado dessa outra sessão e aqui nós vamos colocar um Ally items Ally items Center e um justify content Center também para alinhar todos os conteúdos no centro aqui das suas caixinhas só que agora a gente quer que essa section aqui essa Inicial que tem o logo e o H2 seja menor do que essa segunda section que tem a imagem principal né que tem aquela imagem grande como é que a gente vai fazer isso primeiro a gente vai colocar uma classe em cada uma dessas sections então aqui vou colocar uma Class uma Class de form section e aqui a outra eu vou dar uma Class de Main section bom agora a gente vai selecionar a Nossa main section aqui colocando um ponto na frente claro né para indicar um seletor de classe e essa Nossa main section ela vai receber os seguintes atributos a gente vai colocar um display Flex nela também só que aqui o Flex Direction vai ser colum então eu quero um elemento abaixo do outro por quê Porque eu quero que esse H1 fique em cima né do da imagem não quero que um fique do lado do outro e sim um ã abaixo do outro aqui um al items Center para eles se alinharem no centro dessa caixa e um justify content Center também e aqui eu vou colocar um GAP né um espaçamento Entre esses dois elementos que a gente vai abrir aqui o figma para dar uma olhada então vou ter um espaçamento entre a imagem aqui e o texto a gente já pode ver aqui é um espaçamento bem pequeno na verdade o texto tá quase entrando aqui dentro da imagem né na caixinha aqui da imagem então a gente pode levantar um pouco para cima então podemos colocar aqui um GAP de oito pixeis pra gente ver como é que fica beleza e aqui a gente vai colocar um Flex grow para esse cara de um então ele vai ocupar mais espaço do que a outra caixinha aqui a caixinha de form section outra coisa que a gente vai colocar nessa Main section é um background então o background color vai ser aquele background lá do figma que é esse background aqui que é um cinza né E a gente vai precisar criar algumas variáveis de cor porque a gente consegue ver que essas cores se repetem aqui ao longo de toda a nossa aplicação Então vamos abrir aqui de novo V code antes da gente continuar e colocar o background aqui pra Nossa main section nós vamos criar um arquivo de variáveis aqui pro nosso CSS então aqui dentro da pasta sorce né direto na raiz da pasta sorce nós vamos criar uma nova pasta New Folder que vai ser Styles e aqui dentro eu vou colocar um novo arquivo que vai ser verbs pcss e aqui a gente vai declarar as variáveis do nosso CSS como é que a gente vai fazer isso a gente vai fazer da forma né que se declara variáveis no SAS que é usando essa o cifrão na frente eí colocando o nome da variável Então vamos ter a primary color que é Aquele roxo lá né mais importante aqui então vamos pegar aqui o número do roxo Vamos colocar aqui aí nós vamos ter aqui também uma secondary color uma cor aqui dos textos que é essa 5555 aqui e a cor mais clara Então vamos pegar aqui e vamos criar o nosso text color aqui text color e é essa cor aqui nós vamos ter a nossa secondary color que é Aquele roxo mais escuro vamos lá pegar ele aqui e por fim a gente vai ter aquele cinza né o Grey que é o nosso Grey background o Grey usado aqui em outros locais que é esse mesmo Grey aqui então vamos copiar essa cor e e e e e colocar aqui o e e e e Beleza então criamos nossas variáveis agora como é que a gente a gente vai fazer a gente vai vir aqui no nosso default login layout vamos importar essas variáveis então aqui eu vou colocar Import Então vou colocar o pf né da onde eu quero importar então é barra source bar Barra Styles bar Styles bar verbal CSS e agora aqui eu já consigo usar né um background color usando a variável Grey background E por que que tá dando erro aqui porque na verdade eu não tô dentro da pasta aqui direto né na Rot do nosso projeto para conseguir acessar sorce bar Styles bar verbal CSS eu tô dentro dessa pasta Def login layout então tenho que fazer o acesso Como se eu tivesse aqui dentro né então tem que colocar dois pontos barra para sair dessa pasta então dois pontos barra para sair da pasta components dois pontos barra para sair da outra pasta então conseguir acessar passa Styles e verbal CSS dessa forma agora sim vai funcionar e agora vamos continuar aqui estilização né das demais sessões uma pausinha rápida para lembrar que se você tá gostando desse vídeo não esqueça de deixar seu like se inscrever aqui no canal e se você quer ter acesso a conteúdos exclusivos a todas as lives gravadas acessa a comunidade exclusiva do discord e vários outros benefícios considere se tornar um membro O valor é menor do que o preço de um casco de banana e eu tenho certeza que vai te agregar muito dito isso bora continuar o vídeo agora a gente vai vir aqui no nosso Style CSS vamos aplicar alguns estilos globais pra nossa aplicação a primeira coisa que a gente vai fazer é tirar o margem e o pading de todo mundo então vamos colocar aqui margem zero Tod mundo e um box sizing como border Box agora a gente vai colocar uma altura de 100% B HTML que a gente consiga colocar uma altura de 100% aqui na Nossa main section L do DEF login layout então aqui no Lay na Nossa main section nós vamos colocar um h 100% e aqui na Nossa main section nós també vamos coloc na verdade V colocar Du sections de 100% colocar especificamente pras duas beleza pra Main section é isso agora vamos organizar a nossa form section que é a sessão que tem aqui os elementos do formulário que que a gente vai colocar aqui né a gente também vai precisar colocar Vamos abrir aqui um display Flex Flex Direction colum al item Center tudo isso aqui a gente vai poder colocar Então na verdade eu posso extrair e colocar globalmente aqui pras duas sections sem precisar especificamente para cada um beleza agora o Flex Grow que dessa form section vai ser diferente ele não vai ser Flex grow um senão ela vai crescer do mesmo tamanho que a outra sessão vai crescer e não é não é isso que a gente quer né a gente quer que essa sessão aqui seja um pouco menor então aqui eu posso colocar um Flex grow para ela de sei lá 0.3 e ela vai ocupar aqui né como se fosse 30% do espaço disponível e a outra vai ocupar 70% do espaço disponível Então se a gente abrir aqui o navegador e abrir a nossa página de login a gente já vai conseguir visualizar como tá ficando ó já tá ficando aqui mais ou menos do tamanho que a gente precisa Então tá perfeito agora vamos continuar aqui com os próximos elementos Então vamos utilizar aqui o H1 da nossa página Na verdade acho que é o H2 deixa eu me lembrar é H2 vamos estilizar aqui O H2 da nossa página que vai ter um fonte size de 20 pixels de acordo lá com o figma 20 pixs fon weight bold e aqui o Font Family vai ser o popping mas depois a gente vai aplicar aqui essa fonte Family para todo mundo porque a Font Family usada no em toda a nossa aplicação Então beleza temos aqui O H2 Vamos abrir aqui novamente para ver como tá ficando não tem nada aqui ainda escrito na verdade porque a gente não mandou um texto aqui pro nosso H2 né a gente deixou ele vazio Então já vamos mudar isso daqui vamos colocar aqui ó a o title né da nossa página e esse title a gente vai receber através de input aqui nesse componente então input Python é uma string e aqui a gente vai iniciar ele com um valor vazio né porque a gente tem certeza que os outros componentes vão mandar esse valor aqui para ele agora lá na nossa página de login a gente vai mandar ess esse title aqui para preencher né o app default login então aqui a gente vai mandar um title e o title vai ser aquele que está lá no figma que é esse aqui login into your account e quando a gente tiver criando a página de sign in esse title aqui vai ser diferente já aproveitando Vamos mandar o texto do primary Button Text e o secondary Button text por qu porque isso aqui também vai ser dinâmico então secondary Button text que textos vão ser esses daqui vai ser ó login now e sign up now então login now e sign up now e aqui no nosso default login layout a gente vai receber esses parâmetros também então a gente vai receber um primary Button Text e um secondary Button Text e esses dois textos aqui a gente vai colocar aqui no nosso HTML também dentro dos botões Então a gente vai ter primeiro botão primary Button Text e o segundo botão contendo né o secondary secondary Button text beleza voltando aqui pro navegador a gente já tá vendo aqui agora o título e os dois botões então agora vamos estilizar os botões para eles ficarem iguais lá o figma Então vamos voltar aqui pro CSS e vamos selecionar os nossos botões o botão ele vai ter um de 100% isso já me lembra que a gente precisa colocar um pading aqui no nosso form section né então senão o botão vai ficar aqui até o final na verdade tem um pading aqui nas laterais Então vamos ver aqui quanto é o pading 35 Então vamos colocar aqui um pading em cima embaixo zero por enquanto e 35 nas laterais E aí o botão vai ter o wif 100% esse nosso botão vai ter um border radios também né vai ter uma borda arredondada e essa borda arredondada é de 8 Pixel aqui border radios 8 pixs o Font size é 16 pixis e o Font weight é de 500 que é o semib Bolt beleza Além disso o nosso botão Por enquanto não vai ter borda então border known e ele vai ser né background color como transparent por enquanto ele vai ser transparente beleza e agora a gente pode estilizar né cada um dos botões tanto primary quanto secondary com as diferenças cada um vai ter então aqui no HTML nós vamos dar uma classe diferente para cada um deles então nós vamos ter o Button Prim e vai ser o primeiro e o Button secondary que é o segundo o nosso Button primary então aqui a gente vai pegar Ezinho comercial para indicar que é um botão que tem a classe Button primary Então se a gente colocar aqui o mouse por cima a gente já vai ver que o sas vai est mostrando né que eu tô selecionando o botão que tem a classe Button primary então a background desse cara aqui background color vai ser a nossa primary color né a nossa variável primary color e a cor de fato a cor do texto vai ser o branco beleza Já o nosso secondary Button então aqui nós vamos botar Button secondary ele vai ter só uma border color que vai ser o rostinho então border color vai ser um pixel Solid que border na verdade um pixel Solid primary color e a cor dele vai ser a nossa primary color também a cor do texto voltando aqui pro navegador a gente já consegue ver que ele tá ficando com a aparência que a gente deseja só que eles estão muito aqui no fig e me dá uma olhada ele tem um pad em cima e embaixo de pelo menos uns 12 pixis então aqui para os botões de forma Global nós vamos colocar em cima e embaixo 12 pixis e nas laterais 24 para ver como é que fica voltando aqui beleza já tá bem parecido com o que a gente tem ali no fig mas a gente só precisa agora colocar essa sombrinha né pro botão aqui de cima né pro botão primary que ela ele tem essa sombra então aqui para pegar o Shadow eu vou pegar lá direto do figma eu vou usar um plugin que eu tenho aqui que é o HTML generator que ele já vai gerar aqui o o CSS específico desse componente então usando esse plugin eu tem que selecionar aqui opa deu um erro plugin HTML generator eu selecionei o errado eu acho não aqui ó Box Shadow é esse Box Shadow aqui que a gente vai copiar vou vir aqui vou colar no meu componente então Box Shadow parece tá certo Vamos abrir aqui o navegador e ele ficou aqui com o box Shadow certinho no nosso botão Então beleza os botões aqui estão certos agora a gente precisa fazer esse espaçamento aqui entre os dois botões né esse or aqui e a gente também precisa ter um espaçamento entre todos os elementos aqui do nosso formulário Então se a gente vê a gente tem aqui 33 pixis de espaçamento e aqui 45 seria legal manter um padrão então vou colocar aqui um GAP né no nosso form section então um GAP de 34 pixs para deixar redondinho vamos ver aqui beleza só que eu não queria o GAP entre o os dois botões ou eu queria esse GAP grande vamos ver é 30 e 23 tá até errados os espaçamentos então 30 e 30 e aqui seria legal deixar 45 então não vou colocar como um GAP vou colocar o espaçamento específico em cada um deles então esse primeiro botão aqui eu vou colocar na verdade eu vou criar uma div Em volta dos botões para eu mexer só com eles então vou criar aqui uma nova div que vai ser botão rapper E aí vai ter meus dois botões aqui dentro e esse espaçamento bonitinho Beleza agora a gente utiliza esse nosso Button wrapper aqui pegar Button wrapper display Flex Direction colum n tudo isso daqui buton wrapper e o wif de 100% e o botão a gente bota aqui dentro do Button wrapper né para deixar tudo numa escadinha bonitinho organizado Posso baixar aqui o terminal eu vou passo pra gente ver o código melhor beleza e agora nesse nosso Button wrapper nós vamos colocar um GAP Aí sim de 30 pixels E agora voltando pro navegador ó a gente já consegue ver o espaço entre o or e os dois botões e agora a gente precisa de um espaço né entre os botões e aqui o título e também aqui entre o título e o logo então isso aqui a gente vai colocar na mão também então vamos abrir aqui o nosso H2 Vamos colocar um Margin borom nele de 45 piis e aqui a gente vai selecionar a imagem e colocar né do form section colocar um imagem borom nela de 30 pixis pronto voltando pro navegador já tem o espaçamento correto aqui entre o título e o formulário que vai começar e aqui o espaçamento correto entre o logo né e o resto das coisas beleza agora vamos construir esse divider aqui né que vai separar os dois botões aqui de forma bonitinha que vai ser esse or aqui então para construir isso aqui a gente vai precisar deixar aquele spam com o Font size de 14 pixis Font weight regular e usando aquele nosso Cinza o cinzinha clarinho então vamos vir aqui vamos selecionar deixa eu ver como é que a gente colocou colocou aqui direto né uma div um spam or dentro então vamos dar uma classe para essa div que vai ser divider e aqui dentro eu vou precisar colocar mais duas dives e vão ser as dives vazias que vão formar aqueles risquinhos ali do lado do War então aqui divider beleza então aqui vamos ver dentro do Button wrapper não Ah tá certo Button wrapper nós vamos pegar a nossa divider e vai ter um Font size 12 color de BG aqui um Font weight de 400 que é o regular Então a gente vai ter aquelas dives e vão ter um wif de 100% um height de um pixel e um background color de Grey BG e vamos ver como é que ficou aqui tá elas ficaram uma em cima da Do or né uma em cima da outra e no or aqui então a gente tem que fazer esse nosso divider tem um display e um Flex Direction Row Na verdade nem precisava colocar aqui o Row porque por padrão né já vai ser Row então voltando aqui vamos ver beleza só que a gente não tá conseguindo ver as linhaz vamos ver por vamos ver aqui as duas linhas elas estão comf de zero então aqui eu tenho que colocar né UMF para elas ef sei lá 50 pi vou ver tá só que aqui eu quero que eles fiquem alinhados ao centro então aqui no nosso divider nós vamos colocar li items Center justify content Center também beleza e agora a gente pode colocar um GAP né entre o início aqui do War de um início pro outro vamos ver aqui o GAP de 20 aqui nós colocamos um GAP de 20 pixis aqui nós podemos colocar também um text Transform text Transform PR upper Case né porque o War é tudo em uppercase e aqui min wif ao invés de 50 pixis eu vou colocar 100% e essa nossa classe aqui divider ela também tem que ter um wif de 100% né para que os outros possam ocupar então wif de 100% beleza agora voltando aqui pro navegador a gente já consegue ver que os dividers aqui estão bem grandinhos então ao invés de controlar aqui a div por wif eu vou colocar nela um Flex grow um Então as duas vão ter um Flex grow um e elas vão crescer o máximo que der ali dentro do espaço da outra div então assim ó já fica melhor já tá bem parecido aqui com o figma eu acho só só que a gente errou aqui o fonte size então a invés de 12 é 14 e aqui a gente pode colocar uma altura né um height de dois pixis para elas e beleza agora voltando aqui pro navegador a gente já vê que tá bem bonito né e tá bem parecido aqui com o figma tá igual na verdade e agora a gente precisa para finalizar aqui os botões colocar um cursor Pointer neles então aqui cada um dos botões eu vou colocar né Button um cursor Pointer para indicar que é um elemento clicável na tela beleza perfeito agora a gente já pode partir aqui pra criação dos formulários de login e o formulário de cadastro então agora pra gente colocar um formulário aqui dentro da tela de login né injetando dentro do default login layout a gente vai precisar usar a funcionalidade de NG content aqui do angler então aqui na nossa página de login no HTML do login dentro né dentro aqui do app default login layout a gente vai colocar um formulário a gente vai criar uma tag aqui de formulário e agora lá no nosso defa login layout aqui onde a gente quer que fique esse formulário a gente vai colocar o NG content e ele vai injetar aqui tudo que tiver né tudo que tiver sido passado dentro da tag lá no componente que usou esse componente aqui Então como aqui no login Eu usei o componente app Def login layout e passei uma coisa dentro né coloquei elementos dentro tudo que tiver aqui dentro vai ser injetado aqui nesse NG cont então Através disso a gente consegue fazer né a injeção do ário dentro aqui desse componente que já tá pronto então pra gente testar Vamos colocar um p aqui vamos colocar um oi V tá aqui oi e se a gente voltar aqui pro navegador a gente já tá conseguindo ver o Oi então quer dizer que tá sendo injetado né no local correto então aqui a invés de colocar o oi a gente vai colocar o nosso formulário Então vamos vir aqui na nossa login component no nosso componente login component e vamos declarar aqui no Construtor dessa classe a criação né do nosso formulário então aqui a gente vai precisar importar o reactive forms module e aqui a gente vai declarar o nosso formulário que vai ser o login form e ele é do tipo form group e aqui eu tenho que colocar um ponto de exclamação para indicar que isso aqui vai ser declarado algum momento né ele começou como vazio mas aqui no Construtor eu vou declarar ele e aqui eu vou fazer dis P login form recebe New form group e aqui dentro do form group eu vou passar né Quais são os campos que vão ter dentro desse meu formulário então vou ter o meu e-mail que vai ser um New form control ele vai começar como uma string vazia e aqui eu vou colocar como validator dele de ser required e a mesma coisa pro PR password né então aqui password e aqui nos validators do e-mail eu também vou colocar validators pmail que já tem aqui esse validador e aqui na password eu vou colocar um validator também de me length Então me length e eu vou colocar como seis então Nenhuma senha né Pode ser menor do que seis caracteres a gente já coloca aqui como regra no validador do login form depois a gente coloca lá no validador do signup form e agora a gente vai entrar aqui no nosso HTML e vamos né linkcar esse nosso formulário com o formulário que a gente criou aqui dentro da nossa classe então aqui a gente vai passar a diretiva form group pra nossa tag então form group e aqui a gente vai colocar o nome do nosso form que é o nosso login form e aqui dentro a gente vai colocar os nossos inputs os inputs né se a gente olhar lá no figma eles são todos parecidos em todas as páginas né tanto T na página de login quanto na página de cadastro só muda aqui o placeholder né e o Label de cada input então a gente pode criar um componente genérico para ser esse nosso input então a gente consegue reaproveitar esse código então aqui antes da gente criar o nosso input vamos comitar as coisas que a gente já fez aqui no default login layout Então vou adicionar aqui as coisas que a gente fez antes a gente continuar para não ficar uma bagunça aqui o nosso código Vamos colocar um Fit então add default layout Style e agora a gente tá criando o nosso login component Então nós vamos criar aqui um novo componente usando o NG generate component vai ficar dentro da pasta components a gente vai chamar de input primary ou primary input boa então a gente tem aqui nossos components que tem o default login layout o nosso primary input esse nosso primary input vai ser um input normal e ele vai receber algumas propriedades aqui por input da classe né Então a primeira propriedade que ele vai receber @input é o tipo desse input Então esse tipo pode ser do tipo input types nós vamos colocar E aí nós vamos listar aqui esse tipo Então vou criar um uma interface aqui input types na verdade vai ser um Type que pode ser text text ou e-mail ou password né que são os tipos diferentes que aqui text para nome e-mail para e-mail e password para password e aqui input types e vai começar com o tipo input types né vai ser o valor default aqui input types ponto e o valor default aqui vai ser text né então beleza e isso aqui a gente já consegue passar pro nosso próprio texto Então aqui o Type dele Type vai ser o Type que tem lá na classe Além disso ele vai receber também o form control name então o form name dele que é uma string e aqui vai começar com uma string vazia então aqui a gente vai passar para ele o form control name e aqui o form name pra gente conseguir usar essa diretiva a gente tem que est com o reactive forms modules aqui importado então reactive forms module ele vai parar de dar erro porque isso aqui é uma propriedade específica do reactive forms modle pra gente criar formulários reativos Então tá por enquanto acho que é isso que a gente vai precisar passar pro input Talvez um Place holder aqui já vamos criar então input Place holder e é uma string também vai começar com uma string vazia aqui vamos passar um Place holder para esse nosso input e Place holder passando Place holder beleza e agora a gente já pode estilizar esse nosso input então o input ele vai ter um border radios de oo pixis ele vai ter um background color que é aquele cinza vamos ver aqui no figma é o mesmo cinza não não é o mesmo cinza é um cinza diferente então a gente já pode criar essa cor lá nas nossas variáveis né então aqui vamos dar o nome de Grey secondary BG é esse carinha aqui a gente vai precisar importar as variáveis aqui também então @import do P Barra do pontos Barra do pontos barra Styles barra verbos e aqui a gente pode usar Grey secondary BG tá errado border radios Ah é ponto e vírgula tá o border vai ser aqui para não ter nenhuma borda background color beleza a cor vai ser o nosso text color ponto size vamos dar uma lá no figma então Font size 16 e o Font weight é regular então deixa como tá vamos ver como é que tá ficando aqui a gente não criou ainda nenhum input então lá no nosso login aqui a gente vai adicionar alguns inputs né a gente precisa primeiro importar O componente do input então primary input component e agora a gente pode usar ele aqui no HTML que é app primary input voltar aqui para ver ele beleza ele já tá aparecendo aqui e a letra tá certinha tá então aqui a gente vai ter que colocar um pading nele então se a gente ver ele tem um pading de 13 em cima e embaixo 20 na lateral esquerda e nenhum pading aqui do outro lado então nós vamos colocar um pading de 12 em cima aí na outra lateral nada 12 embaixo e 20 ali na mais da esquerda voltando aqui vamos ver se ele pegou o pading perfeito tá com o pading e o IDF desse cara pode ser 100% também então IDF 100% voltando aqui a gente consegue ver que ele tá tá desse tamanho por quê Porque o forms não tem um idft 100% então aqui no estilo do formulário de login nós vamos colocar aqui o form quando como tendo um IDF de 100% também voltando lá pro navegador beleza perfeito já tá aqui o nosso input bem bonitinho da forma como ele tem que ser agora a gente precisa colocar o Label desse input e aquele ícone que fica aqui na lateral Então vamos voltar lá vamos continuar a construção do input então ao invés de ter o input assim puro a gente vai criar aqui um input rapper vai conter o meu input dentro e o Label eu vou ter o Label Labor for form name é o mesmo né usar o mesmo valor que a gente recebeu de input e aqui o Lab a gente vai receber como uma propriedade dessa classe também vamos colocar aqui como mais um input Label beleza e aqui o nosso Label tem a mesma estilização de tamanho do nosso input Então vamos colocar aqui por fora de tudo né então nós vamos ter aqui deixa eu colocar o input wrapper Vamos colocar o input dentro do input wrapper e tanto o Label quanto o input tem esse Font size e essa color aqui eu não preciso declarar somente pro input eu posso colocar aqui de forma Global beleza e aqui a gente coloca um text align start aqui para começar o Label né bem no começo do nosso input bem na esquerda E além disso a gente vai precisar também do ícone né do ícone que vai ficar ali na pontinha do input isso aqui a gente também pode receber do componente Pie que vai usar esse input aqui então a a gente vai criar aqui mais uma div que vai ser o input content dentro do input content Eu vou ter esse input aqui n o input que é de fato a tag onde a pessoa vai escrever a informação esse meu input content putut content vai ter um eft 100% só que ao lado desse input content ao lado desse input aqui eu vou ter o meu ícone então aqui eu vou colocar icon e aqui a gente vai colocar NG cont beleza e agora a gente vai selecionar esse icon e o icon aqui ele também vai ter que ter esse border radios e tal então esse pading aqui esse border radios a gente replica pro input content o IDF já tá 100% o background color não precisa colocar e o pading aqui a gente também vai precisar colocar no ícone porque o ícone tem um espaçamento ali dentro da caixinha Onde ele fica então se a gente ver aqui ó o Icone ele tem esse espaçamento de 13 13 13 nas laterais então aqui a gente vem e coloca um pad né de 13 de 12 para deixar certinho no deixar número quebrado aqui no ícone e um background color de aqui primary color beleza e agora lá no nosso login component quando a gente for chamar o app primary input a gente vai passar aqui um valor aqui dentro que vai ser o ícone que a gente vai utilizar Então a gente vai ter que baixar esses ícones aqui pra gente conseguir utilizar então eu vou exportar esse ícone aqui no formato de um svg cortar vou exportar esse outro aqui como um svg e agora aqui na nossa aplicação dentro da passa assets dentro de svg eu vou colocar esses dois ícons eu tenho o frame 1 e o Frame 2 o frame 1 aqui o primeiro que eu baixei foi o ícone do e-mail então aqui eu vou colocar email icon e aqui o frame do foi o password icon e aqui a gente pode passar com uma imagem uma imagem n que tem o Source bar assets bar svg barail icon.svg e aí lá no nosso primary input também a gente vai precisar estilizar Isso aqui vai ter a imagem ela vai ter que ter um tamanho máxximo né V colocar um he nela de no máximo aqui 20 pixis beleza agora voltando aqui vamos ver como é que tá Tá já tá aqui o icon né só que ele acabou ocupando tudo vamos ver por quê ver ele ficou com um IDF aqui de 100% Ah sim porque aqui a gente precisa fazer que o nosso input content seja um display Flex Beleza agora eles ficaram um do ladinho do outro e eu preciso colocar o border radios aqui também né no nosso icon então o nosso input ele vai ter border radios no topo esquerdo no topo direito ele não tem no baixo direito ele não tem e no baixo direito no baixo esquerdo ele tem enquanto o ícone é o contrário ele não tem nesses daqui mas ele tem nesses aqui do meio né então vamos voltar lá vamos ver perfeito aqui ó o ícone encaixou no fundinho aqui do input né então ficou aqui o ícone de e-mail agora a gente tem que passar as outras informações aqui no login component né pro nosso input Então a gente tem que passar aqui para ele o form name que é e-mail a gente tem que passar o tipo que é o tipo e-mail a gente tem que passar também o Label que é e-mail e um Place holder e vai ser aqui j@gmail.com perfeito ver aqui Ó tá certinho aqui o nosso input Beleza agora a gente já pode criar o outro input que é o da senha então aqui o tipo é password o nome é password e aqui your password E aí não vai ter nenhum Place holder e o ícone aqui vai ser o password icon né password icon svg voltando aqui já temos né a senha e o e-mail a gente precisa ter um espaçamento aqui desse Label no input também então vamos colocar um espaçamento aqui vamos ver de 10 pixels então voltando aqui no primary input a gente tem que ter um espaçamento né no input wrapper botar aqui um Label Margin borum de 10 pixis beleza e aqui no formulário a gente precisa que cada elemento dentro do formulário tenha um espaçamento Então vamos colocar o display Flex Flex Direction colum e o espaçamento entre cada item aqui do formulário Vamos ver quanto que é é 23 Vamos colocar aqui 24 para deixar certinho então o GAP é de 24 piis beleza V voltando aqui pro navegador ó já temos o nosso formulário bonitinho aqui só que se a gente ver aqui a password né não tá ficando com o Label em cima dela a gente precisa clicar algumas vezes no input até que ele apareça e por que que isso tá acontecendo isso aqui é algum erro na renderização do componente e se a gente abrir aqui o conso log a gente vai ver esse erro eu queria que esse erro acontecesse porque esse erro é um erro muito comum que eu já sofri bastante com ele e a eu queria mostrar aqui para vocês o que que acontece para que a gente consiga resolver Então aquela forma que a gente fez de colocar o form control name dentro do input né do componente input que a gente criou não funciona a gente precisa fazer um forward he nesse nosso componente input para que ele receba he do form control né E então injete no input que tá dentro dele então vamos abrir lá o nosso código e fazer essas alterações para que o input funcione direitinho e suma aqui esse erro do nosso console porque ele tá dizendo né que um form control name must be Used if parent form group então é como se o nosso form control name estivesse sendo usado sem ter um pai com o form group então aqui no nosso código a primeira alteração que a gente vai precisar fazer vai ser aqui no nosso primary input component mesmo a gente vai ter que colocar aqui nele dentro da classe do primary input component um implements implements control value accessor e aqui ele vai dar um erro né porque quando a gente implementa essa interface aqui a gente tem que declarar alguns mos mas a gente já vai ajustar isso depois a gente vai ter que vir aqui embaixo dos imports e colocar o ar providers e dentro do ar providers a gente vai ter que colocar o nosso for he a gente vai fazer provide NG value accessor use exist então para usar uma solução existente que é usando forward he e aqui a gente vai fazer o forward he para dentro do próprio primary input component e aqui por fim um multi como aqui deixa eu ver faltou fechar um parênteses beleza e aqui tem que colocar uma vírgula Tá e agora a gente vai ter que implementar aqui alguns métodos no nosso primary input component Então a primeira coisa que a gente vai precisar fazer é salvar o value do input aqui numa variável com uma string a gente vai ter que criar uma função onchange que é do tipo N que recebe nada e retorna nada e vamos duplicar isso aqui pro on touch it que isso são todas as funções que o input deve ter né aí aqui por fim no on input então quando o input receber um valor né for imputado pelo usuário o que que ele vai fazer ele vai receber um event que é do tipo event E aí aqui a gente vai salvar um valor como sendo event. target S HTML input event para dizer que é um evento de um input ponto value e aí a gente vai chamar this P onchange passando esse Val agora a gente vai ter que declarar um método WR value Olha já tá até sugerindo aqui para nós e aqui a gente vai fazer dis P value recebe value em vez de Object aqui eu vou trocar o parâmetro PR value e agora um register on Change ele já sugeriu aqui para mim dis que basicamente vai atribuir o this P on Change para essa função que eu recebi aqui que aí vai ser da ref lá que eu vou receber de fora do do P E aí a função set disable States Se eu quisesse ter uma forma de deixar o meu input aqui como disable por hora a gente não vai implementar porque a gente não vai precisar deixar disabled mas caso a gente quisesse a gente ia precisar implementar isso aqui e aqui ele tá dizendo que tá faltando mais alguma coisa né para implementar a interface control value accessor Vou colocar aqui no Fix para ver o que que é que tá faltando Ah e era a função register on touched então aqui embaixo do register on change a gente vai colocar register on touched e a gente vai fazer this P on touch recebe essa função aqui que eu recebi por parâmetro beleza aí agora a gente vai tirar esse input aqui form name a gente não vai mais receber issso daqui não vamos mais fazer dessa forma e aqui no nosso input a gente vai tirar isso que a gente estava fazendo né do form name dessa forma aqui vamos remover e o que a gente vai colocar aqui vai ser o seguinte a gente vai colocar o value e esse value vai ser aquela propriedade value que a gente criou lá e a gente vai criar aqui também o input que vai chamar aquela função ou input que a gente criou e passar O Event o evento de mudança e aqui o for aqui do Label a gente pode deixar aqui um for pro Label na verdade aqui ter que ter umut name né Vamos ter que criar aqui mais uma propriedade o Label o input beleza aí agora por fim aqui no nosso login ao invés da gente passar o form name aqui a gente vai trocar isso por input name que vai ser usado lá pro for Lab E aí passar o form control esses caras aqui a gente vai fazer o seguinte a gente vai passar da forma como a gente faria para input aqui comum form control name E aí vamos passar aqui como e-mail e aqui form control name como password se vocês verem aqui o nosso primary input o component aqui do primary input Ele não recebe um form control name por input mas como a gente tá fazendo esse forward ref né a ref vai ser compartilhada aqui para dentro desse elemento e vai ser colocada aqui no elemento corretamente tá no elemento input Então dessa forma aqui deve funcionar Vamos abrir lá o navegador e vamos ver se ele parou de dar o erro então se a gente der um Reload aqui a gente já consegue ver que não tá dando erro nenhum e aqui o nosso input agora tá renderizando da maneira correta e agora pro nosso formulário ficar igualzinho ao figma faltam só alguns ajustes que é o espaçamento entre o botão aqui o input esse testinho aqui do forgot password e colocar a fonte correta né que a gente ainda não configurou a fonte aqui popins do nosso projeto Então vamos voltar lá Vamos começar com o espaçamento entre o input e o botão então aqui na tela de login nós vamos pegar né o formulário e vamos colocar um margem borum nele aqui margem borum deixa eu ver aqui de quanto a gente precisa colocar de 34 pixels então margem borum 34 pixels Beleza agora a gente vai colocar o forgot password Então a gente vai colocar um spam lá no nosso formulrio então aqui vamos vir no formulário login tem a imagem aqui do input então aqui embaixo nós vamos colocar um spam forgot password E aí vamos estilizar esse spam aqui como t no Font size deixa eu ver de 14 pixels e a cor é Aquele roxo escuro então fonte size 14 pixs texto de decoration Underline para colocar linha embaixo e o Color É o secondary Color vamos entrar aqui nas variables secondary color beleza e aqui a gente precisa né no nosso login também importar as variáveis aqui no arquivo de CSS do login pronto vamos voltar aqui pro navegador perfeito só que agora a gente precisa alinhar esse forgot password aqui na direita Então vamos colocar aqui um text Aline end vamos ver perfeito bem certinho aqui conforme o figma e agora falta só a gente ajustar a fonte aqui né a fonte Poppins para ficar igualzinho ao design lá então vamos abrir aqui o Google fonts e com o Google Fontes aberto a gente vai procurar aqui pela fonte que a gente quer que é a fonte Poppins e vamos adicionar aqui as que a gente precisa Então vamos botar get fonte get embeded code e a gente vai copiar aqui o link né para colocar na nossa aplicação Então vamos voltar aqui abrir o index HTML e aqui dentro da tag head dentro do Index HTML o index HTML é o arquivo de entrada aqui da nossa aplicação tá da nossa aplicação angler é o arquivo que renderiza o primeiro componente todos que renderiza o componente app root dentro do do app root a gente tem o app router que aí vai renderizar todas as rotas de acordo com a URL E aí o app router aqui renderiza né redireciona pro nosso login component então a gente coloca o Import das fontes aqui no index HTML dentro da tag head colocado isso aqui a gente vai vir aqui no Styles que é o arquivo de estilo global e vamos colocar um Font family para todo mundo de Poppins para aplicar fonte Poppins para todos os elementos e aqui um s serif para caso não consiga carregar fonte use uma fonte sem serifa voltando aqui pro navegador a gente já tá vendo com a fonte Poppins bem bonitinho né conforme previsto lá no figma Então já temos aqui a nossa tela de login criada agora a gente vai partir pra lógica né de enviar essas informações que o usuário preencher aqui pro backend e depois a gente vai construir a nossa tela de cadastro na aplicação a primeira coisa que a gente quer fazer é criar a função de submit quando o usuário clicar lá no botão de login para ele submeter o formulário né e fazer a requisição pro backend como é que a gente vai fazer isso a gente tem que achar uma forma né de enviar essa função de submit aqui para dentro do nosso app default login layout que é onde está os botões ali da nossa tela então aqui no nosso app default login layout a gente vai criar uma propriedade de output que é algo que vai estar saindo do componente não entrando que é o evento de clique ó aqui a gente vai criar o output vamos chamar ele de submit e aqui vamos dar o nome da a propriedade de on submit Vamos criar como um New new event emitter que é um novo emissor de evento e agora aqui a gente vai criar uma função submit e aí quando for chamada essa função submit a gente vai fazer this P on submit ponto emit e pronto e agora aqui no nosso HTML quando o botão aqui o botão primary for clicado então quando ele tiver um clique a gente vai chamar a nossa função submit essa função submit vai disparar aqui o esparo do do event emiter e O Event emiter tem que est sendo escutado aqui pelo componente de Fora que é o componente aqui de login Então esse componente vai passar uma função de submit para esse App default login layout que aqui a gente vai criar também a nossa função de submit Vamos criar aqui embaixo a nossa função submit e por enquanto vamos colocar só um conso log de dis P loginform pon value perfeito vamos voltar aqui pro navegador e vamos ver se tá funcionando então eu vou abrir aqui o console né pra gente ver os logs aqui eu vou preencher o e-mail então Fernand Kiper @ip per.com sei lá vou botar uma senha qualquer e login now aí ele já logou aqui ó Então tá chamando a nossa função submit tá passando o e-mail e a password beleza e agora vamos criar né a outra função que é a função que vai redirecionar o usuário pra tela de cadastro que é quando ele clicar aqui no botão sign up now Então vamos voltar aqui lá no nosso app default login layout a gente vai criar mais um output só que dessa vez vai ser do output de navigate on navigate new event imiter vamos duplicar aqui a função de submit nós vamos chamar de navigate a gente vai fazer desp on navegate emit e aqui no HTML quando o botão secondary for clicado ele vai chamar função de navegate que vai emitir o evento de navegate e agora aqui no nosso login a gente vai ter que passar também uma função que vai cuidar do navegate então navegate que a gente vai chamar de navegate que vai navegar pra outra tela como ainda não existe ele vai dar erro então aqui vamos duplicar nós vamos ter o navegate perfeito e aí vamos só testar se tá funcionando então aqui eu vou colocar um valor um valor sign up now e ele já tá logando aqui então tá sendo chamado também a função o navegate é mais fácil da gente fazer então já vamos implementar ele aqui aqui como é que a gente vai fazer aqui no construtor da nossa Classe A gente vai receber o nosso router então Private router do tipo router e a gente vai usar essa dependência aqui de router então this router P navegate para navegar pra página de signup que vai ser aqui signup barra signup e aqui não pode ser uma string direto tem que ser um Array beleza só pra Barra signup perfeito vamos voltar aqui vamos clicar no botão de signup e ele vai dar erro porque não existe né nenhuma tela aqui com o RL signup Então tudo bem tá tudo certo agora vamos partir aqui pra lógica de submit que é a lógica de enviar os dados pro nosso backend aqui a gente vai ter que fazer o seguinte a gente vai ter que criar um novo service que vai ser o service que vai concentrar a chamada pro backend como é que a gente vai fazer isso a gente vai usar a se do angular também então vamos usar NG generate service e vamos colocar dentro da pasta Services e nós vamos chamar de login login service né quando a gente der um nome aqui de login ele já vai botar como login psice então aqui dentro de app a gente vai ver que tem a pasta components a pasta pages e a pasta Services que vai est concentrado aqui os Services da nossa aplicação e é aqui dentro desse login service que a gente vai colocar a lógica para enviar os dados de login pro backend e pegar o retorno do backend salvar o token ali na sessão do usuário então agora aqui dentro do Construtor do nosso login Service a gente vai colocar como dependência o htp client Então a gente vai criar aqui um Private htp client que é do tipo htp client htp client que vem aqui dentro do angler comon htp beleza e a gente vai criar uma função que é login essa função login vai receber aqui por parâmetro os dados né então por exemplo vai receber o name que é uma string e a password que é uma string e aqui a gente vai fazer return this. HP client ppst na URL bar login por enquanto a gente não vai colocar aqui a URL do nosso backend porque a gente não tem e vamos passar aqui um B né E esse B vai ter o name e a password do usuário aí quando o backend nos retornar essa requisição aqui eles vão retornar um token né E esse token que vai ser utilizado paraas próximas requisições aqui dentro da nossa aplicação porque a gente tá fazendo uma aplicação com tela de cadastro e de login e aí quando o usuário está logado de fato ele tem um token válido para fazer as próximas requisições dentro da aplicação né fazer as requisições para usar a aplicação de forma autenticada como por exemplo quando a gente acessa o Facebook a gente faz o nosso login e só depois de logado a gente consegue mexer nas outras coisas dentro do Facebook então a gente vai ter que fazer uma forma de interceptar aqui essa requisição Antes de Voltar aqui pro nosso login component e salvar esse dado de token aqui na sessão do do nosso usuário Então a gente vai fazer isso tudo dentro aqui do nosso login service então aqui a primeira coisa que a gente precisa fazer é tipar o retorno aqui desse método post né o que que vai voltar lá do backend para fazer isso a gente vai ter que criar uma nova pasta aqui do lado da pasta components da pasta pages e da pasta Services vai ser a pasta types e aqui dentro a gente vai colocar um l login response p type.ts e aqui na verdade eu vou colocar como minúsculo então login response response typs e aqui a gente vai colocar um Export Type login response e dentro desse login response eu vou ter o token que é uma string e por enquanto vai ser isso depois a gente pode decidir né se o back vai precisar mandar mais alguma coisa para nós eu vou ter o token o nome do usuário Talvez o name aqui uma string e aqui no login service a gente vai colocar aqui como retorno do método post esse login response e agora aqui ao invés de retornar direto o observable aqui do do HP client post a gente vai fazer um Pipe nesse observable para pegar o valor pegar o value aqui retornado que o value é do tipo aqui ó se a gente for ver é do tipo login response Então a gente vai pegar esse value nós vamos fazer session Storage P set item e aqui vamos colocar sei lá off token e aqui value p Token e ele tá dando um erro porque a gente tem que colocar um Tap aqui em volta então Tap para transformar isso aqui né em algo síncrono a gente tem que importar o Tap do rxjs colocando o Tap aqui em volta né a gente já consegue ter o valor síncrono aqui para salvar na nossa S Então a gente vai salvar o token na s e podemos salvar também o username como sendo Val Ponto beleza e agora lá no nosso login component aqui na função O que que a gente vai fazer a gente vai ter que aqui ó receber mais uma dependência que vai ser o nosso login service aqui como sendo login service isso aqui a gente precisa colocar nos providers do nosso componente então providers login service beleza e aqui a gente vai fazer dis P login service subscribe dis P login service login e aqui a gente vai enviar né pelo login o nosso dis loginform valil e dis p loginform pval p password e aqui a gente vai fazer um subscribe para pegar a resposta dessa requisição e aqui no next quando der sucesso a gente vai fazer um console log sucesso e quando der erro aqui error a gente vai fazer um conso log de error só que depois a gente vai substituir né para modal mostrar o modal de erro pro usuário então Next O error beleza vamos voltar pro navegador se a gente ver aqui o navegador parece está dando um erro na página de login então vamos acessá-la aqui de novo tá dando um erro porque a gente não tem o HP client injetado Ah porque a gente tá usando HP client aqui no login service e a gente não injetou ele em nenhum lugar então a gente vai ter que fazer isso e para injetar o HP client a gente vai abrir aqui nosso app config e aqui no arade providers a gente vai colocar mais um provider que vai ser o provider do HP client então provide htp client Isso aqui é uma função with fet para passar o fet também dessa forma a gente vai ter o HP client né injetado em toda a nossa aplicação então ele vai est provido de forma Global né todos os componentes vão poder usar o HP client todos os Services também então voltando aqui pro navegador Vamos tentar acessar a rota de login e agora ela tá renderizando beleza agora vamos mandar uma requisição aqui e vamos ver né o que que vai sair daqui de dentro Vamos mandar aqui login now Ó ele mandou uma requisição de login passando o name e a password beleza aqui no endp bar login que tá dando erro porque a gente ainda não tem o backend beleza e aqui ele tem que ter logado né error quando Desce lá o error no nosso login component e aqui ele já tá logando um erro com sucesso então beleza Tá funcionando essa nossa lógica e agora a gente pode construir as nossas tratamentos aqui de erro de sucesso né que vão ser os modais de erro de sucesso e agora para criar os toasts de erro e de sucesso aqui pro nosso login a gente vai usar uma biblioteca que é essa biblioteca aqui ngex toast F Então a gente vai usar essa biblioteca porque ela facilita a criação de toasts aqui na nossa aplicação porque ela já tem os componentes prontos e a gente consegue só usar o service aqui do toast para exibir os toasts na tela Então vamos abrir aqui a nossa aplicação e configurar a biblioteca então aqui a gente vai ter que fazer um npm install engex bar toast r e ele vai instalar aqui para nós e pronto com as dependências instaladas a gente vai ter que fazer algumas com por ações aqui na nossa aplicação a primeira delas é adicionar o provider do toast r e o provider dos animations né do browser animations aqui no nosso app config que nem a gente fez com o provider do htp client Então a gente vai colocar aqui provide tost R E também o provide animations o provide animations ele vem dentro de uma biblioteca do angler também então vamos ter que importar aqui na mão já que ele não sugeriu para nós então Import from @angular bar blau platform browser bar animations a gente vai importar o provide animations Beleza agora a próxima configuração que a gente vai precisar fazer é aqui no nosso arquivo de estilos Global a gente vai ter que importar a estilização dos toasts né porque os toasts vão ser configurados aqui de forma Global na nossa aplicação então o Import dos estilos tem que ficar aqui no Style CSS que é o arquivos de estilo Global aqui da nossa aplicação Então se a gente vier aqui pra documentação do nnx toast ele vai nos dizer aqui ó o regular toast basta a gente importar esse estilo aqui então colando esse estilo beleza e agora aqui em vez de colocar conso log a gente vai colocar dis P toast service ponto e aqui a gente pode colocar se a gente quer um toast de erro de sucesso de informação então aqui no carro é um caso é um de success então login feito com sucesso e o outro aqui de baixo é um erro né e aqui eu vou colocar erro inesperado gente novamente mais tarde bele Bel e agora a gente já pode testar novamente aqui no Browser Então vamos voltar aqui pra nossa página Vamos colocar aqui um e-mail uma senha vai dar erro porque a gente não tem backend erro inesperado tente novamente mais tarde mas ficou verdinho porque aqui eu deixei success então vamos trocar para error vamos voltar aqui vamos tentar de novo vou colocar uma informação qualquer aqui login erro inesperado tente novamente mais tarde então perfeito já temos agora o controle de erro e de sucesso basta só a gente criar a tela de antes da gente começar aqui a criação da nossa página de signup Vamos só fazer mais uma configuração aqui na tela de login pra gente adicionar a validação né se o e-mail foi preenchido e se tem o número mínimo aqui de caracteres na senha antes do usuário poder clicar no botão de login now então aqui no nosso default login layout a gente vai receber mais um input que vai ser o d primary Button vai ser um boleano e ele vai começar como true esse disable primary Button a gente vai usar aqui para controlar se o botão primary está disabled Então vamos colocar aqui beleza e aqui nós vamos passar a propriedade disabled pro botão e usar esse disable primary Button agora lá no nosso login component a gente vai passar essa informação né pro default login layout Então nós vamos passar esse disable primary Button e a gente vai pegar essa informação de loginform pvid para saber se ele está válido ou não E aí aqui no default login layout a gente vai adicionar uma estilização pro botão para quando ele estiver disabled então quando ele estiver disabled ele vai ficar com uma oped de 0.8 e aqui na verdade né tem que ser not valid então ele vai est disa quando não tiver válido né o formulário então aqui voltando pro navegador ó a gente já consegue ver que tá como opacidade aqui no botão e agora vamos preencher aqui com um e-mail e uma senha e ele ficou válido Ó ficou roxinho Então quer dizer que que tá válido o formulário se eu tirar o número mínimo de senha ele não fica mais válido boto o número mínimo mas se eu tiro aqui o e-mail ele não fica mais válido Então tá perfeito aqui o controle né da validade do formulário Agora sim a gente pode criar a tela de signup então vamos comitar aqui todas as alterações que a gente fez né que foi pra criação da tela de login então Fit Create login page perfeito e agora a gente vai criar mais uma pasta aqui dentro de Pages só que a gente vai copiar tudo que tem dentro aqui da pasta de login porque muitas coisas aqui do login e do signup vão ser iguais vai mudar só o miolo aqui do formulário Então a gente vai poder copiar isso daqui então vou botar um copy paste ele vai colar aqui uma nova né ele vai colar aqui uma nova pasta eu vou renomear para signup e aqui a gente vai renomear todos os componentes PR sign up signup beleza sign up e aqui o Styles também o componente vamos ver aqui se ele vai tá com algum erro vai tá com erro aqui nos imports então do template here e do Styles eurl mas é só atualizar e Teoricamente vai dar tudo certo agora a gente já pode começar fazer as alterações aqui a primeira alteração que a gente vai fazer é no login form Então em vez de ter e-mail e senha a gente vai ter nome também então aqui name a gente vai colocar um min length também no Name pelo menos né três letras que mais a gente vai ter a confirmação da password aqui password confirm e em vez de login form a gente vai chamar de signup form então aqui signup form for beleza e aqui caso o usuário clique no outro botão vai ser para redirecionar para login aqui ele tá dando um erro que a gente precisa atualizar o tipo aqui né não é mais login form esse agora vai ser signup form Então vamos atualizar a tipagem e aqui a gente vai ter um name e vamos ter também uma password confirm beleza e aqui aqui parece tudo certo agora vamos vir aqui no HTML a gente vai ter o nosso sign form vamos atualizar aqui sign for beleza e aqui em cima do eil a gente vai ter o name V mudar aqui name name name não aqui o Type é text o Label é name o holder imagem é a mesma por enant vai ter mais uma aqui da password que vai ser a password confirm e password confirm password confirm Type a password aqui confirm your password não vai ter esse forgot password beleza e aqui parece tudo certo só que em vez de login to your account o texto é diferente aqui em cima também então vamos ver aqui no figma como é que é pro signup é sign in and start today aqui sign in start today o primary Button vai ser sign up now e o outro agora vai ser login now a gente vai vir aqui no app routes Vamos criar mais uma rota duplicar a rota aqui de login então agora vai ser a rota signup nós vamos chamar de signup component nós temos que renomear aqui o nome do componente também então aqui no signup component a gente tem que mudar para app signup e aqui o nome do componente é signup component aqui no teste a gente vai ter que mudar o Import também muda beleza e aqui na as routes a gente vai importar o signup compit pronto vamos voltar aqui estamos na tela de login e vamos tentar acessar a tela de signup perfeito tela de signup aqui né aparecendo vamos digitar algumas coisas aqui o nome um e-mail senha confirmar senha e pronto login e ele vai dar erro então beleza Tá funcionando aqui a nossa tela de signup e a tela de login Então no próximo vídeo a gente vai criar o backend para fazer toda a integração aqui com frontend que a gente construiu no vídeo de hoje então se você tá assistindo esse vídeo e já saiu a parte dois ele vai aparecer aqui do lado e se ainda não saiu Calma o coração que logo logo vai sair aqui no canal e Enquanto isso você pode assistir essa série de vídeos construindo aplicações do zero aqui do canal esse vídeo vai ficando por aqui um agradecimento especial a todos os membros aqui do canal por todo o carinho e suporte que vocês dão pro Canal e um agradecimento especial PR os membros seniors aqui do canal Vocês moram no meu coração é isso galera e até o próximo vídeo