@revenexx/studio-integrations 0.5.1 → 0.7.0

package/dist/runtime/components/Integrations/CredentialCreateDialog.vue

@@ -19,40 +19,36 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credentialType: { type: [String, Array], required: false }
 });
 const emit = defineEmits(["update:open", "created"]);
+const t = useIntegrationsT();
 const { create, testInline, load, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { load: loadTypes, bySlug } = useCredentialTypes();
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
-}
 function authKindLabel(k) {
   switch (k) {
     case "api-key":
-      return "API Key";
+      return t("integration.credentials.shared.authKind.apiKey");
     case "oauth2-authcode":
     case "oauth2-client-credentials":
-      return "OAuth2";
+      return t("integration.credentials.shared.authKind.oauth2");
     case "basic-auth":
-      return "Basic Auth";
+      return t("integration.credentials.shared.authKind.basicAuth");
     case "static":
-      return "Static";
+      return t("integration.credentials.shared.authKind.static");
     case "secret":
-      return "Secret";
+      return t("integration.credentials.shared.authKind.secret");
     default:
       return k ?? "";
   }
 }
 const allowedSlugs = computed(() => {
-  const t = props.credentialType;
-  if (!t) return [];
-  return (Array.isArray(t) ? t : [t]).map((s) => s.trim()).filter(Boolean);
+  const t2 = props.credentialType;
+  if (!t2) return [];
+  return (Array.isArray(t2) ? t2 : [t2]).map((s) => s.trim()).filter(Boolean);
 });
 const allowedTypes = computed(() => allowedSlugs.value.map((s) => bySlug(s)).filter((x) => !!x));
 const pickedType = ref(null);
@@ -61,11 +57,11 @@ const sourceActive = ref(false);
 const saving = ref(false);
 const testing = ref(false);
 const testResult = ref(null);
