@saasicat/ui-vue 0.2.0

package/src/components/MfaPromptDialog.vue

@@ -0,0 +1,104 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        persistent
+    >
+        <q-card class="mfa-card">
+            <q-card-section class="header">
+                <q-icon name="lock" size="22px" color="amber-9" />
+                <div class="text-h6">Multi-Faktor-Bestätigung</div>
+            </q-card-section>
+            <q-card-section>
+                <p class="text-body2 q-mb-sm">
+                    {{
+                        description ??
+                        'Diese Aktion ist sicherheitskritisch. Bitte 6-stelligen TOTP-Code aus Authenticator eingeben.'
+                    }}
+                </p>
+                <q-input
+                    v-model="code"
+                    autofocus
+                    mask="######"
+                    maxlength="6"
+                    outlined
+                    dense
+                    label="TOTP-Code"
+                    :error="!!error"
+                    :error-message="error"
+                />
+                <slot name="hint">
+                    <div
+                        v-if="setupHint"
+                        class="text-caption text-grey-7 q-mt-xs"
+                        v-html="setupHint"
+                    />
+                </slot>
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn flat label="Abbrechen" v-close-popup />
+                <q-btn
+                    unelevated
+                    color="amber-9"
+                    text-color="black"
+                    label="Bestätigen"
+                    :disable="code.length !== 6"
+                    @click="onConfirm"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// Cross-cutting MFA confirmation dialog. An app-specific setup hint
+// (e.g. "MFA setup via CLI: ...") is shown via the `setupHint` prop or
+// the `#hint` slot — the platform stays out of app CLIs.
+
+const props = defineProps<{
+    modelValue: boolean;
+    description?: string;
+    error?: string;
+    /** Optional HTML string with an app-specific setup hint. */
+    setupHint?: string;
+}>();
+const emit = defineEmits<{
+    (e: 'update:modelValue', v: boolean): void;
+    (e: 'confirm', code: string): void;
+}>();
+
+const code = ref('');
+
+watch(
+    () => props.modelValue,
+    (open) => {
+        if (open) code.value = '';
+    },
+);
+
+function onConfirm() {
+    if (code.value.length !== 6) return;
+    emit('confirm', code.value);
+}
+</script>
+
+<style scoped>
+.mfa-card {
+    width: 380px;
+    max-width: 92vw;
+}
+.header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 0;
+}
+code {
+    background: rgba(15, 23, 42, 0.06);
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 11px;
+}
+</style>

package/src/components/TenantActionConfirmDialog.vue

