Add basic Regle Frontend Validation

lcharette · lcharette · commit 6624ff656937 · 2025-08-03T21:06:38.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sprinkle-account/app/assets/composables/useUserProfileEditApi.ts b/packages/sprinkle-account/app/assets/composables/useUserProfileEditApi.ts
@@ -1,19 +1,27 @@
 import { ref } from 'vue'
 import axios from 'axios'
+import { useRegle } from '@regle/core'
 import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 import { useAlertsStore, useTranslator } from '@userfrosting/sprinkle-core/stores'
 import type { ApiResponse, ApiErrorResponse } from '@userfrosting/sprinkle-core/interfaces'
 import type { ProfileEditRequest } from '../interfaces'
-
-// TODO : Add validation
-// 'schema://requests/profile-settings.yaml'
+import { useRuleSchemaAdapter } from '@userfrosting/sprinkle-core/composables'
+import schemaFile from '../../schema/requests/profile-settings.yaml?raw'
 
 /**
  * API Composable
  */
 export function useUserProfileEditApi() {
     const apiLoading = ref<Boolean>(false)
     const apiError = ref<ApiErrorResponse | null>(null)
+    const formData = ref<ProfileEditRequest>({
+        first_name: '',
+        last_name: '',
+        locale: ''
+    })
+
+    // Load the schema and set up the validator
+    const { r$ } = useRegle(formData, useRuleSchemaAdapter().adapt(schemaFile))
 
     async function submitProfileEdit(data: ProfileEditRequest) {
         apiLoading.value = true
@@ -40,5 +48,5 @@ export function useUserProfileEditApi() {
             })
     }
 
-    return { submitProfileEdit, apiLoading, apiError }
+    return { submitProfileEdit, apiLoading, apiError, formData, r$ }
 }
diff --git a/packages/sprinkle-account/app/assets/tests/stores/useAuthStore.test.ts b/packages/sprinkle-account/app/assets/tests/stores/useAuthStore.test.ts
@@ -26,10 +26,9 @@ const testUser: UserDataInterface = {
 }
 
 // Mock useTranslator load function
