Aula 11 - Implementar o formulário de login na homepage e de criar conta [Criação de Sites Python]

bom galera agora o que a gente vai fazer é colocar o nosso formulário de login aqui na nossa Rampage Tá eu vou escolher para nossa Rampage então aqui no nosso rounds na nossa home page aqui que a gente vai fazer o nosso login quando a gente for criar uma conta eu vou ter uma nova rota aqui para criar uma conta estão em uma das coisas que a gente vai fazer nessa aula agora então vamos começar a implementar essas coisas primeira delas como eu falei a gente vai separar né a nossa tela de login que vai

ser essa daqui com uma tela com até pausar aqui nosso site depois a gente bota ele no ar de novo com uma tela de criar conta então vou clicar aqui ó o app ponto round e aqui a gente vai botar o Barra criar conta beleza que é onde a gente vai criar nossa conta pode botar tudo junto assim ou com hífen você escolhe e a gente vai definir a nossa função aqui criar conta beleza por enquanto eu vou simplesmente devolver né dar um return de Ranger templates o template criar conta né criar conta ponto HTML

que por enquanto ele não existe ainda a gente vai ter que criar ele aqui né então vou chegar botão direito novo arquivo HTML né E aí vai ser o arquivo criar conta HTML Beleza a gente já já edita esse cara daqui vamos continuando lá na nossa roda agora o que a gente vai ter que fazer a gente tem que pegar aquele nosso formulário que a gente criou lá no nosso formas de login de criar conta e importar eles para cá para a gente poder passar esse formulário porque para esse formulário aparecer no HTML a gente

vai ter que fazer um processo muito parecido com o que a gente fez aqui no usuário a gente vai ter que pegar uma informação e enviar para o HTML nesse formato daqui tá vendo pra gente conseguir fazer isso a gente vai precisar efetivamente importar esse formulário aqui então vou fazer assim ó from fake pinterest.formes que a gente tem lá o nosso formulário né Import E aí a gente vai cortar aqui o nosso fome login e a gente vai importar também o nosso fome criar conta Beleza então nosso formulário de login nosso formulário de criar conta

e aí o que a gente vai fazer é que na nossa tela principal a gente vai ter o nosso formulário de login e na nossa tela de criar conta de vai ter o nosso formulário de criar conta eu vou chegar aqui e fazer assim ó meu forme de login vai ser o forme login e a gente vai passar agora para o html no seguinte formato forme igual a login e aí repara o seguinte agora no criar conta o que que eu vou fazer não criar conta para fazer assim ó eu forme criar conta vai ser

o forme criar conta e eu vou passar para ele também com a variável chamada de forma Olha lá forme criar conta então repara o seguinte Apesar daqui essas duas variáveis eu poderia ter colocado simplesmente fome parece um formulário Possivelmente formulário mesmo apesar dessas duas variáveis aqui estarem com nomes diferentes eu vou jogar elas por HTML com o mesmo nome lembra sempre que esse nomezinho que você escreve que antes do sinal de igual é o nome que essa variável do formulário login vai ter lá no nosso HTML ou seja aqui no home page HTML quando eu

quiser usar esse cara aqui quando quiser usar o formulário de login a gente vai fazer referência para ele com esse nome que tá aqui o nome fome e fins de propósito para esses dois caras terem o mesmo nome por que que a gente vai fazer a gente vai adaptar o nosso home page HTML e aí o nosso criar conta vai ser simplesmente uma cópia do nosso home page só com um outro formulário formulário de criar conta Beleza a gente vai ver até exatamente como que a gente vai fazer isso de uma forma inteligente então vamos

lá primeiro para nossa tela de login então para nossa tela de login a gente vai ter que implementar esse formulário dentro do nosso HTML e aí eu vou colocar num formato aqui mais para o final né assim que a gente for avançando a gente vai depois editando e colocando as coisas mais bonitas aqui digamos assim mas eu vou botar depois dos nossos títulos todos aqui a gente vai acrescentar o nosso formulário sempre que você for colocar uma formulário dentro do HTML você vai colocar ele dentro de uma tag de formulário que é essa tagzinha fome

