osb/resources/assets/js/components/auth/LoginForm.vue

<template>
 <form method="post" @submit.prevent="submit" @keydown="clearErrors($event.target.name)">
  <div class="alert alert-success text-center" v-show="form.succeeded" id="result"> {{ trans('message.loggedin') }} <i class="fa fa-refresh fa-spin"></i> {{ trans('message.entering') }}</div>
  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('email') }" v-if="type === 'email'">
   <input type="email" class="form-control" :placeholder="placeholder" :name="name" value="" v-model="form.email" @change="adddomain" autofocus/>
   <span class="glyphicon form-control-feedback" :class="[icon]"></span>
   <transition name="fade">
    <span class="help-block" v-if="form.errors.has('email')" v-text="form.errors.get('email')" id="validation_error_email"></span>
   </transition>
  </div>

  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('username') }" v-else>
   <input type="text" class="form-control" :placeholder="placeholder" :name="name" v-model="form.username" @change="adddomain" autofocus/>
   <span class="glyphicon form-control-feedback" :class="[icon]"></span>
   <transition name="fade">
    <span class="help-block" v-if="form.errors.has('username')" v-text="form.errors.get('username')" id="validation_error_username"></span>
   </transition>
  </div>


  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('password') }">
   <input type="password" class="form-control" :placeholder="trans('message.password')" name="password" v-model="form.password"/>
   <span class="glyphicon glyphicon-lock form-control-feedback"></span>
   <transition name="fade">
    <span class="help-block" v-if="form.errors.has('password')" v-text="form.errors.get('password')" id="validation_error_password"></span>
   </transition>
  </div>
  <div class="row">
   <div class="col-xs-8">
    <div class="checkbox icheck">
     <label>
      <input style="display:none;" type="checkbox" name="remember" v-model="form.remember"> {{ trans('message.remember') }}
     </label>
    </div>
   </div>
   <div class="col-xs-4">
    <button type="submit" class="btn btn-primary btn-block btn-flat" v-text="trans('message.buttonsign')" :disabled="form.errors.any()"><i v-if="form.submitting" class="fa fa-refresh fa-spin"></i></button>
   </div>
  </div>
 </form>
</template>

<style src="./fade.css"></style>

<script>

import Form from 'acacha-forms'
import initialitzeIcheck from './InitializeIcheck'
import redirect from './redirect'

export default {
  mixins: [initialitzeIcheck, redirect],
  data: function () {
    let form = new Form({ username: '', password: '', remember: '' })
    if (this.name === 'email') {
      form = new Form({ email: '', password: '', remember: '' })
    }
    return {
      form: form,
    }
  },
  props: {
    name: {
      type: String,
      required: true
    },
    domain: {
      type: String,
      required: false
    }
  },
  computed: {
    placeholder: function () {
      if (this.name === 'email') return this.trans('message.email')
      return this.trans('message.username')
    },
    type: function () {
      if (this.name === 'email') return 'email'
      return 'text'
    },
    icon: function () {
      if (this.name === 'email') return 'glyphicon-envelope'
      return 'glyphicon-user'
    }
  },
  watch: {
    'form.remember': function (value) {
      if (value) {
        $('input').iCheck('check')
      } else {
        $('input').iCheck('uncheck')
      }
    }
  },
  methods: {
    submit () {
      this.form.post('/login')
       .then(response => {
         var component = this;
         setTimeout(function(){
           component.redirect(response)
         }, 2500);
       })
       .catch(error => {
         console.log(this.trans('message.loginerror') + ':' + error)
       })
    },
    adddomain: function () {
      if (this.type === 'email') return
      if (this.domain === '') return
      if (this.form.username.endsWith(this.domain)) return
      if (this.form.username.includes('@')) return
      this.form.username = this.form.username + '@' + this.domain
    },
    clearErrors (name) {
      if (name === 'password') {
        this.form.errors.clear('password')
        name = this.name
      }
      this.form.errors.clear(name)
    }
  }
}

</script>