fix(access-keys): show framed, per-field, localized create errors (#137)

Author: AdnanHussainTurki

components/access-keys/new-item.tsx

@@ -37,6 +37,7 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
   const [policy, setPolicy] = React.useState("")
   const [impliedPolicy, setImpliedPolicy] = React.useState(true)
   const [submitting, setSubmitting] = React.useState(false)
+  const [submitError, setSubmitError] = React.useState("")
   const [errors, setErrors] = React.useState({
     accessKey: "",
     secretKey: "",
@@ -60,6 +61,7 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
       setExpiry(null)
       setImpliedPolicy(true)
       setErrors({ accessKey: "", secretKey: "", name: "" })
+      setSubmitError("")
       api
         .get("/accountinfo")
         .then((userInfo: { policy?: unknown; Policy?: unknown }) => {
@@ -92,6 +94,8 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
       newErrors.accessKey = t("Please enter Access Key")
     } else if (accessKey.length < 3 || accessKey.length > 20) {
       newErrors.accessKey = t("Access Key length must be between 3 and 20 characters")
+    } else if (/\s/.test(accessKey)) {
+      newErrors.accessKey = t("Access Key cannot contain spaces")
     }
     if (!secretKey) {
       newErrors.secretKey = t("Please enter Secret Key")
@@ -100,12 +104,42 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
     }
     if (!name) {
       newErrors.name = t("Please enter name")
+    } else if (name.length > 32) {
+      newErrors.name = t("Name must be at most 32 characters")
+    } else if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(name)) {
+      newErrors.name = t(
+        "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter",
+      )
     }
     setErrors(newErrors)
     return !newErrors.accessKey && !newErrors.secretKey && !newErrors.name
   }
 
+  // Map a server-side validation error to the field it belongs to, so the
+  // message renders directly under the relevant input. Returns false when the
+  // error is not field-specific (caller falls back to a general message).
+  const applyServerError = (reason: string): boolean => {
+    const lowered = reason.toLowerCase()
+    if (lowered.includes("access key") && lowered.includes("space")) {
+      setErrors((prev) => ({ ...prev, accessKey: t("Access Key cannot contain spaces") }))
+      return true
+    }
+    if (lowered.includes("name must contain only") || lowered.includes("name must start")) {
+      setErrors((prev) => ({
+        ...prev,
+        name: t("Name can only contain letters, numbers, underscores and hyphens, and must start with a letter"),
+      }))
+      return true
+    }
+    if (lowered.includes("name must not be longer") || lowered.includes("name is too long")) {
+      setErrors((prev) => ({ ...prev, name: t("Name must be at most 32 characters") }))
+      return true
+    }
+    return false
+  }
+
   const submitForm = async () => {
+    setSubmitError("")
     if (!validate()) {
       message.error(t("Please fill in the correct format"))
       return
@@ -140,7 +174,12 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
       onSuccess()
     } catch (error) {
       console.error(error)
-      message.error(t("Add failed"))
+      const reason = error instanceof Error && error.message ? error.message : ""
+      const handledByField = reason ? applyServerError(reason) : false
+      if (!handledByField) {
+        setSubmitError(reason || t("Add failed"))
+      }
+      message.error(reason || t("Add failed"))
     } finally {
       setSubmitting(false)
     }
@@ -273,6 +312,12 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
           )}
         </div>
 
+        {submitError && (
+          <p role="alert" className="px-2 text-sm text-destructive">
+            {submitError}
+          </p>
+        )}
+
         <DialogFooter className="border-t pt-4">
           <Button variant="outline" onClick={closeModal}>
             {t("Cancel")}

i18n/locales/ar-MA.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "جار تحضير التنزيل",
   "User menu": "قائمة المستخدم",
   "Cleanup Warnings": "تحذيرات التنظيف",
-  "Failed to load objects": "فشل تحميل الكائنات"
+  "Failed to load objects": "فشل تحميل الكائنات",
+  "Access Key cannot contain spaces": "لا يمكن أن يحتوي مفتاح الوصول على مسافات",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "يمكن أن يحتوي الاسم على أحرف وأرقام وشرطات سفلية وشرطات فقط، ويجب أن يبدأ بحرف",
+  "Name must be at most 32 characters": "يجب ألا يزيد الاسم عن 32 حرفًا"
 }

i18n/locales/de-DE.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Download wird vorbereitet",
   "User menu": "Benutzermenü",
   "Cleanup Warnings": "Bereinigungswarnungen",
