@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/components/dialogs/PilotCreateDialog.vue

@@ -7,13 +7,8 @@
         <q-card class="pl-dlg">
             <q-card-section class="pl-dlg__head">
                 <div>
-                    <div class="pl-dlg__title">Pilot-Mandant anlegen</div>
-                    <div class="pl-dlg__sub">
-                        {{
-                            subtitle ??
-                            'Neuer Mandant + Initial-Admin werden in einem Schritt angelegt.'
-                        }}
-                    </div>
+                    <div class="pl-dlg__title">{{ msg.createDialog.title }}</div>
+                    <div class="pl-dlg__sub">{{ subtitle ?? msg.createDialog.subtitle }}</div>
                 </div>
                 <q-btn
                     class="pl-dlg__close"
@@ -32,7 +27,9 @@
                     <header class="pl-section__head">
                         <span class="pl-section__num">1</span>
                         <div>
-                            <div class="pl-section__title">Mandant</div>
+                            <div class="pl-section__title">
+                                {{ msg.createDialog.sectionTenant }}
+                            </div>
                             <div class="pl-section__sub">{{ copy.tenantSubtitle }}</div>
                         </div>
                     </header>
@@ -49,10 +46,8 @@
 
                         <div class="pl-field pl-field--full">
                             <label>
-                                Slug
-                                <span class="pl-field__hint"
-                                    >wird automatisch aus dem Namen erzeugt</span
-                                >
+                                {{ msg.form.slugLabel }}
+                                <span class="pl-field__hint">{{ msg.form.slugHint }}</span>
                             </label>
                             <div class="pl-slug-input">
                                 <span v-if="slugPrefix" class="pl-slug-input__prefix">{{
@@ -66,27 +61,27 @@
                                 />
                             </div>
                             <div v-if="slugConflict" class="pl-field__error">
-                                Dieser Slug ist bereits vergeben.
+                                {{ msg.form.slugConflict }}
                             </div>
                         </div>
 
                         <div v-if="showLegalFields" class="pl-field">
-                            <label>Rechtsform</label>
+                            <label>{{ msg.createDialog.legalFormLabel }}</label>
                             <input
                                 v-model="form.tenant.legalForm"
                                 class="pl-input"
-                                placeholder="e.V., GmbH, …"
+                                :placeholder="msg.createDialog.legalFormPlaceholder"
                             />
                         </div>
                         <div v-if="showLegalFields" class="pl-field">
                             <label>
-                                USt-IdNr.
-                                <span class="pl-field__hint">optional</span>
+                                {{ msg.createDialog.vatIdLabel }}
+                                <span class="pl-field__hint">{{ msg.createDialog.vatIdHint }}</span>
                             </label>
                             <input
                                 v-model="form.tenant.vatId"
                                 class="pl-input"
-                                placeholder="DE123456789"
+                                :placeholder="msg.createDialog.vatIdPlaceholder"
                             />
                         </div>
                     </div>
@@ -98,15 +93,15 @@
                     <header class="pl-section__head">
                         <span class="pl-section__num">2</span>
                         <div>
-                            <div class="pl-section__title">Initial-Admin</div>
+                            <div class="pl-section__title">{{ msg.createDialog.sectionAdmin }}</div>
                             <div class="pl-section__sub">
-                                Erhält eine Einladungs-E-Mail mit Initial-Passwort.
+                                {{ msg.createDialog.sectionAdminSub }}
                             </div>
                         </div>
                     </header>
                     <div class="pl-grid">
                         <div class="pl-field pl-field--full">
-                            <label>E-Mail</label>
+                            <label>{{ msg.createDialog.emailLabel }}</label>
                             <input
                                 v-model="form.admin.email"
                                 class="pl-input"
@@ -115,36 +110,36 @@
                                 :placeholder="copy.adminEmailPlaceholder"
                             />
                             <div v-if="form.admin.email && !emailValid" class="pl-field__error">
-                                Bitte eine gültige E-Mail-Adresse eingeben.
+                                {{ msg.createDialog.emailInvalid }}
                             </div>
                         </div>
                         <div class="pl-field">
-                            <label>Vorname</label>
+                            <label>{{ msg.createDialog.firstNameLabel }}</label>
                             <input
                                 v-model="form.admin.firstName"
                                 class="pl-input"
-                                placeholder="Erika"
+                                :placeholder="msg.createDialog.firstNamePlaceholder"
                             />
                         </div>
                         <div class="pl-field">
-                            <label>Nachname</label>
+                            <label>{{ msg.createDialog.lastNameLabel }}</label>
                             <input
                                 v-model="form.admin.lastName"
                                 class="pl-input"
-                                placeholder="Mustermann"
+                                :placeholder="msg.createDialog.lastNamePlaceholder"
                             />
                         </div>
                         <div class="pl-field pl-field--full">
                             <label>
-                                Initial-Passwort
-                                <span class="pl-field__hint"
-                                    >leer lassen → automatisch generieren</span
-                                >
+                                {{ msg.createDialog.initialPasswordLabel }}
+                                <span class="pl-field__hint">{{
+                                    msg.createDialog.initialPasswordHint
+                                }}</span>
                             </label>
                             <input
                                 v-model="form.admin.initialPassword"
                                 class="pl-input"
-                                placeholder="•••••••• (automatisch generieren)"
+                                :placeholder="msg.createDialog.initialPasswordPlaceholder"
                             />
                         </div>
                     </div>
@@ -155,15 +150,15 @@
                     <header class="pl-section__head">
                         <span class="pl-section__num">3</span>
                         <div>
-                            <div class="pl-section__title">Pilot-Konfiguration</div>
+                            <div class="pl-section__title">{{ msg.createDialog.sectionPilot }}</div>
                             <div class="pl-section__sub">
-                                Plan-Zuweisung, Laufzeit und interne Notiz
+                                {{ msg.createDialog.sectionPilotSub }}
                             </div>
                         </div>
                     </header>
                     <div class="pl-grid">
                         <div class="pl-field">
-                            <label>Plan</label>
+                            <label>{{ msg.form.planLabel }}</label>
                             <div class="pl-plan-select">
                                 <button
                                     v-for="p in normalizedPlanOptions"
@@ -192,23 +187,23 @@
                         </div>
 
                         <div class="pl-field">
-                            <label>Endet am</label>
+                            <label>{{ msg.form.endsAtLabel }}</label>
                             <div class="pl-end-row">
                                 <input v-model="form.pilot.endsAt" class="pl-input" type="date" />
                                 <button
                                     v-if="form.pilot.endsAt"
                                     type="button"
                                     class="pl-btn-mini"
-                                    title="Auf unbegrenzt setzen"
+                                    :title="msg.form.endsAtClearTitle"
                                     @click="form.pilot.endsAt = ''"
                                 >
                                     <q-icon name="close" size="12px" />
-                                    unbegrenzt
+                                    {{ common.unlimited }}
                                 </button>
                             </div>
                             <div class="pl-end-presets">
                                 <button
-                                    v-for="p in PRESET_ENDS"
+                                    v-for="p in presetEnds"
                                     :key="p.days"
                                     type="button"
                                     class="pl-preset-btn"
@@ -221,10 +216,8 @@
 
                         <div class="pl-field pl-field--full">
                             <label>
-                                Note
-                                <span class="pl-field__hint"
-                                    >intern · nicht für Kunden sichtbar</span
-                                >
+                                {{ msg.form.noteLabel }}
+                                <span class="pl-field__hint">{{ msg.form.noteHint }}</span>
                             </label>
                             <textarea
                                 v-model="form.pilot.note"
@@ -242,13 +235,13 @@
             <q-card-actions align="right" class="pl-dlg__foot">
                 <span v-if="form.admin.email && emailValid" class="pl-foot-hint">
                     <q-icon name="send" size="14px" />
-                    Einladung geht an <strong>{{ form.admin.email }}</strong>
+                    {{ msg.createDialog.invitationHint }} <strong>{{ form.admin.email }}</strong>
                 </span>
-                <q-btn flat label="Abbrechen" v-close-popup :disable="loading" />
+                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
-                    label="Pilot anlegen"
+                    :label="msg.createAction"
                     :loading="loading"
                     :disable="!isValid"
                     @click="onSubmit"
@@ -270,12 +263,9 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
-import {
-    DEFAULT_PILOT_COPY,
-    type PilotCopy,
-    type PilotCreatePayload,
-    type PilotCreateResult,
-} from './types.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import type { PilotCopy, PilotCreatePayload, PilotCreateResult } from './types.js';
 
 // Platform pilot-create dialog (sim layout: 3 numbered sections,
 // slug-prefix display, plan-tile picker, ends-at quick-sets, footer hint).
@@ -315,14 +305,17 @@ const emit = defineEmits<{
     (e: 'created', result: PilotCreateResult): void;
 }>();
 
-const PRESET_ENDS: ReadonlyArray<{ label: string; days: number }> = [
-    { label: '30 Tage', days: 30 },
-    { label: '90 Tage', days: 90 },
-    { label: '6 Monate', days: 180 },
-    { label: '1 Jahr', days: 365 },
-];
+const msg = useSaMessages('pilots');
+const common = useSaMessages('common');
+
+const presetEnds = computed<ReadonlyArray<{ label: string; days: number }>>(() => [
+    { label: msg.value.form.preset30Days, days: 30 },
+    { label: msg.value.form.preset90Days, days: 90 },
+    { label: msg.value.form.preset6Months, days: 180 },
+    { label: msg.value.form.preset1Year, days: 365 },
+]);
 
-const copy = computed<Required<PilotCopy>>(() => ({ ...DEFAULT_PILOT_COPY, ...props.copy }));
+const copy = computed<Required<PilotCopy>>(() => ({ ...msg.value.copyDefaults, ...props.copy }));
 
 const normalizedPlanOptions = computed<Array<{ value: string; label: string; color?: string }>>(
     () =>
@@ -419,7 +412,10 @@ watch(
 function onSubmit(): void {
     if (!isValid.value) return;
     if (props.requireMfa) {
-        mfaDescription.value = `Pilot-Mandant "${form.tenant.name}" anlegen — Plan ${form.pilot.plan}.`;
+        mfaDescription.value = formatMessage(msg.value.createDialog.mfaDescription, {
+            name: form.tenant.name,
+            plan: form.pilot.plan,
+        });
         mfaError.value = '';
         showMfa.value = true;
         return;
@@ -472,12 +468,11 @@ async function doSubmit(code: string): Promise<void> {
             status === 401 &&
             (reason === 'MFA_FAILED' || reason === 'MFA_REQUIRED')
         ) {
-            mfaError.value = 'TOTP-Code ungültig.';
+            mfaError.value = msg.value.mfa.invalidCode;
         } else if (props.requireMfa && status === 401 && reason === 'MFA_NOT_SET_UP') {
-            mfaError.value =
-                response?.data?.message ?? 'MFA ist für diesen Account nicht eingerichtet.';
+            mfaError.value = response?.data?.message ?? msg.value.mfa.notSetUp;
         } else {
-            error.value = response?.data?.message ?? 'Anlegen fehlgeschlagen';
+            error.value = response?.data?.message ?? common.value.createFailed;
             showMfa.value = false;
         }
     } finally {

package/src/components/dialogs/PilotEditDialog.vue

@@ -7,7 +7,7 @@
         <q-card class="ple-dlg">
             <q-card-section class="ple-dlg__head">
                 <div>
-                    <div class="ple-dlg__title">Pilot bearbeiten</div>
+                    <div class="ple-dlg__title">{{ msg.editDialog.title }}</div>
                     <div class="ple-dlg__sub" v-if="row">
                         <strong>{{ row.tenant.name }}</strong>
                         <span class="ple-dlg__sep">·</span>
@@ -31,11 +31,8 @@
                     <header class="ple-section__head">
                         <span class="ple-section__num">1</span>
                         <div>
-                            <div class="ple-section__title">Plan</div>
-                            <div class="ple-section__sub">
-                                Aktive Plan-Zuweisung. Legacy-Plans tauchen als „nicht im Katalog"
-                                auf.
-                            </div>
+                            <div class="ple-section__title">{{ msg.form.planLabel }}</div>
+                            <div class="ple-section__sub">{{ msg.editDialog.sectionPlanSub }}</div>
                         </div>
                     </header>
                     <div class="ple-plan-select">
@@ -70,9 +67,11 @@
                     <header class="ple-section__head">
                         <span class="ple-section__num">2</span>
                         <div>
-                            <div class="ple-section__title">Enddatum</div>
+                            <div class="ple-section__title">
+                                {{ msg.editDialog.sectionEndDate }}
+                            </div>
                             <div class="ple-section__sub">
-                                Leeres Datum = offene Pilotphase ohne Ablauf.
+                                {{ msg.editDialog.sectionEndDateSub }}
                             </div>
                         </div>
                     </header>
@@ -82,16 +81,16 @@
                             v-if="form.endsAt"
                             type="button"
                             class="ple-btn-mini"
-                            title="Datum löschen — offene Pilotphase"
+                            :title="msg.editDialog.clearDateTitle"
                             @click="form.endsAt = ''"
                         >
                             <q-icon name="close" size="12px" />
-                            unbegrenzt
+                            {{ common.unlimited }}
                         </button>
                     </div>
                     <div class="ple-end-presets">
                         <button
-                            v-for="p in PRESET_ENDS"
+                            v-for="p in presetEnds"
                             :key="p.days"
                             type="button"
                             class="ple-preset-btn"
@@ -107,8 +106,8 @@
                     <header class="ple-section__head">
                         <span class="ple-section__num">3</span>
                         <div>
-                            <div class="ple-section__title">Notiz</div>
-                            <div class="ple-section__sub">Intern · nicht für Kunden sichtbar.</div>
+                            <div class="ple-section__title">{{ msg.editDialog.sectionNote }}</div>
+                            <div class="ple-section__sub">{{ msg.editDialog.sectionNoteSub }}</div>
                         </div>
                     </header>
                     <textarea
@@ -123,11 +122,11 @@
             </q-card-section>
 
             <q-card-actions align="right" class="ple-dlg__foot">
-                <q-btn flat label="Abbrechen" v-close-popup :disable="loading" />
+                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
-                    label="Speichern"
+                    :label="common.save"
                     :loading="loading"
                     :disable="!isDirty"
                     @click="onSubmit"
@@ -149,13 +148,10 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PilotRow } from '../../pages-standard/PilotsPage.vue';
-import {
-    DEFAULT_PILOT_COPY,
-    type PilotCopy,
-    type PilotEditPayload,
-    type PilotEditResult,
-} from './types.js';
+import type { PilotCopy, PilotEditPayload, PilotEditResult } from './types.js';
 
 // Platform dialog for editing an existing pilot subscription
 // (sim layout: numbered sections, plan tile picker, ends-at quick sets).
@@ -187,15 +183,18 @@ const emit = defineEmits<{
     (e: 'updated', result: PilotEditResult): void;
 }>();
 
-const PRESET_ENDS: ReadonlyArray<{ label: string; days: number }> = [
-    { label: '30 Tage', days: 30 },
-    { label: '90 Tage', days: 90 },
-    { label: '6 Monate', days: 180 },
-    { label: '1 Jahr', days: 365 },
-];
+const msg = useSaMessages('pilots');
+const common = useSaMessages('common');
+
+const presetEnds = computed<ReadonlyArray<{ label: string; days: number }>>(() => [
+    { label: msg.value.form.preset30Days, days: 30 },
+    { label: msg.value.form.preset90Days, days: 90 },
+    { label: msg.value.form.preset6Months, days: 180 },
+    { label: msg.value.form.preset1Year, days: 365 },
+]);
 
 const notePlaceholder = computed(
-    () => props.copy?.notePlaceholder ?? DEFAULT_PILOT_COPY.notePlaceholder,
+    () => props.copy?.notePlaceholder ?? msg.value.copyDefaults.notePlaceholder,
 );
 
 function normalize(opt: PlanOption): { value: string; label: string; color?: string } {
@@ -212,7 +211,13 @@ const effectivePlanOptions = computed<Array<{ value: string; label: string; colo
         const current = props.row?.plan;
         if (!current) return opts;
         if (opts.some((o) => o.value === current)) return opts;
-        return [{ value: current, label: `${current} (nicht im Katalog)` }, ...opts];
+        return [
+            {
+                value: current,
+                label: formatMessage(msg.value.editDialog.planNotInCatalog, { plan: current }),
+            },
+            ...opts,
+        ];
     },
 );
 
@@ -276,7 +281,9 @@ const isDirty = computed(() => Object.keys(diff.value).length > 0);
 function onSubmit(): void {
     if (!isDirty.value || !props.row) return;
     if (props.requireMfa) {
-        mfaDescription.value = `Pilot "${props.row.tenant.name}" bearbeiten.`;
+        mfaDescription.value = formatMessage(msg.value.editDialog.mfaDescription, {
+            name: props.row.tenant.name,
+        });
         mfaError.value = '';
         showMfa.value = true;
         return;
@@ -309,12 +316,11 @@ async function doSubmit(code: string): Promise<void> {
             status === 401 &&
             (reason === 'MFA_FAILED' || reason === 'MFA_REQUIRED')
         ) {
-            mfaError.value = 'TOTP-Code ungültig.';
+            mfaError.value = msg.value.mfa.invalidCode;
         } else if (props.requireMfa && status === 401 && reason === 'MFA_NOT_SET_UP') {
-            mfaError.value =
-                response?.data?.message ?? 'MFA ist für diesen Account nicht eingerichtet.';
+            mfaError.value = response?.data?.message ?? msg.value.mfa.notSetUp;
         } else {
-            error.value = response?.data?.message ?? 'Speichern fehlgeschlagen';
+            error.value = response?.data?.message ?? common.value.errorSaveFailed;
             showMfa.value = false;
         }
     } finally {