diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index a12acdd06a..19633f93fd 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -3591,5 +3591,6 @@ "consider_consolidating_multi_team_org": "Consider setting up an organization to unify billing, admin tools, and analytics across your teams.", "search_variables": "Search variables", "no_variables_found": "No variables found", + "api_key_name_too_long": "Name must not exceed {{max}} characters", "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑" } diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx index b709b94171..6f8f0aec0a 100644 --- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx +++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx @@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem"; import LicenseRequired from "@calcom/ee/common/components/LicenseRequired"; +import { API_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants"; import { IS_CALCOM } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; @@ -57,6 +58,18 @@ export default function ApiKeyDialogForm({ neverExpires: defaultValues?.neverExpires || false, expiresAt: defaultValues?.expiresAt || dayjs().add(30, "day").toDate(), }, + mode: "onChange", + criteriaMode: "all", + resolver: (values) => { + const errors: { note?: { type: string; message: string } } = {}; + if (values.note && values.note.length > API_NAME_LENGTH_MAX_LIMIT) { + errors.note = { + type: "maxLength", + message: t("api_key_name_too_long", { max: API_NAME_LENGTH_MAX_LIMIT }), + }; + } + return { values, errors }; + }, }); const watchNeverExpires = form.watch("neverExpires"); @@ -182,7 +195,7 @@ export default function ApiKeyDialogForm({ {!defaultValues && (