verification
This commit is contained in:
@@ -113,6 +113,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
|
||||
backgroundColor: '#faf7f5',
|
||||
locale: this.dataset.locale,
|
||||
withPhone: this.dataset.withPhone === 'true',
|
||||
withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
|
||||
withLogo: this.dataset.withLogo !== 'false',
|
||||
editable: this.dataset.editable !== 'false',
|
||||
authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
|
||||
|
||||
@@ -97,6 +97,23 @@ button[disabled] .enabled {
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.tooltip-bottom-start:before {
|
||||
transform: translateX(-31%);
|
||||
top: var(--tooltip-offset);
|
||||
left: 100%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.tooltip-bottom-start:after {
|
||||
transform: translateX(-25%);
|
||||
border-color: transparent transparent var(--tooltip-color) transparent;
|
||||
top: var(--tooltip-tail-offset);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'FieldArea',
|
||||
@@ -311,7 +311,8 @@ export default {
|
||||
cells: this.t('cells'),
|
||||
stamp: this.t('stamp'),
|
||||
payment: this.t('payment'),
|
||||
phone: this.t('phone')
|
||||
phone: this.t('phone'),
|
||||
verification: this.t('verify_id')
|
||||
}
|
||||
},
|
||||
alignClasses () {
|
||||
@@ -340,7 +341,8 @@ export default {
|
||||
cells: IconColumns3,
|
||||
multiple: IconChecks,
|
||||
phone: IconPhoneCheck,
|
||||
payment: IconCreditCard
|
||||
payment: IconCreditCard,
|
||||
verification: IconId
|
||||
}
|
||||
},
|
||||
image () {
|
||||
|
||||
@@ -448,9 +448,22 @@
|
||||
@focus="scrollIntoField(currentField)"
|
||||
@submit="!isSubmitting && submitStep()"
|
||||
/>
|
||||
<VerificationStep
|
||||
v-else-if="currentField.type === 'verification'"
|
||||
ref="currentStep"
|
||||
:key="currentField.uuid"
|
||||
:locale="language?.toLowerCase() || browserLanguage"
|
||||
:submitter="submitter"
|
||||
:empty-value-required-step="emptyValueRequiredStep"
|
||||
:field="currentField"
|
||||
:submitter-slug="submitterSlug"
|
||||
:values="values"
|
||||
@focus="scrollIntoField(currentField)"
|
||||
@submit="!isSubmitting && submitStep()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
|
||||
v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
|
||||
:class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
|
||||
>
|
||||
<button
|
||||
@@ -537,6 +550,7 @@ import AttachmentStep from './attachment_step'
|
||||
import MultiSelectStep from './multi_select_step'
|
||||
import PhoneStep from './phone_step'
|
||||
import PaymentStep from './payment_step'
|
||||
import VerificationStep from './verification_step'
|
||||
import TextStep from './text_step'
|
||||
import NumberStep from './number_step'
|
||||
import DateStep from './date_step'
|
||||
@@ -579,6 +593,7 @@ export default {
|
||||
IconWritingSign,
|
||||
AttachmentStep,
|
||||
InitialsStep,
|
||||
VerificationStep,
|
||||
InviteForm,
|
||||
MultiSelectStep,
|
||||
IconInnerShadowTop,
|
||||
@@ -908,7 +923,23 @@ export default {
|
||||
return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f))
|
||||
},
|
||||
stepFields () {
|
||||
return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
|
||||
const verificationFields = []
|
||||
|
||||
const sortedFields = this.fields.reduce((acc, f) => {
|
||||
if (f.type === 'verification') {
|
||||
verificationFields.push(f)
|
||||
} else if (!f.readonly) {
|
||||
acc.push(f)
|
||||
}
|
||||
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
if (verificationFields.length) {
|
||||
sortedFields.push(verificationFields.pop())
|
||||
}
|
||||
|
||||
return sortedFields.reduce((acc, f) => {
|
||||
const prevStep = acc[acc.length - 1]
|
||||
|
||||
if (this.checkFieldConditions(f)) {
|
||||
@@ -1224,7 +1255,7 @@ export default {
|
||||
|
||||
const submitStep = this.currentStep
|
||||
|
||||
const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
|
||||
const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
|
||||
? this.$refs.currentStep.submit
|
||||
: () => Promise.resolve({})
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
const en = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
|
||||
verify_id: 'Verify ID',
|
||||
identity_verification: 'Identity verification',
|
||||
complete: 'Complete',
|
||||
fill_all_required_fields_to_complete: 'Fill all required fields to complete',
|
||||
sign_and_complete: 'Sign and Complete',
|
||||
@@ -94,6 +97,9 @@ const en = {
|
||||
}
|
||||
|
||||
const es = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
|
||||
verify_id: 'Verificar ID',
|
||||
identity_verification: 'Verificación de identidad',
|
||||
complete: 'Completar',
|
||||
fill_all_required_fields_to_complete: 'Complete todos los campos requeridos para finalizar',
|
||||
sign_and_complete: 'Firmar y Completar',
|
||||
@@ -188,6 +194,9 @@ const es = {
|
||||
}
|
||||
|
||||
const it = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
|
||||
verify_id: 'Verifica ID',
|
||||
identity_verification: "Verifica dell'identità",
|
||||
complete: 'Completa',
|
||||
fill_all_required_fields_to_complete: 'Compila tutti i campi obbligatori per completare',
|
||||
sign_and_complete: 'Firma e Completa',
|
||||
@@ -282,6 +291,9 @@ const it = {
|
||||
}
|
||||
|
||||
const de = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Vervollständigen Sie alle erforderlichen Felder, um mit der Identitätsverifizierung fortzufahren.',
|
||||
verify_id: 'ID überprüfen',
|
||||
identity_verification: 'Identitätsüberprüfung',
|
||||
complete: 'Abschließen',
|
||||
fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
|
||||
sign_and_complete: 'Signieren und Abschließen',
|
||||
@@ -376,6 +388,9 @@ const de = {
|
||||
}
|
||||
|
||||
const fr = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour continuer la vérification de l'identité.",
|
||||
verif_id: "Vérification de l'ID",
|
||||
verif_identite: "Vérification de l'identité",
|
||||
complete: 'Terminer',
|
||||
fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
|
||||
sign_and_complete: 'Signer et Terminer',
|
||||
@@ -470,6 +485,9 @@ const fr = {
|
||||
}
|
||||
|
||||
const pl = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
|
||||
verify_id: 'Zweryfikuj ID',
|
||||
identity_verification: 'Weryfikacja tożsamości',
|
||||
complete: 'Zakończ',
|
||||
fill_all_required_fields_to_complete: 'Uzupełnij wszystkie wymagane pola, aby zakończyć',
|
||||
sign_and_complete: 'Podpisz i zakończ',
|
||||
@@ -564,6 +582,9 @@ const pl = {
|
||||
}
|
||||
|
||||
const uk = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
|
||||
verify_id: 'Підтвердження ідентичності',
|
||||
identity_verification: 'Ідентифікація особи',
|
||||
complete: 'Завершити',
|
||||
fill_all_required_fields_to_complete: "Заповніть всі обов'язкові поля для завершення",
|
||||
sign_and_complete: 'Підписати і завершити',
|
||||
@@ -658,6 +679,9 @@ const uk = {
|
||||
}
|
||||
|
||||
const cs = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
|
||||
verify_id: 'Ověřit ID',
|
||||
identity_verification: 'Ověření identity',
|
||||
complete: 'Dokončit',
|
||||
fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
|
||||
sign_and_complete: 'Podepsat a dokončit',
|
||||
@@ -752,6 +776,9 @@ const cs = {
|
||||
}
|
||||
|
||||
const pt = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
|
||||
verify_id: 'Verificar ID',
|
||||
identity_verification: 'Verificação de identidade',
|
||||
complete: 'Completar',
|
||||
preencher_todos_os_campos_obrigatórios_para_concluir: 'Preencher todos os campos obrigatórios para concluir',
|
||||
sign_and_complete: 'Assinar e Completar',
|
||||
@@ -846,6 +873,9 @@ const pt = {
|
||||
}
|
||||
|
||||
const he = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
|
||||
verify_id: 'אמת מזהה',
|
||||
identity_verification: 'אימות זהות',
|
||||
complete: 'השלם',
|
||||
fill_all_required_fields_to_complete: 'נא למלא את כל השדות הנדרשים להשלמה',
|
||||
sign_and_complete: 'חתום והשלם',
|
||||
@@ -941,6 +971,9 @@ const he = {
|
||||
}
|
||||
|
||||
const nl = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
|
||||
verify_id: 'Verifiëren ID',
|
||||
identity_verification: 'Identiteitsverificatie',
|
||||
complete: 'Voltooien',
|
||||
vul_alle_verplichte_velden_in_om_te_voltooien: 'Vul alle verplichte velden in om te voltooien',
|
||||
sign_and_complete: 'Ondertekenen en voltooien',
|
||||
@@ -1036,6 +1069,9 @@ const nl = {
|
||||
}
|
||||
|
||||
const ar = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
|
||||
verify_id: 'تحقق من الهوية',
|
||||
identity_verification: 'التحقق من الهوية',
|
||||
complete: 'اكتمال',
|
||||
fill_all_required_fields_to_complete: 'يرجى ملء جميع الحقول المطلوبة لإكمال',
|
||||
sign_and_complete: 'التوقيع والاكتمال',
|
||||
@@ -1130,6 +1166,9 @@ const ar = {
|
||||
}
|
||||
|
||||
const ko = {
|
||||
complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
|
||||
verify_id: '아이디 확인',
|
||||
identity_verification: '신원 확인',
|
||||
complete: '완료',
|
||||
fill_all_required_fields_to_complete: '모든 필수 필드를 작성하여 완료하세요',
|
||||
sign_and_complete: '서명하고 완료하기',
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<label
|
||||
v-if="!modelValue && !sessionId"
|
||||
:for="field.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>
|
||||
<MarkdownContent
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<label
|
||||
class="label text-2xl mb-2"
|
||||
>
|
||||
<MarkdownContent
|
||||
v-if="field.title"
|
||||
:string="field.title"
|
||||
/>
|
||||
<template v-else>{{ field.name || t('identity_verification') }}</template>
|
||||
</label>
|
||||
<div
|
||||
v-if="field.description"
|
||||
dir="auto"
|
||||
class="mb-4 px-1"
|
||||
>
|
||||
<MarkdownContent :string="field.description" />
|
||||
</div>
|
||||
<div
|
||||
v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
|
||||
class="px-1"
|
||||
>
|
||||
{{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<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
|
||||
ref="widgetContainer"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownContent from './markdown_content'
|
||||
import { IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
import phoneData from './phone_data'
|
||||
|
||||
export default {
|
||||
name: 'VerificationStep',
|
||||
components: {
|
||||
MarkdownContent,
|
||||
IconInnerShadowTop
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
submitter: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
emptyValueRequiredStep: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
locale: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'en'
|
||||
},
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['focus', 'submit', 'update:model-value', 'attached'],
|
||||
data () {
|
||||
return {
|
||||
isCreatingCheckout: false,
|
||||
isMathLoaded: false,
|
||||
isLoading: false,
|
||||
eidEasyData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
countryCode () {
|
||||
const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
const browserTz = browserTimeZone.split('/')[1]
|
||||
const country = phoneData.find(([a, b, c, tz]) => tz.includes(browserTz))
|
||||
|
||||
return country[0]
|
||||
},
|
||||
browserCountry () {
|
||||
return (navigator.language || navigator.userLanguage || 'en').split('-')[1]
|
||||
},
|
||||
widgetSettings () {
|
||||
return {
|
||||
clientId: this.eidEasyData.client_id,
|
||||
docId: this.eidEasyData.doc_id,
|
||||
language: this.locale,
|
||||
countryCode: this.browserCountry,
|
||||
enabledMethods: {
|
||||
signature: this.eidEasyData.available_methods
|
||||
},
|
||||
selectedMethod: null,
|
||||
enabledCountries: 'all',
|
||||
onSuccess: (data) => {
|
||||
this.$emit('submit')
|
||||
},
|
||||
onFail: (error) => {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.isLoading = true
|
||||
|
||||
Promise.all([
|
||||
import('@eid-easy/eideasy-widget'),
|
||||
this.start()
|
||||
]).finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
start () {
|
||||
return fetch(this.baseUrl + `/api/identity_verification/${this.field.uuid}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then(async (resp) => {
|
||||
this.eidEasyData = await resp.json()
|
||||
|
||||
const eidEasyWidget = document.createElement('eideasy-widget')
|
||||
|
||||
for (const key in this.widgetSettings) {
|
||||
eidEasyWidget[key] = this.widgetSettings[key]
|
||||
}
|
||||
|
||||
this.$refs.widgetContainer.innerHTML = ''
|
||||
this.$refs.widgetContainer.appendChild(eidEasyWidget)
|
||||
})
|
||||
},
|
||||
async submit () {
|
||||
return fetch(this.baseUrl + '/api/identity_verification', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then(async (resp) => {
|
||||
return resp
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -455,6 +455,7 @@ export default {
|
||||
fieldTypes: this.fieldTypes,
|
||||
backgroundColor: this.backgroundColor,
|
||||
withPhone: this.withPhone,
|
||||
withVerification: this.withVerification,
|
||||
withPayment: this.withPayment,
|
||||
isPaymentConnected: this.isPaymentConnected,
|
||||
withFormula: this.withFormula,
|
||||
@@ -635,6 +636,11 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
withVerification: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
withPayment: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@@ -1075,7 +1081,7 @@ export default {
|
||||
} else if (type === 'image') {
|
||||
area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
|
||||
area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
|
||||
} else if (type === 'signature' || type === 'stamp') {
|
||||
} else if (type === 'signature' || type === 'stamp' || type === 'verification') {
|
||||
area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
|
||||
area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight) / 2
|
||||
} else if (type === 'initials') {
|
||||
@@ -1239,7 +1245,7 @@ export default {
|
||||
w: area.maskW / 5 / area.maskW,
|
||||
h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
|
||||
}
|
||||
} else if (field.type === 'signature' || field.type === 'stamp') {
|
||||
} else if (field.type === 'signature' || field.type === 'stamp' || field.type === 'verification') {
|
||||
baseArea = {
|
||||
w: area.maskW / 5 / area.maskW,
|
||||
h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
v-for="(icon, type) in fieldIconsSorted"
|
||||
:key="type"
|
||||
>
|
||||
<li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
|
||||
<li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
@@ -51,11 +51,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading } from '@tabler/icons-vue'
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading, IconId } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'FiledTypeDropdown',
|
||||
inject: ['withPhone', 'withPayment', 't', 'fieldTypes'],
|
||||
inject: ['withPhone', 'withPayment', 'withVerification', 't', 'fieldTypes'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
@@ -111,7 +111,8 @@ export default {
|
||||
cells: this.t('cells'),
|
||||
stamp: this.t('stamp'),
|
||||
payment: this.t('payment'),
|
||||
phone: this.t('phone')
|
||||
phone: this.t('phone'),
|
||||
verification: this.t('verify_id')
|
||||
}
|
||||
},
|
||||
fieldLabels () {
|
||||
@@ -130,7 +131,8 @@ export default {
|
||||
cells: this.t('cells_field'),
|
||||
stamp: this.t('stamp_field'),
|
||||
payment: this.t('payment_field'),
|
||||
phone: this.t('phone_field')
|
||||
phone: this.t('phone_field'),
|
||||
verification: this.t('verify_id')
|
||||
}
|
||||
},
|
||||
fieldIcons () {
|
||||
@@ -150,7 +152,8 @@ export default {
|
||||
cells: IconColumns3,
|
||||
stamp: IconRubberStamp,
|
||||
payment: IconCreditCard,
|
||||
phone: IconPhoneCheck
|
||||
phone: IconPhoneCheck,
|
||||
verification: IconId
|
||||
}
|
||||
},
|
||||
fieldIconsSorted () {
|
||||
|
||||
@@ -111,14 +111,14 @@
|
||||
:key="type"
|
||||
>
|
||||
<button
|
||||
v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
|
||||
v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')"
|
||||
draggable="true"
|
||||
class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
|
||||
:style="{ backgroundColor }"
|
||||
:class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
|
||||
@dragstart="onDragstart({ type: type })"
|
||||
@dragend="$emit('drag-end')"
|
||||
@click="['file', 'payment'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
|
||||
@click="['file', 'payment', 'verification'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
|
||||
>
|
||||
<div
|
||||
class="flex items-console transition-all cursor-grab h-full absolute left-0"
|
||||
@@ -160,6 +160,32 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="withVerification === false && type == 'verification' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
|
||||
class="tooltip tooltip-bottom flex tooltip-bottom-start"
|
||||
:data-tip="t('obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more')"
|
||||
>
|
||||
<a
|
||||
href="https://www.docuseal.com/contact"
|
||||
target="_blank"
|
||||
class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
|
||||
:style="{ backgroundColor }"
|
||||
>
|
||||
<div class="w-0 absolute left-0">
|
||||
<IconLock
|
||||
width="18"
|
||||
height="18"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center flex-col px-2 py-2">
|
||||
<component :is="icon" />
|
||||
<span class="text-xs mt-1">
|
||||
{{ fieldNames[type] }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
@@ -197,7 +223,7 @@ export default {
|
||||
IconDrag,
|
||||
IconLock
|
||||
},
|
||||
inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't', 'fieldsDragFieldRef'],
|
||||
inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withPayment', 't', 'fieldsDragFieldRef'],
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
const en = {
|
||||
verify_id: 'Verify ID',
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtain qualified electronic signature (QeS) with the trusted provider. Click to learn more.',
|
||||
editable: 'Editable',
|
||||
recurrent: 'Recurrent',
|
||||
one_off: 'One-off',
|
||||
@@ -154,6 +156,8 @@ const en = {
|
||||
}
|
||||
|
||||
const es = {
|
||||
verify_id: 'Verificar ID',
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenga una firma electrónica cualificada (QeS) con el proveedor de confianza. Haga clic para obtener más información.',
|
||||
recurrent: 'Recurrente',
|
||||
one_off: 'Único',
|
||||
editable: 'Editable',
|
||||
@@ -309,6 +313,8 @@ const es = {
|
||||
}
|
||||
|
||||
const it = {
|
||||
verify_id: 'Verifica ID',
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Ottieni una firma elettronica qualificata (QeS) con il fornitore di fiducia. Clicca per saperne di più.',
|
||||
ricorrente: 'Ricorrente',
|
||||
una_volta: 'Una volta',
|
||||
editable: 'Modificabile',
|
||||
@@ -464,6 +470,8 @@ const it = {
|
||||
}
|
||||
|
||||
const pt = {
|
||||
verify_id: 'Verificar ID',
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenha a assinatura eletrônica qualificada (QeS) com o provedor confiável. Clique para saber mais.',
|
||||
recurrent: 'Recurrente',
|
||||
one_off: 'Único',
|
||||
editable: 'Editável',
|
||||
@@ -619,6 +627,8 @@ const pt = {
|
||||
}
|
||||
|
||||
const fr = {
|
||||
verify_id: "Vérifier l'ID",
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenez une signature électronique qualifiée (QeS) avec le fournisseur de confiance. Cliquez pour en savoir plus.',
|
||||
recurrent: 'Récurrent',
|
||||
one_off: 'Ponctuel',
|
||||
editable: 'Éditable',
|
||||
@@ -774,6 +784,8 @@ const fr = {
|
||||
}
|
||||
|
||||
const de = {
|
||||
verify_id: 'ID überprüfen',
|
||||
obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Erhalten Sie eine qualifizierte elektronische Signatur (QeS) beim vertrauenswürdigen Anbieter. Klicken Sie hier, um mehr zu erfahren.',
|
||||
wiederkehrend: 'Wiederkehrend',
|
||||
einmalig: 'Einmalig',
|
||||
editable: 'Bearbeitbar',
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
v-for="(icon, type) in fieldIconsSorted"
|
||||
:key="type"
|
||||
>
|
||||
<li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
|
||||
<li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
@@ -85,7 +85,7 @@ export default {
|
||||
IconPlus,
|
||||
IconX
|
||||
},
|
||||
inject: ['withPhone', 'withPayment', 'backgroundColor', 't'],
|
||||
inject: ['withPhone', 'withPayment', 'withVerification', 'backgroundColor', 't'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
|
||||
Reference in New Issue
Block a user