add kba

2026-01-02 16:07:04 +02:00
parent c55036a1b1
commit b10ed46ccc
20 changed files with 639 additions and 28 deletions
@@ -60,6 +60,11 @@
      class="object-contain mx-auto"
      :src="stamp.url"
    >
+    <img
+      v-else-if="field.type === 'kba' && kba"
+      class="object-contain mx-auto"
+      :src="kba.url"
+    >
    <div
      v-else-if="field.type === 'signature' && signature"
      class="flex justify-between h-full gap-1 overflow-hidden w-full"
@@ -272,7 +277,7 @@

 <script>
 import MarkdownContent from './markdown_content'
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId, IconUserScan } from '@tabler/icons-vue'

 export default {
  name: 'FieldArea',
@@ -391,7 +396,8 @@ export default {
        stamp: this.t('stamp'),
        payment: this.t('payment'),
        phone: this.t('phone'),
-        verification: this.t('verify_id')
+        verification: this.t('verify_id'),
+        kba: this.t('kba')
      }
    },
    strikethroughWidth () {
@@ -454,7 +460,8 @@ export default {
        multiple: IconChecks,
        phone: IconPhoneCheck,
        payment: IconCreditCard,
-        verification: IconId
+        verification: IconId,
+        kba: IconUserScan,
      }
    },
    image () {
@@ -471,6 +478,13 @@ export default {
        return null
      }
    },
+    kba () {
+      if (this.field.type === 'kba') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
    signature () {
      if (this.field.type === 'signature') {
        return this.attachmentsIndex[this.modelValue]
@@ -465,6 +465,18 @@
            @focus="scrollIntoField(currentField)"
            @submit="!isSubmitting && submitStep()"
          />
+          <KbaStep
+            v-else-if="currentField.type === 'kba'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            :locale="language?.toLowerCase() || browserLanguage"
+            :submitter="submitter"
+            :empty-value-required-step="emptyValueRequiredStep"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            :values="values"
+            @submit="!isSubmitting && submitStep()"
+          />
          <VerificationStep
            v-else-if="currentField.type === 'verification'"
            ref="currentStep"
@@ -480,7 +492,7 @@
          />
        </div>
        <div
-          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification' && currentField.type !== 'kba') || submittedValues[currentField.uuid]"
          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
        >
          <button
@@ -569,6 +581,7 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import VerificationStep from './verification_step'
+import KbaStep from './kba_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
@@ -613,6 +626,7 @@ export default {
    AttachmentStep,
    InitialsStep,
    VerificationStep,
+    KbaStep,
    InviteForm,
    MultiSelectStep,
    IconInnerShadowTop,
@@ -1004,7 +1018,7 @@ export default {
      const verificationFields = []

      const sortedFields = this.fields.reduce((acc, f) => {
-        if (f.type === 'verification') {
+        if (f.type === 'verification' || f.type === 'kba') {
          verificationFields.push(f)
        } else if (!f.readonly) {
          acc.push(f)
@@ -1401,7 +1415,7 @@ export default {

      const submitStep = this.currentStep

-      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification', 'kba'].includes(this.currentField.type)
        ? this.$refs.currentStep.submit
        : () => Promise.resolve({})

@@ -1,4 +1,5 @@
 const en = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Please upload an image file',
  must_be_characters_length: 'Must be {number} characters length',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
@@ -100,6 +101,7 @@ const en = {
 }

 const es = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
  must_be_characters_length: 'Debe tener {number} caracteres de longitud',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
@@ -201,6 +203,7 @@ const es = {
 }

 const it = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Per favore carica un file immagine',
  must_be_characters_length: 'Deve essere lungo {number} caratteri',
  complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
@@ -302,6 +305,7 @@ const it = {
 }

 const de = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
  must_be_characters_length: 'Muss {number} Zeichen lang sein',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.',
@@ -403,6 +407,7 @@ const de = {
 }

 const fr = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Veuillez téléverser un fichier image',
  must_be_characters_length: 'Doit comporter {number} caractères',
  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.",
@@ -504,6 +509,7 @@ const fr = {
 }

 const pl = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Proszę przesłać plik obrazu',
  must_be_characters_length: 'Musi mieć długość {number} znaków',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
@@ -605,6 +611,7 @@ const pl = {
 }

 const uk = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
  must_be_characters_length: 'Має містити {number} символів',
  complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
@@ -706,6 +713,7 @@ const uk = {
 }

 const cs = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
  must_be_characters_length: 'Musí mít délku {number} znaků',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
@@ -807,6 +815,7 @@ const cs = {
 }

 const pt = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
  must_be_characters_length: 'Deve ter {number} caracteres',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
@@ -908,6 +917,7 @@ const pt = {
 }

 const he = {
+  kba: 'KBA',
  please_upload_an_image_file: 'אנא העלה קובץ תמונה',
  must_be_characters_length: 'חייב להיות באורך של {number} תווים',
  complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
@@ -1009,6 +1019,7 @@ const he = {
 }

 const nl = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
  must_be_characters_length: 'Moet {number} tekens lang zijn',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
@@ -1110,6 +1121,7 @@ const nl = {
 }

 const ar = {
+  kba: 'KBA',
  please_upload_an_image_file: 'يرجى تحميل ملف صورة',
  must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
  complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
@@ -1211,6 +1223,7 @@ const ar = {
 }

 const ko = {
+  kba: 'KBA',
  please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
  must_be_characters_length: '{number}자여야 합니다',
  complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
@@ -1312,6 +1325,7 @@ const ko = {
 }

 const ja = {
+  kba: 'KBA',
  please_upload_an_image_file: '画像ファイルをアップロードしてください',
  must_be_characters_length: '{number}文字でなければなりません',
  complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
@@ -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>