aqui do HTML e aí repara o seguinte a tag forme do HTML é uma tag especial porque ela vai dizer né que você vai carregar aqui um formulário e quando você for carregar esse formulário aqui você tem que passar para ele um parâmetro chamado de meta igual tá post o que que é isso daqui esse aqui é o seguinte quando você entra nos sites normalmente né quando você tá só visualizando um site tá fazendo um método que a gente chama de get ou seja está pegando as informações daquele site né get em inglês é pegar

o método de post para você enviar informações como eu tô criando um formulário aqui o usuário que for usar esse site ele vai nesse formulário e enviar informações para mim como ele vai enviar informações para mim eu tenho que dizer para ele que esse formulário ele vai ter o método post E aí consequentemente como esse formulário tem o método post ou seja como essa página HTML ela tem alguém que tem o método post lá nos meus rounds lá nas minhas rotas aqui eu tenho que dizer para ele o seguinte eu tenho que dizer olha só

você tem que permitir os métodos que ele tem que permitir só um método get que é o padrão Ou seja quando você não preenche Nada Como está esse caso aqui embaixo ele só tá permitindo método Guedes Mas também você tem que permitir o método post você tem que fazer isso quando Lira você tem que fazer isso daqui sempre que você tiver um formulário dentro dessa página HTML que está carregando ó sempre que você tiver uma formulada e essa perna HTML está carregando e esse formulário que tiver o método post Beleza então a gente vai ter

que fazer isso aqui e a gente vai ter que fazer isso aqui também no nosso botei 2 aqui no nosso criar conta Beleza então agora a gente tem esse cara daqui Pronto né para receber o formulário efetivamente então agora a gente criou o forme e agora a gente vai carregar esse formulário de login e para carregar o formulário de login como que a gente vai fazer isso a gente vai usar esse nome aqui nome é forme porque foi o nome da variável que eu escolhi então Apesar dele ser um formulário de login aqui dentro do

HTML ele se chama forme e lembrando Sempre que você quiser carregar uma variável aqui dentro igual a gente fez lá na nossa tela de perfil você vai botar ela entre duas Chaves então isso daqui vai ser o nosso formulário só que acontece se eu colocar só desse formato que você tá vendo aqui ó vamos rodar o site aqui eu vou entrar lá no meu Main vou rodar nosso site se você quiser não precisa fazer no seu só para você ó eu vou rodar isso daqui você não precisa fazer no seu rodeio botei ele aqui para

rodar tá vendo nosso site já tá no ar mas se você quiser pode rodar também no seu só para você visualizar Olha só quando você carrega o formulário ele vai aparecer nesse formato daqui que que significa isso aqui é um objeto Python Ou seja quando você carrega o formulário dentro do formulário você tem vários Campos que são todos aqueles Campos que estavam lá no nosso formas todos os campos que aqui ó se você abrir lá o seu forms são esses Câmbio você tá vendo aqui ó o campo de e-mail campo de senha campo de botão

de confirmação mesma coisa porque criar conta o campo de e-mail de username assim vai são esses campos aqui então formulário ele nada mais é do que um objeto inteiro o que você quer carregar no seu HTML não é o formulário em si são cada um dos Campos do formulário então aqui na nossa Rampage ao invés de a gente simplesmente colocar forme aqui que que a gente vai ter que fazer a gente vai ter que carregar várias informações desse formulário e vamos lá vamos entender quais são essas informações a primeira delas que você tem que carregar

sempre que você colocar no formulário é acsrf token tá e o que que é esse csrf token que você coloca aqui é assim mesmo que você escreve tá sem parênteses no final esse cara daqui essencialmente é uma trava de segurança para alguns ataques que é hackers fazem né dentro de formulários do seu site reparem esse formulário ele consegue enviar uma informação para dentro do seu servidor por dentro do seu sistema Então como ele consegue ele é meio que uma brecha de segurança digamos assim o csrf ou Quem garante que esse formulário vai ser sempre validado

quando você enviar essa informação não vou entrar alguns detalhes de como é que isso acontece por trás até porque o flash que já gerencia isso para gente mas esse srf token a regra é o seguinte sempre que você tiver um formulário E se for carregar esse formulário dentro do Python né você vai trazer ele para o HTML mas tem que colocar esse token aqui dentro para garantir a proteção dele inclusive o flash que vai até te dar uma mensagem de erro se você não fizer isso daqui em algum momento Beleza então Coloque aqui é a

primeira coisa logo embaixo da tag forma abre a tag forma a segunda coisa bota o seu token E aí agora a gente vai colocar cada um daqueles Campos E aí para cada Campo a gente vai fazer o seguinte ó forme ponto e-mail que esse aqui é o campo de e-mail tá e a gente tem o forme ponto e-mail ponto labo o que que é o Label o Label é o título desse Campo daqui é o nome desse Campo Então quando você chegar lá no seu forno não sei se você lembra a gente colocou um Labor

aqui ó tá vendo e-mail senha fazer login esses nomes que você tá vendo aqui são os labels dos seus Campos então é sempre fome ponto o nome do Campo Tá vendo e-mail que eu escrevi aqui É exatamente esse texto daqui Se eu tivesse escrito aqui e-mail login aqui no HTML tem que ser em meio login mas eu coloquei só e-mail de propósito E esse aqui é o Label é o título Então vou até colocar o título ó antes do campo então a gente vai colocar o nosso token o nosso campo de e-mail e agora a

gente repete esse mesmo processo para todos os outros Campos eu vou colocar aqui ó ao invés de ser dois Campos de e-mail né aqui agora eu vou mudar vai ser o campo de user name deixa eu ver lá se é isso mesmo Campo dos Enem meu na verdade não precisa ele só precisa do campo de senha ó então aqui vai ser o campo de senha e aqui senha e aí o nosso botão esse botão aqui ó o botão confirmação ele não precisa de um Label porque ele é um botão então automaticamente ele já tem aquele

nome então vai ser fome ponto botão acho que eu chamei de Botão confirmação tem que ser exatamente o nome que está escrito aqui ó botão confirmação vem aqui botão confirmação beleza e aí repara que cada um dos Campos você vai colocando com esse parênteses aqui no final você vai ver lá na frente porque isso aqui vai permite a gente formatar esses campos deixar ele mais bonitos mais personalizados e tudo mais então com isso a gente implementou esse formulário na nossa página de login se você chegar ó no meu caso ele tá rodando aí no site

se você não tiver rodando aumentar ele para ele botar o site no ar de novo se a gente chegar aqui agora ele tem um F5 olha só ele aparece ao campo de e-mail o campo de senha e o botão fazer login por enquanto ele não faz nada clica aqui ele não faz absolutamente nada né no caso aqui o e-mail obviamente um e-mail inválido né esse aqui é um e-mail só de teste que eu tô usando aqui na plataforma Então também não adianta nem mandar e-mail para esse daqui que só que nem é um e-mail meu

então nem consigo fazer acessar esse e-mail aqui é só em meio de teste que a gente tá usando mas o nosso formulário já tá aqui e aí na próxima aula a gente vai começar a criar essa funcionalidade de fazer login só que antes disso eu quero fazer esse mesmo processo agora que a gente fez aqui pra nossa página criar conta só que é para o seguinte a nossa página criar conta eu não preciso criar uma HTML dele inteiro a nossa página criar conta ele é exatamente a mesma coisa da nossa página login com uma diferença

o formulário que vai ser carregado aqui não vai ser esse formulário da home page ele vai ser outro formulário inclusive ele vai ter mais campos dentro desse formulário Então olha só eu não vou querer editar o meu Body inteiro eu vou querer editar só esse campo do formulário daqui a gente vai editar o nosso título e eu vou só esse campo do formulário Então a nossa tela de criar conta ela não é um HTML cru assim como a gente fez lá na nossa tela de perfil a nossa tela ela vai fazer um extends né então

bota lá X tende do nosso home page ponto HTML beleza só que aí aqui a gente vai editar primeiro o nosso bloco de título né esse bloco aqui de título Olha lá já vou chegar aqui selecionar ele ó contra o C vou vir aqui control V que eu vou chamar aqui ele de criar conta fake Pinterest beleza só para ficar diferente daquele nosso é da nossa tela home page e agora olha só repara o seguinte agora eu não quero editar o meu Body inteiro eu quero editar só esse pedaço formulário o que que eu posso

