503 lines
17 KiB
Vue
503 lines
17 KiB
Vue
<script setup>
|
|
import { useAppAbility } from '@/plugins/casl/useAppAbility';
|
|
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
|
|
import DefinedSteps from '../layouts/components/DefinedSteps.vue';
|
|
import CustomNav from '../layouts/components/navbar-custom.vue';
|
|
// import { useAppAbility } from '@/plugins/casl/useAppAbility';
|
|
import axios from '@axios';
|
|
import {
|
|
emailValidator,
|
|
requiredEmail,
|
|
requiredPassword
|
|
} from '@validators';
|
|
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const ability = useAppAbility()
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const emailExist = ref(false)
|
|
const isTopLoadingVisible = ref(false);
|
|
const isLoadingVisible = ref(false)
|
|
const refVForm = ref()
|
|
const email = ref()
|
|
const password = ref(null)
|
|
const isPolicy = ref(false);
|
|
const user_role = ref();
|
|
const seetingPlanLogo = ref();
|
|
const settingSite = ref();
|
|
const isPasswordVisible = ref(false)
|
|
const canLogin = ref(false)
|
|
const inavlid = ref(false);
|
|
const InvalidCredential = ref()
|
|
const passwordCheck = ref(false)
|
|
const products = JSON.parse(localStorage.getItem('cart_products'));
|
|
const prescreptionRequired = ref(false)
|
|
const errors = ref({
|
|
password: undefined,
|
|
email: undefined,
|
|
})
|
|
watch(isPolicy, (newVal) => {
|
|
isTopLoadingVisible.value = false;
|
|
});
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const onSubmit = async () => {
|
|
|
|
refVForm.value?.validate().then(async ({ valid: isValid }) => {
|
|
console.log('isValid ', isValid)
|
|
if (isValid) {
|
|
store.dispatch('updateIsTonalSnackbar', false)
|
|
store.dispatch('updateErrorMessage', null)
|
|
if (!canLogin.value) {
|
|
|
|
|
|
|
|
await registerPatient()
|
|
|
|
|
|
|
|
} else {
|
|
passwordCheck.value = false
|
|
await loginPatient()
|
|
}
|
|
|
|
|
|
// await register()
|
|
// console.log(store.getters.getErrors.email)
|
|
// if (!store.getters.getErrors.email) {
|
|
// await savePlan()
|
|
// router.replace(route.query.to && route.query.to != '/register' ? String(route.query.to) : 'book-appointment')
|
|
// }
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
onBeforeMount(async () => {
|
|
products.forEach(product => {
|
|
if (product.is_prescription_required == 1) {
|
|
|
|
prescreptionRequired.value = true
|
|
} else {
|
|
|
|
prescreptionRequired.value = false
|
|
}
|
|
});
|
|
// grandTotal.value = parseFloat(totalAmount.value) + parseFloat(totalShipping.value)
|
|
store.dispatch('updateCurrentPage', 'pre-register')
|
|
localStorage.setItem('currentPage', 'pre-register')
|
|
})
|
|
onMounted(async () => {
|
|
window.addEventListener('resize', checkIfMobile);
|
|
|
|
let setting = await axios.post('/api/settings', {})
|
|
// console.log(setting.data)
|
|
settingSite.value = setting.data
|
|
seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
|
|
|
|
// getLocation()
|
|
})
|
|
onUnmounted(() => {
|
|
});
|
|
|
|
const registerPatient = async () => {
|
|
errors.value = [];
|
|
store.dispatch('updateIsLoading', true)
|
|
isLoadingVisible.value = true;
|
|
|
|
await axios.post('/api/check-email', {
|
|
email: email.value,
|
|
|
|
}).then(r => {
|
|
console.log("Reigster", r.data);
|
|
if (r.data.email === "Exist") {
|
|
emailExist.value = true
|
|
canLogin.value = true
|
|
localStorage.setItem('exist', true)
|
|
} else {
|
|
localStorage.setItem('email', email.value)
|
|
localStorage.setItem('exist', false)
|
|
emailExist.value = false
|
|
canLogin.value = false
|
|
passwordCheck.value = true
|
|
|
|
|
|
if (password.value) {
|
|
localStorage.setItem('password', password.value)
|
|
router.replace(route.query.to && route.query.to != '/pre-register' ? String(route.query.to) : 'register')
|
|
}
|
|
|
|
}
|
|
store.dispatch('updateIsLoading', false)
|
|
}).catch(e => {
|
|
store.dispatch('updateIsLoading', false)
|
|
console.log(e.response);
|
|
const { errors: formErrors } = e.response.data.errors;
|
|
errors.value = e.response.data.errors;
|
|
isLoadingVisible.value = false;
|
|
console.error("Error", e.response.data.errors)
|
|
});
|
|
|
|
};
|
|
const loginPatient = async () => {
|
|
store.dispatch('updateIsLoading', true)
|
|
InvalidCredential.value = '';
|
|
isLoadingVisible.value = true;
|
|
axios.post('/api/login-patient', {
|
|
email: email.value,
|
|
password: password.value,
|
|
}).then(r => {
|
|
console.log("Response", r.data, prescreptionRequired.value);
|
|
let patientData = r.data.data;
|
|
|
|
localStorage.setItem('access_token', r.data.access_token)
|
|
localStorage.setItem('patient_id', patientData.id)
|
|
localStorage.setItem('user_role', 'patient')
|
|
localStorage.setItem('cominguser', 'register')
|
|
if (!patientData.dob || !patientData.gender || !patientData.marital_status || !patientData.height || !patientData.weight) {
|
|
// localStorage.setItem('profileCompleted', '0')
|
|
}
|
|
|
|
localStorage.setItem('isLogin', 'true')
|
|
localStorage.setItem('userAbilities', '[{"action":"manage","subject":"all"}]')
|
|
const userAbilities = [{ "action": "manage", "subject": "all" }];
|
|
ability.update(userAbilities)
|
|
// if (prescreptionRequired.value)
|
|
// router.replace(route.query.to && route.query.to != '/pre-register' ? String(route.query.to) : '/additional-information')
|
|
// else
|
|
router.replace(route.query.to && route.query.to != '/pre-register' ? String(route.query.to) : '/checkout')
|
|
}).catch(error => {
|
|
store.dispatch('updateIsLoading', false)
|
|
console.error('Login Error', error)
|
|
inavlid.value = true;
|
|
// if (error.response.data.message)
|
|
// errors.value.email = error.response.data.message;
|
|
// else
|
|
InvalidCredential.value = "Sorry, that email or password didn't work.";
|
|
// errors.value.email = 'Invalid credentials'
|
|
isLoadingVisible.value = false;
|
|
});
|
|
|
|
};
|
|
const isUserAuthenticate = () => {
|
|
|
|
user_role.value = localStorage.getItem('user_role');
|
|
if (user_role.value === 'agent') {
|
|
router.push('/provider/dashboard');
|
|
} else if (user_role.value === 'patient') {
|
|
router.push('/overview');
|
|
} else {
|
|
window.location.href = 'https://hgh.codelfi.com/';
|
|
};
|
|
};
|
|
const changeEmail = () => {
|
|
canLogin.value = false
|
|
InvalidCredential.value = null
|
|
password.value = null
|
|
|
|
};
|
|
const changeEmailSignUp = () => {
|
|
canLogin.value = false
|
|
passwordCheck.value = false
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup> -->
|
|
<VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
|
|
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
|
|
</VDialog>
|
|
<!-- <HeaderTopBar></HeaderTopBar> -->
|
|
<!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
|
|
<VRow><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
|
|
<VRow
|
|
style="min-height: 101.7dvh; max-height: 101.7dvh; margin: 0px;"
|
|
:style="isMobile ? { marginTop: '90px' } : { marginTop: '0px' }"
|
|
>
|
|
<VCol cols="12" md="6" class="bg-custom col-order-1"
|
|
:class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
|
|
<DefinedSteps></DefinedSteps>
|
|
</VCol>
|
|
<VCol cols="12" md="6" class="bg-custom-color col-order-2"
|
|
:class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
|
|
<!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
|
|
<VCard class="auth-card pa-2 rounded-5" style="" :class="isMobile ? '' : 'card-wid'">
|
|
<VCardItem class="py-2">
|
|
<VCardText class="p-0">
|
|
<!-- <VRow>
|
|
<VCol cols="12" lg="12" md="12" class="pb-4">
|
|
<div class="text-center mb-2 cursor-pointer"
|
|
style="width: 100%;position: relative;display: block; padding-top: 20px;">
|
|
<span class="text-center">
|
|
<VImg :src='seetingPlanLogo' width="250" height="50" class="logo-img"
|
|
@click="isUserAuthenticate" />
|
|
</span>
|
|
</div>
|
|
</VCol>
|
|
</VRow> -->
|
|
<h5 class="text-h5 mb-1 text-left">
|
|
Welcome! Need Our MD?
|
|
</h5>
|
|
<p v-if="canLogin">That's great, you've got an account! Welcome back!</p>
|
|
<p v-if="!canLogin">You'll need an account. Let get you setup!
|
|
</p>
|
|
</VCardText>
|
|
|
|
<VSnackbar v-model="store.getters.getIsTonalSnackbarVisible" :timeout="5000" location="top end"
|
|
variant="flat" color="red">
|
|
{{ store.getters.getErrorMessage }}
|
|
</VSnackbar>
|
|
</VCardItem>
|
|
<VCardText>
|
|
|
|
<VForm ref="refVForm" @submit.prevent="onSubmit">
|
|
<VRow>
|
|
|
|
<VCol cols="12" md="12" class="pb-0" v-if="canLogin">
|
|
<div class="float-right">
|
|
<span style="color: #b1c3d5;">This is not your email? </span><span><a
|
|
class=" cursor-pointer" @click="changeEmail()">(Change)</a></span>
|
|
</div>
|
|
|
|
</VCol>
|
|
<VCol cols="12" md="12" class="pb-0" v-if="passwordCheck">
|
|
<div class="float-right">
|
|
<span style="color: #b1c3d5;">This is not your email? </span><span><a
|
|
class=" cursor-pointer" @click="changeEmailSignUp()">(Change)</a></span>
|
|
</div>
|
|
|
|
</VCol>
|
|
<VCol cols="12" md="12" v-if="canLogin">
|
|
<VTextField v-model="email" label="Email Address" type="email"
|
|
:rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
|
|
density="comfortable" :disabled="canLogin" />
|
|
|
|
</VCol>
|
|
|
|
<VCol cols="12" md="12" v-if="!canLogin">
|
|
<VTextField v-model="email" label="Email Address" type="email"
|
|
:rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
|
|
density="comfortable" :disabled="passwordCheck" />
|
|
</VCol>
|
|
<VCol cols="12" v-if="canLogin">
|
|
<VTextField v-model="password" label="Password" placeholder="············"
|
|
:rules="[requiredPassword]" :type="isPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isPasswordVisible ? 'bx-show' : 'bx-hide'"
|
|
@click:append-inner="isPasswordVisible = !isPasswordVisible" />
|
|
</VCol>
|
|
<VCol cols="12" class="pt-0 pb-0" v-if="canLogin">
|
|
<router-link to="/forgot" class="text-primary underline">Forgot Password?</router-link>
|
|
|
|
</VCol>
|
|
<VCol cols="12" v-if="passwordCheck">
|
|
<VTextField v-model="password" label="Password" placeholder="············"
|
|
:rules="[requiredPassword]" :type="isPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isPasswordVisible ? 'bx-show' : 'bx-hide'"
|
|
@click:append-inner="isPasswordVisible = !isPasswordVisible" />
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<VRow>
|
|
<VCol class="text-center" cols="12">
|
|
<p class="error-message" v-if="inavlid">{{ InvalidCredential }}</p>
|
|
<VBtn v-if="!canLogin" type="submit" class="text-center px-5"
|
|
style="background-color: rgb(var(--v-theme-yellow-theme-button)) !important;" block>
|
|
Continue
|
|
</VBtn>
|
|
<!-- Can Login and proceed -->
|
|
<VBtn v-if="canLogin" type="submit" class="text-center px-5"
|
|
style="background-color: rgb(var(--v-theme-yellow-theme-button)) !important;" block>
|
|
Continue
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
|
|
<VRow>
|
|
</VRow>
|
|
</VForm>
|
|
|
|
</VCardText>
|
|
</VCard>
|
|
<!-- </div> -->
|
|
</VCol>
|
|
</VRow>
|
|
<!-- </div> -->
|
|
<!-- <Footer></Footer> -->
|
|
</template>
|
|
<style scoped>
|
|
@media only screen and (max-width: 768px) {
|
|
.card-wid {
|
|
max-width: 600px !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
.col-order-1 {
|
|
order: 2;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 1;
|
|
}
|
|
}
|
|
@media (min-width: 960px) and (max-width: 1200px){
|
|
.card-wid{
|
|
min-width: auto !important;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 769px) {
|
|
.col-order-1 {
|
|
order: 1;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.total-font {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bg-custom {
|
|
background: #f5fafd;
|
|
}
|
|
|
|
.bg-custom-color {
|
|
background: #D8EBF6;
|
|
}
|
|
|
|
.bg-white bg-change-bk .current-plan {
|
|
border: 2px solid rgb(var(--v-theme-primary));
|
|
}
|
|
|
|
.cut-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: line-through;
|
|
text-decoration-color: red;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.plan-card {
|
|
margin: 0rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-wid {
|
|
min-width: 600px;
|
|
}
|
|
|
|
.layout-wrapper {
|
|
justify-content: center;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ff2f2f;
|
|
font-size: 15px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
@import "@vendor/fonts/fontawesome.css";
|
|
@import "@vendor/fonts/tabler-icons.css";
|
|
@import "@vendor/css/rtl/core.css";
|
|
@import "@vendor/css/rtl/theme-default.css";
|
|
@import "@styles/css/demo.css";
|
|
@import "@vendor/libs/node-waves/node-waves.css";
|
|
@import "@vendor/css/pages/front-page-help-center.css";
|
|
@import "@vendor/css/pages/help-center-front-page.css";
|
|
|
|
|
|
.v-card.v-card--flat.v-theme--light.v-card--density-default.v-card--variant-elevated.text-center.search-header.rounded-0 {
|
|
block-size: 357px;
|
|
inset-block-start: -185px;
|
|
}
|
|
|
|
body {
|
|
display: block !important;
|
|
}
|
|
|
|
a.nav-link.fw-medium {
|
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
|
}
|
|
|
|
.light-style .layout-navbar .menu-text {
|
|
color: #5d596c !important;
|
|
}
|
|
|
|
span.app-brand-text.demo.menu-text.fw-bold.ms-2.ps-1 {
|
|
color: #5d596c !important;
|
|
}
|
|
|
|
.navbar.landing-navbar {
|
|
border-color: rgba(255, 255, 255, 68%) !important;
|
|
background: white;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
box-shadow: 0px 10px 10px #00000029;
|
|
}
|
|
|
|
.landing-footer .footer-top {
|
|
background-color: #1C5580;
|
|
border-radius: none !important;
|
|
/* background: url("/assets/img/front-pages/backgrounds/footer-bg-dark.png"); */
|
|
}
|
|
|
|
.footer-bottom.py-3 {
|
|
background-color: #282c3e;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-link,
|
|
.light-style .landing-footer .footer-text {
|
|
color: #d3d4dc !important;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-link,
|
|
.light-style .landing-footer .footer-text {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
a.footer-link {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-text {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
@media (max-width: 355px) {
|
|
.first-section-pt {
|
|
margin-block-start: -121px !important;
|
|
}
|
|
}
|
|
|
|
.logo-img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* // @use "@core/scss/template/pages/page-auth.scss"; */
|
|
</style>
|