Veja nesse artigo
Introdução
Neste post vou mostrar como criar uma tela de login com VueJS.
Este é uma continuação do Projeto ToDo List com VueJS, caso você queira pegar o código fonte atual do projeto, clique aqui. Ou se preferir ver a playlist com o desenvolvimento do projeto, clique aqui.
Eu vou fazer a parte de criação de usuário no projeto, para poder vincular os usuários as tarefas.
E com isso uma parte fundamental vai ser a parte de login, para que ele consiga se logar para ver as tarefas.
Preview
Criação do componente e estrutura
Primeiramente, vou criar um componente chamado Login.vue, dentro do diretório de views, e nele vou adicionar a estrutura da tela.
Ficará dividido em duas colunas, onde a primeira que contém o formulário tem um tamanho de cinco, e a coluna da imagem um tamanho de 7.
<template>
<b-row class="vh-100 vw-100">
<b-col sm="5"></b-col>
<b-col sm="7"></b-col>
</b-row>
</template>
As classes vh-100 vw-100 fazem com que a b-row ocupe o espaço da tela toda, assim as colunas sempre ocupam toda a tela na vertical e horizontal.
Registrar o componente no vue-router
Com o componente criado, vou adicionar no vue-router, para que o usuário consiga acessar a partir de uma rota.
Em /src/router/index.js, vou deixar o arquivo dessa forma:
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Form from '../views/Form.vue'
import Login from '../views/Login.vue' //importação do componente
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'list',
component: List
},
{
path: '/form',
name: 'form',
component: Form
},
{
path: '/login', //criação da rota
name: 'login',
component: Login
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Caso acesse http://localhost:8080/login, irá aparecer por enquanto a tela em branco porque não tem conteúdo, mas já vai ser o componente correto.
Formulário de login com VueJS
Vou colocar na primeira coluna, e nela vou deixar o formulário centralizado. Também vou colocar uma cor de fundo fraca só pra dar uma diferença.
O formulário vou colocar dentro de uma outra div com um tamanho de outro, e isso somente para que ele não ocupe o tamanho total de largura da coluna.
<template>
<b-row class="vh-100 vw-100 row-login">
<b-col sm="5" class="d-flex justify-content-center align-items-center left-login">
<div class="col-8">
<h2 class="text-center mb-5 title-login">Faça o login</h2>
<b-form>
<b-form-group
label="E-mail"
label-for="email"
>
<b-form-input
id="email"
type="email"
placeholder="joaosilva@email.com"
autocomplete="off"
v-model="form.email"
></b-form-input>
</b-form-group>
<b-form-group
label-for="password"
>
<label class="d-flex justify-content-between">
Senha
<small><a href="#">Esqueceu sua senha?</a></small>
</label>
<b-form-input
id="password"
type="password"
placeholder="Digite sua senha"
v-model="form.password"
></b-form-input>
</b-form-group>
<b-button
type="button"
variant="primary"
block
@click="login">
<i class="fas fa-sign-in-alt"></i> Entrar
</b-button>
<hr>
<b-button
type="button"
variant="outline-secondary"
block
@click="register">
<i class="fas fa-user-plus"></i> Não tenho conta
</b-button>
</b-form>
</div>
</b-col>
<b-col sm="7"></b-col>
</b-row>
</template>
<script>
export default {
data() {
return {
form: {
email: "",
password: ""
}
}
},
methods: {
login() {},
register() {},
}
}
</script>
<style>
*, /*resetar o estilo da página*/
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.row-login {
margin-left: 0;
}
.left-login {
background-color: #F2F2F2;
}
.title-login {
font-weight: bold;
}
</style>
O formulário já estará posicionado corretamente do lado esquerdo ao centro.
Imagem da tela
Para a imagem, fiz a busca no site unDraw por login, e peguei uma imagem que achei legal.
Fiz o download da imagem, e coloquei no diretório /src/assets/images/login.svg.
Dentro da segunda coluna, que tem o tamanho 7, vou colocar o seguinte código:
<b-col sm="7" class="d-flex justify-content-center align-items-center">
<img src="../assets/images/login.svg" class="img-login" />
</b-col>
Também vou colocar um estilo para a classe img-login, vou colocar o tamanho de 600px para altura e largura para ficar com um tamanho grande.
<style>
/*... outros estilos já aplicados ...*/
.img-login {
width: 600px;
height: 600px;
}
</style>
E a imagem já está posicionada corretamente.
Validação do formulário
Vou fazer uma validação similar a feita no cadastro das tarefas.
Primeiramente importar o validation do vuelidate:
import { required, minLength, email } from "vuelidate/lib/validators";
Abaixo do data, vou criar a chave de validations, com a validação inerente a cada campo:
validations: {
form: {
email: {
required, //campo requerido
email //validação de e-mail
},
password: {
required, //campo requerido
minLength: minLength(6) //pelo menos seis caracteres
},
}
},
Vou fazer a alteração nos v-models dos campos do formulário, para vincular com a validação do vuelidate.
<b-form-input
id="email"
type="email"
placeholder="joaosilva@email.com"
autocomplete="off"
v-model.trim="$v.form.email.$model" //vinculo v-model com vuelidate
:state="getValidation('email')" //metodo para obter se campo válido ou não
></b-form-input>
<b-form-input
id="password"
type="password"
placeholder="Digite sua senha"
v-model.trim="$v.form.password.$model"
:state="getValidation('password')"
></b-form-input>
Vou declarar o método que vai obter se o campo está válido ou não, que é o getValidation
getValidation(field) {
if(this.$v.form.$dirty === false) {
return null; //enquanto o form não for submetido não valida os campos
}
return !this.$v.form[field].$error;
}
Com esse método, caso um campo esteja preenchido com um valor inválido, o campo irá ficar vermelho, caso esteja preenchido com um valor válido ficará verde.
Agora a última etapa e chamar a validação assim que for clicado no botão “entrar”.
Nele já tem o click que vai para o método de login, então vou aplicar a validação dentro dele
login() {
this.$v.$touch();
if(this.$v.$error) {
return;
}
},
Caso tenha algum campo preenchido de forma incorreta, o sistema não prosseguirá e irá mostrar os campos inválidos.
Vídeo
Caso você queira ver um vídeo completo com essa implementação da tela de login com VueJS, veja abaixo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo sobre VueJS, veja os Links do Programando Soluções.
Conclusão
Com isso foi implementado o frontend da tela de login com VueJS, e nos próximos posts vou mostrar como fazer a lógica para acessar o sistema e também o vínculo dos usuários com as tarefas.
Referências
https://undraw.co/illustrations