nuxt-news/pages/login/index.vue

<template>
  <div class="md-layout md-alignment-center-center" style="height: 100vh;">
    <md-card class="md-layout-item md-size-50">
      <md-card-header>
        <div class="md-title">
          Login
        </div>
      </md-card-header>

      <form @submit.prevent="validateForm">
        <md-card-content>
          <md-field :class="getValidationClass('email')" md-clearable>
            <label for="email">Email</label>
            <md-input
              id="email"
              v-model="form.email"
              :disabled="loading"
              type="email"
              name="email"
              autocomplete="email"
            />
            <span v-if="!$v.form.email.required" class="md-error">The email is required</span>
            <span v-else-if="!$v.form.email.email" class="md-error">Invalid required</span>
          </md-field>
          <md-field :class="getValidationClass('password')">
            <label for="password">password</label>
            <md-input
              id="password"
              v-model="form.password"
              :disabled="loading"
              type="password"
              name="password"
              autocomplete="password"
            />
            <span v-if="!$v.form.password.required" class="md-error">The email is required</span>
            <span v-else-if="!$v.form.password.minLength" class="md-error">password too short</span>
            <span v-else-if="!$v.form.password.maxLength" class="md-error">password too Long</span>
          </md-field>
        </md-card-content>

        <md-card-actions>
          <md-button to="/register">
            Go To Register
          </md-button>
          <md-button class="md-primary md-raised" type="submit">
            Submit
          </md-button>
        </md-card-actions>
      </form>

      <md-snackbar :md-active.sync="isAuthenticated">
        {{ form.email }} was successfully logged in!
      </md-snackbar>
    </md-card>

    <!-- Back Button -->
    <md-button @click="$router.go(-1)" class="md-fixed md-fab-bottom-right md-fab md-primary">
      <md-icon>arrow_back</md-icon>
    </md-button>
  </div>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, email, minLength, maxLength } from 'vuelidate/lib/validators'

export default {
  middleware: 'auth',
  mixins: [validationMixin],
  validations: {
    form: {
      email: {
        required,
        email
      },
      password: {
        required,
        minLength: minLength(6),
        maxLength: maxLength(20)
      }
    }
  },
  data: () => ({
    form: {
      email: '',
      password: ''
    }
  }),
  computed: {
    loading () {
      return this.$store.getters.loading
    },
    isAuthenticated () {
      return this.$store.getters.isAuthenticated
    }
  },
  watch: {
    isAuthenticated (value) {
      if (value) {
        setTimeout(() => this.$router.push('/'), 500)
      }
    }
  },
  methods: {
    validateForm () {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        this.loginUser()
      }
    },
    async loginUser () {
      await this.$store.dispatch('authenticateUser', {
        action: 'login',
        email: this.form.email,
        password: this.form.password,
        resturnSecureToken: true
      })
    },
    getValidationClass (fieldName) {
      const field = this.$v.form[fieldName]
      if (field) {
        return {
          'md-invalid': field.$invalid && field.$dirty
        }
      }
    }
  }
}
</script>