%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='bg-pink'>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<span class="font-bold uppercase text-xl">Account</span>
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold m-0">Verification</h1>
<AccountProgressBar slug="verification" />
<div class="page-header-bottom">
<AccountNav />
</div>
</PageHeader>
<Qualifications />
<Memberships />
<Insurance />
<Block title="Supervisor"
description="We require contact details of your supervisor to ensure you undertake regular supervision. Please ensure the supervisor is happy for us to contact them"
width="max-w-3xl">
<ValidationObserver ref="supervisorForm">
<form @submit.prevent="saveSupervisor" role="form" method="POST">
<div class="grid grid-cols-2 gap-x-8">
<t-input-group label="Name">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-input
v-model="supervisor.name"
placeholder="e.g. John Doe" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Email">
<ValidationProvider rules="required|email" name="email" v-slot="{ errors }">
<t-input
v-model="supervisor.email"
type="email"
placeholder="e.g. jdoe@gmail.com" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
<t-input-group label="Phone">
<ValidationProvider name="phone" v-slot="{ errors }">
<t-input
v-model="supervisor.phone"
type="tel" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<div class="flex items-center justify-center mb-10">
<button
:disabled="working == true"
class="btn btn-small btn-primary rounded-full"
type="submit">
<span v-if="working == false">Save Details</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Processing</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</Block>
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Verification | %s',
}
},
data() {
return {
working: false,
supervisor: {
name: '',
email: '',
phone: ''
}
}
},
async mounted() {
this.$axios.$post('/account/verification/supervisor').then((response) => {
this.supervisor = response.data;
})
},
methods: {
async saveSupervisor() {
this.$refs.supervisorForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/account/verification/supervisor/create', {
name: this.supervisor.name,
email: this.supervisor.email,
phone: this.supervisor.phone
}).then((response) => {
this.supervisor = response.data;
this.$toast.success('Successfully saved your supervisor').goAway(1500);
this.working = false;
}).catch(error => {
this.working = false;
this.$refs.supervisorForm.setErrors(error.response.data.errors);
})
})
}
}
}
</script>
Zerion Mini Shell 1.0