[PLA-1825] add form validation notification error

resources/js/components/batch/BatchMint.vue

@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-6 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div
                     class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow sm:rounded-lg sm:p-6"
                 >
@@ -166,9 +172,18 @@ const isAllValid = computed(() => {
     );
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;

resources/js/components/batch/BatchSetAttribute.vue

@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-4 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary p-6 shadow rounded-lg">
                     <div class="space-y-6">
                         <div class="flex items-center">
@@ -182,9 +188,18 @@ const removeAttributeItem = (index: number) => {
     attributes.value.splice(index, 1);
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!formRef.value.getMeta().valid) return;
+    if (!formRef.value.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;

resources/js/components/batch/BatchTransfer.vue

@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-6 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div
                     class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow sm:rounded-lg sm:p-6"
                 >
@@ -171,9 +177,18 @@ const isAllValid = computed(() => {
     );
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;

resources/js/components/pages/SettingsChangeEmail.vue

@@ -6,6 +6,7 @@
                 ref="formRef"
                 class="space-y-6"
                 :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
                 @submit="changeEmail"
             >
                 <FormInput
@@ -69,8 +70,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const changeEmail = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     verifyPasswordModal.value = true;
 };

resources/js/components/pages/SettingsResetPassword.vue

@@ -6,6 +6,7 @@
                 ref="formRef"
                 class="space-y-6"
                 :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
                 @submit="resetPassword"
             >
                 <FormInput
@@ -75,8 +76,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const resetPassword = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {

resources/js/components/pages/Setup.vue

@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="setupAccount">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="setupAccount"
+                >
                     <FormInput
                         v-model="url"
                         label="Enjin Platform URL"
@@ -69,9 +75,18 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const setupAccount = async () => {
     try {
-        if (!(await isValid())) return;
+        if (!(await isValid())) {
+            return;
+        }
         isLoading.value = true;
 
         if (window.location.protocol === 'https:' && url.value?.protocol === 'http:') {

resources/js/components/pages/auth/Login.vue

@@ -18,7 +18,13 @@
         </div>
         <div class="mt-4 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <FormInput
                         v-model="email"
                         label="Email address"
@@ -141,6 +147,13 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const login = async (recaptcha?: string) => {
     if (!(await isValid())) return;
 

resources/js/components/pages/auth/Register.vue

@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <FormInput
                         v-model="email"
                         label="Email address"
@@ -146,8 +152,17 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const register = async (recaptcha?: string) => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {

resources/js/components/pages/auth/RequestResetPassword.vue

@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <p class="text-sm text-center">
                         Enter your registered email below to receive password reset instructions
                     </p>
@@ -125,8 +131,17 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const requestReset = async (recaptcha?: string) => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {

resources/js/components/pages/auth/ResetPassword.vue

@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="resetPassword">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="resetPassword"
+                >
                     <FormInput
                         v-model="email"
                         label="Email"
@@ -89,8 +95,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const resetPassword = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {

resources/js/components/pages/create/CreateBeam.vue

@@ -10,7 +10,7 @@
                 :class="{ 'border border-red-400': !item.valid, 'border border-green-400': item.valid }"
                 class="animate-fade-in"
                 :title="`Beam Asset ${idx + 1}`"
-                :duskId="`tab${idx+ 1 }`"
+                :duskId="`tab${idx + 1}`"
             >
                 <template #icon>
                     <CheckCircleIcon class="ml-2 my-auto h-5 w-5 text-green-400" aria-hidden="true" v-if="item.valid" />
@@ -26,7 +26,13 @@
             </CollapseCard>
             <Btn class="!flex" @click="addItem" primary>Add Asset</Btn>
 
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBeam">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBeam"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
                     <div class="space-y-6">
                         <div class="flex justify-between items-center">
@@ -218,9 +224,18 @@ const validateForms = async () => {
     await formRef.value.validate();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBeam = async () => {
     await validateForms();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
     try {
         isLoading.value = true;
         const res = await BeamApi.createBeam(