@xleddyl/nuxt-cms 0.1.61 → 0.2.1

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

@@ -0,0 +1,274 @@
+<template>
+   <div class="cms-settings-entry">
+      <div class="cms-settings-entry-header">
+         <div class="cms-settings-heading">
+            <h2 class="cms-title cms-title-sm">Users</h2>
+            <p class="cms-settings-hint">
+               Users can do everything in the panel, except manage users.
+            </p>
+         </div>
+         <CmsButton
+            v-if="!creating"
+            label="Add user"
+            icon="user-plus"
+            size="sm"
+            @click="startCreate"
+         />
+      </div>
+
+      <div v-if="created" class="cms-credentials">
+         <div class="cms-settings-heading">
+            <p class="cms-settings-label">{{ created.title }}</p>
+            <p class="cms-settings-hint">
+               Share these credentials with the user. The password does not show again.
+            </p>
+         </div>
+         <dl class="cms-credentials-list">
+            <dt>Email</dt>
+            <dd>{{ created.email }}</dd>
+            <dt>Password</dt>
+            <dd class="cms-mono">{{ created.password }}</dd>
+         </dl>
+         <div class="cms-actions is-end">
+            <CmsButton
+               :label="copied ? 'Copied' : 'Copy credentials'"
+               :icon="copied ? 'clipboard-document-check' : 'clipboard-document'"
+               variant="soft"
+               size="sm"
+               @click="copyCredentials"
+            />
+            <CmsButton label="Done" size="sm" @click="created = null" />
+         </div>
+      </div>
+
+      <div v-if="creating" class="cms-credentials">
+         <p class="cms-settings-label">New user</p>
+         <CmsForm :state="draft" @submit="create">
+            <CmsAlert v-if="formError" color="error" :title="formError" />
+            <div class="cms-form-row" style="--cms-row-cols: 2">
+               <CmsFormField label="Email" name="email" required>
+                  <CmsInput
+                     v-model="draft.email"
+                     type="email"
+                     icon="envelope"
+                     placeholder="name@example.com"
+                     autocomplete="off"
+                  />
+               </CmsFormField>
+               <CmsFormField label="Name" name="name">
+                  <CmsInput v-model="draft.name" placeholder="Optional" autocomplete="off" />
+               </CmsFormField>
+            </div>
+            <CmsFormField label="Password" name="password" required>
+               <CmsPasswordInput v-model="draft.password" generate copy />
+            </CmsFormField>
+            <div class="cms-actions is-end">
+               <CmsButton
+                  label="Cancel"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  @click="cancel"
+               />
+               <CmsButton
+                  type="submit"
+                  label="Create user"
+                  size="sm"
+                  :loading="busy"
+                  :disabled="!draft.email || draft.password.length < MIN_PASSWORD_LENGTH"
+               />
+            </div>
+         </CmsForm>
+      </div>
+
+      <CmsSpinner v-if="loading" />
+
+      <ul v-else-if="users.length" class="cms-settings-list">
+         <li v-for="account in users" :key="account.id" class="cms-user-row">
+            <div class="cms-user-main">
+               <span class="cms-avatar">{{ initialOf(account.name, account.email) }}</span>
+               <div class="cms-account-text">
+                  <span class="cms-account-name">{{ account.name || account.email }}</span>
+                  <span class="cms-account-email">
+                     {{ account.name ? `${account.email} \xB7 ` : "" }}{{ lastLogin(account) }}
+                  </span>
+               </div>
+               <div class="cms-user-actions">
+                  <CmsButton
+                     icon="key"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     title="Set a new password"
+                     aria-label="Set a new password"
+                     @click="startReset(account)"
+                  />
+                  <CmsButton
+                     icon="trash"
+                     variant="ghost"
+                     color="error"
+                     size="sm"
+                     title="Delete user"
+                     aria-label="Delete user"
+                     @click="remove(account)"
+                  />
+               </div>
+            </div>
+            <CmsForm
+               v-if="resetting === account.id"
+               :state="reset"
+               class="cms-user-reset"
+               @submit="saveReset(account)"
+            >
+               <CmsFormField label="New password" name="password">
+                  <CmsPasswordInput v-model="reset.password" generate copy />
+               </CmsFormField>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     @click="resetting = null"
+                  />
+                  <CmsButton
+                     type="submit"
+                     label="Set password"
+                     size="sm"
+                     :loading="busy"
+                     :disabled="reset.password.length < MIN_PASSWORD_LENGTH"
+                  />
+               </div>
+            </CmsForm>
+         </li>
+      </ul>
+
+      <CmsEmptyState
+         v-else-if="!creating"
+         icon="users"
+         title="No users yet"
+         body="Add a user to give someone access to the panel."
+      />
+   </div>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { onMounted, ref } from "#imports";
+import { generatePassword, initialOf } from "../../composables/cms-account";
+import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsToast } from "../../composables/cms-toast";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const toast = useCmsToast();
+const confirmAction = useCmsConfirm();
+const users = ref([]);
+const loading = ref(true);
+const busy = ref(false);
+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 creating = ref(false);
+const draft = ref({ email: "", name: "", password: "" });
+const formError = ref(null);
+const created = ref(null);
+const copied = ref(false);
+function startCreate() {
+  created.value = null;
+  formError.value = null;
+  draft.value = { email: "", name: "", password: generatePassword() };
+  creating.value = true;
+}
+function cancel() {
+  creating.value = false;
+}
+async function create() {
+  busy.value = true;
+  formError.value = null;
+  try {
+    const account = await cmsApi("/api/cms/users", {
+      method: "POST",
+      body: {
+        email: draft.value.email,
+        name: draft.value.name || null,
+        password: draft.value.password
+      }
+    });
+    users.value = [...users.value, account];
+    created.value = {
+      title: "User created",
+      email: account.email,
+      password: draft.value.password
+    };
+    copied.value = false;
+    creating.value = false;
+  } catch (error) {
+    formError.value = errorMessage(error) ?? "User not created.";
+  } finally {
+    busy.value = false;
+  }
+}
+async function copyCredentials() {
+  if (!created.value) return;
+  try {
+    await navigator.clipboard.writeText(
+      `Email: ${created.value.email}
+Password: ${created.value.password}`
+    );
+    copied.value = true;
+  } catch {
+    copied.value = false;
+  }
+}
+const resetting = ref(null);
+const reset = ref({ password: "" });
+function startReset(account) {
+  reset.value = { password: generatePassword() };
+  resetting.value = resetting.value === account.id ? null : account.id;
+}
+async function saveReset(account) {
+  busy.value = true;
+  try {
+    const updated = await cmsApi(`/api/cms/users/${account.id}`, {
+      method: "PUT",
+      body: { password: reset.value.password }
+    });
+    users.value = users.value.map((u) => u.id === updated.id ? updated : u);
+    created.value = {
+      title: "Password changed",
+      email: account.email,
+      password: reset.value.password
+    };
+    copied.value = false;
+    resetting.value = null;
+  } catch (error) {
+    toast.add({ title: "Password not changed", description: errorMessage(error), color: "error" });
+  } finally {
+    busy.value = false;
+  }
+}
+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" });
+  }
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-   <div class="cms-spinner">
-      <CmsIcon name="arrow-path" class="size-6 animate-spin" />
+   <div class="cms-spinner" role="status" aria-label="Loading">
+      <span class="cms-spinner-ring" />
    </div>
 </template>

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