-const loadTranslator = vi.fn()
 vi.mock('@userfrosting/sprinkle-core/stores', () => ({
     useTranslator: () => ({
-        load: loadTranslator
+        load: vi.fn()
     }),
     useConfigStore: () => ({
         get: vi.fn().mockReturnValue(false)
diff --git a/packages/sprinkle-core/app/assets/composables/index.ts b/packages/sprinkle-core/app/assets/composables/index.ts
@@ -1,3 +1,4 @@
 export { useSprunjer } from './useSprunjer'
 export { useCsrf } from './useCsrf'
 export { useAxiosInterceptor } from './useAxiosInterceptor'
+export { useRuleSchemaAdapter } from './useRuleSchemaAdapter'
diff --git a/packages/sprinkle-core/app/assets/composables/useRuleSchemaAdapter.ts b/packages/sprinkle-core/app/assets/composables/useRuleSchemaAdapter.ts
@@ -0,0 +1,105 @@
+import { parse } from 'yaml'
+import { withMessage, required, maxLength, minLength, email } from '@regle/rules'
+import { useTranslator } from '../stores'
+
+export function useRuleSchemaAdapter() {
+    /**
+     * Parse the YAML schema string into a JavaScript object.
+     *
+     * @param rawSchema The YAML schema string to parse.
+     * @returns RuleSchema The Regle schema object.
+     */
+    function adapt(rawSchema: string) {
+        // The YAML data parsed to a JavaScript object
+        const sourceSchema = parse(rawSchema)
+
+        // The Regle schema object to be returned
+        const regleSchema: any = {}
+
+        // Iterate over each field in the schema
+        for (const field in sourceSchema) {
+            // Check if the field is a direct property of the sourceSchema object
+            if (Object.prototype.hasOwnProperty.call(sourceSchema, field)) {
+                // Get the field rules from the source schema
+                const schemaFieldRules = sourceSchema[field]?.validators || {}
+
+                // The returned regle rules for the field
+                const regleRules: Record<string, any> = {}
+
+                // Iterate over each rule in the source schema field rules
+                for (const key of Object.keys(schemaFieldRules)) {
+                    adaptRule(key, schemaFieldRules, regleRules)
+                }
+
+                regleSchema[field] = regleRules
+            }
+        }
+
+        return regleSchema
+    }
+
+    function translateMessage(fieldRulesMeta: { message?: string; [key: string]: any }): string {
+        const { translate } = useTranslator()
+
+        // If there's no message, return an empty string
+        if (!fieldRulesMeta.message) {
+            return ''
+        }
+
+        // Copy the field rules meta to avoid mutation and remove the message key
+        const fieldRulesMetaCopy = { ...fieldRulesMeta }
+        delete fieldRulesMetaCopy.message
+
+        return translate(fieldRulesMeta.message, fieldRulesMetaCopy)
+    }
+
+    function adaptRule(key: string, schemaFieldRules: any, regleRules: Record<string, any>) {
+        // Required
+        if (key === 'required' && schemaFieldRules.required) {
+            const message: string = translateMessage(schemaFieldRules.required)
+            regleRules['required'] = message === '' ? required : withMessage(required, message)
+        }
+
+        // Email
+        if (key === 'email' && schemaFieldRules.email) {
+            const message: string = translateMessage(schemaFieldRules.email)
+            regleRules['email'] = withMessage(email, message)
+        }
+
+        // Length
+        if (key === 'length' && schemaFieldRules.length) {
+            if (schemaFieldRules.length.min !== undefined) {
+                const message: string = translateMessage(schemaFieldRules.length)
+                regleRules['minLength'] =
+                    message === ''
+                        ? minLength(schemaFieldRules.length.min)
+                        : withMessage(minLength(schemaFieldRules.length.min), message)
+            }
+            if (schemaFieldRules.length.max !== undefined) {
+                const message: string = translateMessage(schemaFieldRules.length)
+                regleRules['maxLength'] =
+                    message === ''
+                        ? maxLength(schemaFieldRules.length.max)
+                        : withMessage(maxLength(schemaFieldRules.length.max), message)
+            }
+        }
+
+        // equals : TODO
+        // integer : TODO
+        // matches : TODO
+        // member_of : TODO
+        // no_leading_whitespace : TODO
+        // no_trailing_whitespace : TODO
+        // not_equals : TODO
+        // not_matches : TODO
+        // not_member_of : TODO
+        // numeric : TODO
+        // range : TODO
+        // regex : TODO
+        // telephone : TODO
+        // uri : TODO
+        // username : TODO
+    }
+
+    return { adapt }
+}
diff --git a/packages/sprinkle-core/app/assets/tests/composables/useRuleSchemaAdapter.test.ts b/packages/sprinkle-core/app/assets/tests/composables/useRuleSchemaAdapter.test.ts
@@ -0,0 +1,103 @@
+import { describe, test, expect, vi, afterEach } from 'vitest'
+import { useRuleSchemaAdapter } from '../../composables/useRuleSchemaAdapter'
+import { useRegle } from '@regle/core'
+
+// Mock the translator store
+const translateMock = vi.fn((key: string) => key || '')
+vi.mock('@userfrosting/sprinkle-core/stores', () => ({
+    useTranslator: () => ({
+        translate: translateMock
+    })
+}))
+
+describe('useRuleSchemaAdapter', () => {
+    afterEach(() => {
+        vi.clearAllMocks()
+    })
+
+    test('should parse a basic schema', () => {
+        const yamlInput = `
+            foo:
+                validators:
+                    length:
+                        min: 1
+                        max: 132
+                    required: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                foo: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        expect(r$.foo).toBeDefined()
+        expect(r$.foo.$rules.required).toBeDefined()
+        expect(r$.foo.$rules.minLength).toBeDefined()
+        expect(r$.foo.$rules.maxLength).toBeDefined()
+    })
+
+    test('should parse a schema with a custom message', () => {
+        const yamlInput = `
+            name:
+                validators:
+                    length:
+                        min: 2
+                        max: 20
+                    required: true
+            email:
+                validators:
+                    length:
+                        min: 1
+                        max: 30
+                    email: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                name: '',
+                email: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        expect(r$.name).toBeDefined()
+        expect(r$.name.$rules.required).toBeDefined()
+        expect(r$.name.$rules.minLength).toBeDefined()
+        expect(r$.name.$rules.maxLength).toBeDefined()
+        expect(r$.email).toBeDefined()
+        expect(r$.email.$rules.required).not.toBeDefined()
+        expect(r$.email.$rules.minLength).toBeDefined()
+        expect(r$.email.$rules.maxLength).toBeDefined()
+    })
+
+    test('should parse a basic schema', () => {
+        const yamlInput = `
+            first_name:
+                validators:
+                    required:
+                        label: "&FIRST_NAME"
+                        message: VALIDATE.REQUIRED
+            last_name:
+                validators:
+                    required: true
+        `
+
+        const { r$ } = useRegle(
+            {
+                first_name: '',
+                last_name: ''
+            },
+            useRuleSchemaAdapter().adapt(yamlInput)
+        )
+
+        // Set translator expectations
+        expect(translateMock).toHaveBeenCalledExactlyOnceWith('VALIDATE.REQUIRED', {
+            label: '&FIRST_NAME'
+        })
+
+        expect(r$.first_name.$rules.required.$message).toBe('VALIDATE.REQUIRED') // Custom message
+        expect(r$.last_name.$rules.required.$message).toBe('This field is required') // Default message
+    })
+})
diff --git a/packages/sprinkle-core/package.json b/packages/sprinkle-core/package.json
@@ -34,8 +34,11 @@
         "app/assets/"
     ],
     "dependencies": {
+        "@regle/core": "^1.6.0",
+        "@regle/rules": "^1.6.0",
         "dot-prop": "^9.0.0",
-        "luxon": "^3.5.0"
+        "luxon": "^3.5.0",
+        "yaml": "^2.8.0"
     },
     "peerDependencies": {
         "axios": "^1.5.0",
diff --git a/packages/theme-pink-cupcake/src/components/Form/UFFormValidationError.vue b/packages/theme-pink-cupcake/src/components/Form/UFFormValidationError.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const { errors } = defineProps<{
+    errors: string[]
+}>()
+</script>
+
+<template>
+    <div class="uk-form-label uk-text-danger" v-for="error of errors" :key="error" v-html="error" />
+</template>
diff --git a/packages/theme-pink-cupcake/src/components/Pages/Account/FormUserProfile.vue b/packages/theme-pink-cupcake/src/components/Pages/Account/FormUserProfile.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
 import { useUserProfileEditApi } from '@userfrosting/sprinkle-account/composables'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
-import type { ProfileEditRequest } from '@userfrosting/sprinkle-account/interfaces'
 
 /**
  * Variables - Copy the user data to a reactive variable.
@@ -15,20 +13,23 @@ if (user === null) {
     throw new Error('User is null.')
 }
 
-const formData = ref<ProfileEditRequest>({
-    first_name: user.first_name,
-    last_name: user.last_name,
-    locale: user.locale
-})
-
 function getAvailableLocales(): string[] {
     return useConfigStore().get('locales.available')
 }
 
 /**
  * API - Use the profile edit API.
  */
-const { submitProfileEdit } = useUserProfileEditApi()
+const { submitProfileEdit, r$, formData } = useUserProfileEditApi()
+
+/**
+ * Initialize form data with user profile information.
+ */
+formData.value = {
+    first_name: user.first_name,
+    last_name: user.last_name,
+    locale: user.locale
+}
 
 /**
  * Methods - Submit the form to the API and handle the response.
@@ -47,13 +48,15 @@ const submitForm = () => {
                     <font-awesome-icon class="fa-form-icon" icon="edit" fixed-width />
                     <input
                         class="uk-input"
+                        :class="{ 'uk-form-danger': r$.first_name.$error }"
                         type="text"
                         :placeholder="$t('FIRST_NAME')"
                         aria-label="First Name"
                         data-test="first_name"
                         tabindex="1"
                         autofocus
                         v-model="formData.first_name" />
+                    <UFFormValidationError :errors="r$.$errors.first_name" />
                 </div>
             </div>
 
@@ -63,12 +66,14 @@ const submitForm = () => {
                     <font-awesome-icon class="fa-form-icon" icon="edit" fixed-width />
                     <input
                         class="uk-input"
+                        :class="{ 'uk-form-danger': r$.last_name.$error }"
                         type="text"
                         :placeholder="$t('LAST_NAME')"
                         aria-label="Last Name"
                         data-test="last_name"
                         tabindex="2"
                         v-model="formData.last_name" />
+                    <UFFormValidationError :errors="r$.$errors.last_name" />
                 </div>
             </div>
 
@@ -88,7 +93,9 @@ const submitForm = () => {
                             :key="key">
                             {{ value }}
                         </option>
+                        <option value="spanish">Spanish</option>
                     </select>
+                    <UFFormValidationError :errors="r$.$errors.locale" />
                 </div>
             </div>
 
diff --git a/packages/theme-pink-cupcake/src/components/index.ts b/packages/theme-pink-cupcake/src/components/index.ts
@@ -1,4 +1,5 @@
 import UFAlert from './UFAlert.vue'
+import UFFormValidationError from './Form/UFFormValidationError.vue'
 import UFLabel from './UFLabel.vue'
 import UFModal from './Modals/UFModal.vue'
 import UFModalAlert from './Modals/UFModalAlert.vue'
@@ -38,6 +39,7 @@ import SprunjeTable from './Sprunjer/SprunjeTable.vue'
 
 export {
     UFAlert,
+    UFFormValidationError,
     UFLabel,
     UFModal,
     UFModalAlert,
diff --git a/packages/theme-pink-cupcake/src/plugins/components.ts b/packages/theme-pink-cupcake/src/plugins/components.ts
diff --git a/packages/theme-pink-cupcake/src/tests/components/Pages/Account/FormRegister.test.ts b/packages/theme-pink-cupcake/src/tests/components/Pages/Account/FormRegister.test.ts
