mirror of https://github.com/docusealco/docuseal
Pete Matsyburka
1 month ago
parent
c55036a1b1
commit
b10ed46ccc
@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<label
|
||||
v-if="!error"
|
||||
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
|
||||
>
|
||||
<MarkdownContent
|
||||
v-if="field.title"
|
||||
:string="field.title"
|
||||
/>
|
||||
<template v-else>{{ field.name || 'Knowledge Based Authentication' }}</template>
|
||||
<span
|
||||
v-if="questions"
|
||||
class="float-right text-base font-normal text-neutral-500 mt-1 whitespace-nowrap"
|
||||
>
|
||||
Question {{ currentQuestionIndex + 1 }} / {{ questions.length }}
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
v-if="field.description"
|
||||
dir="auto"
|
||||
class="mb-4 px-1 field-description-text"
|
||||
>
|
||||
<MarkdownContent :string="field.description" />
|
||||
</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 text-center"
|
||||
>
|
||||
<div class="text-xl mb-4">
|
||||
{{ error }}
|
||||
</div>
|
||||
<button
|
||||
class="base-button w-full flex justify-center submit-form-button"
|
||||
@click="restartKba"
|
||||
>
|
||||
{{ questions ? 'Restart KBA' : 'Retry' }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="w-full flex space-x-2 justify-center mb-2"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
width="40"
|
||||
class="animate-spin h-10"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="questions && !error">
|
||||
<form @submit.prevent="nextQuestion">
|
||||
<div class="mb-6 px-1">
|
||||
<p class="font-semibold mb-4 text-lg">{{ currentQuestion.prompt }}</p>
|
||||
<div class="space-y-3.5 mx-auto">
|
||||
<div
|
||||
v-for="(answer, index) in currentQuestion.answers"
|
||||
:key="answer.text"
|
||||
>
|
||||
<label
|
||||
:for="`${currentQuestion.id}_${answer.text}`"
|
||||
class="flex items-center space-x-3 radio-label"
|
||||
>
|
||||
<input
|
||||
:id="`${currentQuestion.id}_${answer.text}`"
|
||||
v-model="answers[currentQuestion.id]"
|
||||
type="radio"
|
||||
:name="currentQuestion.id"
|
||||
:value="answer.text"
|
||||
class="base-radio !h-7 !w-7"
|
||||
required
|
||||
>
|
||||
<span class="text-xl">{{ answer.text }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="base-button w-full flex justify-center submit-form-button"
|
||||
:disabled="isSubmitting || !answers[currentQuestion.id]"
|
||||
>
|
||||
<span class="flex">
|
||||
<IconInnerShadowTop
|
||||
v-if="isSubmitting"
|
||||
class="mr-1 animate-spin"
|
||||
/>
|
||||
<span>
|
||||
{{ isLastQuestion ? (isSubmitting ? t('submitting_') : t('complete')) : t('next') }}
|
||||
</span><span
|
||||
v-if="isSubmitting"
|
||||
class="w-6 flex justify-start mr-1"
|
||||
><span>...</span></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else-if="!error">
|
||||
<form @submit.prevent="startKba">
|
||||
<div class="grid grid-cols-6 gap-x-2 md:gap-x-4 md:gap-y-2 mb-4">
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_fn"
|
||||
class="label text-sm md:text-base"
|
||||
>First Name</label>
|
||||
<input
|
||||
id="kba_fn"
|
||||
v-model="form.fn"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_ln"
|
||||
class="label text-sm md:text-base"
|
||||
>Last Name</label>
|
||||
<input
|
||||
id="kba_ln"
|
||||
v-model="form.ln"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="kba_addr"
|
||||
class="label text-sm md:text-base"
|
||||
>Address</label>
|
||||
<input
|
||||
id="kba_addr"
|
||||
v-model="form.addr"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label
|
||||
for="kba_city"
|
||||
class="label text-sm md:text-base"
|
||||
>City</label>
|
||||
<input
|
||||
id="kba_city"
|
||||
v-model="form.city"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label
|
||||
for="kba_state"
|
||||
class="label text-sm md:text-base"
|
||||
>State</label>
|
||||
<select
|
||||
id="kba_state"
|
||||
v-model="form.state"
|
||||
class="select select-bordered !h-10 min-h-[2.5rem] w-full bg-white font-normal !text-base"
|
||||
required
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
disabled
|
||||
>
|
||||
Select State
|
||||
</option>
|
||||
<option
|
||||
v-for="state in states"
|
||||
:key="state.code"
|
||||
:value="state.code"
|
||||
>
|
||||
{{ state.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label
|
||||
for="kba_zip"
|
||||
class="label text-sm md:text-base"
|
||||
>Zip</label>
|
||||
<input
|
||||
id="kba_zip"
|
||||
v-model="form.zip"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_phone"
|
||||
class="label text-sm md:text-base"
|
||||
>Phone</label>
|
||||
<input
|
||||
id="kba_phone"
|
||||
v-model="form.phone"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_email"
|
||||
class="label text-sm md:text-base"
|
||||
>Email</label>
|
||||
<input
|
||||
id="kba_email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_dob"
|
||||
class="label text-sm md:text-base"
|
||||
>DOB</label>
|
||||
<input
|
||||
id="kba_dob"
|
||||
v-model="form.dob"
|
||||
type="date"
|
||||
class="input input-bordered !h-10 md:w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<label
|
||||
for="kba_ssn"
|
||||
class="label text-sm md:text-base"
|
||||
>SSN</label>
|
||||
<input
|
||||
id="kba_ssn"
|
||||
v-model="form.ssn"
|
||||
type="text"
|
||||
class="input input-bordered !h-10 w-full bg-white"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="base-button w-full flex justify-center submit-form-button"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span class="flex">
|
||||
<IconInnerShadowTop
|
||||
v-if="isLoading"
|
||||
class="mr-1 animate-spin"
|
||||
/>
|
||||
<span>
|
||||
{{ isLoading ? 'Loading...' : 'Start Verification' }}
|
||||
</span><span
|
||||
v-if="isLoading"
|
||||
class="w-6 flex justify-start mr-1"
|
||||
><span>...</span></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownContent from './markdown_content'
|
||||
import { IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'KbaStep',
|
||||
components: {
|
||||
MarkdownContent,
|
||||
IconInnerShadowTop
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['submit'],
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSubmitting: false,
|
||||
questions: null,
|
||||
currentQuestionIndex: 0,
|
||||
token: null,
|
||||
answers: {},
|
||||
error: null,
|
||||
form: {
|
||||
fn: '',
|
||||
ln: '',
|
||||
addr: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zip: '',
|
||||
dob: '',
|
||||
ssn: '',
|
||||
phone: '',
|
||||
email: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentQuestion () {
|
||||
return this.questions ? this.questions[this.currentQuestionIndex] : null
|
||||
},
|
||||
states () {
|
||||
return [
|
||||
{ code: 'AL', name: 'Alabama' },
|
||||
{ code: 'AK', name: 'Alaska' },
|
||||
{ code: 'AZ', name: 'Arizona' },
|
||||
{ code: 'AR', name: 'Arkansas' },
|
||||
{ code: 'CA', name: 'California' },
|
||||
{ code: 'CO', name: 'Colorado' },
|
||||
{ code: 'CT', name: 'Connecticut' },
|
||||
{ code: 'DE', name: 'Delaware' },
|
||||
{ code: 'DC', name: 'District of Columbia' },
|
||||
{ code: 'FL', name: 'Florida' },
|
||||
{ code: 'GA', name: 'Georgia' },
|
||||
{ code: 'HI', name: 'Hawaii' },
|
||||
{ code: 'ID', name: 'Idaho' },
|
||||
{ code: 'IL', name: 'Illinois' },
|
||||
{ code: 'IN', name: 'Indiana' },
|
||||
{ code: 'IA', name: 'Iowa' },
|
||||
{ code: 'KS', name: 'Kansas' },
|
||||
{ code: 'KY', name: 'Kentucky' },
|
||||
{ code: 'LA', name: 'Louisiana' },
|
||||
{ code: 'ME', name: 'Maine' },
|
||||
{ code: 'MD', name: 'Maryland' },
|
||||
{ code: 'MA', name: 'Massachusetts' },
|
||||
{ code: 'MI', name: 'Michigan' },
|
||||
{ code: 'MN', name: 'Minnesota' },
|
||||
{ code: 'MS', name: 'Mississippi' },
|
||||
{ code: 'MO', name: 'Missouri' },
|
||||
{ code: 'MT', name: 'Montana' },
|
||||
{ code: 'NE', name: 'Nebraska' },
|
||||
{ code: 'NV', name: 'Nevada' },
|
||||
{ code: 'NH', name: 'New Hampshire' },
|
||||
{ code: 'NJ', name: 'New Jersey' },
|
||||
{ code: 'NM', name: 'New Mexico' },
|
||||
{ code: 'NY', name: 'New York' },
|
||||
{ code: 'NC', name: 'North Carolina' },
|
||||
{ code: 'ND', name: 'North Dakota' },
|
||||
{ code: 'OH', name: 'Ohio' },
|
||||
{ code: 'OK', name: 'Oklahoma' },
|
||||
{ code: 'OR', name: 'Oregon' },
|
||||
{ code: 'PA', name: 'Pennsylvania' },
|
||||
{ code: 'RI', name: 'Rhode Island' },
|
||||
{ code: 'SC', name: 'South Carolina' },
|
||||
{ code: 'SD', name: 'South Dakota' },
|
||||
{ code: 'TN', name: 'Tennessee' },
|
||||
{ code: 'TX', name: 'Texas' },
|
||||
{ code: 'UT', name: 'Utah' },
|
||||
{ code: 'VT', name: 'Vermont' },
|
||||
{ code: 'VA', name: 'Virginia' },
|
||||
{ code: 'WA', name: 'Washington' },
|
||||
{ code: 'WV', name: 'West Virginia' },
|
||||
{ code: 'WI', name: 'Wisconsin' },
|
||||
{ code: 'WY', name: 'Wyoming' }
|
||||
]
|
||||
},
|
||||
isLastQuestion () {
|
||||
return this.questions && this.currentQuestionIndex === this.questions.length - 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextQuestion () {
|
||||
if (this.isLastQuestion) {
|
||||
this.$emit('submit')
|
||||
} else {
|
||||
this.currentQuestionIndex++
|
||||
}
|
||||
},
|
||||
restartKba () {
|
||||
this.questions = null
|
||||
this.token = null
|
||||
this.answers = {}
|
||||
this.currentQuestionIndex = 0
|
||||
this.error = null
|
||||
},
|
||||
async startKba () {
|
||||
this.isLoading = true
|
||||
this.error = null
|
||||
|
||||
try {
|
||||
const payload = { ...this.form, submitter_slug: this.submitterSlug }
|
||||
|
||||
if (payload.dob) {
|
||||
payload.dob = payload.dob.replace(/-/g, '')
|
||||
}
|
||||
|
||||
if (payload.ssn) {
|
||||
payload.ssn = payload.ssn.replace(/\D/g, '')
|
||||
}
|
||||
|
||||
if (payload.phone) {
|
||||
payload.phone = payload.phone.replace(/^\+1/, '')
|
||||
}
|
||||
|
||||
const resp = await fetch(this.baseUrl + '/api/kba', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
|
||||
if (!resp.ok) throw new Error('Failed to start KBA')
|
||||
|
||||
const data = await resp.json()
|
||||
|
||||
if (data.result && data.result.action === 'FAIL') {
|
||||
if (data.result.detail === 'NO MATCH') {
|
||||
throw new Error('Unfortunately, we were unable to start Knowledge Based Authentication with the details provided. Please review and confirm that all your personal details are correct.')
|
||||
}
|
||||
|
||||
throw new Error(data.result.detail || 'KBA Start Failed')
|
||||
}
|
||||
|
||||
if (data.output && data.output.questions && data.output.questions.questions) {
|
||||
this.questions = data.output.questions.questions
|
||||
this.token = data.continuations.questions.template.token
|
||||
|
||||
this.questions.forEach(q => {
|
||||
this.answers[q.id] = null
|
||||
})
|
||||
} else {
|
||||
throw new Error('Invalid KBA response')
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = e.message
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
},
|
||||
async submit () {
|
||||
this.isSubmitting = true
|
||||
this.error = null
|
||||
|
||||
const formattedAnswers = Object.keys(this.answers).reduce((acc, key) => {
|
||||
acc[key] = [this.answers[key]]
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
try {
|
||||
const resp = await fetch(this.baseUrl + `/api/kba/${this.field.uuid}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
token: this.token,
|
||||
answers: formattedAnswers,
|
||||
submitter_slug: this.submitterSlug
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
const data = await resp.json()
|
||||
|
||||
if (data.result?.action !== 'PASS') {
|
||||
this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
|
||||
|
||||
throw new Error('Knowledge Based Authentication Failed')
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
this.error = 'Failed to submit answers'
|
||||
|
||||
throw new Error('Failed to submit answers')
|
||||
}
|
||||
|
||||
return resp
|
||||
} finally {
|
||||
this.isSubmitting = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 525 B |
Loading…
Reference in new issue