fazer eu posso chegar aqui e criar um novo bloco que vai ser o bloco formulário E aí esse bloco formulário olha só a gente vai fechar ele logo eu vou abrir ele logo antes do fome eu vou fechar ele logo depois do forme E aí repara o seguinte quando você faz um extenso home page HTML lembra que lá na nossa tela de perfil a gente aqui chegou e fez assim bloco Bari quando você coloca um bloco novo aqui né no caso aqui que seria o bloco Bari que é esse bloco que a gente colocou aqui

na nossa home que envolve esse bloco aqui ele engloba toda a nossa tag bare do HTML tá vendo todo esse bloco aqui ó até aqui embaixo quando você coloca isso aqui dentro dessa nova tela HTML você tá dizendo pro parko é o seguinte Olha só todo esse bloco Bari antigo que tinha aqui deleta ele Ignora ele nesse caso do criar conta eu não vou editar o bloco baile eu vou editar só o bloco formulário E aí o que que vai acontecer como eu tô editando só o bloco formulário and Block como eu tô editando só

o bloco formulário toda a estrutura do bloco bar e continua vindo para esse HTML então ele vai ter isso aqui ele vai ter o H1 ele vai ter esse H2 aqui esse pedaço daqui ele vai ser editado só com um bloco formulário faz parte do bloco baile nas outras telas que eu for simplesmente editar o bloco baile eu não preciso editar o bloco formulário ele já vai sumir naturalmente porque porque lembra quando você Edita o bloco baile Ele simplesmente vai jogar isso tá aqui fora e na sua nova tela vai carregar as informações que você

quer dali de dentro nesse nosso caso daqui do criar conta eu só quero editar o bloco formulário mas no nosso caso do perfil a gente está editando quem eu não tô editando o bloco formulário eu tô digitando o bloco bar inteiro ah Lira mas eu tenho que editar o bloco formulário na minha tela de perfil não porque como você já tá editando o bloco bari e o bloco formulário tá dentro do bloco Bali ele já vai sumir automaticamente porque lembra tudo do bloco baile vai sumir sempre que você chamar ele agora a gente vai fazer

a mesma lógica por formar aqui então aqui no nosso bloco formulário a gente vai carregar todo esse formulário aqui ó control CPA aqui control c tá no nosso formulário vem aqui no criar conta contra o V tá vendo e aí aqui a única diferença repara o fome vai ter o mesmo nome de forma porque lá no nosso round Eu chamei ele de forma também a gente já liberou o método post para ele beleza e aí aqui a única coisa que eu vou precisar fazer é colocar os novos Campos aqui eu tenho um e-mail senha e

no nosso formulário a gente tem e-mail e username sem confirmação de então agora a gente só tem que acrescentar esses campos ó no campo de e-mail eu vou acrescentar aqui ó abaixo dele o nosso campo de use your name Então vamos mudar aqui para your name Label e mandar aqui para o campo e user name e a mesma coisa para sempre a nossa de senha eu vou chegar aqui e vou colocar o nosso bloco de senha A diferença é que esse bloco aqui de senha ele vai ser o de confirmação de senha então aqui vai

ser confirmação Vamos ver até como é que eu chamei ele lá no forno confirmação underline senha então ele vai ser a confirmação e senha confirmação_100 e o botão vai ser o mesmo botão que tá aqui beleza não precisa se preocupar muito com o enter aqui não né o tabizinho depois no final a gente vai ajustando todos eles quando a gente for ajustar visualmente aqui vamos olhar para ver isso aqui tudo tá funcionando ó meu site continuando a se o senhor não tiver é só rodar o mend de novo se eu chegar agora aqui a ideia

F5 né Vamos lá F5 que eu tô nessa tela daqui vamos entrar agora na nossa tela criar conta ele carregou a nossa tela criar conta tá vendo com o nosso formulário direitinho ele não faz nada ainda mas tá rodando certinho Tranquilo então nessa aula eu vou encerrar por aqui e aí na próxima aula a gente cria essa funcionalidade de login de criar conta efetivamente do usuário vamos lá