<template>
<div class="flex-center">
<el-card class="form-card" :class="{'hide': isLoginned}">
<el-form class="loginForm" :model="formData" :rules="rules">
<el-form-item prop="login" :error="formError.login.error" :validateStatus="formError.login.status">
<el-input v-model="formData.login" type="email" id="login" :clearable="true" prefix-icon="el-icon-info" placeholder="Логин" @focus="clearError('login')"></el-input>
</el-form-item>
<el-form-item prop="password" :error="formError.password.error" :validateStatus="formError.password.status">
<el-input v-model="formData.password" type="password" id="password" :clearable="true" prefix-icon="el-icon-info" placeholder="Пароль" @input="validateRePassword" @focus="clearError('password')"></el-input>
</el-form-item>
<transition name="fade-input">
<el-form-item v-if="formData.isReg" prop="rePassword" :error="formError.rePassword.error" :validateStatus="formError.rePassword.status">
<el-input v-model="formData.rePassword" type="password" id="repassword" :clearable="true" prefix-icon="el-icon-info" placeholder="Повторите пароль" @input="validateRePassword" @focus="clearError('rePassword')"></el-input>
</el-form-item>
</transition>
<div class="flex-full">
<el-button type="primary" plain icon="el-icon-question" @click="toggleRepass">{{ registrationButtonLabel }}</el-button>
<el-button type="success" plain icon="el-icon-success" @click="login">ОК</el-button>
</div>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: 'LoginForm',
data() {
return {
formData: {
login: 'batya@gmail.com',
password: '11335768',
rePassword: '',
isReg: false,
},
formError: {
login: {
error: '',
status: ''
},
password: {
error: '',
status: ''
},
rePassword: {
error: '',
status: ''
}
},
rules: {
login: [
{ required: true, message: 'Введите email', trigger: 'blur' },
{ type: 'email', message: 'Введите верный email', trigger: 'blur' },
],
password: [
{ required: true, message: 'Введите пароль', trigger: 'blur' },
{ min: 6, message: 'Пароль должен быть длиннее 6 символов' },
],
},
isLoginned: this.$store.state.isAuth,
api: {}
}
},
computed: {
registrationButtonLabel() {
return this.formData.isReg ? 'Вход' : 'Регистрация';
}
},
methods: {
login() {
this.clearErrors();
this.api = this.$store.state.api;
this.axios({
url: this.api.auth.path,
method: this.api.auth.method,
params: this.formData
}).then(r => {
this.$notify.success({
title: r.data.notification.title,
message: r.data.notification.message,
position: 'top-right'
});
const {initData} = r.data;
if (initData !== undefined) {
this.$store.commit('go', {path: '/list/'});
this.$emit('goToList');
for (let type in initData) {
this.$store.commit('set', {type: type, value: initData[type]});
}
}
if (this.formData.isReg) {
this.toggleRepass();
}
}).catch(e => {
if (e.response) {
const errors = e.response.data.errors;
for (let key in errors) {
this.formError[key].error = errors[key].title;
this.formError[key].status = 'error';
}
}
});
},
toggleRepass() {
this.formData.isReg = !this.formData.isReg;
if (!this.formData.isReg) {
this.formError.rePassword.error = '';
this.formError.rePassword.status = '';
this.formData.rePassword = '';
}
},
validateRePassword () {
if (this.formData.password !== this.formData.rePassword && this.formData.rePassword.length >= 6 && this.formData.isReg) {
this.formError.rePassword.error = 'Пароли должны совпадать';
this.formError.rePassword.status = 'error';
} else if (this.formData.password === this.formData.rePassword && this.formData.rePassword.length >= 6 && this.formData.isReg) {
this.formError.rePassword.error = '';
this.formError.rePassword.status = 'success';
} else {
this.formError.rePassword.error = '';
this.formError.rePassword.status = '';
}
},
clearError(field) {
for (let value in this.formError[field]) {
this.formError[field][value] = '';
}
},
clearErrors() {
for (let key in this.formError) {
for (let value in this.formError[key]) {
this.formError[key][value] = '';
}
}
}
}
}
</script>
<style lang="stylus" scoped>
.flex {
&-center {
display flex
width 100vw
height 80vh
justify-content center
align-items center
}
&-full {
display flex
justify-content space-between
align-items flex-start
}
}
.form-card {
max-width 300px
transition 0.3s
}
</style>