diff --git a/web/business-registry-dashboard/app/components/Form/AddBusiness/Base.vue b/web/business-registry-dashboard/app/components/Form/AddBusiness/Base.vue index 335c27fb..afa09356 100644 --- a/web/business-registry-dashboard/app/components/Form/AddBusiness/Base.vue +++ b/web/business-registry-dashboard/app/components/Form/AddBusiness/Base.vue @@ -42,6 +42,7 @@ const loading = ref(false) const formState = reactive<{ partner: { name: string | undefined, certify: boolean | undefined }, passcode: string | undefined, + passcodeErrorCode: number | undefined, delegation: { account: { name: string, branchName?: string, uuid: string } | undefined, message: string | undefined }, options: number, selectedOption: string | undefined @@ -51,6 +52,7 @@ const formState = reactive<{ certify: undefined }, passcode: undefined, + passcodeErrorCode: undefined, delegation: { account: undefined, message: undefined @@ -78,7 +80,19 @@ const formSchema = computed(() => { .refine(val => /^\d+$/.test(val), t('form.manageBusiness.authOption.passcode.fields.passcode.error.coop.type')) : z.string({ required_error: t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.required') }) .min(8, t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.length')) - .max(15, t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.length')) + .max(15, t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.length')), + passcodeErrorCode: z.number().optional() + }).superRefine((data, ctx) => { + if (data.passcodeErrorCode) { + const message = props.businessDetails.isCoop + ? t('form.manageBusiness.authOption.passcode.fields.passcode.error.coop.api', props.authOptions.length) + : t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.api', props.authOptions.length) + ctx.addIssue({ + code: 'custom', + path: ['passcode'], + message + }) + } }) } @@ -204,19 +218,32 @@ async function submitManageRequest () { if (openAuthOption.value.slot === 'firm-option') { emit('businessError', { error: e, type: 'firm' }) } else { - emit('businessError', { error: e, type: 'passcode' }) + formState.passcodeErrorCode = e.response?.status || 500 + await formRef.value?.validate('passcode', { silent: true }) + // NB: setting to undefined so that the next time the schema is validated it clears this issue + formState.passcodeErrorCode = undefined } } } loading.value = false } +const hasPasscodeErrors = computed((): boolean => { + const errors = formRef.value?.errors || [] + return !!errors.filter(err => err.path === 'passcode').length +}) + +const hasPasscodeOption = computed((): boolean => { + return !!props.authOptions.find(option => option.slot === 'passcode-option') +}) + watch(() => formState.selectedOption, () => { noOptionAlert.value = false // reset no option alert if selected option changes formRef.value?.clear() // clear form errors if selected option changes // reset form state if selected option changes formState.passcode = undefined + formState.passcodeErrorCode = undefined formState.delegation.message = undefined formState.delegation.account = undefined formState.partner.name = undefined @@ -258,7 +285,10 @@ watch(() => props.authOptions, (newOptions) => {