initial commit
This commit is contained in:
Inshal
830
resources/js/pages/agent-register.vue
Normal file
830
resources/js/pages/agent-register.vue
Normal file
@@ -0,0 +1,830 @@
|
||||
<script setup>
|
||||
import { useAppAbility } from '@/plugins/casl/useAppAbility';
|
||||
import axios from '@axios';
|
||||
import {
|
||||
emailValidator,
|
||||
requiredAddress,
|
||||
requiredCity,
|
||||
requiredEmail,
|
||||
requiredFirstName,
|
||||
requiredGender,
|
||||
requiredLastName,
|
||||
requiredLicenseNumber,
|
||||
requiredPassword,
|
||||
requiredPhone,
|
||||
requiredSpecialty,
|
||||
requiredState,
|
||||
requiredYearsofExperience,
|
||||
requiredZip,
|
||||
validUSAPhone
|
||||
} from '@validators';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const seetingPlanLogo = ref();
|
||||
const currentStep = ref(1)
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const ability = useAppAbility()
|
||||
const errors = ref({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
})
|
||||
const inavlid = ref(false);
|
||||
const InvalidCredential = ref()
|
||||
const isLoadingVisible = ref(false)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isPolicy = ref(false)
|
||||
const isDisabled = ref(true)
|
||||
const isDialogVisible = ref(false)
|
||||
const refVForm = ref()
|
||||
const verfyEmail = ref(false)
|
||||
const first_name = ref(null)
|
||||
const last_name = ref(null)
|
||||
const email = ref(null)
|
||||
const phone = ref(null)
|
||||
const city = ref(null)
|
||||
const stateAddress = ref('AL')
|
||||
const zip = ref(null)
|
||||
const password = ref(null)
|
||||
const home_address = ref(null)
|
||||
const medical_license_number = ref(null)
|
||||
const years_of_experience = ref(null)
|
||||
const gender = ref(null)
|
||||
const specialty = ref(null)
|
||||
const getIsTonalSnackbarVisible = ref(false);
|
||||
const getIsTonalSnackbarVisibleError = ref(false);
|
||||
const verificationCode = ref(['', '', '', '']);
|
||||
const state = ref([])
|
||||
const availabilityFrom = ref(null)
|
||||
const availabilityTo = ref(null)
|
||||
const medicalLicenseNumbers = ref({})
|
||||
const currentUserRegister = ref(null)
|
||||
const successMessage = ref(null)
|
||||
const errorMessage = ref(null)
|
||||
const user = ref()
|
||||
const genders = [
|
||||
{ value: 'male', title: 'Male' },
|
||||
{ value: 'female', title: 'Female' },
|
||||
{ value: 'other', title: 'Other' }
|
||||
]
|
||||
const requiredAvailability = (value) =>
|
||||
!!value || 'Availability is required';
|
||||
const specialties = ['General Practice', 'Cardiology', 'Dermatology', 'Pediatrics', /* add more options */]
|
||||
const validateTimeRange = (value) => {
|
||||
if (availabilityFrom.value && availabilityTo.value) {
|
||||
const [fromTime, fromPeriod] = availabilityFrom.value.split(' ');
|
||||
const [toTime, toPeriod] = availabilityTo.value.split(' ');
|
||||
const fromHour = parseInt(fromTime.split(':')[0]);
|
||||
const toHour = parseInt(toTime.split(':')[0]);
|
||||
const fromMinute = parseInt(fromTime.split(':')[1]);
|
||||
const toMinute = parseInt(toTime.split(':')[1]);
|
||||
|
||||
const fromValue = fromPeriod === 'PM' ? fromHour + 12 : fromHour;
|
||||
const toValue = toPeriod === 'PM' ? toHour + 12 : toHour;
|
||||
|
||||
const timeDiff =
|
||||
(toValue * 60 + toMinute) - (fromValue * 60 + fromMinute);
|
||||
//return timeDiff >= 15 || 'Minimum time difference should be 15 minutes';
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// const timeOptions = computed(() => {
|
||||
// const options = [];
|
||||
// for (let hour = 0; hour < 24; hour++) {
|
||||
// for (let minute = 0; minute < 60; minute += 30) {
|
||||
// let period = 'AM';
|
||||
// let displayHour = hour;
|
||||
|
||||
// if (hour === 0) {
|
||||
// displayHour = 12; // Convert 0 to 12 for 12:00 AM
|
||||
// } else if (hour === 12) {
|
||||
// period = 'PM'; // 12:00 PM
|
||||
// } else if (hour > 12) {
|
||||
// displayHour = hour - 12; // Convert to 12-hour format
|
||||
// period = 'PM';
|
||||
// }
|
||||
|
||||
// const timeString = `${displayHour.toString().padStart(2, '0')}:${minute
|
||||
// .toString()
|
||||
// .padStart(2, '0')} ${period}`;
|
||||
// options.push(timeString);
|
||||
// }
|
||||
// }
|
||||
// return options;
|
||||
// });
|
||||
const timeOptions = computed(() => {
|
||||
const options = [];
|
||||
|
||||
// Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
|
||||
for (let hour = 12; hour < 24; hour++) {
|
||||
// Loop through the minutes (0 and 30)
|
||||
for (let minute of [0, 30]) {
|
||||
// Construct the time string
|
||||
const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
|
||||
options.push(timeString);
|
||||
}
|
||||
}
|
||||
|
||||
// Add the time option for 24:00 (midnight)
|
||||
options.push('24:00');
|
||||
|
||||
return options;
|
||||
});
|
||||
|
||||
const states = ref([
|
||||
{ name: 'Alabama', abbreviation: 'AL' },
|
||||
{ name: 'Alaska', abbreviation: 'AK' },
|
||||
{ name: 'Arizona', abbreviation: 'AZ' },
|
||||
{ name: 'Arkansas', abbreviation: 'AR' },
|
||||
{ name: 'Howland Island', abbreviation: 'UM-84' },
|
||||
{ name: 'Delaware', abbreviation: 'DE' },
|
||||
{ name: 'Maryland', abbreviation: 'MD' },
|
||||
{ name: 'Baker Island', abbreviation: 'UM-81' },
|
||||
{ name: 'Kingman Reef', abbreviation: 'UM-89' },
|
||||
{ name: 'New Hampshire', abbreviation: 'NH' },
|
||||
{ name: 'Wake Island', abbreviation: 'UM-79' },
|
||||
{ name: 'Kansas', abbreviation: 'KS' },
|
||||
{ name: 'Texas', abbreviation: 'TX' },
|
||||
{ name: 'Nebraska', abbreviation: 'NE' },
|
||||
{ name: 'Vermont', abbreviation: 'VT' },
|
||||
{ name: 'Jarvis Island', abbreviation: 'UM-86' },
|
||||
{ name: 'Hawaii', abbreviation: 'HI' },
|
||||
{ name: 'Guam', abbreviation: 'GU' },
|
||||
{ name: 'United States Virgin Islands', abbreviation: 'VI' },
|
||||
{ name: 'Utah', abbreviation: 'UT' },
|
||||
{ name: 'Oregon', abbreviation: 'OR' },
|
||||
{ name: 'California', abbreviation: 'CA' },
|
||||
{ name: 'New Jersey', abbreviation: 'NJ' },
|
||||
{ name: 'North Dakota', abbreviation: 'ND' },
|
||||
{ name: 'Kentucky', abbreviation: 'KY' },
|
||||
{ name: 'Minnesota', abbreviation: 'MN' },
|
||||
{ name: 'Oklahoma', abbreviation: 'OK' },
|
||||
{ name: 'Pennsylvania', abbreviation: 'PA' },
|
||||
{ name: 'New Mexico', abbreviation: 'NM' },
|
||||
{ name: 'American Samoa', abbreviation: 'AS' },
|
||||
{ name: 'Illinois', abbreviation: 'IL' },
|
||||
{ name: 'Michigan', abbreviation: 'MI' },
|
||||
{ name: 'Virginia', abbreviation: 'VA' },
|
||||
{ name: 'Johnston Atoll', abbreviation: 'UM-67' },
|
||||
{ name: 'West Virginia', abbreviation: 'WV' },
|
||||
{ name: 'Mississippi', abbreviation: 'MS' },
|
||||
{ name: 'Northern Mariana Islands', abbreviation: 'MP' },
|
||||
{ name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
|
||||
{ name: 'Massachusetts', abbreviation: 'MA' },
|
||||
{ name: 'Connecticut', abbreviation: 'CT' },
|
||||
{ name: 'Florida', abbreviation: 'FL' },
|
||||
{ name: 'District of Columbia', abbreviation: 'DC' },
|
||||
{ name: 'Midway Atoll', abbreviation: 'UM-71' },
|
||||
{ name: 'Navassa Island', abbreviation: 'UM-76' },
|
||||
{ name: 'Indiana', abbreviation: 'IN' },
|
||||
{ name: 'Wisconsin', abbreviation: 'WI' },
|
||||
{ name: 'Wyoming', abbreviation: 'WY' },
|
||||
{ name: 'South Carolina', abbreviation: 'SC' },
|
||||
{ name: 'South Dakota', abbreviation: 'SD' },
|
||||
{ name: 'Montana', abbreviation: 'MT' },
|
||||
{ name: 'North Carolina', abbreviation: 'NC' },
|
||||
{ name: 'Palmyra Atoll', abbreviation: 'UM-95' },
|
||||
{ name: 'Puerto Rico', abbreviation: 'PR' },
|
||||
{ name: 'Colorado', abbreviation: 'CO' },
|
||||
{ name: 'Missouri', abbreviation: 'MO' },
|
||||
{ name: 'New York', abbreviation: 'NY' },
|
||||
{ name: 'Maine', abbreviation: 'ME' },
|
||||
{ name: 'Tennessee', abbreviation: 'TN' },
|
||||
{ name: 'Georgia', abbreviation: 'GA' },
|
||||
{ name: 'Louisiana', abbreviation: 'LA' },
|
||||
{ name: 'Nevada', abbreviation: 'NV' },
|
||||
{ name: 'Iowa', abbreviation: 'IA' },
|
||||
{ name: 'Idaho', abbreviation: 'ID' },
|
||||
{ name: 'Rhode Island', abbreviation: 'RI' },
|
||||
{ name: 'Washington', abbreviation: 'WA' },
|
||||
{ name: 'Ohio', abbreviation: 'OH' },
|
||||
// ... (add the rest of the states)
|
||||
]);
|
||||
const sortedStates = computed(() => {
|
||||
return states.value.slice().sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
});
|
||||
const selectedStateName = (abbreviation) => {
|
||||
const selectedState = states.value.find(
|
||||
(s) => s.abbreviation === abbreviation
|
||||
);
|
||||
return selectedState ? selectedState.name : abbreviation;
|
||||
};
|
||||
const onSubmit = () => {
|
||||
inavlid.value = false;
|
||||
InvalidCredential.value = '';
|
||||
refVForm.value?.validate().then(({ valid: isValid }) => {
|
||||
if (isValid)
|
||||
saveInformation()
|
||||
})
|
||||
}
|
||||
const formatPhoneNumber = () => {
|
||||
// Remove non-numeric characters from the input
|
||||
const numericValue = phone.value.replace(/\D/g, '');
|
||||
|
||||
// Apply formatting logic
|
||||
if (numericValue.length <= 10) {
|
||||
phone.value = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
||||
} else {
|
||||
// Limit the input to a maximum of 14 characters
|
||||
const truncatedValue = numericValue.slice(0, 10);
|
||||
phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
||||
}
|
||||
};
|
||||
const validateAndProceed = async (nextStep, stepText) => {
|
||||
console.log("availabilityTo", availabilityTo.value);
|
||||
const { valid } = await refVForm.value.validate()
|
||||
localStorage.setItem('step-register', nextStep)
|
||||
let formData = {
|
||||
home_address: home_address.value,
|
||||
city: city.value,
|
||||
state: stateAddress.value,
|
||||
zip_code: zip.value,
|
||||
medical_license_number: medicalLicenseNumbers.value,
|
||||
years_of_experience: years_of_experience.value,
|
||||
specialty: specialty.value,
|
||||
gender: gender.value,
|
||||
practice_state: state.value,
|
||||
phone: phone.value,
|
||||
availabilityFrom: '08:00:00',
|
||||
availabilityTo: '10:00:00'
|
||||
}
|
||||
localStorage.setItem('register-form-data', JSON.stringify(formData))
|
||||
if (valid) {
|
||||
|
||||
if (stepText == 'verification') {
|
||||
let userAgent = await registerAgent()
|
||||
console.log('userAgent', verfyEmail.value)
|
||||
if (verfyEmail.value) {
|
||||
errorMessage.value = null
|
||||
InvalidCredential.value = '';
|
||||
currentStep.value = nextStep
|
||||
}
|
||||
|
||||
}
|
||||
if (stepText == 'Personal Information') {
|
||||
errorMessage.value = null
|
||||
InvalidCredential.value = '';
|
||||
currentStep.value = nextStep
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
//currentStep.value = nextStep
|
||||
}
|
||||
onMounted(async () => {
|
||||
const layoutWrapper = document.querySelector('.layout-wrapper');
|
||||
|
||||
// Check if the element exists
|
||||
if (layoutWrapper) {
|
||||
// Add the class you want
|
||||
layoutWrapper.classList.add('regbg');
|
||||
}
|
||||
let setting = await axios.post('/api/settings', {})
|
||||
console.log(setting.data)
|
||||
seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
|
||||
|
||||
|
||||
const storedStep = localStorage.getItem('step-register');
|
||||
if (storedStep) {
|
||||
currentStep.value = parseInt(storedStep, 10);
|
||||
}
|
||||
|
||||
currentUserRegister.value = localStorage.getItem('register_provider_id')
|
||||
let formData = localStorage.getItem('register-form-data')
|
||||
let storeFormdata = JSON.parse(formData)
|
||||
if (storeFormdata) {
|
||||
home_address.value = storeFormdata.home_address
|
||||
city.value = storeFormdata.city
|
||||
stateAddress.value = storeFormdata.state
|
||||
zip.value = storeFormdata.zip_code
|
||||
medicalLicenseNumbers.value = storeFormdata.medical_license_number
|
||||
years_of_experience.value = storeFormdata.years_of_experience
|
||||
specialty.value = storeFormdata.specialty
|
||||
gender.value = storeFormdata.gender
|
||||
state.value = storeFormdata.practice_state
|
||||
phone.value = storeFormdata.phone
|
||||
availabilityFrom.value = storeFormdata.availabilityFrom
|
||||
availabilityTo.value = storeFormdata.availabilityTo
|
||||
console.log(JSON.parse(formData))
|
||||
}
|
||||
localStorage.setItem('thank-you-page', 'no')
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// Select the element by class name
|
||||
const layoutWrapper = document.querySelector('.layout-wrapper');
|
||||
|
||||
// Check if the element exists
|
||||
if (layoutWrapper) {
|
||||
// Remove the class
|
||||
layoutWrapper.classList.remove('regbg');
|
||||
}
|
||||
});
|
||||
const verifyCode = async (step, text) => {
|
||||
const code = verificationCode.value.join('');
|
||||
console.log('Verifying code:', code);
|
||||
console.log(currentUserRegister.value)
|
||||
let user_id = localStorage.getItem('register_provider_id')
|
||||
let codeVerify = await axios.post(`/agent/verify-email/${user_id}`, {
|
||||
token: Number(code),
|
||||
|
||||
}).then(r => {
|
||||
if (r.data.message == "Account verified") {
|
||||
localStorage.setItem('step-register', step)
|
||||
currentStep.value = step
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response && error.response.data.message == 'already verified') {
|
||||
getIsTonalSnackbarVisibleError.value = true;
|
||||
errorMessage.value = 'Otp not match';
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
const registerAgent = async () => {
|
||||
isLoadingVisible.value = true;
|
||||
await axios.post('/agent/registerPost', {
|
||||
|
||||
first_name: first_name.value,
|
||||
last_name: last_name.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
|
||||
|
||||
}).then(r => {
|
||||
console.log(r.data);
|
||||
verfyEmail.value = true
|
||||
isLoadingVisible.value = false;
|
||||
user.value = r.data.user
|
||||
localStorage.setItem('register_provider_id', r.data.user.id)
|
||||
// getIsTonalSnackbarVisible.value = true;
|
||||
//successMessage.value = r.data.message
|
||||
// email.value = null
|
||||
// phone.value = null
|
||||
// password.value = null
|
||||
//name.value = null
|
||||
// home_address.value = null
|
||||
// medical_license_number.value = null
|
||||
// years_of_experience.value = null
|
||||
// gender.value = null
|
||||
// specialty.value = null
|
||||
// gender.value = null
|
||||
//router.push('/provider/thank-you')
|
||||
// localStorage.setItem('access_token', r.data.access_token)
|
||||
// localStorage.setItem('agent_id', r.data.data.id)
|
||||
// localStorage.setItem('user_role', 'agent')
|
||||
// localStorage.setItem('userAbilities', '[{"action":"manage","subject":"all"}]')
|
||||
// const userAbilities = [{ "action": "manage", "subject": "all" }];
|
||||
// ability.update(userAbilities)
|
||||
// router.replace(route.query.to && route.query.to != '/agent/login' ? String(route.query.to) : '/agent/dashboard')
|
||||
}).catch(error => {
|
||||
inavlid.value = true;
|
||||
verfyEmail.value = false
|
||||
console.error("Invalid Credentials", error.response.data.message);
|
||||
localStorage.setItem('step-register', 1)
|
||||
if (error.response && error.response.data.message) {
|
||||
const isDuplicateEntryError = /1062 Duplicate entry/.test(error.response.data.message);
|
||||
if (isDuplicateEntryError) {
|
||||
getIsTonalSnackbarVisibleError.value = true;
|
||||
errorMessage.value = 'Email already taken!';
|
||||
}
|
||||
}
|
||||
|
||||
isLoadingVisible.value = false;
|
||||
let errors = error.response.data.errors
|
||||
for (let data in errors) {
|
||||
InvalidCredential.value = data + ": " + errors[data];
|
||||
isLoadingVisible.value = false;
|
||||
getIsTonalSnackbarVisibleError.value = true;
|
||||
errorMessage.value = data + ": " + errors[data];
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
const saveInformation = async () => {
|
||||
let formData = {
|
||||
home_address: home_address.value,
|
||||
city: city.value,
|
||||
state: stateAddress.value,
|
||||
zip_code: zip.value,
|
||||
medical_license_number: medicalLicenseNumbers.value,
|
||||
years_of_experience: years_of_experience.value,
|
||||
specialty: specialty.value,
|
||||
gender: gender.value,
|
||||
practice_state: state.value,
|
||||
phone: phone.value,
|
||||
availabilityFrom: availabilityFrom.value,
|
||||
availabilityTo: availabilityTo.value
|
||||
|
||||
}
|
||||
console.log(currentUserRegister.value)
|
||||
|
||||
isLoadingVisible.value = true;
|
||||
let user_id = localStorage.getItem('register_provider_id')
|
||||
await axios.post(`/agent/save-profile/${user_id}`, {
|
||||
|
||||
home_address: home_address.value,
|
||||
city: city.value,
|
||||
state: stateAddress.value,
|
||||
zip_code: zip.value,
|
||||
medical_license_number: medicalLicenseNumbers.value,
|
||||
years_of_experience: years_of_experience.value,
|
||||
specialty: specialty.value,
|
||||
gender: gender.value,
|
||||
practice_state: state.value,
|
||||
phone: phone.value,
|
||||
availabilityFrom: availabilityFrom.value,
|
||||
availabilityTo: availabilityTo.value
|
||||
|
||||
|
||||
}).then(r => {
|
||||
console.log(r.data);
|
||||
verfyEmail.value = true
|
||||
isLoadingVisible.value = false;
|
||||
localStorage.setItem('register-form-data', null)
|
||||
localStorage.setItem('register_provider_id', null)
|
||||
localStorage.setItem('step-register', 1)
|
||||
localStorage.setItem('thank-you-page', 'yes')
|
||||
// getIsTonalSnackbarVisible.value = true;
|
||||
//successMessage.value = r.data.message
|
||||
// email.value = null
|
||||
// phone.value = null
|
||||
// password.value = null
|
||||
//name.value = null
|
||||
// home_address.value = null
|
||||
// medical_license_number.value = null
|
||||
// years_of_experience.value = null
|
||||
// gender.value = null
|
||||
// specialty.value = null
|
||||
// gender.value = null
|
||||
router.push('/provider/thank-you')
|
||||
// localStorage.setItem('access_token', r.data.access_token)
|
||||
// localStorage.setItem('agent_id', r.data.data.id)
|
||||
// localStorage.setItem('user_role', 'agent')
|
||||
// localStorage.setItem('userAbilities', '[{"action":"manage","subject":"all"}]')
|
||||
// const userAbilities = [{ "action": "manage", "subject": "all" }];
|
||||
// ability.update(userAbilities)
|
||||
// router.replace(route.query.to && route.query.to != '/agent/login' ? String(route.query.to) : '/agent/dashboard')
|
||||
}).catch(error => {
|
||||
inavlid.value = true;
|
||||
verfyEmail.value = false
|
||||
console.error("Invalid Credentials", error.response.data.message);
|
||||
if (error.response && error.response.data.message) {
|
||||
const isDuplicateEntryError = /1062 Duplicate entry/.test(error.response.data.message);
|
||||
if (isDuplicateEntryError) {
|
||||
getIsTonalSnackbarVisibleError.value = true;
|
||||
errorMessage.value = 'Email already taken!';
|
||||
}
|
||||
}
|
||||
|
||||
isLoadingVisible.value = false;
|
||||
let errors = error.response.data.errors
|
||||
for (let data in errors) {
|
||||
InvalidCredential.value = data + ": " + errors[data];
|
||||
isLoadingVisible.value = false;
|
||||
getIsTonalSnackbarVisibleError.value = true;
|
||||
errorMessage.value = data + ": " + errors[data];
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
const reSendCode = async () => {
|
||||
isLoadingVisible.value = true;
|
||||
let user_id = localStorage.getItem('register_provider_id')
|
||||
let codeVerify = await axios.post(`/agent/resend-code/${user_id}`, {}).then(r => {
|
||||
console.log(r.data)
|
||||
isLoadingVisible.value = false;
|
||||
getIsTonalSnackbarVisible.value = true
|
||||
successMessage.value = r.data.message
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
isLoadingVisible.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const verificationFields = ref([])
|
||||
const handleInput = (index, event) => {
|
||||
const inputValue = event.target.value.replace(/\D/g, '')
|
||||
const sanitizedValue = inputValue.slice(0, 1)
|
||||
|
||||
verificationCode.value[index] = sanitizedValue
|
||||
|
||||
if (sanitizedValue && index < verificationCode.value.length - 1) {
|
||||
const nextField = verificationFields.value[index + 1].$el.querySelector('input')
|
||||
nextField.focus()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSnackbar v-model="getIsTonalSnackbarVisibleError" :timeout="15000" location="top end" variant="flat" color="red">
|
||||
{{ errorMessage }}
|
||||
</VSnackbar>
|
||||
<VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="green">
|
||||
{{ successMessage }}
|
||||
</VSnackbar>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard class="auth-card pa-2 rounded-5 regbx" max-width="600">
|
||||
<VCardItem class="justify-center">
|
||||
<VCardTitle class="text-2xl font-weight-bold text-primary">
|
||||
<VImg :src='seetingPlanLogo' width="250" height="50" class="logo-img" />
|
||||
</VCardTitle>
|
||||
<VDialog v-model="isLoadingVisible" 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>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
|
||||
|
||||
<VForm ref="refVForm" @submit.prevent="onSubmit">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- <v-alert v-if="inavlid" :text=InvalidCredential type="error"></v-alert> -->
|
||||
</VCol>
|
||||
<VRow class="bg-white" v-if="currentStep === 1">
|
||||
<VCol cols="12" class="d-flex align-center text-center">
|
||||
<VIcon icon="mdi-lock" size="30" class="mr-2" />
|
||||
<h4 class="section-title">Basic Information</h4>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="first_name" label="First Name" type="name"
|
||||
:rules="[requiredFirstName]" :error-messages="errors.first_name"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="last_name" label="Last Name" type="name"
|
||||
:rules="[requiredLastName]" :error-messages="errors.last_name"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="email" label="Email" type="email"
|
||||
:rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<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"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
|
||||
<VCol class="text-center" cols="12">
|
||||
|
||||
<VBtn color="rgb(var(--v-theme-yellow-theme-button))"
|
||||
class="text-center text-white px-5" @click="validateAndProceed(2, 'verification')">
|
||||
Next</VBtn>
|
||||
</VCol>
|
||||
|
||||
</VRow>
|
||||
<VRow v-if="currentStep === 2" class=" text-center bg-white">
|
||||
<VCol>
|
||||
<VRow class="verfication_row">
|
||||
<h3>Kindly input the four-digit verification code that was sent to you via email.
|
||||
</h3>
|
||||
|
||||
<v-col cols="3" v-for="(digit, index) in verificationCode" :key="index">
|
||||
<v-text-field v-model="verificationCode[index]" maxlength="1" type="number"
|
||||
min="0" max="9" outlined dense required class="verification-field"
|
||||
@input="handleInput(index, $event)" ref="verificationFields"></v-text-field>
|
||||
</v-col>
|
||||
<VCol cols="12">
|
||||
<VBtn @click="verifyCode(3, 'verfication')"
|
||||
color="rgb(var(--v-theme-yellow-theme-button))" class="text-white">
|
||||
Verify
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VRow class="bg-white" v-if="currentStep === 3">
|
||||
<VCol cols="12" class="d-flex align-center text-center">
|
||||
<VIcon icon="mdi-account-circle" size="32" class="mr-2" />
|
||||
<h4 class="section-title">Personal Information</h4>
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField v-model="home_address" label="Home Address" :rules="[requiredAddress]"
|
||||
:error-messages="errors.home_address" density="comfortable" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="city" label="City" density="comfortable" :rules="[requiredCity]"
|
||||
:error-messages="errors.city" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
|
||||
<v-autocomplete clearable v-model="stateAddress" label="State" density="comfortable"
|
||||
:items="sortedStates" item-title="name" item-value="abbreviation"
|
||||
:rules="[requiredState]" :error-messages="errors.stateAddress">
|
||||
</v-autocomplete>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="zip" label="Zip" density="comfortable" :rules="[requiredZip]"
|
||||
:error-messages="errors.zip" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="phone" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
||||
:rules="[requiredPhone, validUSAPhone]" :error-messages="errors.phone"
|
||||
placeholder="i.e. (000) 000-0000" @input="formatPhoneNumber" max="14"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect v-model="gender" label="Gender" :items="genders" :rules="[requiredGender]"
|
||||
:error-messages="errors.gender" item-title="title" item-value="value"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
<VCol class="text-center" cols="12">
|
||||
<VBtn color="rgb(var(--v-theme-yellow-theme-button))"
|
||||
class="text-center text-white px-5"
|
||||
@click="validateAndProceed(4, 'Personal Information')" block>
|
||||
Next</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VRow class="bg-white" v-if="currentStep === 4">
|
||||
<VCol cols="12" class="d-flex align-center text-center">
|
||||
<VIcon icon="mdi-briefcase" size="32" class="mr-2" />
|
||||
<h4 class="section-title">Professional Information</h4>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="years_of_experience" label="Years of Experience" type="number"
|
||||
:rules="[requiredYearsofExperience]" :error-messages="errors.years_of_experience"
|
||||
density="comfortable" />
|
||||
</VCol>
|
||||
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="specialty" label="Practice or Provider's Specialty" type="text"
|
||||
:rules="[requiredSpecialty]" :error-messages="errors.specialty"
|
||||
density="comfortable" />
|
||||
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
|
||||
<VSelect v-model="availabilityFrom" label="Availability From" :items="timeOptions"
|
||||
density="comfortable" :rules="[requiredAvailability]"
|
||||
:error-messages="errors.availabilityFrom" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<!-- timeOptions.filter((time) => time > availabilityFrom) -->
|
||||
<VSelect v-model="availabilityTo" label="Availability To" :items="timeOptions"
|
||||
density="comfortable" :rules="[requiredAvailability]"
|
||||
:error-messages="errors.availabilityTo" />
|
||||
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<v-select v-model="state" label="Region Currently Practicing" :items="sortedStates"
|
||||
item-title="name" item-value="abbreviation" multiple :rules="[requiredState]"
|
||||
:error-messages="errors.state" density="comfortable">
|
||||
</v-select>
|
||||
</VCol>
|
||||
<!-- <VCol cols="12" md="6">
|
||||
<VTextField v-model="medical_license_number"
|
||||
:label="`Medical License Number for ${selectedStatesString}`" :rules="[requiredLicenseNumber]"
|
||||
:error-messages="errors.medical_license_number" />
|
||||
</VCol> -->
|
||||
<VCol cols="12" v-if="state.length > 0">
|
||||
<div class="d-flex align-center mb-4">
|
||||
<VIcon icon="mdi-certificate" size="32" class="mr-2" />
|
||||
<h4 class="section-title">Medical License Number</h4>
|
||||
</div>
|
||||
<div v-for="(stat, index) in state" :key="index">
|
||||
<VTextField v-model="medicalLicenseNumbers[stat]"
|
||||
:label="`${selectedStateName(stat)}`" :rules="[requiredLicenseNumber]"
|
||||
density="comfortable"
|
||||
:error-messages="errors[`medicalLicenseNumber_${selectedStateName(stat)}`]"
|
||||
class="mb-2" />
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- email -->
|
||||
|
||||
<VCol class="text-center px-5" cols="12">
|
||||
<!-- <VBtn color="rgb(var(--v-theme-yellow))" @click="currentStep = 3" class="mb-3" style="background-color: rgb(var(--v-theme-yellow)) !important"
|
||||
block>Back</VBtn> -->
|
||||
|
||||
<VBtn type=" submit" style="background-color: rgb(var(--v-theme-yellow-theme-button)) !important;"
|
||||
block>
|
||||
Register
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
|
||||
|
||||
</VRow>
|
||||
<VCol cols="12" class="text-center text-base px-0 py-0 mb-0 mt-7 text-yellow-theme-button"
|
||||
v-if="currentStep === 1">
|
||||
<span> Already have an account? </span>
|
||||
<RouterLink class="text-yellow-theme-button" to="/provider/login"
|
||||
style="text-decoration: underline;">
|
||||
Login
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
<VCol cols="12" class="text-center text-base px-0 py-0 mb-0 mt-7 text-yellow-theme-button"
|
||||
v-if="currentStep === 2">
|
||||
<span> Didn't received code </span>
|
||||
<RouterLink class="text-yellow-theme-button" @click.prevent="reSendCode" to="#"
|
||||
style="text-decoration: underline;">
|
||||
Send Again
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
|
||||
.regbg {
|
||||
background-image: url('/assets/images/reg_bg.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.regbx {
|
||||
background-color: rgb(var(--v-theme-yellow));
|
||||
box-shadow: 0px 0px 10px #ccc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ff2f2f;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.verification-field[type="number"]::-webkit-inner-spin-button,
|
||||
.verification-field[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.verfication_row {
|
||||
max-width: 400px;
|
||||
margin: 0 auto !important;
|
||||
|
||||
input {
|
||||
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 50px;
|
||||
border: solid 1px #ccc;
|
||||
box-shadow: 0 0 5px #ccc inset;
|
||||
outline: none;
|
||||
width: 20%;
|
||||
transition: all .2s ease-in-out;
|
||||
border-radius: 3px;
|
||||
|
||||
&:focus {
|
||||
border-color: purple;
|
||||
box-shadow: 0 0 5px purple inset;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 30px 0 50px;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
background-color: #B85FC6;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user