@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -5,7 +5,7 @@ import {
   CloseCircle as XCircle,
   RefreshCircle as Loader2,
   TestTube as TestIcon,
-  TrashBinTrash as Trash2
+  TrashBinMinimalistic as TrashBin
 } from "#solar-icons";
 import {
   AlertDialog,
@@ -40,12 +40,13 @@ const props = defineProps({
   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);
@@ -65,8 +66,8 @@ 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";
@@ -118,10 +119,10 @@ async function save() {
     await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
     emit("changed");
     emit("update:open", false);
-    toast.success("Credential updated");
+    toast.success(t("integration.credentials.toast.updated"));
   } catch (e) {
     fieldErrors.value = apiFieldErrors(e);
-    saveError.value = refusalReason(e, "Could not save credential.");
+    saveError.value = refusalReason(e, t("integration.credentials.error.save"));
     toast.error(saveError.value);
   } finally {
     saving.value = false;
@@ -134,11 +135,11 @@ async function destroy() {
   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;
   }
@@ -154,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);
@@ -167,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;
   }
@@ -210,21 +211,21 @@ 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>
+            <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
             <Input
               id="detail-cred-name"
               v-model="form.name"
@@ -262,7 +263,7 @@ async function connect() {
               :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"
@@ -285,7 +286,7 @@ async function connect() {
               @update:model-value="(v) => form.config[f.key] = v"
             >
               <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
-                <SelectValue placeholder="Pick one" />
+                <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)">
@@ -313,7 +314,7 @@ 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
@@ -327,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>
@@ -341,37 +342,37 @@ 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"
@@ -381,8 +382,8 @@ async function connect() {
                 @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>
@@ -392,19 +393,19 @@ async function connect() {
       <AlertDialog :open="pendingDelete" @update:open="(v) => pendingDelete = v">
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete credential?</AlertDialogTitle>
+            <AlertDialogTitle>{{ t("integration.credentials.shared.confirm.delete.title") }}</AlertDialogTitle>
             <AlertDialogDescription>
               <span class="font-medium text-foreground">{{ credential?.name }}</span>
-              will be removed. Workflows that reference it will fail until they are re-bound to another credential.
+              {{ t("integration.credentials.shared.confirm.delete.body") }}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <Button variant="outline" :disabled="deleting" @click="pendingDelete = false">
-              Cancel
+              {{ 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 ? "Deleting\u2026" : "Delete" }}
+              {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>

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

@@ -29,18 +29,19 @@ const props = defineProps({
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:active", "apply"]);
+const t = useIntegrationsT();
 const kind = computed(() => props.type ? REVENEXX_SOURCE_KIND_BY_SLUG[props.type.slug] ?? null : null);
 const uid = useId();
-const SWITCH_LABEL = {
-  sftp: "Use revenexx SFTP Servers",
-  smtp: "Use revenexx Mail Servers",
-  api: "Use revenexx API Keys"
-};
-const NEW_LABEL = {
-  sftp: "New SFTP account",
-  smtp: "New mail credential",
-  api: "New API key"
-};
+const SWITCH_LABEL = computed(() => ({
+  sftp: t("integration.credentials.revenexxSource.switch.sftp"),
+  smtp: t("integration.credentials.revenexxSource.switch.smtp"),
+  api: t("integration.credentials.revenexxSource.switch.api")
+}));
+const NEW_LABEL = computed(() => ({
+  sftp: t("integration.credentials.revenexxSource.new.sftp"),
+  smtp: t("integration.credentials.revenexxSource.new.smtp"),
+  api: t("integration.credentials.revenexxSource.new.api")
+}));
 const sources = cockpitSources();
 const available = sources !== null;
 const tenants = computed(() => sources?.tenants.tenants.value ?? []);
@@ -74,7 +75,7 @@ watch(kind, () => {
 });
 const sftpOptions = computed(() => (sftp?.accounts.value ?? []).filter((a) => (a.is_active || a.status === "active") && a.login_username).map((a) => ({ value: String(a.id), label: a.login_username })));
 const marketOptions = computed(() => [
-  { code: GLOBAL_MARKET_CODE, label: "Global (tenant baseline)" },
+  { code: GLOBAL_MARKET_CODE, label: t("integration.credentials.revenexxSource.market.global") },
   ...markets.value.map((m) => ({ code: m.code, label: `${m.name} (${m.code})` }))
 ]);
 async function ensureLists() {
@@ -92,7 +93,7 @@ async function ensureLists() {
       await fetchMarkets();
     }
   } catch (e) {
-    toast.error(e?.message ?? "Could not load revenexx resources.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.loadResources"));
   } finally {
     loadingList.value = false;
   }
@@ -105,14 +106,14 @@ function marketSlug() {
 }
 async function applySftp() {
   if (!sftp) return;
-  const t = tenant.value;
+  const tenantSlug = tenant.value;
   const acc = sftp.accounts.value.find((a) => String(a.id) === selectedId.value);
-  if (!t || !acc) return;
+  if (!tenantSlug || !acc) return;
   applying.value = true;
   try {
-    const creds = await sftp.revealPassword(t, acc.id);
+    const creds = await sftp.revealPassword(tenantSlug, acc.id);
     if (!creds) {
-      toast.error("Account still provisioning \u2014 try again in a moment.");
+      toast.error(t("integration.credentials.revenexxSource.error.accountProvisioning"));
       return;
     }
     emit("apply", {
@@ -123,7 +124,7 @@ async function applySftp() {
     });
     applied.value = `${acc.login_username}@${sftpHost}:${sftpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? "Could not read the SFTP password.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readSftpPassword"));
   } finally {
     applying.value = false;
   }
@@ -134,7 +135,7 @@ async function applySmtp() {
   try {
     const cred = await mail.getCredential(selectedId.value);
     if (!cred) {
-      toast.error("That mail credential is no longer there.");
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialGone"));
       return;
     }
     emit("apply", {
@@ -146,7 +147,7 @@ async function applySmtp() {
     });
     applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? "Could not read the mail credential.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readMailCredential"));
   } finally {
     applying.value = false;
   }
@@ -178,30 +179,30 @@ function openCreate() {
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 async function createSftp() {
   if (!sftp) return;
-  const t = tenant.value;
-  if (!t) {
-    toast.error("No tenant selected.");
+  const tenantSlug = tenant.value;
+  if (!tenantSlug) {
+    toast.error(t("integration.credentials.revenexxSource.error.noTenant"));
     return;
   }
   creating.value = true;
   try {
-    let acc = await sftp.create(t, createName.value.trim() || void 0);
+    let acc = await sftp.create(tenantSlug, createName.value.trim() || void 0);
     for (let i = 0; i < 24 && !(acc.is_active || acc.status === "active"); i++) {
-      provisioningNote.value = "Provisioning the account\u2026";
+      provisioningNote.value = t("integration.credentials.revenexxSource.status.provisioning");
       await sleep(2500);
-      acc = await sftp.refresh(t, acc.id);
-      if (acc.status === "failed") throw new Error(acc.error_message || "Provisioning failed.");
+      acc = await sftp.refresh(tenantSlug, acc.id);
+      if (acc.status === "failed") throw new Error(acc.error_message || t("integration.credentials.revenexxSource.error.provisioningFailed"));
     }
     if (!(acc.is_active || acc.status === "active")) {
-      throw new Error("Still provisioning \u2014 pick it from the list once it turns active.");
+      throw new Error(t("integration.credentials.revenexxSource.error.stillProvisioning"));
     }
-    await sftp.load(t);
+    await sftp.load(tenantSlug);
     selectedId.value = String(acc.id);
     await applySftp();
     createOpen.value = false;
-    toast.success("SFTP account created");
+    toast.success(t("integration.credentials.revenexxSource.toast.sftpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the SFTP account.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSftp"));
   } finally {
     creating.value = false;
     provisioningNote.value = "";
@@ -213,7 +214,7 @@ async function createSmtp() {
   try {
     const cred = await mail.createCredential({ name: createName.value.trim() || "SMTP", type: "SMTP" });
     if (!cred) {
-      toast.error("The mail credential was not returned \u2014 pick it from the list once it appears.");
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialNotReturned"));
       return;
     }
     emit("apply", {
@@ -227,9 +228,9 @@ async function createSmtp() {
     smtpCreds.value = [{ uuid: cred.uuid, name: cred.name }, ...smtpCreds.value];
     selectedId.value = cred.uuid;
     createOpen.value = false;
-    toast.success("Mail credential created");
+    toast.success(t("integration.credentials.revenexxSource.toast.smtpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the mail credential.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSmtp"));
   } finally {
     creating.value = false;
   }
@@ -241,11 +242,11 @@ async function createApiKey() {
     const { secret } = await consoleKeys.create(createName.value.trim() || "Integrations key", ["*"]);
     emit("apply", { apiKey: secret, tenant: tenant.value ?? "", market: marketSlug() });
     apiKeyReady.value = true;
-    applied.value = `Key for ${tenant.value}${marketSlug() ? ` \xB7 ${marketSlug()}` : " \xB7 global"}`;
+    applied.value = marketSlug() ? t("integration.credentials.revenexxSource.status.keyForMarket", { tenant: tenant.value, market: marketSlug() }) : t("integration.credentials.revenexxSource.status.keyForGlobal", { tenant: tenant.value });
     createOpen.value = false;
-    toast.success("API key created");
+    toast.success(t("integration.credentials.revenexxSource.toast.apiKeyCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the API key.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createApiKey"));
   } finally {
     creating.value = false;
   }
@@ -269,11 +270,10 @@ function submitCreate() {
              belongs somewhere else. The manual fields stay on screen either way. -->
         <p class="text-xs text-muted-foreground">
           <template v-if="available">
-            Reuse an existing revenexx resource instead of typing access data by hand.
+            {{ t("integration.credentials.revenexxSource.hint.available") }}
           </template>
           <template v-else>
-            Not available here — the managed revenexx resources live in the cockpit.
-            Enter the access data by hand instead.
+            {{ t("integration.credentials.revenexxSource.hint.unavailable") }}
           </template>
         </p>
       </div>
@@ -291,14 +291,14 @@ function submitCreate() {
     <div v-if="active" class="mt-3 space-y-3">
       <!-- Tenant (preselected) -->
       <div class="space-y-1.5">
-        <Label :for="`${uid}-tenant`">Tenant</Label>
+        <Label :for="`${uid}-tenant`">{{ t("integration.credentials.revenexxSource.field.tenant.label") }}</Label>
         <Select :model-value="tenant ?? ''" @update:model-value="(v) => tenant = v">
           <SelectTrigger :id="`${uid}-tenant`" class="bg-white">
-            <SelectValue placeholder="Select tenant" />
+            <SelectValue :placeholder="t('integration.credentials.revenexxSource.field.tenant.placeholder')" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem v-for="t in tenants" :key="t.slug" :value="t.slug">
-              {{ t.name }} ({{ t.slug }})
+            <SelectItem v-for="tn in tenants" :key="tn.slug" :value="tn.slug">
+              {{ tn.name }} ({{ tn.slug }})
             </SelectItem>
           </SelectContent>
         </Select>
@@ -306,10 +306,10 @@ function submitCreate() {
 
       <!-- Market scope — only the Revenexx API credential is market-scoped -->
       <div v-if="kind === 'api'" class="space-y-1.5">
-        <Label :for="`${uid}-market`">Market</Label>
+        <Label :for="`${uid}-market`">{{ t("integration.credentials.revenexxSource.field.market.label") }}</Label>
         <Select :model-value="marketCode" @update:model-value="(v) => marketCode = v">
           <SelectTrigger :id="`${uid}-market`" class="bg-white">
-            <SelectValue placeholder="Select market" />
+            <SelectValue :placeholder="t('integration.credentials.revenexxSource.field.market.placeholder')" />
           </SelectTrigger>
           <SelectContent>
             <SelectItem v-for="m in marketOptions" :key="m.code" :value="m.code">
@@ -321,11 +321,11 @@ function submitCreate() {
 
       <!-- Resource select (SFTP / Mail) -->
       <div v-if="kind === 'sftp' || kind === 'smtp'" class="space-y-1.5">
-        <Label :for="`${uid}-resource`">{{ kind === "sftp" ? "SFTP account" : "Mail credential" }}</Label>
+        <Label :for="`${uid}-resource`">{{ kind === "sftp" ? t("integration.credentials.revenexxSource.field.resource.sftpLabel") : t("integration.credentials.revenexxSource.field.resource.mailLabel") }}</Label>
         <div class="flex items-center gap-2">
           <Select :model-value="selectedId" class="flex-1" @update:model-value="(v) => onSelect(v)">
             <SelectTrigger :id="`${uid}-resource`" class="bg-white">
-              <SelectValue :placeholder="loadingList ? 'Loading\u2026' : 'Select one'" />
+              <SelectValue :placeholder="loadingList ? t('integration.common.state.loading') : t('integration.credentials.revenexxSource.field.resource.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <template v-if="kind === 'sftp'">
@@ -338,7 +338,7 @@ function submitCreate() {
           </Select>
           <Button variant="outline" size="sm" class="shrink-0 bg-white" :disabled="!tenant" @click="openCreate">
             <Plus :size="14" class="mr-1" />
-            New
+            {{ t("integration.credentials.revenexxSource.action.new") }}
           </Button>
         </div>
       </div>
@@ -347,7 +347,7 @@ function submitCreate() {
       <div v-else-if="kind === 'api'">
         <Button variant="outline" size="sm" class="bg-white" :disabled="!tenant" @click="openCreate">
           <Plus :size="14" class="mr-1" />
-          Create new API key
+          {{ t("integration.credentials.revenexxSource.action.createApiKey") }}
         </Button>
       </div>
 
@@ -355,7 +355,7 @@ function submitCreate() {
       <div v-if="applied || applying" class="flex items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700">
         <Loader2 v-if="applying" :size="14" class="animate-spin" />
         <Check v-else :size="14" />
-        <span class="truncate">{{ applying ? "Copying access data\u2026" : `Using ${applied}` }}</span>
+        <span class="truncate">{{ applying ? t("integration.credentials.revenexxSource.status.copying") : t("integration.credentials.revenexxSource.status.using", { value: applied }) }}</span>
       </div>
     </div>
 
@@ -363,36 +363,36 @@ function submitCreate() {
     <Dialog v-model:open="createOpen">
       <DialogContent class="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{{ kind ? NEW_LABEL[kind] : "New" }}</DialogTitle>
+          <DialogTitle>{{ kind ? NEW_LABEL[kind] : t("integration.credentials.revenexxSource.new.fallback") }}</DialogTitle>
           <DialogDescription class="text-sm">
             <template v-if="kind === 'api'">
-              A full-access key is minted for <b>{{ tenant }}</b> and copied straight into this credential.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.api", { tenant }) }}
             </template>
             <template v-else-if="kind === 'sftp'">
-              Reserves a new SFTP account for <b>{{ tenant }}</b> and fills its login here.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.sftp", { tenant }) }}
             </template>
             <template v-else>
-              Creates a new SMTP credential and fills its login here.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.smtp") }}
             </template>
           </DialogDescription>
         </DialogHeader>
 
         <div class="space-y-1.5 py-1">
-          <Label for="rvnxx-new-name">{{ kind === "sftp" ? "Label" : "Name" }}</Label>
+          <Label for="rvnxx-new-name">{{ kind === "sftp" ? t("integration.credentials.revenexxSource.createDialog.field.label") : t("integration.credentials.revenexxSource.createDialog.field.name") }}</Label>
           <Input
             id="rvnxx-new-name"
             v-model="createName"
             class="bg-white"
-            :placeholder="kind === 'sftp' ? 'e.g. imports' : 'e.g. Production'"
+            :placeholder="kind === 'sftp' ? t('integration.credentials.revenexxSource.createDialog.field.placeholder.sftp') : t('integration.credentials.revenexxSource.createDialog.field.placeholder.default')"
           />
           <p v-if="provisioningNote" class="text-xs text-muted-foreground">{{ provisioningNote }}</p>
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" :disabled="creating" @click="createOpen = false">Cancel</Button>
+          <Button variant="ghost" :disabled="creating" @click="createOpen = false">{{ t("integration.common.action.cancel") }}</Button>
           <Button :disabled="creating" @click="submitCreate">
             <Loader2 v-if="creating" :size="14" class="mr-1 animate-spin" />
-            Create
+            {{ t("integration.credentials.revenexxSource.action.create") }}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -7,20 +7,21 @@ const props = defineProps({
   types: { type: Array, required: true }
 });
 const emit = defineEmits(["pick"]);
+const t = useIntegrationsT();
 const query = ref("");
 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 ?? "";
   }
@@ -28,7 +29,7 @@ function authKindLabel(k) {
 const filtered = computed(() => {
   const q = query.value.trim().toLowerCase();
   if (!q) return props.types;
-  return props.types.filter((t) => resolveLocalized(t.name).toLowerCase().includes(q));
+  return props.types.filter((t2) => resolveLocalized(t2.name).toLowerCase().includes(q));
 });
 </script>
 
@@ -38,16 +39,16 @@ const filtered = computed(() => {
       <Search :size="15" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
       <Input
         v-model="query"
-        aria-label="Search for an app"
+        :aria-label="t('integration.credentials.typePicker.search.aria')"
         class="bg-white pl-9"
-        placeholder="Search for an app…"
+        :placeholder="t('integration.credentials.typePicker.search.placeholder')"
         autofocus
       />
     </div>
 
     <div class="mt-2 max-h-80 overflow-y-auto -mx-1 px-1">
       <p v-if="!filtered.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
-        No credential type matches “{{ query }}”.
+        {{ t("integration.credentials.typePicker.empty", { query }) }}
       </p>
       <button
         v-for="t in filtered"