@xleddyl/nuxt-cms 0.9.4 → 0.10.0

package/dist/runtime/app/components/cms/SettingsUsers.vue

@@ -1,268 +1,122 @@
 <template>
-   <KAlert
+   <CmsSettingsUserCreate v-if="isNew" @created="onCreated" />
+   <CmsSettingsUserDetail
+      v-else-if="page && current"
+      :key="current.id"
+      :account="current"
+      @updated="store.upsert"
+   />
+   <KSkeletonForm v-else-if="page && !store.loaded.value" :fields="3" />
+   <KRecordList
+      v-else
+      :items="items"
+      :loading="!store.loaded.value"
+      avatar
+      label="Users"
+      :empty-icon="cmsIcon('users')"
+      empty-text="No users yet"
+      empty-description="Add a user to give someone access to the panel."
+      @row-click="(item2) => open(item2.account)"
+   >
+      <template #leading="{ item }">
+         <KAvatar :name="item.title" decorative />
+      </template>
+      <template #action="{ item }">
+         <KButton
+            :icon="cmsIcon(canManageUser(item.account) ? 'pencil' : 'eye')"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            square
+            :aria-label="canManageUser(item.account) ? 'Edit' : 'View'"
+            @click="open(item.account)"
+         />
+      </template>
+      <template #empty-actions>
+         <CmsSettingsEmptyAdd
+            label="Add user"
+            new-label="New user"
+            icon="user-plus"
+            @open="emit('open', $event)"
+         />
+      </template>
+   </KRecordList>
+   <KModal
       v-if="created"
-      tone="accent"
-      role="status"
-      :icon="cmsIcon('key')"
-      :title="created.title"
-      class="cms-credentials-alert"
+      v-model:open="createdOpen"
+      size="sm"
+      title="User created"
+      description="Share these credentials with the user. The password does not show again."
    >
-      <p>Share these credentials with the user. The password does not show again.</p>
       <KDescriptionList
          :items="[
   { key: 'email', label: 'Email', value: created.email },
   { key: 'password', label: 'Password', value: created.password }
 ]"
-         :divided="false"
-         class="cms-credentials-items"
       >
          <template #value-password="{ item }">
             <span class="k-mono">{{ item.value }}</span>
          </template>
       </KDescriptionList>
-      <template #actions>
+      <template #footer>
          <KCopyButton
