@xleddyl/nuxt-cms 0.9.4 → 0.10.0

package/dist/runtime/app/pages/admin-content.vue

@@ -6,8 +6,13 @@
       :field-key="CONTENT_BODY_FIELD"
       :fields="config.fields"
       :title="headerTitle"
+      :trail="[{ label: config.label, onClick: goBack }]"
       :focus="focus"
+      :locked="locked"
+      :readonly="!!lock"
+      :tab-query="CMS_TAB_QUERY"
       content
+      @save="saveShortcut"
    >
       <template #start>
          <KButton
@@ -16,28 +21,67 @@
             variant="ghost"
             tone="neutral"
             :aria-label="`Back to ${config.label}`"
-            :title="`Back to ${config.label}`"
             @click="goBack"
          />
       </template>
 
       <template #status>
          <CmsStatusBadge :published="published" :scheduled="scheduled" :at="scheduledAt" />
-         <span v-if="dirty" class="cms-editor-dirty">Unsaved changes</span>
+         <KBadge v-if="dirty" label="Unsaved changes" tone="warning" dot />
+         <KTooltip v-if="lock" :text="lock">
+            <KBadge size="sm" variant="outline" label="Read only" />
+         </KTooltip>
       </template>
 
-      <template #actions>
-         <KPopover v-model:open="scheduleOpen" placement="bottom-end" label="Schedule">
+      <template v-if="config.route" #content-start="{ locale }">
+         <KStack gap="xs">
+            <span class="k-label">Page address</span>
+            <KStack direction="row" align="center" gap="sm">
+               <span
+                  class="cms-editor-address-path k-mono"
+                  :class="{ 'is-empty': !addressOf(formState, locale) }"
+               >
+                  {{ addressOf(formState, locale) ?? "No address yet" }}
+               </span>
+               <KButton
+                  v-if="livePath(locale)"
+                  :href="livePath(locale)"
+                  target="_blank"
+                  label="Open"
+                  :icon="cmsIcon('arrow-top-right-on-square')"
+                  size="sm"
+                  variant="ghost"
+                  tone="neutral"
+               />
+            </KStack>
+            <KFieldMessage
+               v-if="addressHint(locale)"
+               tone="neutral"
+               :icon="false"
+               :message="addressHint(locale)"
+            />
+         </KStack>
+      </template>
+
+      <template #actions="{ compact }">
+         <KPopover
+            v-if="!lock && canPublish"
+            v-model:open="scheduleOpen"
+            placement="bottom-end"
+            label="Schedule"
+            width="18rem"
+         >
             <KButton
                :icon="cmsIcon('clock')"
                size="sm"
                variant="ghost"
                tone="neutral"
-               :label="scheduled ? 'Reschedule' : 'Schedule'"
+               :label="compact ? void 0 : scheduleLabel"
+               :aria-label="scheduleLabel"
                :disabled="saving"
             />
             <template #content>
-               <KStack gap="md" class="cms-editor-schedule-panel">
+               <KStack gap="md">
                   <KFormField
                      label="Publish at"
                      description="The item stays hidden from the site until this moment."
@@ -64,6 +108,7 @@
             </template>
          </KPopover>
          <KButton
+            v-if="!lock"
             label="Save"
             size="sm"
             variant="soft"
@@ -72,6 +117,7 @@
             @click="save()"
          />
          <KButton
+            v-if="!lock && canPublish"
             :label="published ? 'Unpublish' : 'Publish'"
             size="sm"
             :variant="published ? 'soft' : 'solid'"
@@ -79,23 +125,24 @@
             :loading="saving"
             @click="save(published ? 'draft' : 'published')"
          />
-         <KDropdownMenu
-            v-if="!isNew"
-            :items="[
-  { label: 'Duplicate', onSelect: duplicate },
-  { label: 'Delete', onSelect: remove }
-]"
-            placement="bottom-end"
-         >
+         <KDropdownMenu v-if="moreItems.length" :items="moreItems" placement="bottom-end">
             <KButton
                :icon="cmsIcon('ellipsis-horizontal')"
                size="sm"
                variant="ghost"
                tone="neutral"
                aria-label="More actions"