@@ -0,0 +1,252 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        persistent
+    >
+        <q-card class="tenant-action-confirm">
+            <q-card-section class="header">
+                <q-icon
+                    :name="iconForAction"
+                    size="22px"
+                    :color="isDangerous ? 'negative' : 'primary'"
+                />
+                <div class="text-h6">{{ def?.label ?? 'Aktion bestätigen' }}</div>
+            </q-card-section>
+
+            <q-card-section v-if="def">
+                <p class="tenant-action-confirm__lead">
+                    Aktion <strong>„{{ def.label }}"</strong> für Tenant
+                    <strong>„{{ row?.name ?? row?.slug ?? '–' }}"</strong>.
+                </p>
+
+                <!-- typed-slug / typed-production: slug confirmation as a safety
+                     gate against accidentally clicking destructive actions. -->
+                <template v-if="needsTypedSlug">
+                    <p class="tenant-action-confirm__hint">
+                        Bestätige durch Eintippen des Slugs
+                        <code>{{ row?.slug }}</code
+                        >:
+                    </p>
+                    <q-input
+                        v-model="slugInput"
+                        outlined
+                        dense
+                        autofocus
+                        :error="slugError"
+                        :error-message="slugErrorMessage"
+                        :placeholder="row?.slug"
+                    />
+                </template>
+
+                <!-- confirmType='date': ISO date, passed through to the handler
+                     via `extras.until` (e.g. pilots.extend). -->
+                <template v-if="needsDate">
+                    <q-input
+                        v-model="dateInput"
+                        outlined
+                        dense
+                        type="date"
+                        class="q-mt-md"
+                        :min="dateMin"
+                        :label="dateLabel"
+                        :error="dateError"
+                        :error-message="
+                            dateError ? 'Bitte ein Datum in der Zukunft wählen.' : undefined
+                        "
+                    />
+                </template>
+
+                <!-- Reason is always required — the platform backends demand it
+                     as MinLength(5) for AuditLog. Apps can switch it off via
+                     `reasonRequired: false`, but the default is required. -->
+                <q-input
+                    v-if="reasonRequired"
+                    v-model="reasonInput"
+                    outlined
+                    dense
+                    type="textarea"
+                    autogrow
+                    class="q-mt-md"
+                    :autofocus="!needsTypedSlug && !needsDate"
+                    label="Grund (Pflicht für Audit-Log, mindestens 5 Zeichen)"
+                    :error="reasonError"
+                    :error-message="
+                        reasonError
+                            ? 'Bitte einen Grund mit mindestens 5 Zeichen angeben.'
+                            : undefined
+                    "
+                />
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn flat label="Abbrechen" @click="onCancel" />
+                <q-btn
+                    unelevated
+                    :color="isDangerous ? 'negative' : 'primary'"
+                    :label="def?.label ?? 'Bestätigen'"
+                    :disable="!canSubmit"
+                    @click="onConfirm"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { TenantActionDef, TenantDto } from '@saasicat/types';
+
+// Platform-standard confirm dialog for tenant actions. Covers both confirm
+// paths from the manifest in a single UI:
+//   - 'simple': reason required only (or reasonRequired=false)
+//   - 'typed-slug' / 'typed-production': additionally slug confirmation
+//
+// Apps don't need to handle the Quasar prompts themselves and can use the
+// dialog directly as the `confirm` provider in
+// `useTenantActionFlow({ confirm })`.
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: boolean;
+        def: TenantActionDef | null;
+        row: (TenantDto & Record<string, unknown>) | null;
+        /**
+         * Reason required? Defaults to `true`, because platform backends
+         * enforce the reason as MinLength(5) for AuditLog. Apps with actions
+         * that don't need a reason (e.g. read/export actions) can set
+         * `false`.
+         */
+        reasonRequired?: boolean;
+    }>(),
+    { reasonRequired: true },
+);
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'submit', payload: { reason: string | null; extras?: Record<string, unknown> }): void;
+    (e: 'cancel'): void;
+}>();
+
+const slugInput = ref('');
+const reasonInput = ref('');
+const dateInput = ref('');
+const slugError = ref(false);
+const reasonError = ref(false);
+const dateError = ref(false);
+
+const slugErrorMessage = computed(() =>
+    slugError.value ? `Muss exakt „${props.row?.slug}“ sein` : undefined,
+);
+
+watch(
+    () => props.modelValue,
+    (open) => {
+        if (open) {
+            slugInput.value = '';
+            reasonInput.value = '';
+            dateInput.value = '';
+            slugError.value = false;
+            reasonError.value = false;
+            dateError.value = false;
+        }
+    },
+);
+
+const needsTypedSlug = computed(
+    () => props.def?.confirmType === 'typed-slug' || props.def?.confirmType === 'typed-production',
+);
+const needsDate = computed(() => props.def?.confirmType === 'date');
+
+const dateMin = computed(() => new Date().toISOString().slice(0, 10));
+const dateLabel = computed(() => {
+    const key = props.def?.actionKey ?? '';
+    if (key.endsWith('.extend')) return 'Verlängern bis (Datum)';
+    return 'Datum';
+});
+
+const isDangerous = computed(() => {
+    const key = props.def?.actionKey ?? '';
+    return key.endsWith('.suspend') || key.endsWith('.revoke') || key.endsWith('.cancel');
+});
+
+const iconForAction = computed(() => {
+    const key = props.def?.actionKey ?? '';
+    if (key.endsWith('.suspend')) return 'block';
+    if (key.endsWith('.reactivate')) return 'play_arrow';
+    if (key.endsWith('.revoke')) return 'cancel';
+    return 'check';
+});
+
+const canSubmit = computed(() => {
+    if (needsTypedSlug.value && slugInput.value.trim() !== (props.row?.slug ?? '')) {
+        return false;
+    }
+    if (props.reasonRequired && reasonInput.value.trim().length < 5) {
+        return false;
+    }
+    if (needsDate.value && !isFutureIsoDate(dateInput.value)) {
+        return false;
+    }
+    return true;
+});
+
+function isFutureIsoDate(iso: string): boolean {
+    if (!iso) return false;
+    const parsed = new Date(iso);
+    if (Number.isNaN(parsed.getTime())) return false;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return parsed.getTime() >= today.getTime();
+}
+
+function onConfirm(): void {
+    slugError.value = needsTypedSlug.value && slugInput.value.trim() !== (props.row?.slug ?? '');
+    reasonError.value = props.reasonRequired && reasonInput.value.trim().length < 5;
+    dateError.value = needsDate.value && !isFutureIsoDate(dateInput.value);
+    if (slugError.value || reasonError.value || dateError.value) return;
+    const payload: { reason: string | null; extras?: Record<string, unknown> } = {
+        reason: reasonInput.value.trim() || null,
+    };
+    if (needsDate.value) {
+        // Normalize the ISO date to the UTC day boundary — the backend gets a
+        // sub-day-precise date, while the UI has only day resolution.
+        payload.extras = { until: new Date(dateInput.value).toISOString() };
+    }
+    emit('submit', payload);
+}
+
+function onCancel(): void {
+    emit('cancel');
+    emit('update:modelValue', false);
+}
+</script>
+
+<style scoped>
+.tenant-action-confirm {
+    min-width: 400px;
+    max-width: 520px;
+}
+.header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.tenant-action-confirm__lead {
+    margin: 0 0 12px;
+    color: #475569;
+    line-height: 1.5;
+}
+.tenant-action-confirm__hint {
+    margin: 0 0 8px;
+    color: #475569;
+    font-size: 13px;
+}
+.tenant-action-confirm__hint code {
+    background: #f1f5f9;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 13px;
+}
+</style>