-  "Failed to load objects": "Objekte konnten nicht geladen werden"
+  "Failed to load objects": "Objekte konnten nicht geladen werden",
+  "Access Key cannot contain spaces": "Der Zugriffsschlüssel darf keine Leerzeichen enthalten",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "Der Name darf nur Buchstaben, Ziffern, Unterstriche und Bindestriche enthalten und muss mit einem Buchstaben beginnen",
+  "Name must be at most 32 characters": "Der Name darf höchstens 32 Zeichen lang sein"
 }

i18n/locales/en-US.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Preparing download",
   "User menu": "User menu",
   "Cleanup Warnings": "Cleanup Warnings",
-  "Failed to load objects": "Failed to load objects"
+  "Failed to load objects": "Failed to load objects",
+  "Access Key cannot contain spaces": "Access Key cannot contain spaces",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter",
+  "Name must be at most 32 characters": "Name must be at most 32 characters"
 }

i18n/locales/es-ES.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Preparando descarga",
   "User menu": "Menú de usuario",
   "Cleanup Warnings": "Advertencias de limpieza",
-  "Failed to load objects": "No se pudieron cargar los objetos"
+  "Failed to load objects": "No se pudieron cargar los objetos",
+  "Access Key cannot contain spaces": "La clave de acceso no puede contener espacios",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "El nombre solo puede contener letras, números, guiones bajos y guiones, y debe comenzar con una letra",
+  "Name must be at most 32 characters": "El nombre no puede tener más de 32 caracteres"
 }

i18n/locales/fr-FR.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Préparation du téléchargement",
   "User menu": "Menu utilisateur",
   "Cleanup Warnings": "Avertissements de nettoyage",
-  "Failed to load objects": "Impossible de charger les objets"
+  "Failed to load objects": "Impossible de charger les objets",
+  "Access Key cannot contain spaces": "La clé d'accès ne peut pas contenir d'espaces",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "Le nom ne peut contenir que des lettres, des chiffres, des traits de soulignement et des traits d'union, et doit commencer par une lettre",
+  "Name must be at most 32 characters": "Le nom ne doit pas dépasser 32 caractères"
 }

i18n/locales/id-ID.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Menyiapkan unduhan",
   "User menu": "Menu pengguna",
   "Cleanup Warnings": "Peringatan pembersihan",
-  "Failed to load objects": "Gagal memuat objek"
+  "Failed to load objects": "Gagal memuat objek",
+  "Access Key cannot contain spaces": "Kunci akses tidak boleh mengandung spasi",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "Nama hanya boleh berisi huruf, angka, garis bawah, dan tanda hubung, serta harus diawali dengan huruf",
+  "Name must be at most 32 characters": "Nama tidak boleh lebih dari 32 karakter"
 }

i18n/locales/it-IT.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "Preparazione download",
   "User menu": "Menu utente",
   "Cleanup Warnings": "Avvisi di pulizia",
-  "Failed to load objects": "Impossibile caricare gli oggetti"
+  "Failed to load objects": "Impossibile caricare gli oggetti",
+  "Access Key cannot contain spaces": "La chiave di accesso non può contenere spazi",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "Il nome può contenere solo lettere, numeri, trattini bassi e trattini, e deve iniziare con una lettera",
+  "Name must be at most 32 characters": "Il nome non può superare i 32 caratteri"
 }

i18n/locales/ja-JP.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "ダウンロードを準備中",
   "User menu": "ユーザーメニュー",
   "Cleanup Warnings": "クリーンアップ警告",
-  "Failed to load objects": "オブジェクトの読み込みに失敗しました"
+  "Failed to load objects": "オブジェクトの読み込みに失敗しました",
+  "Access Key cannot contain spaces": "アクセスキーにスペースを含めることはできません",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "名前には英字、数字、アンダースコア、ハイフンのみ使用でき、英字で始まる必要があります",
+  "Name must be at most 32 characters": "名前は最大32文字です"
 }

i18n/locales/ko-KR.json

@@ -1335,5 +1335,8 @@
   "Preparing download": "다운로드 준비 중",
   "User menu": "사용자 메뉴",
   "Cleanup Warnings": "정리 경고",
-  "Failed to load objects": "객체를 불러오지 못했습니다"
+  "Failed to load objects": "객체를 불러오지 못했습니다",
+  "Access Key cannot contain spaces": "액세스 키에는 공백을 포함할 수 없습니다",
+  "Name can only contain letters, numbers, underscores and hyphens, and must start with a letter": "이름은 영문자, 숫자, 밑줄, 하이픈만 사용할 수 있으며 영문자로 시작해야 합니다",
+  "Name must be at most 32 characters": "이름은 최대 32자입니다"
 }