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

126 lines
4.2 KiB
Vue
Raw Normal View History

<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>