diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/use-users.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/use-users.ts index d3b1da46..07958ec2 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/use-users.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/use-users.ts @@ -18,6 +18,7 @@ import { reactive, ref } from 'vue' import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { useAlert } from '@/composables/CommonAlerts' +import { MustMatchValidator } from '@thinknimble/tn-forms' export function useUsers() { const userStore = useUserStore() @@ -27,6 +28,13 @@ export function useUsers() { const forgotPasswordForm = reactive(new EmailForgotPasswordForm({}) as TEmailForgotPasswordForm) const resetPasswordForm = reactive(new ResetPasswordForm({}) as TResetPasswordForm) const registerForm = reactive(new AccountForm({}) as TAccountForm) + registerForm.addFormLevelValidator( + 'confirmPassword', + new MustMatchValidator({ + matcher: 'password', + message: 'Passwords must match', + }), + ) const loading = ref(false) const { errorAlert, successAlert } = useAlert() diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts index bd450470..7cc01acf 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts @@ -131,14 +131,6 @@ export class ResetPasswordForm extends Form { value: '', validators: [], }) - - static dynamicValidators = { - confirmPassword: [ - new MustMatchValidator({ - matcher: 'password', - }), - ], - } } export type TResetPasswordForm = ResetPasswordForm & ResetPasswordInput diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue index 9fb0b343..b6d5890e 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue @@ -2,6 +2,8 @@ import InputField from '@/components/inputs/InputField.vue' import LoadingSpinner from '@/components/LoadingSpinner.vue' import { useUsers } from '@/composables/use-users' +import Button from '@/components/Button.vue' + const { register, loading, registerForm: form } = useUsers() const onRegister = () => { const createAccountInput = { @@ -89,7 +91,13 @@ const onRegister = () => {
-