@saasicat/ui-vue 1.0.0-rc.2 → 1.0.0-rc.21

package/src/layouts/AdminLayout.vue

@@ -162,7 +162,7 @@ const props = withDefaults(
         standardPageRoutes?: Partial<Record<StandardPageKey, string>>;
         /**
          * Override for `navSection` per StandardPage. The platform default follows
-         * the plan-simulation layout (Übersicht / Produktkatalog / Kunden /
+         * the plan-simulation layout (Overview / Product catalog / Customers /
          * System) and usually needs no adjustment.
          */
         standardPageNavSection?: Partial<Record<StandardPageKey, string>>;
@@ -309,10 +309,10 @@ const currentPageTitle = computed(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    padding: 6px 12px;
+    gap: var(--sa-space-3);
+    padding: var(--sa-space-2) var(--sa-space-4);
     font-size: var(--sa-text-sm);
-    letter-spacing: 0.05em;
+    letter-spacing: var(--sa-tracking-wider);
     text-transform: uppercase;
 }
 .sa-admin-banner--prod {
@@ -363,15 +363,15 @@ const currentPageTitle = computed(() => {
     background: var(--sa-admin-badge-bg, var(--sa-color-inverse-accent));
     color: var(--sa-admin-badge-fg, var(--sa-color-inverse-accent-fg));
     font-weight: 800;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--sa-tracking-wider);
     font-size: var(--sa-text-2xs);
-    padding: 4px 8px;
+    padding: var(--sa-space-2) var(--sa-space-3);
 }
 
 .sa-admin-user {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--sa-space-3);
     /* The row's flexible member. Without this the identity block below sits at
      * its content width, and a long name pushes the sign-out button off the
      * end of a `nowrap` toolbar instead of being shortened. */
@@ -473,14 +473,14 @@ const currentPageTitle = computed(() => {
 .sa-admin-drawer__brand {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 18px 16px;
+    gap: var(--sa-space-4);
+    padding: var(--sa-space-5) var(--sa-space-5);
     border-bottom: 1px solid var(--sa-color-inverse-border);
 }
 .sa-admin-drawer__logo {
     width: 36px;
     height: 36px;
-    border-radius: 10px;
+    border-radius: var(--sa-radius-tile);
     background: var(
         --sa-admin-drawer-logo-bg,
         linear-gradient(
@@ -503,33 +503,33 @@ const currentPageTitle = computed(() => {
     font-size: var(--sa-text-xs);
     color: var(--sa-admin-drawer-brand-tag, var(--sa-color-inverse-accent));
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--sa-tracking-wider);
 }
 
 .sa-admin-drawer__list {
     flex: 1;
-    padding: 6px 4px;
+    padding: var(--sa-space-2) var(--sa-space-2);
 }
 .sa-admin-drawer__section {
     font-size: var(--sa-text-2xs);
     text-transform: uppercase;
-    letter-spacing: 0.12em;
+    letter-spacing: var(--sa-tracking-wider);
     color: var(--sa-admin-drawer-section-fg, var(--sa-color-inverse-fg-muted));
-    padding: 14px 18px 6px;
+    padding: var(--sa-space-4) var(--sa-space-5) var(--sa-space-2);
     font-weight: 600;
 }
 .sa-admin-drawer__list :deep(.q-item) {
     color: var(--sa-admin-drawer-item-fg, var(--sa-color-inverse-fg-muted));
-    border-radius: 7px;
-    margin: 1px 6px;
+    border-radius: var(--sa-radius-control);
+    margin: var(--sa-space-0) var(--sa-space-2);
     min-height: 36px;
-    padding: 6px 12px;
+    padding: var(--sa-space-2) var(--sa-space-4);
     font-size: var(--sa-text-md);
     font-weight: 500;
 }
 .sa-admin-drawer__list :deep(.q-item__section--avatar) {
     min-width: 28px;
-    padding-right: 8px;
+    padding-right: var(--sa-space-3);
 }
 .sa-admin-drawer__list :deep(.q-item .q-icon) {
     color: var(--sa-color-inverse-fg-subtle);
@@ -554,7 +554,7 @@ const currentPageTitle = computed(() => {
 }
 
 .sa-admin-drawer__footer {
-    padding: 12px 16px;
+    padding: var(--sa-space-4) var(--sa-space-5);
     border-top: 1px solid var(--sa-color-inverse-border);
     font-size: var(--sa-text-xs);
     color: var(--sa-color-inverse-fg-muted);
@@ -562,8 +562,8 @@ const currentPageTitle = computed(() => {
 .sa-admin-drawer__doc {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    margin-top: 6px;
+    gap: var(--sa-space-2);
+    margin-top: var(--sa-space-2);
     color: var(--sa-color-inverse-fg-muted);
     text-decoration: none;
 }
@@ -574,7 +574,7 @@ const currentPageTitle = computed(() => {
 .sa-admin-content {
     max-width: 1600px;
     margin: 0 auto;
-    padding: 16px 24px 32px;
+    padding: var(--sa-space-5) var(--sa-space-7) var(--sa-space-8);
 }
 .sa-admin-content--fullbleed {
     max-width: none;

package/src/pages/AdminManifestErrorPage.vue

@@ -125,7 +125,7 @@ function logout(): void | Promise<void> {
 
 <style scoped>
 .sa-manifest-error {
-    padding: 32px;
+    padding: var(--sa-space-8);
     display: flex;
     justify-content: center;
     /* The page frame is a full viewport tall, and a stretched flex item would
@@ -139,7 +139,7 @@ function logout(): void | Promise<void> {
 .sa-manifest-error__head {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--sa-space-4);
 }
 .sa-manifest-error__title {
     margin: 0;
@@ -147,22 +147,22 @@ function logout(): void | Promise<void> {
 }
 .sa-manifest-error__lead,
 .sa-manifest-error__detail {
-    margin: 0 0 12px;
+    margin: 0 0 var(--sa-space-4);
     color: var(--sa-color-fg-secondary);
     line-height: 1.6;
 }
 .sa-manifest-error__detail {
     background: var(--sa-color-negative-surface);
     border-left: 3px solid var(--sa-color-negative);
-    padding: 8px 12px;
-    border-radius: 4px;
+    padding: var(--sa-space-3) var(--sa-space-4);
+    border-radius: var(--sa-radius-badge);
     font-family: ui-monospace, SFMono-Regular, monospace;
     font-size: var(--sa-text-md);
     color: var(--sa-color-negative-fg);
 }
 .sa-manifest-error__actions {
     display: flex;
-    gap: 8px;
-    margin-top: 16px;
+    gap: var(--sa-space-3);
+    margin-top: var(--sa-space-5);
 }
 </style>

package/src/pages/AuditPage.vue

@@ -215,8 +215,8 @@ function formatTs(iso: string | null | undefined): string {
 .sa-audit__kv {
     background: var(--sa-color-bg-sunken);
     border: 1px solid var(--sa-color-border);
-    border-radius: 8px;
-    padding: 12px;
+    border-radius: var(--sa-radius-field);
+    padding: var(--sa-space-4);
     font-size: var(--sa-text-sm);
     margin: 0;
     overflow-x: auto;

package/src/pages/BundlesPage.vue

@@ -41,7 +41,6 @@
                 <BundleCreatePanel
                     v-if="createOpen"
                     class="q-mb-sm"
-                    :project-key="projectKey"
                     :available-features="snapshot?.features ?? []"
                     :available-quotas="snapshot?.quotas ?? []"
                     :plans="plans"
@@ -67,6 +66,7 @@
                     :aggregate-status-of="aggregateStatusOf"
                     :i18n-locale-count="i18nLocaleCount"
                     @toggle="toggle"
+                    @delete-bundle="confirmDelete"
                 >
                     <template #detail="{ bundle }">
                         <BundleDetailPanel
@@ -93,7 +93,6 @@
                             @inline-save="onInlineSave"
                             @discard-version="onDiscardVersion"
                             @publish-version="openPublish"
-                            @delete-bundle="confirmDelete"
                         />
                     </template>
                 </BundleAccordionList>
@@ -129,6 +128,14 @@
             :submit="onPublishSubmit"
             @submitted="onPublishSubmitted"
         />
+
+        <MfaPromptDialog
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
+        />
     </AdminPage>
 </template>
 
@@ -137,7 +144,6 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useSuperAdminManifest } from '../vue/use-super-admin-context.js';
 import { classifyBundleVersionDiff } from '@saasicat/core';
 import { useResource } from '../vue/resource-registry.js';
-import { useSuperAdminEndpoints } from '../vue/use-super-admin-context.js';
 import type { ResourceOverride } from '../vue/resource-registry.js';
 import type {
     bundlesResource,
@@ -164,6 +170,8 @@ import type {
 } from '@saasicat/core';
 
 import BundleVersionPublishDialog from '../features/bundle/BundleVersionPublishDialog.vue';
+import MfaPromptDialog from '../ui/overlay/MfaPromptDialog.vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import BundleCreatePanel from '../features/bundle/internal/BundleCreatePanel.vue';
 import type { FeatureMeta } from '../features/bundle/internal/BundleFeaturesEditor.vue';
 import {
@@ -180,6 +188,7 @@ import {
 } from '../features/bundle/internal/bundle-version-status';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+import { useSuperAdminConfirm } from '../quasar/confirm.js';
 import BundleAccordionList from '../internal/bundles-page/BundleAccordionList.vue';
 import BundleDetailPanel from '../internal/bundles-page/BundleDetailPanel.vue';
 import BundlesFilterBar from '../internal/bundles-page/BundlesFilterBar.vue';
@@ -249,11 +258,6 @@ const props = defineProps<{
 // wired four composables by hand to produce them — `useBundles`,
 // `useBundleVersionsMap`, `useCatalogEntries`, `usePlanVersions` — plus a
 // snapshot loader. All five read endpoints these resources already declare.
-// The project the shell was configured for. It used to be a prop, which meant
-// an app could hand this page a different project than the one its resources
-// read from — two answers to one question.
-const { projectKey } = useSuperAdminEndpoints();
-
 const bundlesOps = useResource('bundles', props.resources?.bundles);
 const versionsOps = useResource('bundleVersions', props.resources?.bundleVersions);
 const catalogOps = useResource('catalog', props.resources?.catalog);
@@ -339,6 +343,9 @@ onMounted(() => void reload());
 
 const msg = useSaMessages('bundles');
 const common = useSaMessages('common');
+const shell = useSaMessages('shell');
+const mfa = useMfaPrompt();
+const askConfirm = useSuperAdminConfirm();
 
 // The pool this project declares, unless the app narrows it. Read here rather
 // than taken as a required prop: the shell already holds the manifest, and a
@@ -546,9 +553,21 @@ async function submitEdit(): Promise<void> {
 }
 
 async function confirmDelete(bundle: BundleRow): Promise<void> {
-    const ok = window.confirm(
-        formatMessage(msg.value.page.confirmSoftDelete, { bundleKey: bundle.bundleKey }),
-    );
+    // Through the platform's confirm port, like every other destructive action
+    // in this admin. `window.confirm` cannot be themed, cannot be reached by
+    // the same keyboard path, and looks like the browser rather than like the
+    // application asking — which is the wrong impression for the one dialog
+    // where a reader should slow down.
+    const { ok } = await askConfirm({
+        title: msg.value.page.confirmSoftDeleteTitle,
+        message: formatMessage(msg.value.page.confirmSoftDelete, {
+            label: bundle.label,
+            versions: versionsByBundle.value[bundle.id]?.length ?? 0,
+        }),
+        confirmLabel: msg.value.detail.softDelete,
+        cancelLabel: common.value.cancel,
+        tone: 'negative',
+    });
     if (!ok) return;
     await bundlesOps.softDelete(bundle.id);
     if (openKey.value === bundle.id) openKey.value = null;
@@ -675,7 +694,13 @@ async function onDiscardVersion(bundleId: string, versionId: string): Promise<vo
             'Discard is not wired up in the wrapper — add the `discardDraft` prop.';
         return;
     }
-    const ok = window.confirm(msg.value.page.confirmDiscardVersion);
+    const { ok } = await askConfirm({
+        title: msg.value.page.confirmDiscardVersionTitle,
+        message: msg.value.page.confirmDiscardVersion,
+        confirmLabel: common.value.discard,
+        cancelLabel: common.value.cancel,
+        tone: 'negative',
+    });
     if (!ok) return;
     inlineEditorSaving.value = true;
     inlineEditorError.value = null;
@@ -719,11 +744,21 @@ async function onPublishSubmit(opts: {
     allowZeroPrice?: boolean;
     validFrom?: string | null;
     validUntil?: string | null;
-}): Promise<BundleVersionMutationResult> {
-    if (!publishDraft.value) {
+}): Promise<BundleVersionMutationResult | null> {
+    const draft = publishDraft.value;
+    if (!draft) {
         throw new Error('BundlesPage: publish submit without draft context');
     }
-    return versionsOps.publish(publishDraft.value.id, opts);
+    // Publishing requires the second factor on the server.
+    const outcome = await mfa.run(
+        formatMessage(msg.value.publishDialog.mfaDescription, {
+            bundleKey: detailBundle.value?.bundleKey ?? '',
+            version: draft.version,
+        }),
+        shell.value.mfa.invalidCode,
+        (code) => versionsOps.publish(draft.id, opts, code),
+    );
+    return outcome.done ? outcome.value : null;
 }
 
 async function onPublishSubmitted(result: BundleVersionMutationResult): Promise<void> {
@@ -741,15 +776,10 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 </script>
 
 <style>
-.sa-bundles {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
 .sa-bundles__filter-row {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--sa-space-3);
     flex-wrap: wrap;
 }
 .sa-bundles__search {
@@ -762,7 +792,7 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bundles__list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--sa-space-3);
 }
 /* The card's surface, open border, head padding, chevron and body now come
  * from `AdminAccordion` — twelve declarations that were this page's fourth
@@ -779,7 +809,7 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 }
 .sa-bd-card__titlerow {
     display: flex;
-    gap: 8px;
+    gap: var(--sa-space-3);
     align-items: center;
 }
 .sa-bd-card__key {
@@ -790,7 +820,7 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bd-card__name {
     font-size: var(--sa-text-md);
     font-weight: 600;
-    margin-top: 2px;
+    margin-top: var(--sa-space-1);
 }
 .sa-bd-card__desc {
     font-size: var(--sa-text-sm);
@@ -799,7 +829,7 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bd-grid {
     display: grid;
     grid-template-columns: minmax(280px, 360px) 1fr;
-    gap: 18px;
+    gap: var(--sa-space-5);
 }
 @media (max-width: 1023.98px) {
     .sa-bd-grid {
@@ -809,28 +839,22 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bd-col {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--sa-space-3);
 }
 .sa-bd-col--versions {
-    gap: 14px;
-}
-.sa-bd-version-actions {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin-top: 4px;
+    gap: var(--sa-space-4);
 }
 .sa-bd-section-label {
     font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: var(--sa-tracking-wide);
     color: var(--sa-color-fg-secondary);
     display: flex;
     justify-content: space-between;
 }
 .sa-bd-section-label--mt {
-    margin-top: 10px;
+    margin-top: var(--sa-space-3);
 }
 .sa-bd-section-count {
     color: var(--sa-color-fg-subtle);
@@ -839,7 +863,7 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bundles__form {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: var(--sa-space-3);
 }
 .sa-bd-i18n-hint {
     font-size: var(--sa-text-xs);
@@ -848,85 +872,53 @@ const classifyDiff = computed(() => classifyBundleVersionDiff);
 .sa-bd-i18n-block {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    padding: 8px;
+    gap: var(--sa-space-2);
+    padding: var(--sa-space-3);
     border: 1px solid var(--sa-color-border);
-    border-radius: 8px;
+    border-radius: var(--sa-radius-field);
     background: var(--sa-color-bg-surface);
 }
 .sa-bd-i18n-head {
     display: flex;
-    gap: 8px;
+    gap: var(--sa-space-3);
     align-items: center;
 }
 .sa-bd-i18n-code {
     font-size: var(--sa-text-2xs);
     font-weight: 700;
     background: var(--sa-color-border-soft);
-    padding: 2px 7px;
-    border-radius: 5px;
+    padding: var(--sa-space-1) var(--sa-space-3);
+    border-radius: var(--sa-radius-badge);
 }
 .sa-bd-i18n-fallback {
     font-size: var(--sa-text-2xs);
     color: var(--sa-color-warning-fg);
 }
-.sa-bd-save {
-    margin-top: 8px;
-    align-self: flex-start;
+/* Reinforces the disabled state of the save button beside it. The button is
+   what a screen reader hears; this is what a sighted reader sees without
+   hunting for a greyed-out control. */
+.sa-bd-dirty {
+    width: var(--sa-space-2);
+    height: var(--sa-space-2);
+    border-radius: 50%;
+    background: var(--sa-color-warning);
+    align-self: center;
 }
-.sa-bd-delete {
-    margin-top: 8px;
+.sa-bd-save {
+    margin-top: var(--sa-space-3);
     align-self: flex-start;
 }
-.sa-bd-version {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
-    background: var(--sa-color-bg-surface);
-    border: 1px solid var(--sa-color-border);
-    border-radius: 8px;
-    padding: 10px;
-}
-.sa-bd-version__main {
-    flex: 1;
-    min-width: 0;
-}
-.sa-bd-version__titlerow {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-.sa-bd-version__sub {
-    font-size: var(--sa-text-xs);
-    color: var(--sa-color-fg-muted);
-    margin: 2px 0;
-}
-.sa-bd-version__feats {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-}
-.sa-bd-feat-chip {
-    font-size: var(--sa-text-2xs);
-    background: var(--sa-color-border-soft);
-    padding: 2px 6px;
-    border-radius: 5px;
-}
-.sa-bd-version__act {
-    display: flex;
-    gap: 2px;
-}
 .sa-bd-empty-row {
-    padding: 20px;
+    padding: var(--sa-space-6);
     text-align: center;
     color: var(--sa-color-fg-subtle);
     font-size: var(--sa-text-sm);
     border: 1px dashed var(--sa-color-border-strong);
-    border-radius: 8px;
+    border-radius: var(--sa-radius-field);
 }
 .sa-bundles__warnings-list {
-    margin: 8px 0 0;
-    padding-left: 20px;
+    margin: var(--sa-space-3) 0 0;
+    padding-left: var(--sa-space-6);
     font-size: var(--sa-text-md);
 }
 </style>