Create form errors

Author: tatevikg1

assets/vue/components/bounces/BounceRules.vue

@@ -95,8 +95,20 @@
                 v-model.trim="createForm.regex"
                 type="text"
                 required
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                :class="[
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  fieldHasError('regex')
+                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                ]"
               >
+              <p
+                v-for="message in fieldErrors('regex')"
+                :key="`regex-${message}`"
+                class="mt-1 text-sm text-red-600"
+              >
+                {{ message }}
+              </p>
             </div>
 
             <div>
@@ -105,8 +117,20 @@
                 id="bounce-rule-comment"
                 v-model.trim="createForm.comment"
                 type="text"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                :class="[
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  fieldHasError('comment')
+                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                ]"
+              >
+              <p
+                v-for="message in fieldErrors('comment')"
+                :key="`comment-${message}`"
+                class="mt-1 text-sm text-red-600"
               >
+                {{ message }}
+              </p>
             </div>
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -115,22 +139,46 @@
                 <select
                   id="bounce-rule-action"
                   v-model="createForm.action"
-                  class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  :class="[
+                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none sm:text-sm',
+                    fieldHasError('action')
+                      ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
+                      : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                  ]"
                 >
                   <option v-for="bounceAction in bounceActions" :key="bounceAction" :value="bounceAction">{{ bounceAction }}</option>
                 </select>
+                <p
+                  v-for="message in fieldErrors('action')"
+                  :key="`action-${message}`"
+                  class="mt-1 text-sm text-red-600"
+                >
+                  {{ message }}
+                </p>
               </div>
 
               <div>
                 <label for="bounce-rule-status" class="block text-sm font-medium text-slate-700">Status</label>
                 <select
                   id="bounce-rule-status"
                   v-model="createForm.status"
-                  class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  :class="[
+                    'mt-1 block w-full rounded-md shadow-sm py-2 px-3 bg-white focus:outline-none sm:text-sm',
+                    fieldHasError('status')
+                      ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
+                      : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                  ]"
                 >
                   <option value="active">active</option>
                   <option value="inactive">inactive</option>
                 </select>
+                <p
+                  v-for="message in fieldErrors('status')"
+                  :key="`status-${message}`"
+                  class="mt-1 text-sm text-red-600"
+                >
+                  {{ message }}
+                </p>
               </div>
             </div>
 
@@ -142,8 +190,20 @@
                 type="number"
                 min="0"
                 step="1"
-                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                :class="[
+                  'mt-1 block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm',
+                  fieldHasError('list_order')
+                    ? 'border border-red-300 focus:ring-red-500 focus:border-red-500'
+                    : 'border border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                ]"
+              >
+              <p
+                v-for="message in fieldErrors('list_order')"
+                :key="`list-order-${message}`"
+                class="mt-1 text-sm text-red-600"
               >
+                {{ message }}
+              </p>
             </div>
 
             <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
@@ -180,6 +240,7 @@ const allBounceRules = ref([])
 const isCreateModalOpen = ref(false)
 const isCreatingRule = ref(false)
 const createError = ref('')
+const createFieldErrors = ref({})
 const createForm = ref({
   regex: '',
   comment: '',
@@ -212,8 +273,48 @@ const resetCreateForm = () => {
     list_order: '',
   }
   createError.value = ''
+  createFieldErrors.value = {}
 }
 
+const normalizeValidationErrors = (error) => {
+  const responseData = error?.responseData
+  if (!responseData || typeof responseData !== 'object' || Array.isArray(responseData)) {
+    return {}
+  }
+
+  const sourceErrors =
+    responseData.errors && typeof responseData.errors === 'object' && !Array.isArray(responseData.errors)
+      ? responseData.errors
+      : responseData
+
+  const normalized = {}
+
+  Object.entries(sourceErrors).forEach(([field, messages]) => {
+    if (!field || messages === null || messages === undefined) {
+      return
+    }
+
+    const key = String(field)
+    const list = Array.isArray(messages) ? messages : [messages]
+    const textMessages = list
+      .map((message) => String(message).trim())
+      .filter(Boolean)
+
+    if (textMessages.length > 0) {
+      normalized[key] = textMessages
+    }
+  })
+
+  return normalized
+}
+
+const fieldErrors = (field) => {
+  const messages = createFieldErrors.value?.[field]
+  return Array.isArray(messages) ? messages : []
+}
+
+const fieldHasError = (field) => fieldErrors(field).length > 0
+
 const loadBounceRules = async () => {
   try {
     const bounceRules = await bouncesClient.listRegex()
@@ -247,7 +348,8 @@ const submitCreateRule = async () => {
 
   const regex = createForm.value.regex.trim()
   if (!regex) {
-    createError.value = 'Regex is required.'
+    createFieldErrors.value = { regex: ['Regex is required.'] }
+    createError.value = ''
     return
   }
 
@@ -269,21 +371,29 @@ const submitCreateRule = async () => {
   if (createForm.value.list_order !== '') {
     const parsedListOrder = Number(createForm.value.list_order)
     if (!Number.isInteger(parsedListOrder) || parsedListOrder < 0) {
-      createError.value = 'List Order must be a whole number greater than or equal to 0.'
+      createFieldErrors.value = {
+        ...createFieldErrors.value,
+        list_order: ['List Order must be a whole number greater than or equal to 0.']
+      }
+      createError.value = ''
       return
     }
     payload.list_order = parsedListOrder
   }
 
   isCreatingRule.value = true
   createError.value = ''
+  createFieldErrors.value = {}
 
   try {
     await bouncesClient.upsertRegex(payload)
     isCreateModalOpen.value = false
     await loadBounceRules()
   } catch (error) {
-    createError.value = error?.message ?? 'Failed to create rule.'
+    createFieldErrors.value = normalizeValidationErrors(error)
+    createError.value = Object.keys(createFieldErrors.value).length > 0
+      ? ''
+      : error?.message ?? 'Failed to create rule.'
   } finally {
     isCreatingRule.value = false
   }