mahyargdz
121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
<template>
|
|
<CRow class="justify-content-center">
|
|
<CCol lg="5">
|
|
<CCardGroup>
|
|
<CCard class="p-4">
|
|
<CCardBody>
|
|
<CForm @submit.prevent="doLogin">
|
|
<h1 class="text-muted text-center mb-5">پنل مدیریت</h1>
|
|
<CInput
|
|
:class="validation.username ? 'err' : null"
|
|
placeholder="نام کاربری"
|
|
:description="validation.username ? validation.username.msg : null"
|
|
autocomplete="username email"
|
|
v-model="login.username"
|
|
>
|
|
<template #prepend-content>
|
|
<CIcon name="cil-user"/>
|
|
</template>
|
|
</CInput>
|
|
|
|
<div class="butt">
|
|
<CInput
|
|
:class="validation.password ? 'err' : null"
|
|
placeholder="کلمه عبور"
|
|
:type="passwordState"
|
|
:description="validation.password ? validation.password.msg : null"
|
|
autocomplete="curent-password"
|
|
v-model="login.password"
|
|
>
|
|
|
|
<template #prepend-content>
|
|
<CIcon name="cil-lock-locked"/>
|
|
</template>
|
|
</CInput>
|
|
<i @click="showPass = !showPass" class="far fa-eye"></i>
|
|
</div>
|
|
|
|
<CInputCheckbox label="مرا به خاطر بسپار" @update:checked="val => login.remember_me = val"/>
|
|
|
|
<p class="text-muted mt-3" style="font-size: 11px;">*درصورتی که گزینه "مرا به خاطر بسپار" را فعال نکنید بعد از 1 ساعت باید دوباره وارد سیستم شوید.</p>
|
|
|
|
<CRow>
|
|
<CCol col="12" class="text-right mt-2">
|
|
<CButton color="primary" type="submit" class="px-4">ورود</CButton>
|
|
</CCol>
|
|
</CRow>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCardGroup>
|
|
</CCol>
|
|
</CRow>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showPass: false,
|
|
login: {
|
|
username: '',
|
|
password: '',
|
|
remember_me: false
|
|
},
|
|
validation: {}
|
|
}
|
|
},
|
|
computed: {
|
|
passwordState() {
|
|
return this.showPass ? "text" : "password"
|
|
}
|
|
},
|
|
methods: {
|
|
doLogin() {
|
|
this.validation = {}
|
|
|
|
this.$auth.loginWith('local', {
|
|
data: this.login
|
|
})
|
|
.then(response => {
|
|
window.location.replace(window.location.origin + "/admin" )
|
|
})
|
|
.catch(err => {
|
|
if (err.response.status === 422) this.validation = err.response.data.validation
|
|
if (err.response.status === 403) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: err.response.data.message
|
|
})
|
|
} else console.log(err.response.data)
|
|
})
|
|
}
|
|
},
|
|
layout: 'admin-auth'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.butt {
|
|
position: relative;
|
|
|
|
i {
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 11px;
|
|
z-index: 3;
|
|
cursor: pointer;
|
|
color: rgba(#000, 0.5);
|
|
-webkit-transition: 0.2s;
|
|
-moz-transition: 0.2s;
|
|
-ms-transition: 0.2s;
|
|
-o-transition: 0.2s;
|
|
transition: 0.2s;
|
|
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
</style>
|