@xleddyl/nuxt-cms 0.9.3 → 0.10.0

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    description: string;
+    items: {
+        label: string;
+        value: string;
+    }[];
+    copyLabel?: string;
+    secretKey?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,140 @@
+<template>
+   <KSkeletonForm v-if="!loaded" :fields="4" :columns="2" />
+
+   <KForm v-else :id="formId" :form="form">
+      <KStack gap="lg">
+         <KSettingsGroup
+            label="Search results"
+            description="How the pages of the site show up in search engines and browser tabs."
+         >
+            <template v-if="multilingual" #actions>
+               <CmsLocaleSwitch v-model="locale" :progress="progress" />
+            </template>
+            <KStack>
+               <KGrid :columns="{ base: 1, sm: 2 }">
+                  <KFormField label="Site name" name="name">
+                     <CmsTranslatableField
+                        v-model="state.name"
+                        :field="NAME_FIELD"
+                        :locale="locale"
+                     />
+                  </KFormField>
+                  <KFormField
+                     label="Title template"
+                     name="titleTemplate"
+                     :description="`${TITLE_PLACEHOLDER} is the page title, ${SITE_NAME_PLACEHOLDER} the site name.`"
+                  >
+                     <KInput v-model="titleTemplate" :placeholder="DEFAULT_TITLE_TEMPLATE" />
+                  </KFormField>
+               </KGrid>
+               <KFormField
+                  label="Default description"
+                  name="description"
+                  description="Used by the pages that have no description of their own."
+               >
+                  <CmsTranslatableField
+                     v-model="state.description"
+                     :field="DESCRIPTION_FIELD"
+                     :locale="locale"
+                  />
+               </KFormField>
+            </KStack>
+         </KSettingsGroup>
+
+         <KSettingsGroup
+            label="Share image"
+            description="Shown when a page without its own image is shared. 1200 x 630 pixels works best."
+         >
+            <CmsMediaField v-model="state.image" media-type="image" />
+         </KSettingsGroup>
+
+         <KSettingsGroup
+            row
+            label="Hide the site from search engines"
+            description="Every page is sent with noindex and the sitemap is empty. For a staging site or one not launched yet."
+         >
+            <template #actions>
+               <KSwitch v-model="state.hidden" aria-label="Hide the site from search engines" />
+            </template>
+         </KSettingsGroup>
+      </KStack>
+   </KForm>
+</template>
+
+<script setup>
+import {
+  DEFAULT_TITLE_TEMPLATE,
+  EMPTY_SITE_SETTINGS,
+  SITE_NAME_PLACEHOLDER,
+  TITLE_PLACEHOLDER,
+  titleTemplateErrors
+} from "#nuxt-cms";
+import {
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  SettingsGroup as KSettingsGroup,
+  SkeletonForm as KSkeletonForm,
+  Stack as KStack,
+  Switch as KSwitch,
+  toast,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { computed, onMounted, ref } from "#imports";
+import { translationProgress } from "../../../shared/translations";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { useCmsSettingsForm } from "../../composables/cms-settings-form";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const NAME_FIELD = { label: "Site name", type: "text" };
+const DESCRIPTION_FIELD = {
+  label: "Default description",
+  type: "text",
+  textarea: true
+};
+const PROGRESS_FIELDS = {
+  name: { ...NAME_FIELD, translatable: true },
+  description: { ...DESCRIPTION_FIELD, translatable: true }
+};
+const ENDPOINT = "/api/cms/site";
+const { i18n } = useCmsRuntime();
+const multilingual = i18n.locales.length > 1;
+const locale = ref(i18n.defaultLocale);
+const loaded = ref(false);
+const state = ref({ ...EMPTY_SITE_SETTINGS });
+const titleTemplate = computed({
+  get: () => state.value.titleTemplate ?? "",
+  set: (value) => {
+    state.value.titleTemplate = value == null || value === "" ? null : String(value);
+  }
+});
+const progress = computed(
+  () => translationProgress(PROGRESS_FIELDS, state.value, i18n)
+);
+const form = useForm({
+  values: state,
+  schema: {
+    titleTemplate: {
+      validate: (value) => {
+        const template = value?.trim();
+        return template ? titleTemplateErrors(template)[0] : void 0;
+      }
+    }
+  },
+  onSubmit: async (values) => {
+    const saved = await cmsApi(ENDPOINT, { method: "PUT", body: values });
+    form.reset({ ...EMPTY_SITE_SETTINGS, ...saved });
+    toast.success("Site settings saved");
+  }
+});
+const formId = useCmsSettingsForm({ submitting: form.submitting, enabled: loaded });
+onMounted(async () => {
+  try {
+    form.reset({ ...EMPTY_SITE_SETTINGS, ...await cmsApi(ENDPOINT) });
+    loaded.value = true;
+  } catch (error) {
+    toast.error("Site settings not loaded", { description: errorMessage(error) });
+  }
+});
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+import type { CmsAccount } from '#nuxt-cms';
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (account: CmsAccount, password: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCreated?: ((account: CmsAccount, password: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,82 @@
+<template>
+   <KForm :id="formId" :form="form">
+      <KGrid :columns="{ base: 1, sm: 2 }">
+         <KFormField label="Email" name="email" required>
+            <KInput
+               v-model="draft.email"
+               type="email"
+               placeholder="name@example.com"
+               autocomplete="off"
+            />
+         </KFormField>
+         <KFormField label="Name" name="name">
+            <KInput v-model="draft.name" placeholder="Optional" autocomplete="off" />
+         </KFormField>
+      </KGrid>
+      <KFormField label="Role" name="role" required :description="roleDescription">
+         <KSelect v-model="draft.role" :options="grantableOptions" />
+      </KFormField>
+      <KFormField label="Password" name="password" required>
+         <KPasswordInput
+            v-model="draft.password"
+            autocomplete="new-password"
+            :generate="generatePassword"
+            copy
+         />
+      </KFormField>
+   </KForm>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import {
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  PasswordInput as KPasswordInput,
+  Select as KSelect,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { computed, ref } from "#imports";
+import { generatePassword } from "../../composables/cms-account";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsSettingsForm } from "../../composables/cms-settings-form";
+import { cmsApi } from "../../utils/api";
+const emit = defineEmits(["created"]);
+const { roleOptions, canGrant } = useCmsPermissions();
+const grantableOptions = computed(
+  () => roleOptions.filter((option) => canGrant(option.key)).map((option) => ({ value: option.key, label: option.label }))
+);
+const draft = ref({
+  email: "",
+  name: "",
+  role: grantableOptions.value[0]?.value ?? "",
+  password: generatePassword()
+});
+const roleDescription = computed(
+  () => roleOptions.find((option) => option.key === draft.value.role)?.description ?? void 0
+);
+const form = useForm({
+  values: draft,
+  schema: {
+    email: { required: true, maxLength: 254 },
+    name: { maxLength: 120 },
+    role: { required: true },
+    password: { required: true, minLength: MIN_PASSWORD_LENGTH, maxLength: 256 }
+  },
+  onSubmit: async (values) => {
+    const account = await cmsApi("/api/cms/users", {
+      method: "POST",
+      body: {
+        email: values.email.trim(),
+        name: values.name.trim() || null,
+        role: values.role,
+        password: values.password
+      }
+    });
+    emit("created", account, values.password);
+  }
+});
+const formId = useCmsSettingsForm({ creating: true, submitting: form.submitting });
+</script>

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

@@ -0,0 +1,8 @@
+import type { CmsAccount } from '#nuxt-cms';
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (account: CmsAccount, password: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCreated?: ((account: CmsAccount, password: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { CmsAccount } from '#nuxt-cms';
+type __VLS_Props = {
+    account: CmsAccount;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: (account: CmsAccount) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdated?: ((account: CmsAccount) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,179 @@
+<template>
+   <KStack gap="lg">
+      <KSettingsGroup label="Profile">
+         <template v-if="editable" #actions>
+            <KButton
+               variant="soft"
+               tone="neutral"
+               type="submit"
+               size="sm"
+               :form="profileFormId"
+               :loading="profileForm.submitting.value"
+               :disabled="profile.name === (account.name ?? '')"
+            >
+               Save
+            </KButton>
+         </template>
+         <KForm :id="profileFormId" :form="profileForm" :disabled="!editable || void 0">
+            <KGrid :columns="{ base: 1, sm: 2 }">
+               <KFormField label="Name" name="name" :hint="lockReason">
+                  <KInput v-model="profile.name" placeholder="Optional" autocomplete="off" />
+               </KFormField>
+               <KFormField label="Email">
+                  <KInput :model-value="account.email" type="email" disabled />
+               </KFormField>
+            </KGrid>
+         </KForm>
+      </KSettingsGroup>
+
+      <KSettingsGroup label="Role">
+         <template v-if="editable && !self" #actions>
+            <KButton
+               variant="soft"
+               tone="neutral"
+               type="submit"
+               size="sm"
+               :form="roleFormId"
+               :loading="roleForm.submitting.value"
+               :disabled="role.role === account.role"
+            >
+               Save
+            </KButton>
+         </template>
+         <KForm :id="roleFormId" :form="roleForm" :disabled="!editable || self || void 0">
+            <KFormField
+               label="Role"
+               name="role"
+               :hint="roleHint"
+               :description="roleDescription"
+               :warning="known ? void 0 : UNKNOWN_ROLE_HINT"
+            >
+               <KSelect v-model="role.role" :options="roleChoices" />
+            </KFormField>
+         </KForm>
+      </KSettingsGroup>
+
+      <KSettingsGroup v-if="editable" label="Password">
+         <template v-if="!newPassword" #actions>
+            <KButton
+               variant="soft"
+               tone="neutral"
+               type="submit"
+               size="sm"
+               :form="passwordFormId"
+               :loading="passwordForm.submitting.value"
+            >
+               Set password
+            </KButton>
+         </template>
+         <CmsSettingsSecretCard
+            v-if="newPassword"
+            title="Password changed"
+            description="Share these credentials with the user. The password does not show again."
+            :items="[
+  { label: 'Email', value: account.email },
+  { label: 'Password', value: newPassword }
+]"
+            @done="newPassword = null"
+         />
+         <KForm v-else :id="passwordFormId" :form="passwordForm">
+            <KFormField label="New password" name="password" required>
+               <KPasswordInput
+                  v-model="password.password"
+                  autocomplete="new-password"
+                  :generate="generatePassword"
+                  copy
+               />
+            </KFormField>
+         </KForm>
+      </KSettingsGroup>
+   </KStack>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import {
+  Button as KButton,
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  PasswordInput as KPasswordInput,
+  Select as KSelect,
+  SettingsGroup as KSettingsGroup,
+  Stack as KStack,
+  toast,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { computed, ref, useId } from "#imports";
+import { generatePassword } from "../../composables/cms-account";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsUsers } from "../../composables/cms-settings-stores";
+import { cmsApi } from "../../utils/api";
+import { UNKNOWN_ROLE_HINT, isKnownRole } from "../../utils/users";
+const props = defineProps({
+  account: { type: Object, required: true }
+});
+const emit = defineEmits(["updated"]);
+const profileFormId = useId();
+const roleFormId = useId();
+const passwordFormId = useId();
+const { roleOptions, roleLabel, canGrant } = useCmsPermissions();
+const { canManageUser, isSelf } = useCmsUsers();
+const editable = computed(() => canManageUser(props.account));
+const self = computed(() => isSelf(props.account));
+const known = computed(() => isKnownRole(props.account.role, roleOptions));
+const lockReason = computed(
+  () => editable.value ? void 0 : "Your role cannot manage this account."
+);
+const roleHint = computed(
+  () => editable.value && self.value ? "You cannot change your own role." : lockReason.value
+);
+const roleChoices = computed(() => {
+  const options = roleOptions.filter((option) => canGrant(option.key) || option.key === props.account.role).map((option) => ({ value: option.key, label: option.label }));
+  return known.value ? options : [
+    { value: props.account.role, label: `${props.account.role} (removed)`, disabled: true },
+    ...options
+  ];
+});
+const roleDescription = computed(
+  () => roleOptions.find((option) => option.key === role.value.role)?.description ?? void 0
+);
+async function update(body) {
+  const account = await cmsApi(`/api/cms/users/${props.account.id}`, {
+    method: "PUT",
+    body
+  });
+  emit("updated", account);
+  return account;
+}
+const profile = ref({ name: props.account.name ?? "" });
+const profileForm = useForm({
+  values: profile,
+  schema: { name: { maxLength: 120 } },
+  onSubmit: async (values) => {
+    await update({ name: values.name.trim() || null });
+    toast.success("Profile saved");
+  }
+});
+const role = ref({ role: props.account.role });
+const roleForm = useForm({
+  values: role,
+  schema: { role: { required: true } },
+  onSubmit: async (values) => {
+    const account = await update({ role: values.role });
+    toast.success(`${account.email} is now ${roleLabel(account.role)}`);
+  }
+});
+const password = ref({ password: generatePassword() });
+const newPassword = ref(null);
+const passwordForm = useForm({
+  values: password,
+  schema: { password: { required: true, minLength: MIN_PASSWORD_LENGTH, maxLength: 256 } },
+  onSubmit: async (values) => {
+    await update({ password: values.password });
+    newPassword.value = values.password;
+    passwordForm.reset({ password: generatePassword() });
+  }
+});
+</script>

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

@@ -0,0 +1,11 @@
+import type { CmsAccount } from '#nuxt-cms';
+type __VLS_Props = {
+    account: CmsAccount;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: (account: CmsAccount) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdated?: ((account: CmsAccount) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/SettingsUsers.d.vue.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;