-function fieldsOf(t) {
-  return t?.fields ?? [];
+function fieldsOf(t2) {
+  return t2?.fields ?? [];
 }
-function isOAuthAuthcode(t) {
-  return t?.auth_kind === "oauth2-authcode";
+function isOAuthAuthcode(t2) {
+  return t2?.auth_kind === "oauth2-authcode";
 }
 watch(() => props.open, async (o) => {
   if (!o) return;
@@ -75,18 +71,18 @@ watch(() => props.open, async (o) => {
   await loadTypes();
   if (allowedTypes.value.length === 1) {
     pickedType.value = allowedTypes.value[0];
-    form.name = loc(pickedType.value.name);
+    form.name = resolveLocalized(pickedType.value.name);
   } else {
     pickedType.value = null;
     form.name = "";
   }
 }, { immediate: true });
-function pickType(t) {
-  pickedType.value = t;
+function pickType(t2) {
+  pickedType.value = t2;
   form.config = {};
   testResult.value = null;
   sourceActive.value = false;
-  if (!form.name) form.name = loc(t.name);
+  if (!form.name) form.name = resolveLocalized(t2.name);
 }
 function buildConfigPayload() {
   const out = {};
@@ -135,14 +131,14 @@ async function submit() {
       config: buildConfigPayload()
     });
     await load(true);
-    toast.success("Credential created");
+    toast.success(t("integration.credentials.toast.created"));
     if (isOAuthAuthcode(pickedType.value)) {
       void connect(created.id);
     }
     emit("created", created.id);
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? "Could not create credential.");
+    toast.error(e?.message ?? t("integration.credentials.createDialog.error.create"));
   } finally {
     saving.value = false;
   }
@@ -153,16 +149,16 @@ async function submit() {
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogContent class="sm:max-w-lg">
       <DialogHeader>
-        <DialogTitle>New credential</DialogTitle>
+        <DialogTitle>{{ t("integration.credentials.shared.dialog.title.create") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Create a credential for this node without leaving the editor.
+          {{ t("integration.credentials.createDialog.description") }}
         </DialogDescription>
       </DialogHeader>
 
       <!-- Choose the type when the field accepts more than one -->
       <div v-if="!pickedType" class="space-y-2 py-1">
         <p v-if="!allowedTypes.length" class="text-sm text-muted-foreground">
-          No credential type available for this field.
+          {{ t("integration.credentials.createDialog.noTypeAvailable") }}
         </p>
         <button
           v-for="t in allowedTypes"
@@ -173,7 +169,7 @@ async function submit() {
         >
           <IntegrationsCredentialLogo :type="t" :size="18" />
           <div class="min-w-0 truncate text-sm">
-            <span class="font-semibold">{{ loc(t.name) }}</span>
+            <span class="font-semibold">{{ resolveLocalized(t.name) }}</span>
             <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
           </div>
         </button>
@@ -183,20 +179,20 @@ async function submit() {
       <div v-else class="space-y-3 py-1 max-h-[26rem] overflow-y-auto pr-1">
         <div class="flex items-center gap-2">
           <IntegrationsCredentialLogo :type="pickedType" :size="18" />
-          <div class="text-sm font-medium">{{ loc(pickedType.name) }}</div>
+          <div class="text-sm font-medium">{{ resolveLocalized(pickedType.name) }}</div>
           <button
             v-if="allowedTypes.length > 1"
             type="button"
             class="ml-auto text-sm text-muted-foreground hover:text-foreground"
             @click="pickedType = null"
           >
-            Change type
+            {{ t("integration.credentials.createDialog.action.changeType") }}
           </button>
         </div>
 
         <div class="space-y-1.5">
-          <Label for="cred-name">Name</Label>
-          <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production key" />
+          <Label for="cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+          <Input id="cred-name" v-model="form.name" class="bg-white" :placeholder="t('integration.credentials.createDialog.field.name.placeholder')" />
         </div>
 
         <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
@@ -206,10 +202,14 @@ async function submit() {
           @apply="(c) => Object.assign(form.config, c)"
         />
 
+        <!-- Each label names its own control (`for`/`id`): without it a screen
+             reader reads the field as unlabelled, and the label text cannot be
+             used to reach it at all. -->
         <div v-for="f in fieldsOf(pickedType)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-          <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+          <Label :for="`create-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
           <Input
             v-if="f.type === 'secret'"
+            :id="`create-field-${f.key}`"
             :model-value="form.config[f.key] ?? ''"
             type="password"
             autocomplete="new-password"
@@ -218,30 +218,32 @@ async function submit() {
           />
           <Input
             v-else-if="f.type === 'number'"
+            :id="`create-field-${f.key}`"
             type="number"
             :model-value="form.config[f.key] ?? ''"
             class="bg-white"
             @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
           />
           <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-            <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+            <Switch :id="`create-field-${f.key}`" :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
           </div>
           <Select
             v-else-if="f.type === 'select'"
             :model-value="form.config[f.key] ?? ''"
             @update:model-value="(v) => form.config[f.key] = v"
           >
-            <SelectTrigger class="bg-white">
-              <SelectValue placeholder="Pick one" />
+            <SelectTrigger :id="`create-field-${f.key}`" class="bg-white">
+              <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                {{ loc(opt.label) }}
+                {{ resolveLocalized(opt.label) }}
               </SelectItem>
             </SelectContent>
           </Select>
           <Input
             v-else
+            :id="`create-field-${f.key}`"
             :model-value="form.config[f.key] ?? ''"
             class="bg-white"
             @update:model-value="(v) => form.config[f.key] = v"
@@ -249,7 +251,7 @@ async function submit() {
         </div>
 
         <p v-if="isOAuthAuthcode(pickedType)" class="text-sm text-muted-foreground">
-          After saving, a window opens to connect with the provider.
+          {{ t("integration.credentials.shared.oauthHint") }}
         </p>
 
         <div
@@ -257,7 +259,7 @@ async function submit() {
           class="rounded-md px-3 py-2 text-sm"
           :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
         >
-          {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+          {{ testResult.ok ? t("integration.credentials.shared.test.ok") : testResult.error ?? t("integration.credentials.shared.test.failed") }}
         </div>
       </div>
 
@@ -266,11 +268,11 @@ async function submit() {
           <Button variant="outline" :disabled="saving || testing" @click="runTest">
             <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
             <TestIcon v-else :size="14" class="mr-1" />
-            Connect
+            {{ t("integration.credentials.shared.action.testConnection") }}
           </Button>
           <Button :disabled="saving || !form.name.trim()" @click="submit">
             <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-            Save
+            {{ t("integration.common.action.save") }}
           </Button>
         </div>
       </DialogFooter>

package/dist/runtime/components/Integrations/CredentialDetailDialog.vue

@@ -5,9 +5,15 @@ import {
   CloseCircle as XCircle,
   RefreshCircle as Loader2,
   TestTube as TestIcon,
-  TrashBinTrash as Trash2
+  TrashBinMinimalistic as TrashBin
 } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Button,
   Dialog,
   DialogContent,
@@ -23,38 +29,45 @@ import {
   SelectTrigger,
   SelectValue
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
+import { toast } from "../../utils/notify";
+import { apiFieldErrors, refusalReason } from "../../utils/apiError";
 import { credentialState, relativeTime } from "../../utils/credentialState";
+import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credential: { type: [Object, null], required: true },
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:open", "changed"]);
+const t = useIntegrationsT();
 const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
 const tab = ref("credentials");
-const tabs = [
-  { key: "credentials", label: "Credentials" },
-  { key: "details", label: "Details" }
-];
+const tabs = computed(() => [
+  { key: "credentials", label: t("integration.credentials.detail.tab.credentials") },
+  { key: "details", label: t("integration.credentials.detail.tab.details") }
+]);
 const form = reactive({ name: "", config: {} });
 const sourceActive = ref(false);
 const saving = ref(false);
 const deleting = ref(false);
 const testing = ref(false);
 const liveTest = ref(null);
-const connecting = ref(false);
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+const saveError = ref(null);
+const fieldErrors = ref({});
+function configFieldAria(key) {
+  return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `detail-field-${key}-error` } : {};
+}
+function clearRefusal() {
+  saveError.value = null;
+  fieldErrors.value = {};
 }
-const typeName = computed(() => loc(props.type?.name) || props.credential?.credential_type_slug || "");
+const connecting = ref(false);
+const typeName = computed(() => resolveLocalized(props.type?.name) || props.credential?.credential_type_slug || "");
 const isOAuthAuthcode = computed(() => props.type?.auth_kind === "oauth2-authcode");
 const state = computed(() => props.credential ? credentialState(props.credential) : null);
-function fieldsOf(t) {
-  return t?.fields ?? [];
+function fieldsOf(t2) {
+  return t2?.fields ?? [];
 }
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
@@ -65,7 +78,7 @@ function formatDateTime(iso) {
   }
 }
 watch(
-  () => [props.open, props.credential?.id],
+  [() => props.open, () => props.credential?.id],
   () => {
     if (!props.open || !props.credential) return;
     tab.value = "credentials";
@@ -73,6 +86,7 @@ watch(
     form.config = { ...props.credential.public_config ?? {} };
     sourceActive.value = false;
     liveTest.value = null;
+    clearRefusal();
   },
   { immediate: true }
 );
@@ -100,28 +114,32 @@ async function runTest() {
 async function save() {
   if (!props.credential || !form.name.trim()) return;
   saving.value = true;
+  clearRefusal();
   try {
     await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
-    toast.success("Credential updated");
     emit("changed");
     emit("update:open", false);
+    toast.success(t("integration.credentials.toast.updated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not save credential.");
+    fieldErrors.value = apiFieldErrors(e);
+    saveError.value = refusalReason(e, t("integration.credentials.error.save"));
+    toast.error(saveError.value);
   } finally {
     saving.value = false;
   }
 }
+const pendingDelete = ref(false);
 async function destroy() {
   if (!props.credential) return;
-  if (!confirm(`Delete credential "${props.credential.name}"? Workflows referencing it will fail until re-bound.`)) return;
+  pendingDelete.value = false;
   deleting.value = true;
   try {
     await remove(props.credential.id);
-    toast.success("Credential deleted");
+    toast.success(t("integration.credentials.toast.deleted"));
     emit("changed");
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? "Could not delete credential.");
+    toast.error(e?.message ?? t("integration.credentials.error.delete"));
   } finally {
     deleting.value = false;
   }
@@ -137,7 +155,7 @@ async function connect() {
         window.removeEventListener("message", onMessage);
         await load(true);
         emit("changed");
-        toast.success("Connected");
+        toast.success(t("integration.credentials.toast.connected"));
       }
     };
     window.addEventListener("message", onMessage);
@@ -150,7 +168,7 @@ async function connect() {
       }
     }, 1e3);
   } catch (e) {
-    toast.error(e?.message ?? "Could not start OAuth connect.");
+    toast.error(e?.message ?? t("integration.credentials.error.oauthConnect"));
   } finally {
     connecting.value = false;
   }
@@ -193,73 +211,101 @@ async function connect() {
               @click="connect"
             >
               <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
-              Reconnect
+              {{ t("integration.credentials.detail.action.reconnect") }}
             </Button>
           </div>
           <p v-if="state.key === 'failed' && state.message" class="mt-1 text-sm break-words opacity-90">
             {{ state.message }}
           </p>
           <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
-            Run a test to verify these credentials actually connect.
+            {{ t("integration.credentials.detail.state.untestedHint") }}
           </p>
         </div>
 
         <!-- Editable fields -->
         <div class="space-y-3">
           <div class="space-y-1.5">
-            <Label for="detail-cred-name">Name</Label>
-            <Input id="detail-cred-name" v-model="form.name" class="bg-white" />
+            <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+            <Input
+              id="detail-cred-name"
+              v-model="form.name"
+              class="bg-white"
+              :aria-invalid="fieldErrors.name ? 'true' : void 0"
+              :aria-describedby="fieldErrors.name ? 'detail-cred-name-error' : void 0"
+            />
+            <p v-if="fieldErrors.name" id="detail-cred-name-error" class="text-sm text-rose-700">
+              {{ fieldErrors.name }}
+            </p>
           </div>
 
-          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) — mounted
+               only for the types it serves, which is tidiness rather than
+               protection: it renders nothing for any other type anyway. It used
+               to be protection, because the component resolved cockpit-only
+               sources at setup and mounting it elsewhere took this form down;
+               since PO-222 it asks instead (`utils/cockpitSources.ts`). -->
           <IntegrationsCredentialRevenexxSource
+            v-if="hasRevenexxSource(type?.slug)"
             :type="type"
             @update:active="(v) => sourceActive = v"
             @apply="(c) => Object.assign(form.config, c)"
           />
 
+          <!-- Each label names its own control (`for`/`id`): without it a
+               screen reader reads the field as unlabelled, and the label text
+               cannot be used to reach it at all. -->
           <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+            <Label :for="`detail-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
 
             <Input
               v-if="f.type === 'secret'"
+              :id="`detail-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               type="password"
               autocomplete="new-password"
-              placeholder="Leave blank to keep current"
+              :placeholder="t('integration.credentials.shared.field.secret.placeholder')"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
             <Input
               v-else-if="f.type === 'number'"
+              :id="`detail-field-${f.key}`"
               type="number"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
             />
             <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-              <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+              <Switch :id="`detail-field-${f.key}`" :model-value="Boolean(form.config[f.key])" v-bind="configFieldAria(f.key)" @update:model-value="(v) => form.config[f.key] = v" />
             </div>
             <Select
               v-else-if="f.type === 'select'"
               :model-value="form.config[f.key] ?? ''"
               @update:model-value="(v) => form.config[f.key] = v"
             >
-              <SelectTrigger class="bg-white">
-                <SelectValue placeholder="Pick one" />
+              <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
+                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                  {{ loc(opt.label) }}
+                  {{ resolveLocalized(opt.label) }}
                 </SelectItem>
               </SelectContent>
             </Select>
             <Input
               v-else
+              :id="`detail-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
+
+            <p v-if="fieldErrors[`config.${f.key}`]" :id="`detail-field-${f.key}-error`" class="text-sm text-rose-700">
+              {{ fieldErrors[`config.${f.key}`] }}
+            </p>
           </div>
 
           <!-- Live test feedback (from the test the operator just ran) -->
@@ -268,7 +314,13 @@ async function connect() {
             class="rounded-md px-3 py-2 text-sm"
             :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
           >
-            {{ liveTest.ok ? "Connection ok." : liveTest.error ?? "Connection failed." }}
+            {{ liveTest.ok ? t("integration.credentials.shared.test.ok") : liveTest.error ?? t("integration.credentials.shared.test.failed") }}
+          </div>
+
+          <!-- The save was refused. Same rule as the create dialog: stated here, and at
+               the field where the service keyed it. -->
+          <div v-if="saveError" role="alert" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+            {{ saveError }}
           </div>
 
           <div class="flex items-center gap-2 pt-1">
@@ -276,11 +328,11 @@ async function connect() {
             <Button variant="outline" :disabled="testing || saving" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />
-              Connect
+              {{ t("integration.credentials.shared.action.testConnection") }}
             </Button>
             <Button :disabled="saving || !form.name.trim()" @click="save">
               <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-              Save
+              {{ t("integration.common.action.save") }}
             </Button>
           </div>
         </div>
@@ -290,53 +342,74 @@ async function connect() {
         <!-- Tab 2: Details -->
         <div v-else class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
           <div class="grid grid-cols-[9rem_1fr] gap-x-4 gap-y-2 text-sm">
-            <span class="text-muted-foreground">Type</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.type") }}</span>
             <span>{{ typeName }}</span>
 
-            <span class="text-muted-foreground">Type slug</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.typeSlug") }}</span>
             <span class="font-mono text-xs">{{ credential.credential_type_slug }}</span>
 
-            <span class="text-muted-foreground">Version</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.version") }}</span>
             <span class="font-mono text-xs">{{ type?.version ?? "\u2014" }}</span>
 
-            <span class="text-muted-foreground">Auth kind</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.authKind") }}</span>
             <span class="font-mono text-xs">{{ type?.auth_kind ?? "\u2014" }}</span>
 
-            <span class="text-muted-foreground">Last tested</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.lastTested") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.last_test_at) }}</span>
 
-            <span class="text-muted-foreground">Credential ID</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.id") }}</span>
             <span class="font-mono text-xs break-all">{{ credential.id }}</span>
 
-            <span class="text-muted-foreground">Created</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.created") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.created_at) }}</span>
 
-            <span class="text-muted-foreground">Updated</span>
+            <span class="text-muted-foreground">{{ t("integration.credentials.detail.field.updated") }}</span>
             <span class="tabular-nums">{{ formatDateTime(credential.updated_at) }}</span>
           </div>
 
           <!-- Danger zone -->
           <div class="rounded-lg border border-rose-500/30 bg-rose-500/[0.03] p-3">
-            <div class="text-sm font-semibold text-rose-700">Danger zone</div>
+            <div class="text-sm font-semibold text-rose-700">{{ t("integration.credentials.detail.dangerZone.title") }}</div>
             <div class="mt-1.5 flex items-center justify-between gap-3">
               <p class="text-sm text-muted-foreground">
-                Deleting this credential breaks any workflow that references it until it's re-bound.
+                {{ t("integration.credentials.detail.dangerZone.description") }}
               </p>
               <Button
                 variant="outline"
                 size="sm"
                 class="shrink-0 border-rose-500/40 text-rose-700 hover:bg-rose-500/10"
                 :disabled="deleting"
-                @click="destroy"
+                @click="pendingDelete = true"
               >
                 <Loader2 v-if="deleting" :size="14" class="mr-1 animate-spin" />
-                <Trash2 v-else :size="14" class="mr-1" />
-                Delete credential
+                <TrashBin v-else :size="14" class="mr-1" />
+                {{ t("integration.credentials.detail.action.deleteCredential") }}
               </Button>
             </div>
           </div>
         </div>
       </div>
+
+      <AlertDialog :open="pendingDelete" @update:open="(v) => pendingDelete = v">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{{ t("integration.credentials.shared.confirm.delete.title") }}</AlertDialogTitle>
+            <AlertDialogDescription>
+              <span class="font-medium text-foreground">{{ credential?.name }}</span>
+              {{ t("integration.credentials.shared.confirm.delete.body") }}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" :disabled="deleting" @click="pendingDelete = false">
+              {{ t("integration.common.action.cancel") }}
+            </Button>
+            <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="destroy">
+              <Loader2 v-if="deleting" :size="14" class="animate-spin" />
+              {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </DialogContent>
   </Dialog>
 </template>