package/src/components/VersionDiffPreview.vue

@@ -0,0 +1,150 @@
+<template>
+    <div v-if="!changes || changes.length === 0" class="diff-empty">
+        Keine Änderungen gegenüber der Vorgängerversion.
+    </div>
+    <div v-else class="diff-list">
+        <div v-for="(c, idx) in changes" :key="idx" class="diff-row" :class="rowClass(c.direction)">
+            <div class="diff-direction">
+                <q-icon :name="iconFor(c.direction)" size="16px" />
+                <span>{{ labelFor(c.direction) }}</span>
+            </div>
+            <div class="diff-field">{{ humanFieldLabel(c.field) }}</div>
+            <div class="diff-values">
+                <span class="old" v-if="c.field !== 'features.added'">{{
+                    formatValue(c.oldValue)
+                }}</span>
+                <q-icon
+                    v-if="c.field !== 'features.added' && c.field !== 'features.removed'"
+                    name="arrow_forward"
+                    size="14px"
+                />
+                <span class="new" v-if="c.field !== 'features.removed'">{{
+                    formatValue(c.newValue)
+                }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { VersionChange } from '@saasicat/types';
+
+// Platform default field labels (plan-catalog quotas + pricing).
+// Consumer apps can add or override app-specific labels
+// (e.g. maxVehicles or maxMembers) via the `fieldLabels` prop.
+const PLATFORM_FIELD_LABELS: Readonly<Record<string, string>> = Object.freeze({
+    'features.added': 'Hinzugefügte Features',
+    'features.removed': 'Entfernte Features',
+    maxUsers: 'Max. Benutzer',
+    maxStorageGb: 'Speicher (GB)',
+    monthlyNet: 'Preis monatlich (netto)',
+    yearlyNet: 'Preis jährlich (netto)',
+    unitSize: 'Einheitsgröße',
+});
+
+const props = defineProps<{
+    changes?: VersionChange[] | null;
+    /** App-specific field labels; merged with the platform defaults. */
+    fieldLabels?: Record<string, string>;
+}>();
+
+function iconFor(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'trending_up';
+    if (direction === 'REGRESSION') return 'trending_down';
+    return 'remove';
+}
+
+function labelFor(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'Verbesserung';
+    if (direction === 'REGRESSION') return 'Verschlechterung';
+    return 'Neutral';
+}
+
+function rowClass(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'diff-row--improvement';
+    if (direction === 'REGRESSION') return 'diff-row--regression';
+    return 'diff-row--neutral';
+}
+
+function humanFieldLabel(field: string): string {
+    return props.fieldLabels?.[field] ?? PLATFORM_FIELD_LABELS[field] ?? field;
+}
+
+function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return '–';
+    if (Array.isArray(value)) {
+        if (value.length === 0) return '–';
+        return value.join(', ');
+    }
+    if (typeof value === 'string' && /^\d+\.\d{2}$/.test(value)) {
+        return `${value} €`;
+    }
+    return String(value);
+}
+</script>
+
+<style scoped>
+.diff-empty {
+    color: #64748b;
+    font-style: italic;
+    padding: 12px;
+    background: #f8fafc;
+    border-radius: 8px;
+    border: 1px dashed #cbd5e1;
+}
+.diff-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.diff-row {
+    display: grid;
+    grid-template-columns: 160px 200px 1fr;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid;
+    font-size: 13px;
+    align-items: center;
+}
+.diff-row--improvement {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    color: #166534;
+}
+.diff-row--regression {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #991b1b;
+}
+.diff-row--neutral {
+    background: #f8fafc;
+    border-color: #e2e8f0;
+    color: #475569;
+}
+.diff-direction {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.diff-field {
+    color: #0f172a;
+    font-weight: 500;
+}
+.diff-values {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.diff-values .old {
+    text-decoration: line-through;
+    opacity: 0.7;
+}
+.diff-values .new {
+    font-weight: 600;
+}
+</style>