diff --git a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
index ed128e574b3..e3f8d55646f 100644
--- a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
+++ b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
@@ -17,7 +17,7 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
import { useEffect, useState, type ReactNode } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, type SubmitErrorHandler } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useQuery } from '@tanstack/react-query'
import {
@@ -65,7 +65,7 @@ import { MultiSelect } from '@/components/multi-select'
import { createApiKey, updateApiKey, getApiKey } from '../api'
import { ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
import {
- apiKeyFormSchema,
+ getApiKeyFormSchema,
type ApiKeyFormValues,
getApiKeyFormDefaultValues,
transformFormDataToPayload,
@@ -152,9 +152,10 @@ export function ApiKeysMutateDrawer({
})
)
const backendHasAuto = groups.some((g) => g.value === 'auto')
+ const schema = getApiKeyFormSchema(t)
const form = useForm({
- resolver: zodResolver(apiKeyFormSchema),
+ resolver: zodResolver(schema),
defaultValues: getApiKeyFormDefaultValues(defaultUseAutoGroup),
})
@@ -239,6 +240,10 @@ export function ApiKeysMutateDrawer({
}
}
+ const onInvalid: SubmitErrorHandler = () => {
+ toast.error(t('Please fix the highlighted fields before saving'))
+ }
+
const handleSetExpiry = (months: number, days: number, hours: number) => {
if (months === 0 && days === 0 && hours === 0) {
form.setValue('expired_time', undefined)
@@ -291,7 +296,7 @@ export function ApiKeysMutateDrawer({