mahyargdz
137 lines
4.3 KiB
Vue
137 lines
4.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>
|
||
<!-- <CCol col="6" class="text-right">-->
|
||
<!-- <CButton color="link" class="px-0">Forgot password?</CButton>-->
|
||
<!-- <CButton color="link" class="d-lg-none">Register now!</CButton>-->
|
||
<!-- </CCol>-->
|
||
</CRow>
|
||
</CForm>
|
||
</CCardBody>
|
||
</CCard>
|
||
<!-- <CCard-->
|
||
<!-- color="primary"-->
|
||
<!-- text-color="white"-->
|
||
<!-- class="text-center py-5 d-md-down-none"-->
|
||
<!-- body-wrapper>-->
|
||
<!-- <CCardBody>-->
|
||
<!-- <h2>Sign up</h2>-->
|
||
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>-->
|
||
<!-- <CButton-->
|
||
<!-- color="light"-->
|
||
<!-- variant="outline"-->
|
||
<!-- size="lg"-->
|
||
<!-- >-->
|
||
<!-- Register Now!-->
|
||
<!-- </CButton>-->
|
||
<!-- </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('/admin')
|
||
})
|
||
.catch(err => {
|
||
if (err.response.status === 422) this.validation = err.response.data.validation
|
||
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>
|