login

Tela de login com VueJS – ToDo List parte 8

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

login com vuejs

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

https://youtu.be/PZcZ3cWYjKw

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

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy