@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/PromoCodesPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-promo-codes">
         <header class="sa-page-head">
             <div>
-                <h1 class="sa-page-head__title">Promo-Codes</h1>
+                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
                 <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
             </div>
             <div class="sa-page-head__actions">
@@ -12,7 +12,7 @@
                         unelevated
                         color="primary"
                         icon="add"
-                        :label="createLabel"
+                        :label="resolvedCreateLabel"
                         @click="showCreate = true"
                     />
                 </slot>
@@ -41,7 +41,7 @@
                 v-model="filter.search"
                 outlined
                 dense
-                label="Suche (Code)"
+                :label="msg.list.searchLabel"
                 clearable
                 @update:model-value="reload"
             />
@@ -52,7 +52,7 @@
                 emit-value
                 map-options
                 clearable
-                label="Status"
+                :label="common.status"
                 :options="statusOptions"
                 @update:model-value="reload"
             />
@@ -138,6 +138,8 @@ export function computePlanColors(
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useQuasar } from 'quasar';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import PromoCodeCreateDialog from '../components/dialogs/PromoCodeCreateDialog.vue';
 import PromoCodeEditDialog, {
@@ -210,11 +212,15 @@ const props = withDefaults(
     }>(),
     {
         statusOptions: () => ['ACTIVE', 'PAUSED', 'EXHAUSTED', 'EXPIRED'],
-        createLabel: 'Promo-Code anlegen',
         planOptions: () => [],
     },
 );
 
+const msg = useSaMessages('promos');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+const resolvedCreateLabel = computed(() => props.createLabel ?? msg.value.createAction);
+
 const q = useQuasar();
 const notify = useSuperAdminNotify();
 const rows = ref<PromoRow[]>([]);
@@ -267,23 +273,23 @@ const statTiles = computed<
         if (c) counts[c]++;
     }
     return [
-        { id: 'all', label: 'Alle', count: rows.value.length },
+        { id: 'all', label: common.value.all, count: rows.value.length },
         {
             id: 'active',
-            label: 'Aktiv',
+            label: common.value.active,
             count: counts.active,
             tone: 'positive',
-            hint: 'einlösbar',
+            hint: msg.value.list.hintRedeemable,
         },
         {
             id: 'scheduled',
-            label: 'Geplant',
+            label: msg.value.list.tileScheduled,
             count: counts.scheduled,
             tone: 'info',
-            hint: 'startet künftig',
+            hint: msg.value.list.hintStartsLater,
         },
-        { id: 'paused', label: 'Pausiert', count: counts.paused, tone: 'warn' },
-        { id: 'expired', label: 'Abgelaufen', count: counts.expired, tone: 'muted' },
+        { id: 'paused', label: msg.value.list.tilePaused, count: counts.paused, tone: 'warn' },
+        { id: 'expired', label: common.value.expired, count: counts.expired, tone: 'muted' },
     ];
 });
 
@@ -305,36 +311,41 @@ function onStatusTileClick(id: StatusFilter): void {
     }
 }
 
-const baseColumns = [
+const baseColumns = computed(() => [
     {
         name: 'code',
-        label: 'Code',
+        label: msg.value.list.columnCode,
         field: 'code',
         align: 'left' as const,
         sortable: true,
     },
-    { name: 'valueType', label: 'Typ', field: 'valueType', align: 'left' as const },
-    { name: 'value', label: 'Wert', field: 'value', align: 'right' as const },
-    { name: 'status', label: 'Status', field: 'status', align: 'left' as const },
+    {
+        name: 'valueType',
+        label: common.value.type,
+        field: 'valueType',
+        align: 'left' as const,
+    },
+    { name: 'value', label: msg.value.list.columnValue, field: 'value', align: 'right' as const },
+    { name: 'status', label: common.value.status, field: 'status', align: 'left' as const },
     {
         name: 'redemptions',
-        label: 'Einlösungen',
+        label: msg.value.list.columnRedemptions,
         field: (r: PromoRow) => `${r.redemptionsCount} / ${r.maxRedemptions ?? '∞'}`,
         align: 'right' as const,
     },
     {
         name: 'campaign',
-        label: 'Kampagne',
+        label: msg.value.list.columnCampaign,
         field: (r: PromoRow) => r.campaignTag ?? '—',
         align: 'left' as const,
     },
     {
         name: 'validUntil',
-        label: 'Gültig bis',
+        label: msg.value.list.columnValidUntil,
         field: (r: PromoRow) => formatDate(r.validUntil) ?? '—',
         align: 'left' as const,
     },
-];
+]);
 
 // Built-in default actions — APPENDED to the consumer actions, not replacing them.
 const bakedActions = computed<PromoRowAction[]>(() => {
@@ -342,7 +353,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableEdit && props.submitEdit) {
         out.push({
             id: 'edit',
-            label: 'Bearbeiten',
+            label: common.value.edit,
             icon: 'edit',
             color: 'primary',
             handler: (row) => openEdit(row),
@@ -351,7 +362,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableStatusToggle && props.submitEdit) {
         out.push({
             id: 'pause',
-            label: 'Pausieren',
+            label: msg.value.list.actionPause,
             icon: 'pause',
             color: 'warning',
             condition: (row) => row.status === 'ACTIVE',
@@ -359,7 +370,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
         });
         out.push({
             id: 'activate',
-            label: 'Aktivieren',
+            label: msg.value.list.actionActivate,
             icon: 'play_arrow',
             color: 'primary',
             condition: (row) => row.status === 'PAUSED',
@@ -369,7 +380,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableDelete && props.submitDelete) {
         out.push({
             id: 'delete',
-            label: 'Löschen',
+            label: common.value.delete,
             icon: 'delete',
             color: 'negative',
             handler: (row) => onDeleteClick(row),
@@ -384,7 +395,7 @@ const mergedActions = computed<readonly PromoRowAction[]>(() => [
 ]);
 
 const effectiveColumns = computed(() => {
-    const cols = [...baseColumns];
+    const cols = [...baseColumns.value];
     if (mergedActions.value.length > 0) {
         cols.push({
             name: 'actions',
@@ -503,14 +514,14 @@ function onDeleteClick(row: PromoRow): void {
     if (!props.submitDelete) return;
     const submit = props.submitDelete;
     q.dialog({
-        title: `Promo-Code "${row.code}" löschen`,
-        message: 'Soft-Delete via Status=EXPIRED. Bestehende Redemptions bleiben.',
-        cancel: 'Abbrechen',
-        ok: { label: 'Löschen', color: 'negative' },
+        title: formatMessage(msg.value.list.deleteTitle, { code: row.code }),
+        message: msg.value.list.deleteMessage,
+        cancel: common.value.cancel,
+        ok: { label: common.value.delete, color: 'negative' },
     }).onOk(async () => {
         try {
             await submit(row.id);
-            notify('positive', `${row.code} gelöscht.`);
+            notify('positive', formatMessage(msg.value.list.deletedNotice, { code: row.code }));
             await reload();
         } catch (err) {
             notify('negative', errMsg(err));
@@ -519,12 +530,12 @@ function onDeleteClick(row: PromoRow): void {
 }
 
 function onCreated(): void {
-    notify('positive', 'Promo-Code angelegt.');
+    notify('positive', msg.value.list.createdNotice);
     void reload();
 }
 
 function onUpdated(): void {
-    notify('positive', 'Promo-Code aktualisiert.');
+    notify('positive', msg.value.list.updatedNotice);
     void reload();
 }
 
@@ -532,14 +543,14 @@ function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
         (err as Error)?.message ??
-        'Aktion fehlgeschlagen'
+        msg.value.list.actionFailed
     );
 }
 
 function formatDate(iso: string | Date | null | undefined): string | null {
     if (!iso) return null;
     try {
-        return new Date(iso).toLocaleDateString('de-DE', {
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/SubscriptionsPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-subscriptions">
         <header class="sa-subscriptions__head">
             <div>
-                <h1 class="sa-subscriptions__title">Abonnements</h1>
+                <h1 class="sa-subscriptions__title">{{ msg.subscriptions.title }}</h1>
                 <p v-if="subtitle" class="sa-subscriptions__sub">{{ subtitle }}</p>
             </div>
             <slot name="head-actions" />
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: subscriptions (minimal). Apps pass
 // `loadSubscriptions` + optional `columns` through — default columns show
@@ -60,39 +61,43 @@ const props = withDefaults(
     {},
 );
 
+const msg = useSaMessages('tenants');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
 const rows = ref<SubscriptionRow[]>([]);
 const loading = ref(false);
 
-const defaultColumns: Column[] = [
+const defaultColumns = computed<Column[]>(() => [
     {
         name: 'tenant',
-        label: 'Mandant',
+        label: msg.value.tenant,
         field: (r) => r.tenant?.name ?? r.tenant?.slug ?? r.tenantSlug ?? '—',
         align: 'left',
         sortable: true,
     },
     {
         name: 'plan',
-        label: 'Plan',
+        label: msg.value.plan,
         field: (r) => r.plan ?? r.planId ?? '—',
         align: 'left',
     },
     {
         name: 'status',
-        label: 'Status',
+        label: common.value.status,
         field: (r) => r.status ?? '—',
         align: 'left',
     },
     {
         name: 'periodEndsAt',
-        label: 'Endet',
+        label: msg.value.subscriptions.columnEndsAt,
         field: (r) => formatDate(r.periodEndsAt) ?? '∞',
         align: 'left',
     },
-];
+]);
 
 const effectiveColumns = computed<Column[]>(() =>
-    props.columns ? [...props.columns] : defaultColumns,
+    props.columns ? [...props.columns] : defaultColumns.value,
 );
 
 async function reload() {
@@ -112,7 +117,7 @@ onMounted(reload);
 function formatDate(iso: string | null | undefined): string | null {
     if (!iso) return null;
     try {
-        return new Date(iso).toLocaleDateString('de-DE', {
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -20,30 +20,32 @@
                 </div>
             </div>
 
-            <h1 class="sa-login-title">Anmelden</h1>
+            <h1 class="sa-login-title">{{ msg.login.signIn }}</h1>
             <p v-if="subtitle" class="sa-login-subtitle">{{ subtitle }}</p>
 
             <q-form @submit.prevent="handleSubmit" class="sa-login-form">
                 <q-input
                     v-model="form.email"
-                    label="E-Mail"
+                    :label="msg.emailLabel"
                     type="email"
+                    autocomplete="username"
                     outlined
                     dense
                     autofocus
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || 'Bitte gültige E-Mail']"
+                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || msg.invalidEmail]"
                 />
                 <q-input
                     v-model="form.password"
-                    label="Passwort"
+                    :label="msg.passwordLabel"
                     :type="showPw ? 'text' : 'password'"
+                    autocomplete="current-password"
                     outlined
                     dense
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => v.length > 0 || 'Passwort ist Pflicht']"
+                    :rules="[(v: string) => v.length > 0 || msg.login.passwordRequired]"
                 >
                     <template #append>
                         <q-icon
@@ -62,7 +64,7 @@
                     unelevated
                     color="primary"
                     icon="login"
-                    label="Anmelden"
+                    :label="msg.login.signIn"
                     :loading="loading"
                     :disable="!canSubmit"
                     class="full-width q-mt-sm"
@@ -71,7 +73,8 @@
             </q-form>
 
             <div v-if="devHint" class="sa-login-hint">
-                Test-Account: <code>{{ devHint.email }}</code> / <code>{{ devHint.password }}</code>
+                {{ msg.login.devHintLabel }} <code>{{ devHint.email }}</code> /
+                <code>{{ devHint.password }}</code>
             </div>
         </div>
 
@@ -94,6 +97,7 @@ import {
     useSuperAdminLoginAdapter,
 } from '../vue/use-super-admin-context.js';
 import { getJson } from '../client/http-json.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import SuperAdminSetupWizard from './SuperAdminSetupWizard.vue';
 
 interface Props {
@@ -107,6 +111,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const router = useRouter();
+const msg = useSaMessages('shell');
 const brand = useSuperAdminBrand();
 const endpoints = useSuperAdminEndpoints();
 const adapter = useSuperAdminLoginAdapter();
@@ -161,11 +166,9 @@ function describeError(
     result: Extract<Awaited<ReturnType<typeof adapter.login>>, { ok: false }>,
 ): string {
     if (result.message) return result.message;
-    if (result.code === 'BAD_CREDENTIALS') return 'E-Mail oder Passwort falsch.';
-    if (result.code === 'NOT_SUPER_ADMIN') {
-        return 'Dieser Account hat keine SUPER_ADMIN-Rolle. Bitte Tenant-Frontend nutzen.';
-    }
-    return 'Anmeldung fehlgeschlagen.';
+    if (result.code === 'BAD_CREDENTIALS') return msg.value.login.errorBadCredentials;
+    if (result.code === 'NOT_SUPER_ADMIN') return msg.value.login.errorNotSuperAdmin;
+    return msg.value.login.errorFailed;
 }
 
 async function handleSubmit(): Promise<void> {
@@ -182,7 +185,7 @@ async function handleSubmit(): Promise<void> {
     } catch (err) {
         const e = err as { response?: { data?: { message?: string; code?: string } } };
         errorMessage.value =
-            e.response?.data?.message ?? e.response?.data?.code ?? 'Anmeldung fehlgeschlagen.';
+            e.response?.data?.message ?? e.response?.data?.code ?? msg.value.login.errorFailed;
     } finally {
         loading.value = false;
     }

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -4,8 +4,8 @@
             <div class="sa-setup-head">
                 <div class="sa-setup-badge">{{ iconText }}</div>
                 <div>
-                    <div class="sa-setup-title">Erst­einrichtung</div>
-                    <div class="sa-setup-sub">{{ brandName }} · ersten SuperAdmin anlegen</div>
+                    <div class="sa-setup-title">{{ msg.setup.title }}</div>
+                    <div class="sa-setup-sub">{{ subtitleText }}</div>
                 </div>
             </div>
 
@@ -16,40 +16,44 @@
             <!-- Step 1: create SuperAdmin -->
             <q-form v-if="step === 'form'" @submit.prevent="submitCreate" class="sa-setup-form">
                 <p class="sa-setup-hint">
-                    Es existiert noch kein SuperAdmin. Gib das vom Betreiber gesetzte
-                    <code>SETUP_TOKEN</code> ein und lege den ersten Account an.
+                    {{ msg.setup.tokenHintBefore }}
+                    <code>SETUP_TOKEN</code>
+                    {{ msg.setup.tokenHintAfter }}
                 </p>
                 <q-input
                     v-model="form.token"
-                    label="Setup-Token"
+                    :label="msg.setup.tokenLabel"
                     type="password"
                     outlined
                     dense
                     autofocus
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => v.length > 0 || 'Setup-Token ist Pflicht']"
+                    :rules="[(v: string) => v.length > 0 || msg.setup.tokenRequired]"
                 />
                 <q-input
                     v-model="form.email"
-                    label="E-Mail"
+                    :label="msg.emailLabel"
                     type="email"
                     outlined
                     dense
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || 'Bitte gültige E-Mail']"
+                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || msg.invalidEmail]"
                 />
                 <q-input
                     v-model="form.password"
-                    label="Passwort (leer = generieren)"
+                    :label="msg.setup.passwordLabel"
                     :type="showPw ? 'text' : 'password'"
                     outlined
                     dense
                     :disable="loading"
-                    hint="Mindestens 8 Zeichen, oder leer lassen für ein generiertes Passwort."
+                    :hint="msg.setup.passwordHint"
                     class="q-mb-sm"
-                    :rules="[(v: string) => v.length === 0 || v.length >= 8 || 'Mindestens 8 Zeichen']"
+                    :rules="[
+                        (v: string) =>
+                            v.length === 0 || v.length >= 8 || msg.setup.passwordMinLength,
+                    ]"
                 >
                     <template #append>
                         <q-icon
@@ -63,7 +67,7 @@
                     unelevated
                     color="primary"
                     icon="person_add"
-                    label="SuperAdmin anlegen"
+                    :label="msg.setup.submit"
                     :loading="loading"
                     :disable="!canCreate"
                     class="full-width q-mt-sm"
@@ -74,48 +78,48 @@
             <!-- Step 2: set up MFA -->
             <div v-else-if="step === 'mfa' && result" class="sa-setup-mfa">
                 <p class="sa-setup-hint">
-                    Account <strong>{{ result.email }}</strong> angelegt. Richte jetzt die
-                    Zwei-Faktor-Authentisierung (TOTP) ein.
+                    {{ msg.setup.mfaIntroBefore }} <strong>{{ result.email }}</strong>
+                    {{ msg.setup.mfaIntroAfter }}
                 </p>
 
                 <div v-if="result.generatedPassword" class="sa-setup-secret">
-                    <div class="sa-setup-secret__label">Generiertes Passwort (einmalig sichern)</div>
+                    <div class="sa-setup-secret__label">
+                        {{ msg.setup.generatedPasswordLabel }}
+                    </div>
                     <code class="sa-setup-secret__value">{{ result.generatedPassword }}</code>
                 </div>
 
                 <div v-if="result.qrDataUrl" class="sa-setup-qr">
-                    <img :src="result.qrDataUrl" alt="MFA-QR-Code" width="200" height="200" />
-                    <div class="sa-setup-qr__hint">Mit der Authenticator-App scannen</div>
+                    <img :src="result.qrDataUrl" :alt="msg.setup.qrAlt" width="200" height="200" />
+                    <div class="sa-setup-qr__hint">{{ msg.setup.qrHint }}</div>
                 </div>
 
                 <div class="sa-setup-secret">
-                    <div class="sa-setup-secret__label">
-                        In Authenticator-App als „Schlüssel manuell eingeben"
-                    </div>
+                    <div class="sa-setup-secret__label">{{ msg.setup.manualSecretLabel }}</div>
                     <code class="sa-setup-secret__value">{{ result.secret }}</code>
                 </div>
                 <details class="sa-setup-uri">
-                    <summary>otpauth-URI (für QR-Generator)</summary>
+                    <summary>{{ msg.setup.otpauthSummary }}</summary>
                     <code class="sa-setup-uri__value">{{ result.otpauthUri }}</code>
                 </details>
 
                 <q-form @submit.prevent="submitConfirm" class="sa-setup-form q-mt-md">
                     <q-input
                         v-model="mfaCode"
-                        label="6-stelliger Code aus der App"
+                        :label="msg.setup.codeLabel"
                         outlined
                         dense
                         autofocus
                         inputmode="numeric"
                         maxlength="6"
                         :disable="loading"
-                        :rules="[(v: string) => /^\d{6}$/.test(v) || '6-stelliger Code']"
+                        :rules="[(v: string) => /^\d{6}$/.test(v) || msg.setup.codeInvalid]"
                     />
                     <q-btn
                         unelevated
                         color="primary"
                         icon="verified_user"
-                        label="MFA bestätigen"
+                        :label="msg.setup.confirmMfa"
                         :loading="loading"
                         :disable="!/^\d{6}$/.test(mfaCode) || loading"
                         class="full-width q-mt-sm"
@@ -123,21 +127,19 @@
                     />
                 </q-form>
                 <button class="sa-setup-skip" type="button" @click="step = 'done'">
-                    Überspringen — Code beim ersten Login eingeben
+                    {{ msg.setup.skip }}
                 </button>
             </div>
 
             <!-- Step 3: done -->
             <div v-else-if="step === 'done'" class="sa-setup-done">
                 <q-icon name="check_circle" color="positive" size="48px" />
-                <p class="sa-setup-hint">
-                    Einrichtung abgeschlossen. Melde dich jetzt mit dem neuen SuperAdmin an.
-                </p>
+                <p class="sa-setup-hint">{{ msg.setup.doneHint }}</p>
                 <q-btn
                     unelevated
                     color="primary"
                     icon="login"
-                    label="Zum Login"
+                    :label="msg.setup.toLogin"
                     class="full-width"
                     @click="emit('done')"
                 />
@@ -148,11 +150,7 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
-import {
-    SETUP_ERROR_CODES,
-    type SetupConfirmMfaResponse,
-    type SetupResult,
-} from '@saasicat/types';
+import { SETUP_ERROR_CODES, type SetupConfirmMfaResponse, type SetupResult } from '@saasicat/types';
 
 import {
     useSuperAdminBrand,
@@ -160,6 +158,8 @@ import {
     useSuperAdminHttp,
 } from '../vue/use-super-admin-context.js';
 import { HttpJsonError, postJson as httpPostJson } from '../client/http-json.js';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 
 interface Props {
     /** Display name + badge abbreviation (override the app branding, e.g. from PublicBoot). */
@@ -172,12 +172,16 @@ const props = defineProps<Props>();
 // shown again — the freshly created SuperAdmin then signs in.
 const emit = defineEmits<{ done: [] }>();
 
+const msg = useSaMessages('shell');
 const brand = useSuperAdminBrand();
 const endpoints = useSuperAdminEndpoints();
 const http = useSuperAdminHttp();
 
 const brandName = computed(() => props.displayName ?? brand.name);
 const iconText = computed(() => props.icon ?? brand.logoText);
+const subtitleText = computed(() =>
+    formatMessage(msg.value.setup.subtitle, { brand: brandName.value }),
+);
 
 const step = ref<'form' | 'mfa' | 'done'>('form');
 const form = reactive({ token: '', email: '', password: '' });
@@ -195,15 +199,13 @@ const canCreate = computed(
         !loading.value,
 );
 
-const ERROR_BY_CODE: Record<string, string> = {
-    [SETUP_ERROR_CODES.SETUP_DISABLED]: 'Setup ist serverseitig deaktiviert (SETUP_TOKEN nicht gesetzt).',
-    [SETUP_ERROR_CODES.INVALID_SETUP_TOKEN]: 'Setup-Token ungültig.',
-    [SETUP_ERROR_CODES.SETUP_ALREADY_DONE]:
-        'Es existiert bereits ein SuperAdmin — Setup ist abgeschlossen.',
-    [SETUP_ERROR_CODES.INVALID_EMAIL]: 'Ungültige E-Mail-Adresse.',
-    [SETUP_ERROR_CODES.EMAIL_EXISTS]:
-        'Diese E-Mail ist bereits vergeben. Wähle eine andere oder hebe den bestehenden User per CLI/DB zum SUPER_ADMIN an.',
-};
+const errorByCode = computed<Record<string, string>>(() => ({
+    [SETUP_ERROR_CODES.SETUP_DISABLED]: msg.value.setup.errorSetupDisabled,
+    [SETUP_ERROR_CODES.INVALID_SETUP_TOKEN]: msg.value.setup.errorInvalidToken,
+    [SETUP_ERROR_CODES.SETUP_ALREADY_DONE]: msg.value.setup.errorAlreadyDone,
+    [SETUP_ERROR_CODES.INVALID_EMAIL]: msg.value.setup.errorInvalidEmail,
+    [SETUP_ERROR_CODES.EMAIL_EXISTS]: msg.value.setup.errorEmailExists,
+}));
 
 // Goes through the injected HttpClient (consumer's auth/baseURL apply);
 // maps the error code from the body to a readable message.
@@ -213,7 +215,8 @@ async function postJson<T>(path: string, body: unknown): Promise<T> {
     } catch (err) {
         if (err instanceof HttpJsonError) {
             throw new Error(
-                (err.code && ERROR_BY_CODE[err.code]) || `Fehler (HTTP ${err.status}).`,
+                (err.code && errorByCode.value[err.code]) ||
+                    formatMessage(msg.value.setup.errorHttp, { status: err.status }),
             );
         }
         throw err;
@@ -232,7 +235,7 @@ async function submitCreate(): Promise<void> {
         });
         step.value = 'mfa';
     } catch (err) {
-        errorMessage.value = err instanceof Error ? err.message : 'Setup fehlgeschlagen.';
+        errorMessage.value = err instanceof Error ? err.message : msg.value.setup.errorFailed;
     } finally {
         loading.value = false;
     }
@@ -251,10 +254,11 @@ async function submitConfirm(): Promise<void> {
         if (res.ok) {
             step.value = 'done';
         } else {
-            errorMessage.value = 'Code ungültig — bitte erneut versuchen.';
+            errorMessage.value = msg.value.setup.errorCodeInvalid;
         }
     } catch (err) {
-        errorMessage.value = err instanceof Error ? err.message : 'Bestätigung fehlgeschlagen.';
+        errorMessage.value =
+            err instanceof Error ? err.message : msg.value.setup.errorConfirmFailed;
     } finally {
         loading.value = false;
     }