Skip to content

BRD - access business password error flow update #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kialj876 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

BRD - access business password error flow update #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7ee88d
BRD - access business password error flow update
kialj876 Feb 20, 2026
104b547
cleanup
kialj876 Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 31 additions & 4 deletions web/business-registry-dashboard/app/components/Form/AddBusiness/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const loading = ref<boolean>(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
Expand All @@ -51,6 +52,7 @@ const formState = reactive<{
certify: undefined
},
passcode: undefined,
passcodeErrorCode: undefined,
delegation: {
account: undefined,
message: undefined
Expand Down Expand Up @@ -78,7 +80,16 @@ 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) {
ctx.addIssue({
code: 'custom',
path: ['passcode'],
message: t('form.manageBusiness.authOption.passcode.fields.passcode.error.default.api', props.authOptions.length)
})
}
})
}

Expand Down Expand Up @@ -204,19 +215,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
Expand Down Expand Up @@ -258,7 +282,10 @@ watch(() => props.authOptions, (newOptions) => {
<div
v-for="(option, index) in authOptions"
:key="option.slot"
:class="authOptions.length > 1 ? 'space-y-4 pl-2' : 'space-y-4'"
:class="[
authOptions.length > 1 ? 'space-y-4 pl-2' : 'space-y-4',
option.slot === 'passcode-option' && hasPasscodeErrors ? 'border-l-4 border-red-500' : ''
]"
>
<label v-if="authOptions.length > 1" class="flex cursor-pointer items-start space-x-3">
<input
Expand All @@ -277,7 +304,7 @@ watch(() => props.authOptions, (newOptions) => {
{{ option.label }}
</span>
<span
v-if="option.slot === 'email-option' && (businessDetails.isCoop || businessDetails.isCorporation)"
v-if="option.slot === 'email-option' && hasPasscodeOption && (businessDetails.isCoop || businessDetails.isCorporation)"
class="mt-1 text-sm text-bcGovColor-midGray"
>
{{ $t('form.manageBusiness.authOption.email.coopSubtext') }}
Expand Down
3 changes: 0 additions & 3 deletions web/business-registry-dashboard/app/components/Form/AddBusiness/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ const errorObj = ref<{ error: FetchError, type: string }>()
const successObj = ref<{ type: string, value: string }>()

function handleError (e: { error: FetchError, type: string }) {
if (e.type === 'passcode') {
emit('passcodeError')
}
errorObj.value = e
currentState.value = 'FormAddBusinessError'
}
Expand Down
8 changes: 3 additions & 5 deletions web/business-registry-dashboard/app/components/Modal/ManageBusiness.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const props = defineProps<{
}>()

const emailSent = ref(false)
const passcodeError = ref(false)

const loading = ref(true)
const hasBusinessAuthentication = ref(false)
Expand Down Expand Up @@ -147,8 +146,8 @@ onMounted(async () => {

<template>
<ModalBase
:alert="emailSent || passcodeError ? undefined : alert"
:title="emailSent || passcodeError ? $t('form.manageBusiness.headingRequestAccess') : $t('form.manageBusiness.heading')"
:alert="emailSent ? undefined : alert"
:title="emailSent ? $t('form.manageBusiness.headingRequestAccess') : $t('form.manageBusiness.heading')"
@modal-closed="handleEmailAuthSentStateClosed"
>
<div class="flex flex-col gap-4 md:w-[700px]">
Expand Down Expand Up @@ -232,8 +231,7 @@ onMounted(async () => {
:business-details="businessDetails"
:is-corp-or-ben-or-coop="isCorpOrBenOrCoop"
@email-success="emailSent = true"
@passcode-error="passcodeError = true"
@retry="emailSent = false; passcodeError = false"
@retry="emailSent = false"
/>
</div>
</ModalBase>
Expand Down
3 changes: 2 additions & 1 deletion web/business-registry-dashboard/i18n/locales/en-CA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,8 @@ export default {
},
default: {
required: 'Password is required',
length: 'Password must be 8 to 15 characters'
length: 'Password must be 8 to 15 characters',
api: 'Password error, please try again or choose an option below | Password error, please try again'
Copy link
Collaborator

@severinbeauvais severinbeauvais Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are run-on sentences (poor grammar). Please ask UX about them (and also line 353).

Copy link
Collaborator Author

@kialj876 kialj876 Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure I'll ask them about it

}
}
}
Expand Down
2 changes: 1 addition & 1 deletion web/business-registry-dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "business-registry-dashboard",
"private": true,
"type": "module",
"version": "1.2.9",
"version": "1.2.10",
"scripts": {
"build-check": "nuxt build",
"build": "nuxt generate",
Expand Down
Loading