-               title="More actions"
             />
          </KDropdownMenu>
+         <CmsSharePreview
+            v-if="canShare"
+            v-model:open="shareOpen"
+            :entry-name="name"
+            :item-id="id"
+            :dirty="dirty"
+            :locale="editor?.locale"
+            :save="() => save()"
+         />
       </template>
    </CmsVisualEditor>
 </template>
@@ -105,6 +152,8 @@ import {
   CONTENT_BODY_FIELD,
   CONTENT_PUBLISHED_AT_FIELD,
   CONTENT_TITLE_FIELD,
+  contentItemPath,
+  contentRoutePattern,
   isScheduledContent
 } from "#nuxt-cms";
 import {
@@ -112,8 +161,6 @@ import {
   createError,
   definePageMeta,
   navigateTo,
-  onBeforeRouteLeave,
-  onBeforeUnmount,
   onMounted,
   ref,
   useFetch,
@@ -122,28 +169,37 @@ import {
   watch
 } from "#imports";
 import {
+  Badge as KBadge,
   Button as KButton,
   DropdownMenu as KDropdownMenu,
+  FieldMessage as KFieldMessage,
   FormField as KFormField,
   Popover as KPopover,
-  Stack as KStack
+  Stack as KStack,
+  Tooltip as KTooltip,
+  toast,
+  useLeaveGuard
 } from "@xleddyl/443-components-vue";
 import cmsConfig from "#cms-config";
 import { duplicateEntryValues } from "../../shared/duplicate";
-import { readSearchFocus } from "../../shared/search";
-import { useCmsConfirm } from "../composables/cms-confirm";
+import { entryDefaults, lockedFieldKeys } from "../../shared/field-options";
+import { cloneState, mergeSavedState } from "../../shared/save-state";
+import { CMS_TAB_QUERY, cmsPageKey, readSearchFocus } from "../../shared/search";
+import { useCmsPermissions } from "../composables/cms-permissions";
+import { useCmsRouteFlag } from "../composables/cms-route";
+import { useCmsLinkedDelete } from "../composables/cms-link-usage";
 import { useCmsRuntime } from "../composables/cms-runtime";
-import { useCmsToast } from "../composables/cms-toast";
+import { useCmsSaveHandoff } from "../composables/cms-save-handoff";
+import { useCmsTranslationActions } from "../composables/cms-translation-actions";
 import { cmsApi } from "../utils/api";
-import { cmsIcon, errorMessage } from "../utils/ui";
+import { cmsIcon, errorIssues, errorMessage } from "../utils/ui";
 definePageMeta({
   layout: "cms-editor",
   middleware: "cms-auth",
-  key: (route2) => route2.fullPath
+  key: (route2) => cmsPageKey(route2, [CMS_TAB_QUERY])
 });
 const route = useRoute();
-const toast = useCmsToast();
-const confirmAction = useCmsConfirm();
+const confirmLinkedDelete = useCmsLinkedDelete();
 const focus = readSearchFocus(route.query);
 const { i18n } = useCmsRuntime();
 const name = String(route.meta.cmsEntry ?? route.path.split("/")[2] ?? "");
@@ -159,9 +215,10 @@ const editor = ref(null);
 function pickFields(row) {
   return Object.fromEntries(formKeys.map((key) => [key, row[key] ?? null]));
 }
-const blankState = Object.fromEntries(
-  formKeys.map((key) => [key, key === "status" ? "draft" : null])
-);
+const blankState = {
+  ...Object.fromEntries(formKeys.map((key) => [key, key === "status" ? "draft" : null])),
+  ...entryDefaults(config.fields, i18n, { local: true })
+};
 const formState = ref({ ...blankState });
 const duplicateOf = isNew && typeof route.query.duplicate === "string" && route.query.duplicate ? route.query.duplicate : null;
 const sourceId = isNew ? duplicateOf : id;
@@ -178,7 +235,57 @@ if (sourceId) {
   formState.value = duplicateOf ? duplicateEntryValues(config, data.value) : pickFields(data.value);
 }
 const snapshot = ref(JSON.stringify(duplicateOf ? blankState : formState.value));
-const dirty = computed(() => JSON.stringify(formState.value) !== snapshot.value);
+const handoff = useCmsSaveHandoff(name);
+const handedOver = id ? handoff.take(id) : null;
+if (handedOver) formState.value = handedOver;
+const { can, entryLock } = useCmsPermissions();
+const canPublish = computed(() => can(`${name}.publish`));
+const lock = computed(
+  () => entryLock(name, config, {
+    isNew,
+    status: JSON.parse(snapshot.value).status
+  })
+);
+const { items: translationItems } = useCmsTranslationActions({
+  fields: config.fields,
+  state: formState,
+  locale: () => editor.value?.locale,
+  disabled: () => !!lock.value,
+  apply: (values) => editor.value?.applyChange(values)
+});
+const canShare = computed(() => !isNew && !!config.route && can(`${name}.update`));
+const shareOpen = useCmsRouteFlag("share");
+const itemActions = computed(
+  () => isNew ? [] : [
+    ...canShare.value ? [
+      {
+        label: "Share preview",
+        icon: cmsIcon("link"),
+        onSelect: () => shareOpen.value = true
+      }
+    ] : [],
+    ...can(`${name}.create`) ? [
+      {
+        label: "Duplicate",
+        icon: cmsIcon("document-duplicate"),
+        onSelect: duplicate
+      }
+    ] : []
+  ]
+);
+const canDeleteItem = computed(
+  () => can(`${name}.delete`) && (JSON.parse(snapshot.value).status !== "published" || canPublish.value)
+);
+const deleteActions = computed(
+  () => !isNew && canDeleteItem.value ? [{ label: "Delete", icon: cmsIcon("trash"), tone: "danger", onSelect: remove }] : []
+);
+const moreItems = computed(
+  () => [itemActions.value, translationItems.value, deleteActions.value].filter((group) => group.length)
+);
+const locked = computed(
+  () => isNew ? [] : lockedFieldKeys(config.fields, JSON.parse(snapshot.value))
+);
+const dirty = computed(() => !lock.value && JSON.stringify(formState.value) !== snapshot.value);
 const titleText = computed(() => {
   const value = formState.value[CONTENT_TITLE_FIELD];
   if (typeof value === "string") return value;
@@ -193,11 +300,39 @@ useHead({ title: computed(() => `${headerTitle.value} \xB7 ${config.label}`) });
 const published = computed(() => formState.value.status === "published");
 const mounted = ref(false);
 const scheduled = computed(() => mounted.value && isScheduledContent(formState.value));
+const scheduleLabel = computed(() => scheduled.value ? "Reschedule" : "Schedule");
 const scheduledAt = computed(() => {
   const value = formState.value[CONTENT_PUBLISHED_AT_FIELD];
   if (!mounted.value || typeof value !== "string" || !value) return "";
   return new Date(value).toLocaleString();
 });
+const savedState = computed(
+  () => isNew ? {} : JSON.parse(snapshot.value)
+);
+const live = computed(
+  () => mounted.value && savedState.value.status === "published" && !isScheduledContent(savedState.value)
+);
+function addressOf(values, locale) {
+  return contentItemPath(config, { ...values, id }, locale);
+}
+function livePath(locale) {
+  return live.value ? addressOf(savedState.value, locale) : null;
+}
+function missingAddressHint(locale) {
+  const pattern = contentRoutePattern(config.route, locale) ?? "";
+  if (isNew && pattern.includes("[id]")) return "Save the item to get its address.";
+  if (/\[(?:year|month|day)\]/.test(pattern) && !formState.value[CONTENT_PUBLISHED_AT_FIELD])
+    return "The address needs a publish date.";
+  return "The address needs a slug.";
+}
+function addressHint(locale) {
+  const current = addressOf(formState.value, locale);
+  if (!current) return missingAddressHint(locale);
+  if (!live.value)
+    return scheduled.value ? "Live from the scheduled date." : "Live once published.";
+  if (current !== livePath(locale)) return "Save to move the page to this address.";
+  return "";
+}
 const publishedAtField = computed(() => ({
   ...config.fields[CONTENT_PUBLISHED_AT_FIELD],
   required: true
@@ -211,25 +346,14 @@ watch(scheduleOpen, (open) => {
   const future = typeof current === "string" && new Date(current).getTime() > Date.now();
   scheduleDraft.value = future ? current : new Date(Math.ceil(Date.now() / 36e5) * 36e5 + 36e5).toISOString();
 });
-function onBeforeUnload(event) {
-  event.preventDefault();
-}
-watch(dirty, (value) => {
-  if (value) window.addEventListener("beforeunload", onBeforeUnload);
-  else window.removeEventListener("beforeunload", onBeforeUnload);
-});
+const leave = useLeaveGuard(dirty);
 onMounted(() => {
   mounted.value = true;
-  if (dirty.value) window.addEventListener("beforeunload", onBeforeUnload);
-});
-onBeforeUnmount(() => window.removeEventListener("beforeunload", onBeforeUnload));
-onBeforeRouteLeave(async () => {
-  if (dirty.value && !await confirmAction("You have unsaved changes. Leave anyway?"))
-    return false;
 });
 function goBack() {
   navigateTo(`/cms/${name}`);
 }
+const LATER_CHANGES = "Changes made while saving are not saved yet.";
 const SUCCESS = {
   save: "Saved",
   published: "Published",
@@ -245,19 +369,28 @@ async function save(status, changes = {}, notice) {
       status: before.status,
       ...pickRevert(before, changes)
     };
-    toast.add({ title: "Check the highlighted fields", color: "error" });
+    toast.error("Check the highlighted fields");
     return false;
   }
   saving.value = true;
+  const submitted = cloneState(formState.value);
   try {
-    const row = await (isNew ? cmsApi(endpoint, { method: "POST", body: formState.value }) : cmsApi(`${endpoint}/${id}`, {
+    const row = await (isNew ? cmsApi(endpoint, { method: "POST", body: submitted }) : cmsApi(`${endpoint}/${id}`, {
       method: "PUT",
-      body: formState.value
+      body: submitted
     }));
-    formState.value = pickFields(row);
-    snapshot.value = JSON.stringify(formState.value);
-    toast.add({ title: SUCCESS[notice ?? status ?? "save"] ?? "Saved", color: "success" });
-    if (isNew && row.id) await navigateTo(`/cms/${name}/${row.id}`, { replace: true });
+    const saved = pickFields(row);
+    const merged = mergeSavedState(submitted, formState.value, saved);
+    formState.value = merged.state;
+    snapshot.value = JSON.stringify(saved);
+    toast.success(SUCCESS[notice ?? status ?? "save"] ?? "Saved", {
+      description: merged.clean ? void 0 : LATER_CHANGES
+    });
+    if (isNew && row.id) {
+      if (!merged.clean) handoff.stash(String(row.id), merged.state);
+      leave.allowNext();
+      await navigateTo(`/cms/${name}/${row.id}`, { replace: true });
+    }
     return true;
   } catch (error) {
     formState.value = {
@@ -265,12 +398,16 @@ async function save(status, changes = {}, notice) {
       status: before.status,
       ...pickRevert(before, changes)
     };
-    toast.add({ title: "Save failed", description: errorMessage(error), color: "error" });
+    editor.value?.setIssues(errorIssues(error));
+    toast.error("Save failed", { description: errorMessage(error) });
     return false;
   } finally {
     saving.value = false;
   }
 }
+function saveShortcut() {
+  if (!saving.value) void save();
+}
 function pickRevert(before, changes) {
   return Object.fromEntries(Object.keys(changes).map((key) => [key, before[key] ?? null]));
 }
@@ -287,15 +424,15 @@ function duplicate() {
   void navigateTo({ path: `/cms/${name}/new`, query: { duplicate: id } });
 }
 async function remove() {
-  if (!await confirmAction("Delete this item?")) return;
+  if (!await confirmLinkedDelete(name, id ? [id] : [], "Delete this item?")) return;
   saving.value = true;
   try {
     await cmsApi(`${endpoint}/${id}`, { method: "DELETE" });
     snapshot.value = JSON.stringify(formState.value);
-    toast.add({ title: "Deleted", color: "success" });
+    toast.success("Deleted");
     goBack();
   } catch (error) {
-    toast.add({ title: "Delete failed", description: errorMessage(error), color: "error" });
+    toast.error("Delete failed", { description: errorMessage(error) });
   } finally {
     saving.value = false;
   }

package/dist/runtime/app/pages/admin-entry.vue

@@ -1,36 +1,39 @@
 <template>
-   <div class="cms-page">
-      <KPageHeader :title="headerTitle" :breadcrumbs="breadcrumb" breadcrumbs-ancestors>
-         <template v-if="drafts" #badge>
-            <CmsStatusBadge :published="published" />
-         </template>
+   <div class="k-page">
+      <KPageHeader
+         :trail="breadcrumb"
+         trail-label="Page"
+         :title="headerTitle"
+         :icon="cmsIcon(config.icon ?? 'window')"
+         :description="pageRoute?.path"
+      >
          <template #actions>
-            <KButton label="Back" icon="arrow-left" variant="soft" @click="goBack" />
-            <KButton type="submit" :form="FORM_ID" label="Save" :loading="saving" />
+            <CmsTranslationMenu v-model="formState" :fields="fields" :disabled="!!lock" size="sm" />
             <KButton
-               v-if="drafts"
+               v-if="!lock"
                type="submit"
                :form="FORM_ID"
-               :label="published ? 'Make draft' : 'Publish'"
+               label="Save"
+               size="sm"
                :loading="saving"
-               @click="togglePublished"
             />
          </template>
       </KPageHeader>
 
-      <KCard variant="outline" padding="lg">
+      <KCard padding="lg" fill>
          <CmsEntryForm
+            ref="formRef"
             v-model="formState"
             :fields="fields"
             :tabs="config.tabs"
             :entry-name="name"
-            :drafts="drafts"
             :form-id="FORM_ID"
-            :loading="saving"
+            :tab-query="CMS_TAB_QUERY"
             :focus="focus"
             :path="pageRoute?.path"
+            :lock="lock"
+            :locked="locked"
             @submit="save"
-            @error="revertStatus"
          />
       </KCard>
    </div>
@@ -43,33 +46,34 @@ import {
   createError,
   definePageMeta,
   navigateTo,
-  onBeforeRouteLeave,
-  onBeforeUnmount,
   ref,
   useFetch,
-  useRoute,
-  watch
+  useRoute
 } from "#imports";
 import {
   Button as KButton,
   Card as KCard,
-  PageHeader as KPageHeader
+  PageHeader as KPageHeader,
+  toast,
+  useLeaveGuard
 } from "@xleddyl/443-components-vue";
 import cmsConfig from "#cms-config";
-import { readSearchFocus } from "../../shared/search";
-import { useCmsConfirm } from "../composables/cms-confirm";
-import { useCmsToast } from "../composables/cms-toast";
+import { entryDefaults, lockedFieldKeys } from "../../shared/field-options";
+import { cloneState, mergeSavedState } from "../../shared/save-state";
+import { CMS_TAB_QUERY, cmsEntryLink, cmsPageKey, readSearchFocus } from "../../shared/search";
+import { useCmsPermissions } from "../composables/cms-permissions";
+import { CMS_NEW_RECORD } from "../composables/cms-route";
+import { useCmsRuntime } from "../composables/cms-runtime";
 import { cmsApi } from "../utils/api";
-import { errorMessage } from "../utils/ui";
+import { cmsIcon, errorIssues, errorMessage } from "../utils/ui";
 const FORM_ID = "cms-entry-form";
 definePageMeta({
   layout: "cms-admin",
   middleware: "cms-auth",
   validate: (route2) => Object.hasOwn(cmsConfig, route2.params.collection),
-  key: (route2) => route2.fullPath
+  key: (route2) => cmsPageKey(route2, [CMS_TAB_QUERY])
 });
 const route = useRoute();
-const toast = useCmsToast();
 const focus = readSearchFocus(route.query);
 const name = route.params.collection;
 const config = cmsConfig[name];
@@ -77,9 +81,23 @@ if (!config || config.kind !== "collection" && config.kind !== "page") {
   throw createError({ statusCode: 404, statusMessage: "Unknown collection", fatal: true });
 }
 const id = route.params.id;
-const isPage = config.kind === "page";
-const pageRoute = isPage && id ? pageRouteOf(config, id) : void 0;
-if (isPage && !pageRoute) {
+if (config.kind === "collection") {
+  const text = (key) => {
+    const value = route.query[key];
+    return typeof value === "string" ? value : void 0;
+  };
+  await navigateTo(
+    cmsEntryLink(name, id ?? CMS_NEW_RECORD, {
+      field: text("field"),
+      locale: text("locale"),
+      block: text("block"),
+      tab: text(CMS_TAB_QUERY)
+    }),
+    { replace: true }
+  );
+}
+const pageRoute = config.kind === "page" && id ? pageRouteOf(config, id) : void 0;
+if (config.kind === "page" && !pageRoute) {
   throw createError({ statusCode: 404, statusMessage: "Unknown page", fatal: true });
 }
 const breadcrumb = (() => {
@@ -97,21 +115,22 @@ const breadcrumb = (() => {
   }
   return links;
 })();
-const isNew = !isPage && id === void 0;
-const drafts = !isPage && !!config.drafts;
 const fields = pageRoute ? pageFields(config, pageRoute.path) : config.fields;
-const headerTitle = pageRoute ? pageRoute.label : isNew ? "New entry" : "Edit entry";
-const fieldKeys = Object.keys(fields);
-const formKeys = drafts ? [...fieldKeys, "status"] : fieldKeys;
+const headerTitle = pageRoute?.label ?? config.label;
+const formKeys = Object.keys(fields);
 const endpoint = `/api/cms/admin/${name}`;
+const { i18n } = useCmsRuntime();
 function emptyState() {
-  return Object.fromEntries(formKeys.map((k) => [k, null]));
+  return {
+    ...Object.fromEntries(formKeys.map((k) => [k, null])),
+    ...entryDefaults(fields, i18n, { local: true })
+  };
 }
 function pickFields(row) {
   return Object.fromEntries(formKeys.map((k) => [k, row[k] ?? null]));
 }
 const formState = ref(emptyState());
-if (!isNew) {
+if (pageRoute) {
   const { data, error } = await useFetch(`${endpoint}/${id}`);
   if (error.value || !data.value) {
     const statusCode = error.value?.statusCode ?? 404;
@@ -125,50 +144,35 @@ if (!isNew) {
 }
 const saving = ref(false);
 const snapshot = ref(JSON.stringify(formState.value));
-const dirty = computed(() => JSON.stringify(formState.value) !== snapshot.value);
-function onBeforeUnload(event) {
-  event.preventDefault();
-}
-watch(dirty, (value) => {
-  if (value) window.addEventListener("beforeunload", onBeforeUnload);
-  else window.removeEventListener("beforeunload", onBeforeUnload);
-});
-onBeforeUnmount(() => window.removeEventListener("beforeunload", onBeforeUnload));
-const confirmAction = useCmsConfirm();
-onBeforeRouteLeave(async () => {
-  if (dirty.value && !await confirmAction("You have unsaved changes. Leave anyway?"))
-    return false;
-});
-const published = computed({
-  get: () => formState.value.status === "published",
-  set: (value) => {
-    formState.value.status = value ? "published" : "draft";
-  }
-});
-function togglePublished() {
-  published.value = !published.value;
-}
-function revertStatus() {
-  if (!drafts) return;
-  formState.value.status = JSON.parse(snapshot.value).status ?? null;
-}
-function goBack() {
-  navigateTo(`/cms/${name}`);
-}
+const { entryLock } = useCmsPermissions();
+const lock = computed(() => entryLock(name, config, { isNew: false }));
+const locked = computed(
+  () => lockedFieldKeys(fields, JSON.parse(snapshot.value))
+);
+const formRef = ref(null);
+const dirty = computed(() => !lock.value && JSON.stringify(formState.value) !== snapshot.value);
+useLeaveGuard(dirty);
 async function save() {
   saving.value = true;
+  const submitted = cloneState(formState.value);
   try {
-    await (isNew ? cmsApi(endpoint, { method: "POST", body: formState.value }) : cmsApi(`${endpoint}/${id}`, { method: "PUT", body: formState.value }));
-    snapshot.value = JSON.stringify(formState.value);
-    toast.add({ title: "Saved", color: "success" });
-    goBack();
-  } catch (error) {
-    revertStatus();
-    toast.add({
-      title: "Save failed",
-      description: errorMessage(error),
-      color: "error"
+    const row = await cmsApi(`${endpoint}/${id}`, {
+      method: "PUT",
+      body: submitted
     });
+    const saved = pickFields(row ?? submitted);
+    const merged = mergeSavedState(submitted, formState.value, saved);
+    snapshot.value = JSON.stringify(saved);
+    formState.value = merged.state;
+    if (merged.clean) {
+      toast.success("Saved");
+      await navigateTo(`/cms/${name}`);
+      return;
+    }
+    toast.success("Saved", { description: "Changes made while saving are not saved yet." });
+  } catch (error) {
+    formRef.value?.setIssues(errorIssues(error));
+    toast.error("Save failed", { description: errorMessage(error) });
   } finally {
     saving.value = false;
   }

package/dist/runtime/app/pages/admin-index.vue

@@ -1,11 +1,24 @@
 <template>
-   <div />
+   <div class="k-page">
+      <KEmptyState
+         :icon="cmsIcon(access?.known === false ? 'exclamation-triangle' : 'lock-closed')"
+         :title="access?.known === false ? 'Your role no longer exists' : 'Nothing to show yet'"
+         :description="
+  access?.known === false ? `Your account has the role \'${access.role}\', which is not configured anymore, so it grants no access. Ask an administrator to assign you a new role.` : 'Your role does not give access to any section. Ask an administrator for more permissions.'
+"
+         fill
+      />
+   </div>
 </template>
 
 <script setup>
-import { definePageMeta, navigateTo } from "#imports";
-import cmsConfig from "#cms-config";
+import { EmptyState as KEmptyState } from "@xleddyl/443-components-vue";
+import { definePageMeta, navigateTo, useRoute } from "#imports";
+import { useCmsPermissions } from "../composables/cms-permissions";
+import { cmsIcon } from "../utils/ui";
 definePageMeta({ layout: "cms-admin", middleware: "cms-auth" });
-const first = Object.keys(cmsConfig)[0];
-await navigateTo(first ? `/cms/${first}` : "/cms/media", { replace: true });
+const route = useRoute();
+const { access, firstPath } = useCmsPermissions();
+const first = firstPath();
+if (first) await navigateTo({ path: first, query: route.query }, { replace: true });
 </script>