@@ -4,7 +4,6 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
-    reorderable?: boolean;
     sortable?: boolean;
 }
 interface TableSort {
@@ -14,33 +13,32 @@ interface TableSort {
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
+    selectable?: boolean;
 };
 type __VLS_ModelProps = {
-    'columnVisibility'?: Record<string, boolean>;
+    'selected'?: string[];
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `${string}-cell`, __VLS_8: {
+declare var __VLS_21: `${string}-cell`, __VLS_22: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
-    reorder: (from: string, to: string) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
+    "update:selected": (value: string[]) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
-    onReorder?: ((from: string, to: string) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,23 +4,23 @@
          <table class="cms-table">
             <thead>
                <tr>
+                  <th v-if="selectable" class="cms-table-check-cell">
+                     <CmsCheckbox
+                        :checked="allSelected"
+                        :indeterminate="someSelected"
+                        aria-label="Select all rows"
+                        @toggle="toggleAll"
+                     />
+                  </th>
                   <th
-                     v-for="column in visibleColumns"
+                     v-for="column in columns"
                      :key="columnId(column)"
                      :class="{
-  'is-dragging': draggingId === columnId(column),
-  'is-drop-target': dropTargetId === columnId(column),
   'is-sortable': column.sortable,
   'is-sorted': sort?.key === columnId(column)
 }"
-                     :draggable="column.reorderable || void 0"
                      :aria-sort="ariaSort(column)"
                      @click="toggleSort(column)"
-                     @dragstart="onDragStart($event, column)"
-                     @dragover="onDragOver($event, column)"
-                     @dragleave="onDragLeave(column)"
-                     @drop="onDrop($event, column)"
-                     @dragend="resetDrag"
                   >
                      <span class="cms-th-label">
                         {{ column.header }}
@@ -36,11 +36,20 @@
             <tbody>
                <tr
                   v-for="(row, index) in data"
-                  :key="index"
+                  :key="keyOf(row)"
                   class="__clickable"
+                  :class="{ 'is-selected': isSelected(row) }"
+                  :style="{ '--cms-row-delay': `${Math.min(index, 14) * 24}ms` }"
                   @click="emit('select', $event, { original: row })"
                >
-                  <td v-for="column in visibleColumns" :key="columnId(column)">
+                  <td v-if="selectable" class="cms-table-check-cell" @click.stop="toggleRow(row)">
+                     <CmsCheckbox
+                        :checked="isSelected(row)"
+                        aria-label="Select row"
+                        @toggle="toggleRow(row)"
+                     />
+                  </td>
+                  <td v-for="column in columns" :key="columnId(column)">
                      <slot :name="`${columnId(column)}-cell`" :row="{ original: row }">
                         {{ cellValue(column, row) }}
                      </slot>
@@ -53,14 +62,32 @@
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed } from "#imports";
 const props = defineProps({
   data: { type: Array, required: true },
-  columns: { type: Array, required: true }
+  columns: { type: Array, required: true },
+  selectable: { type: Boolean, required: false }
 });
-const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
+const selected = defineModel("selected", { type: Array, ...{ default: () => [] } });
+function keyOf(row) {
+  return String(row.id);
+}
+function isSelected(row) {
+  return selected.value.includes(keyOf(row));
+}
+function toggleRow(row) {
+  const key = keyOf(row);
+  selected.value = isSelected(row) ? selected.value.filter((k) => k !== key) : [...selected.value, key];
+}
+const allSelected = computed(
+  () => props.data.length > 0 && props.data.every((row) => isSelected(row))
+);
+const someSelected = computed(() => !allSelected.value && selected.value.length > 0);
+function toggleAll() {
+  selected.value = allSelected.value ? [] : props.data.map(keyOf);
+}
 const sort = defineModel("sort", { type: [Object, null], ...{ default: null } });
-const emit = defineEmits(["select", "reorder"]);
+const emit = defineEmits(["select"]);
 function columnId(column) {
   return column.id ?? column.accessorKey ?? "";
 }
@@ -80,38 +107,6 @@ function ariaSort(column) {
   if (sort.value?.key !== columnId(column)) return "none";
   return sort.value.order === "asc" ? "ascending" : "descending";
 }
-const draggingId = ref(null);
-const dropTargetId = ref(null);
-function resetDrag() {
-  draggingId.value = null;
-  dropTargetId.value = null;
-}
-function onDragStart(event, column) {
-  if (!column.reorderable) return;
-  draggingId.value = columnId(column);
-  event.dataTransfer?.setData("text/plain", columnId(column));
-  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
-}
-function onDragOver(event, column) {
-  if (!draggingId.value || !column.reorderable) return;
-  event.preventDefault();
-  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-  dropTargetId.value = columnId(column);
-}
-function onDragLeave(column) {
-  if (dropTargetId.value === columnId(column)) dropTargetId.value = null;
-}
-function onDrop(event, column) {
-  if (!draggingId.value || !column.reorderable) return;
-  event.preventDefault();
-  const from = draggingId.value;
-  const to = columnId(column);
-  resetDrag();
-  if (from !== to) emit("reorder", from, to);
-}
-const visibleColumns = computed(
-  () => props.columns.filter((column) => visibility.value[columnId(column)] !== false)
-);
 function cellValue(column, row) {
   if (column.accessorFn) return column.accessorFn(row);
   if (column.accessorKey) return row[column.accessorKey];

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

@@ -4,7 +4,6 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
-    reorderable?: boolean;
     sortable?: boolean;
 }
 interface TableSort {
@@ -14,33 +13,32 @@ interface TableSort {
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
+    selectable?: boolean;
 };
 type __VLS_ModelProps = {
-    'columnVisibility'?: Record<string, boolean>;
+    'selected'?: string[];
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `${string}-cell`, __VLS_8: {
+declare var __VLS_21: `${string}-cell`, __VLS_22: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
-    reorder: (from: string, to: string) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
+    "update:selected": (value: string[]) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
-    onReorder?: ((from: string, to: string) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     rows?: number;
-    size?: 'sm' | 'md' | 'lg';
     color?: 'error';
 };
 type __VLS_ModelProps = {

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

@@ -2,7 +2,7 @@
    <textarea
       :rows="rows ?? 3"
       :value="model ?? ''"
-      :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+      :class="['cms-field', 'cms-field-md', { 'is-error': color === 'error' }]"
       @input="model = $event.target.value"
    />
 </template>
@@ -10,7 +10,6 @@
 <script setup>
 defineProps({
   rows: { type: Number, required: false },
-  size: { type: String, required: false },
   color: { type: String, required: false }
 });
 const model = defineModel({ type: [String, null] });

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     rows?: number;
-    size?: 'sm' | 'md' | 'lg';
     color?: 'error';
 };
 type __VLS_ModelProps = {

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

@@ -5,7 +5,7 @@
             <div
                v-for="toast in toasts"
                :key="toast.id"
-               class="cms-toast cms-rise"
+               class="cms-toast"
                :class="{
   'is-success': toast.color === 'success',
   'is-error': toast.color === 'error'

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

@@ -0,0 +1,69 @@
+<template>
+   <CmsModal :open="open" size="sm" title="Welcome to nuxt-cms" @update:open="(v) => !v && keep()">
+      <template #body>
+         <CmsForm :state="state" @submit="save">
+            <p class="cms-settings-hint">
+               You signed in with a password that someone shared with you. Set your own password
+               now, or keep this one. You can change it later in Settings, Account.
+            </p>
+            <CmsAlert v-if="error" color="error" :title="error" />
+            <CmsFormField label="New password" name="password">
+               <CmsPasswordInput v-model="state.password" generate copy />
+            </CmsFormField>
+            <div class="cms-actions is-end">
+               <CmsButton
+                  label="Keep current password"
+                  variant="ghost"
+                  color="neutral"
+                  :disabled="busy"
+                  @click="keep"
+               />
+               <CmsButton
+                  type="submit"
+                  label="Set password"
+                  :loading="busy"
+                  :disabled="state.password.length < MIN_PASSWORD_LENGTH"
+               />
+            </div>
+         </CmsForm>
+      </template>
+   </CmsModal>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { computed, ref } from "#imports";
+import { useCmsAccount } from "../../composables/cms-account";
+import { useCmsToast } from "../../composables/cms-toast";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const { user, refresh } = useCmsAccount();
+const toast = useCmsToast();
+const dismissed = ref(false);
+const open = computed(() => !!user.value?.firstLogin && !dismissed.value);
+const state = ref({ password: "" });
+const error = ref(null);
+const busy = ref(false);
+async function keep() {
+  dismissed.value = true;
+  await cmsApi("/api/cms/account/welcome", { method: "POST" }).catch(() => void 0);
+  await refresh();
+}
+async function save() {
+  busy.value = true;
+  error.value = null;
+  try {
+    await cmsApi("/api/cms/account/password", {
+      method: "PUT",
+      body: { newPassword: state.value.password }
+    });
+    dismissed.value = true;
+    await refresh();
+    toast.add({ title: "Password set", color: "success" });
+  } catch (e) {
+    error.value = errorMessage(e) ?? "Password not set.";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>

package/dist/runtime/app/components/cms/WelcomeModal.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/composables/cms-account.d.ts

@@ -0,0 +1,11 @@
+import type { CmsSessionUser } from '#nuxt-cms';
+export declare function generatePassword(length?: number): string;
+export declare function initialOf(name: string | null | undefined, email: string): string;
+export declare function useCmsAccount(): {
+    user: import("vue").ComputedRef<CmsSessionUser | null>;
+    email: import("vue").ComputedRef<string>;
+    isSuperAdmin: import("vue").ComputedRef<boolean>;
+    displayName: import("vue").ComputedRef<string>;
+    initial: import("vue").ComputedRef<string>;
+    refresh: () => Promise<void>;
+};