140 lines
4.4 KiB
Vue
140 lines
4.4 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"
|
|
},
|
|
branchId(){
|
|
return this.$store?.state?.admin?.branchId
|
|
}
|
|
},
|
|
methods: {
|
|
doLogin() {
|
|
this.validation = {}
|
|
this?.$auth?.logout()
|
|
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?.message)
|
|
})
|
|
}
|
|
},
|
|
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>
|