fix: show specific validation error messages instead of generic 'Invalid input data'

- Backend now returns first validation error message in 'message' field
- Both POST and PUT commander endpoints updated
- Frontend fallback to handle either message or details array format
- Users now see 'Select at least one color' instead of generic error
- Improved error response consistency across all validation errors

backend/src/routes/commanders.js

@@ -237,21 +237,23 @@ export default async function commanderRoutes(fastify, options) {
            message: 'Commander created successfully',
            commander: transformCommander(commander)
          })
-      } catch (error) {
+       } catch (error) {
-        if (error instanceof z.ZodError) {
+         if (error instanceof z.ZodError) {
-          return reply.code(400).send({
+           const formattedErrors = formatValidationErrors(error)
-            error: 'Validation Error',
+           const firstError = formattedErrors[0]?.message || 'Invalid input data'
-            message: 'Invalid input data',
+           return reply.code(400).send({
-            details: formatValidationErrors(error)
+             error: 'Validation Error',
-          })
+             message: firstError,
-        } else {
+             details: formattedErrors
-          fastify.log.error('Create commander error:', error)
+           })
-          reply.code(500).send({
+         } else {
-            error: 'Internal Server Error',
+           fastify.log.error('Create commander error:', error)
-            message: 'Failed to create commander'
+           reply.code(500).send({
-          })
+             error: 'Internal Server Error',
-        }
+             message: 'Failed to create commander'
-      }
+           })
+         }
+       }
     }
   )
 
@@ -301,21 +303,23 @@ export default async function commanderRoutes(fastify, options) {
             message: 'Commander updated successfully',
             commander: transformCommander(commander)
           })
-      } catch (error) {
+       } catch (error) {
-        if (error instanceof z.ZodError) {
+         if (error instanceof z.ZodError) {
-          reply.code(400).send({
+           const formattedErrors = formatValidationErrors(error)
-            error: 'Validation Error',
+           const firstError = formattedErrors[0]?.message || 'Invalid input data'
-            message: 'Invalid input data',
+           reply.code(400).send({
-            details: error.errors.map((e) => e.message)
+             error: 'Validation Error',
-          })
+             message: firstError,
-        } else {
+             details: formattedErrors
-          fastify.log.error('Update commander error:', error.message || error)
+           })
-          reply.code(500).send({
+         } else {
-            error: 'Internal Server Error',
+           fastify.log.error('Update commander error:', error.message || error)
-            message: 'Failed to update commander'
+           reply.code(500).send({
-          })
+             error: 'Internal Server Error',
-        }
+             message: 'Failed to update commander'
-      }
+           })
+         }
+       }
     }
   )
 

frontend/public/js/commanders.js

@@ -153,10 +153,19 @@ function commanderManager() {
           const data = await response.json()
           this.commanders.unshift(data.commander)
           this.resetAddForm()
-        } else {
+         } else {
-          const errorData = await response.json()
+           const errorData = await response.json()
-          this.serverError = errorData.message || 'Failed to create commander'
+           // Use message if available, otherwise extract from details array
-        }
+           if (errorData.message) {
+             this.serverError = errorData.message
+           } else if (errorData.details && Array.isArray(errorData.details)) {
+             this.serverError = errorData.details
+               .map((err) => err.message || err)
+               .join(', ')
+           } else {
+             this.serverError = 'Failed to create commander'
+           }
+         }
       } catch (error) {
         console.error('Add commander error:', error)
         this.serverError = 'Network error occurred'