chore(vue) add confirm password check on register

thinknimble · Nov 21, 2024 · bf2c7d5 · bf2c7d5
1 parent 2ce10d0
commit bf2c7d5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -131,14 +131,6 @@ export class ResetPasswordForm extends Form<ResetPasswordInput> {
     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
@@ -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 = () => {
         </div>
         <div>
           <LoadingSpinner v-if="loading" />
-          <Button variant="primary" v-else :disabled="!form.isValid" type="submit">
+          <Button
+            variant="primary"
+            v-else
+            :disabled="!form.isValid"
+            extend-class="w-full"
+            type="submit"
+          >
             Sign up
           </Button>
         </div>