From bf2c7d50312f7638286243eb2fd97c53fcc44bc2 Mon Sep 17 00:00:00 2001 From: Damian Date: Thu, 21 Nov 2024 11:39:11 +0100 Subject: [PATCH] chore(vue) add confirm password check on register --- .../clients/web/vue3/src/composables/use-users.ts | 8 ++++++++ .../clients/web/vue3/src/services/users/forms.ts | 8 -------- .../clients/web/vue3/src/views/Signup.vue | 10 +++++++++- 3 files changed, 17 insertions(+), 9 deletions(-) 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 d3b1da46c..07958ec20 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 bd4504703..7cc01acfa 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 9fb0b3431..b6d5890e3 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 = () => {
-