Disable form submission on validation error

Author: lcharette

packages/sprinkle-account/app/assets/composables/useUserProfileEditApi.ts

@@ -12,7 +12,7 @@ import schemaFile from '../../schema/requests/profile-settings.yaml?raw'
  * API Composable
  */
 export function useUserProfileEditApi() {
-    const apiLoading = ref<Boolean>(false)
+    const apiLoading = ref<boolean>(false)
     const apiError = ref<ApiErrorResponse | null>(null)
     const formData = ref<ProfileEditRequest>({
         first_name: '',

packages/sprinkle-account/app/schema/requests/profile-settings.yaml

@@ -16,6 +16,9 @@ last_name:
       min: 1
       max: 30
       message: VALIDATE.LENGTH_RANGE
+    required:
+      label: "&LAST_NAME"
+      message: VALIDATE.REQUIRED
 locale:
   validators:
     required:

packages/theme-pink-cupcake/src/components/Pages/Account/FormUserProfile.vue

@@ -20,7 +20,7 @@ function getAvailableLocales(): string[] {
 /**
  * API - Use the profile edit API.
  */
-const { submitProfileEdit, r$, formData } = useUserProfileEditApi()
+const { submitProfileEdit, r$, formData, apiLoading } = useUserProfileEditApi()
 
 /**
  * Initialize form data with user profile information.
@@ -100,7 +100,11 @@ const submitForm = () => {
             </div>
 
             <div class="uk-text-center" uk-margin>
-                <button class="uk-button uk-button-primary" type="submit" tabindex="4">
+                <button
+                    class="uk-button uk-button-primary"
+                    :disabled="r$.$error || apiLoading"
+                    type="submit"
+                    tabindex="4">
                     {{ $t('SAVE') }}
                 </button>
             </div>