+            variant="soft"
+            tone="neutral"
             :value="`Email: ${created.email}
 Password: ${created.password}`"
             label="Copy credentials"
             copied-label="Copied"
             show-label
-            variant="soft"
-            tone="accent"
          />
-         <KButton label="Done" size="sm" @click="created = null" />
+         <KButton variant="ghost" tone="neutral" @click="createdOpen = false">Done</KButton>
       </template>
-   </KAlert>
-
-   <KCard v-if="creating" variant="subtle" title="New user" class="cms-user-create">
-      <KForm :form="draft">
-         <KGrid :columns="2">
-            <KFormField label="Email" name="email" required>
-               <KInput
-                  v-model="draft.values.email"
-                  type="email"
-                  :icon="cmsIcon('envelope')"
-                  placeholder="name@example.com"
-                  autocomplete="off"
-               />
-            </KFormField>
-            <KFormField label="Name" name="name">
-               <KInput v-model="draft.values.name" placeholder="Optional" autocomplete="off" />
-            </KFormField>
-         </KGrid>
-         <KFormField label="Password" name="password" required>
-            <KPasswordInput
-               v-model="draft.values.password"
-               icon="key"
-               autocomplete="new-password"
-               :generate="generatePassword"
-               copy
-            />
-         </KFormField>
-         <KStack direction="row" justify="end" gap="sm">
-            <KButton label="Cancel" variant="ghost" tone="neutral" size="sm" @click="cancel" />
-            <KButton
-               type="submit"
-               label="Create user"
-               size="sm"
-               :disabled="
-  !draft.values.email || (draft.values.password ?? '').length < MIN_PASSWORD_LENGTH
-"
-            />
-         </KStack>
-      </KForm>
-   </KCard>
-
-   <KSpinner v-if="loading" />
-
-   <ul v-else-if="users.length" class="cms-user-list">
-      <li v-for="account in users" :key="account.id" class="cms-user-row">
-         <div class="cms-user-main">
-            <KAvatar :name="account.name || account.email" size="sm" decorative />
-            <div class="cms-user-text">
-               <span class="cms-user-name">{{ account.name || account.email }}</span>
-               <span class="cms-user-meta">
-                  {{ account.name ? `${account.email} \xB7 ` : "" }}{{ lastLogin(account) }}
-               </span>
-            </div>
-            <KStack direction="row" gap="none">
-               <KButton
-                  :icon="cmsIcon('key')"
-                  variant="ghost"
-                  tone="neutral"
-                  size="sm"
-                  title="Set a new password"
-                  aria-label="Set a new password"
-                  @click="startReset(account)"
-               />
-               <KButton
-                  :icon="cmsIcon('trash')"
-                  variant="ghost"
-                  tone="danger"
-                  size="sm"
-                  title="Delete user"
-                  aria-label="Delete user"
-                  @click="remove(account)"
-               />
-            </KStack>
-         </div>
-         <KForm v-if="resetting === account.id" :form="reset" class="cms-user-reset">
-            <KFormField label="New password" name="password">
-               <KPasswordInput
-                  v-model="reset.values.password"
-                  icon="key"
-                  autocomplete="new-password"
-                  :generate="generatePassword"
-                  copy
-               />
-            </KFormField>
-            <KStack direction="row" justify="end" gap="sm">
-               <KButton
-                  label="Cancel"
-                  variant="ghost"
-                  tone="neutral"
-                  size="sm"
-                  @click="resetting = null"
-               />
-               <KButton
-                  type="submit"
-                  label="Set password"
-                  size="sm"
-                  :disabled="(reset.values.password ?? '').length < MIN_PASSWORD_LENGTH"
-               />
-            </KStack>
-         </KForm>
-      </li>
-   </ul>
-
-   <KEmptyState
-      v-else-if="!creating"
-      :icon="cmsIcon('users')"
-      title="No users yet"
-      description="Add a user to give someone access to the panel."
-   />
+   </KModal>
 </template>
 
 <script setup>
-import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
 import {
-  Alert as KAlert,
   Avatar as KAvatar,
   Button as KButton,
-  Card as KCard,
   CopyButton as KCopyButton,
   DescriptionList as KDescriptionList,
-  EmptyState as KEmptyState,
-  Form as KForm,
-  FormField as KFormField,
-  Grid as KGrid,
-  Input as KInput,
-  PasswordInput as KPasswordInput,
-  Spinner as KSpinner,
-  Stack as KStack,
-  useForm
+  Modal as KModal,
+  RecordList as KRecordList,
+  SkeletonForm as KSkeletonForm
 } from "@xleddyl/443-components-vue";
-import { onMounted, ref, watch } from "#imports";
-import { generatePassword } from "../../composables/cms-account";
-import { useCmsConfirm } from "../../composables/cms-confirm";
-import { useCmsToast } from "../../composables/cms-toast";
-import { cmsApi } from "../../utils/api";
-import { cmsIcon, errorMessage } from "../../utils/ui";
-const toast = useCmsToast();
-const confirmAction = useCmsConfirm();
-const creating = defineModel("creating", { type: Boolean, ...{ default: false } });
-const users = ref([]);
-const loading = ref(true);
-async function load() {
-  try {
-    users.value = await cmsApi("/api/cms/users");
-  } catch (error) {
-    toast.add({ title: "Could not load users", description: errorMessage(error), color: "error" });
-  } finally {
-    loading.value = false;
-  }
-}
-onMounted(load);
-function lastLogin(account) {
-  if (!account.lastLoginAt) return "Never signed in";
-  return `Last sign-in ${new Date(account.lastLoginAt).toLocaleString(void 0, {
-    dateStyle: "medium",
-    timeStyle: "short"
-  })}`;
-}
-const created = ref(null);
-const draft = useForm({
-  schema: {
-    email: { initial: () => "" },
-    name: { initial: () => "" },
-    password: { initial: () => "" }
-  },
-  onSubmit: create
-});
-watch(
-  creating,
-  (value) => {
-    if (!value) return;
-    created.value = null;
-    draft.reset({ email: "", name: "", password: generatePassword() });
-  },
-  { immediate: true }
-);
-function cancel() {
-  creating.value = false;
-}
-async function create() {
-  const password = draft.values.password ?? "";
-  try {
-    const account = await cmsApi("/api/cms/users", {
-      method: "POST",
-      body: {
-        email: String(draft.values.email ?? ""),
-        name: draft.values.name ? String(draft.values.name) : null,
-        password
-      }
-    });
-    users.value = [...users.value, account];
-    created.value = { title: "User created", email: account.email, password };
-    creating.value = false;
-  } catch (error) {
-    draft.setError("", errorMessage(error) ?? "User not created.");
-  }
-}
-const resetting = ref(null);
-const reset = useForm({
-  schema: { password: { initial: () => "" } },
-  onSubmit: () => {
-    const account = users.value.find((candidate) => candidate.id === resetting.value);
-    return account ? saveReset(account) : void 0;
-  }
+import { computed, onMounted, ref } from "#imports";
+import { CMS_NEW_RECORD } from "../../composables/cms-route";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsUsers } from "../../composables/cms-settings-stores";
+import { cmsIcon } from "../../utils/ui";
+import { lastSignIn, roleBadge } from "../../utils/users";
+const props = defineProps({
+  page: { type: Object, required: false }
 });
-function startReset(account) {
-  reset.reset({ password: generatePassword() });
-  resetting.value = resetting.value === account.id ? null : account.id;
-}
-async function saveReset(account) {
-  const password = reset.values.password ?? "";
-  try {
-    const updated = await cmsApi(`/api/cms/users/${account.id}`, {
-      method: "PUT",
-      body: { password }
-    });
-    users.value = users.value.map((u) => u.id === updated.id ? updated : u);
-    created.value = { title: "Password changed", email: account.email, password };
-    resetting.value = null;
-  } catch (error) {
-    toast.add({ title: "Password not changed", description: errorMessage(error), color: "error" });
-  }
+const emit = defineEmits(["open", "back"]);
+const store = useCmsUsers();
+const { canManageUser } = store;
+const { roleOptions, roleLabel } = useCmsPermissions();
+onMounted(store.load);
+const isNew = computed(() => props.page?.id === CMS_NEW_RECORD);
+const current = computed(() => store.find(props.page?.id));
+const created = ref(null);
+const createdOpen = ref(false);
+function open(account) {
+  emit("open", { id: account.id, label: store.label(account) });
 }
-async function remove(account) {
-  if (!await confirmAction(`Delete ${account.email}? They lose access to the panel.`)) return;
-  try {
-    await cmsApi(`/api/cms/users/${account.id}`, { method: "DELETE" });
-    users.value = users.value.filter((u) => u.id !== account.id);
-    toast.add({ title: "User deleted", color: "success" });
-  } catch (error) {
-    toast.add({ title: "User not deleted", description: errorMessage(error), color: "error" });
-  }
+function onCreated(account, password) {
+  store.upsert(account);
+  created.value = { email: account.email, password };
+  createdOpen.value = true;
+  emit("back");
 }
+const items = computed(
+  () => store.items.value.map((account) => ({
+    id: account.id,
+    account,
+    title: account.name || account.email,
+    description: `${account.name ? `${account.email} \xB7 ` : ""}${lastSignIn(account)}`,
+    badge: roleBadge(account.role, roleOptions, roleLabel)
+  }))
+);
 </script>

package/dist/runtime/app/components/cms/SettingsUsers.vue.d.ts

@@ -1,10 +1,13 @@
-type __VLS_ModelProps = {
-    'creating'?: boolean;
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:creating": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:creating"?: ((value: boolean) => any) | undefined;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (page: SettingsModalPage) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+    onBack?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/cms/SharePreview.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    entryName: string;
+    itemId: string;
+    dirty: boolean;
+    locale?: string;
+    save: () => Promise<boolean>;
+};
+type __VLS_ModelProps = {
+    'open': boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/SharePreview.vue

@@ -0,0 +1,219 @@
+<template>
+   <KModal
+      v-model:open="open"
+      title="Share preview"
+      description="Anyone with the link can see the saved version of this item on the site, even while it is a draft or scheduled. No account needed. Changes you save later show up in the link too; unsaved changes never do."
+      size="md"
+   >
+      <KStack gap="lg">
+         <KAlert
+            v-if="dirty"
+            tone="warning"
+            role="status"
+            title="Unsaved changes"
+            description="The link shows the last saved version. Save first to share your latest edits."
+         />
+
+         <KAlert
+            v-if="created"
+            tone="accent"
+            role="status"
+            :icon="cmsIcon('link')"
+            title="Link ready"
+         >
+            <KStack gap="sm">
+               <span>Copy it now: for security it is stored hashed and does not show again.</span>
+               <KInput :model-value="created" readonly aria-label="Preview link" class="k-mono" />
+            </KStack>
+            <template #actions>
+               <KCopyButton
+                  :value="created"
+                  label="Copy link"
+                  copied-label="Copied"
+                  show-label
+                  variant="soft"
+                  tone="accent"
+               />
+               <KButton label="Done" size="sm" @click="created = null" />
+            </template>
+         </KAlert>
+
+         <KStack gap="md">
+            <KGrid :columns="i18n.locales.length > 1 ? 2 : 1">
+               <KFormField label="Expires after">
+                  <KSegmentedControl
+                     v-model="duration"
+                     :options="durationOptions"
+                     size="sm"
+                     required
+                  />
+               </KFormField>
+               <KFormField v-if="i18n.locales.length > 1" label="Language">
+                  <KSelect v-model="locale" :options="localeOptions" />
+               </KFormField>
+            </KGrid>
+            <KStack direction="row" justify="end" gap="sm">
+               <KButton
+                  v-if="dirty"
+                  label="Save and create link"
+                  size="sm"
+                  :loading="busy"
+                  @click="saveAndCreate"
+               />
+               <KButton
+                  :label="dirty ? 'Create link from saved version' : 'Create link'"
+                  size="sm"
+                  :variant="dirty ? 'soft' : 'solid'"
+                  :tone="dirty ? 'neutral' : 'accent'"
+                  :loading="busy"
+                  @click="create"
+               />
+            </KStack>
+         </KStack>
+
+         <KStack gap="sm">
+            <span class="k-label">Active links</span>
+            <KRecordList
+               :items="linkItems"
+               :loading="loading"
+               :skeleton-rows="2"
+               label="Active links"
+               empty-text="No active links for this item."
+               empty-variant="hint"
+            >
+               <template #action="{ item }">
+                  <KButton
+                     label="Revoke"
+                     variant="ghost"
+                     tone="danger"
+                     size="sm"
+                     @click="revokeById(item.id)"
+                  />
+               </template>
+            </KRecordList>
+         </KStack>
+      </KStack>
+   </KModal>
+</template>
+
+<script setup>
+import { DEFAULT_PREVIEW_LINK_DURATION, PREVIEW_LINK_DURATIONS } from "#nuxt-cms";
+import {
+  Alert as KAlert,
+  Button as KButton,
+  CopyButton as KCopyButton,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  Modal as KModal,
+  RecordList as KRecordList,
+  SegmentedControl as KSegmentedControl,
+  Select as KSelect,
+  Stack as KStack,
+  toast
+} from "@xleddyl/443-components-vue";
+import { computed, ref, watch } from "#imports";
+import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsApi } from "../../utils/api";
+import { cmsIcon, errorMessage } from "../../utils/ui";
+const props = defineProps({
+  entryName: { type: String, required: true },
+  itemId: { type: String, required: true },
+  dirty: { type: Boolean, required: true },
+  locale: { type: String, required: false },
+  save: { type: Function, required: true }
+});
+const open = defineModel("open", { type: Boolean, ...{ required: true } });
+const { i18n } = useCmsRuntime();
+const confirmAction = useCmsConfirm();
+const durationOptions = PREVIEW_LINK_DURATIONS.map(({ value, label }) => ({ value, label }));
+const localeOptions = i18n.locales.map((code) => ({ value: code, label: code.toUpperCase() }));
+const duration = ref(DEFAULT_PREVIEW_LINK_DURATION);
+const locale = ref(props.locale ?? i18n.defaultLocale);
+const links = ref([]);
+const loading = ref(false);
+const busy = ref(false);
+const created = ref(null);
+const endpoint = () => `/api/cms/preview-links/${encodeURIComponent(props.entryName)}/${encodeURIComponent(
+  props.itemId
+)}`;
+function formatDate(value) {
+  return new Date(value).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+}
+async function load() {
+  loading.value = true;
+  try {
+    links.value = await cmsApi(endpoint());
+  } catch (error) {
+    links.value = [];
+    toast.error("Could not load the preview links", { description: errorMessage(error) });
+  } finally {
+    loading.value = false;
+  }
+}
+watch(open, (value) => {
+  if (!value) {
+    created.value = null;
+    return;
+  }
+  locale.value = props.locale ?? i18n.defaultLocale;
+  void load();
+});
+async function copy(url) {
+  try {
+    await navigator.clipboard.writeText(url);
+    toast.success("Link copied");
+  } catch {
+    toast.success("Link created", { description: "Copy it from the box." });
+  }
+}
+async function create() {
+  busy.value = true;
+  try {
+    const result = await cmsApi(endpoint(), {
+      method: "POST",
+      body: { duration: duration.value, locale: i18n.locales.length ? locale.value : null }
+    });
+    created.value = new URL(result.url, window.location.origin).href;
+    links.value = [...links.value, result.link].sort(
+      (a, b) => a.expiresAt.localeCompare(b.expiresAt)
+    );
+    await copy(created.value);
+  } catch (error) {
+    toast.error("Could not create the link", { description: errorMessage(error) });
+  } finally {
+    busy.value = false;
+  }
+}
+async function saveAndCreate() {
+  if (await props.save()) await create();
+}
+const linkItems = computed(
+  () => links.value.map((link) => ({
+    id: link.id,
+    title: link.path,
+    description: `Expires ${formatDate(link.expiresAt)}${link.createdBy ? ` \xB7 by ${link.createdBy}` : ""}`,
+    badge: i18n.locales.length > 1 && link.locale ? { label: link.locale } : void 0
+  }))
+);
+function revokeById(id) {
+  const link = links.value.find((item) => item.id === id);
+  if (link) void revoke(link);
+}
+async function revoke(link) {
+  if (!await confirmAction({
+    title: "Revoke this link?",
+    description: `The link to ${link.path} stops working right away.`,
+    confirmLabel: "Revoke"
+  }))
+    return;
+  try {
+    await cmsApi(`${endpoint()}/${encodeURIComponent(link.id)}`, { method: "DELETE" });
+    links.value = links.value.filter((item) => item.id !== link.id);
+    toast.success("Link revoked");
+  } catch (error) {
+    toast.error("Revoke failed", { description: errorMessage(error) });
+  }
+}
+</script>

package/dist/runtime/app/components/cms/SharePreview.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    entryName: string;
+    itemId: string;
+    dirty: boolean;
+    locale?: string;
+    save: () => Promise<boolean>;
+};
+type __VLS_ModelProps = {
+    'open': boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/SlugField.vue

@@ -16,7 +16,7 @@
             variant="ghost"
             tone="neutral"
             aria-label="Regenerate slug"
-            title="Regenerate slug"
+            :disabled="disabled"
             @click="regenerate"
          />
       </template>
@@ -24,22 +24,24 @@
 </template>
 
 <script setup>
-import { Button as KButton, Input as KInput } from "@xleddyl/443-components-vue";
+import { Button as KButton, Input as KInput, useFieldControl } from "@xleddyl/443-components-vue";
 import { ref, watch } from "#imports";
 import { slugify } from "#nuxt-cms";
 const props = defineProps({
   source: { type: [String, null], required: false }
 });
 const model = defineModel({ type: [String, null], ...{ required: true } });
+const { disabled } = useFieldControl();
 const touched = ref(!!model.value);
 watch(
   () => props.source,
   (value) => {
-    if (touched.value) return;
+    if (touched.value || disabled.value) return;
     model.value = value ? slugify(value) : null;
   }
 );
 function regenerate() {
+  if (disabled.value) return;
   model.value = props.source ? slugify(props.source) : null;
   touched.value = false;
 }