@xleddyl/nuxt-cms 0.1.61 → 0.2.0

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

@@ -0,0 +1,177 @@
+<template>
+   <div class="cms-layout-editor" :class="{ 'is-dragging': dragging }">
+      <p class="cms-settings-hint">
+         Drag a field up or down to move it. Drop it on the side of another field to put them in the
+         same row (up to {{ MAX_LAYOUT_ROW_FIELDS }}).
+      </p>
+      <div class="cms-layout-areas">
+         <div v-for="area in AREAS" :key="area.id" class="cms-layout-area" :class="`is-${area.id}`">
+            <div
+               v-if="!model[area.id].some((section2) => section2.rows.length || section2.title)"
+               class="cms-layout-empty"
+               :class="{ 'is-over': isOver({ type: 'area', area: area.id }) }"
+               @dragover.prevent="setTarget({ type: 'area', area: area.id })"
+               @drop.prevent="drop"
+            >
+               {{ area.empty }}
+            </div>
+            <div
+               v-for="(section, sectionIndex) in model[area.id]"
+               v-else
+               :key="`${area.id}-${sectionIndex}`"
+               class="cms-layout-section"
+               :class="{ 'is-titled': !!section.title }"
+            >
+               <p v-if="section.title" class="cms-layout-section-title">
+                  {{ section.title }}
+                  <span v-if="section.collapsed" class="cms-badge is-muted">Collapsed</span>
+               </p>
+               <template v-for="(row, rowIndex) in section.rows" :key="row.join('|')">
+                  <div
+                     class="cms-layout-gap"
+                     :class="{ 'is-over': isOver(gapTarget(area.id, sectionIndex, rowIndex)) }"
+                     @dragover.prevent="setTarget(gapTarget(area.id, sectionIndex, rowIndex))"
+                     @drop.prevent="drop"
+                  />
+                  <div class="cms-layout-row">
+                     <div
+                        v-for="key in row"
+                        :key="key"
+                        class="cms-layout-chip"
+                        :class="{
+  'is-dragging': dragging === key,
+  'is-drop-before': isOver({ type: 'inline', key, after: false }),
+  'is-drop-after': isOver({ type: 'inline', key, after: true }),
+  'is-blocked': blocked === key
+}"
+                        draggable="true"
+                        @dragstart="onDragStart($event, key)"
+                        @dragover.prevent="onChipOver($event, key, row)"
+                        @drop.prevent="drop"
+                        @dragend="onDragEnd"
+                     >
+                        <CmsIcon name="bars-2" class="cms-settings-grip size-3.5" />
+                        <CmsIcon :name="iconOf(key)" class="cms-settings-item-icon size-3.5" />
+                        <span class="cms-layout-chip-label">{{ fields[key]?.label ?? key }}</span>
+                        <span v-if="tabLabel(key)" class="cms-layout-chip-tab">{{
+                           tabLabel(key)
+                        }}</span>
+                     </div>
+                  </div>
+               </template>
+               <div
+                  class="cms-layout-gap is-end"
+                  :class="{
+  'is-over': isOver(gapTarget(area.id, sectionIndex, section.rows.length)),
+  'is-empty': !section.rows.length
+}"
+                  @dragover.prevent="
+  setTarget(gapTarget(area.id, sectionIndex, section.rows.length))
+"
+                  @drop.prevent="drop"
+               >
+                  <span v-if="!section.rows.length">Drop fields here</span>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup>
+import { MAX_LAYOUT_ROW_FIELDS, fieldTab } from "#nuxt-cms";
+import { ref } from "#imports";
+import { fieldIcon } from "../../utils/ui";
+const AREAS = [{ id: "main", empty: "Drop fields here" }];
+const props = defineProps({
+  fields: { type: Object, required: true },
+  tabs: { type: Array, required: false }
+});
+const model = defineModel({ type: Object, ...{ required: true } });
+const dragging = ref(null);
+const target = ref(null);
+const blocked = ref(null);
+function iconOf(key) {
+  const field = props.fields[key];
+  return field ? fieldIcon(field) : "bars-3-bottom-left";
+}
+function tabLabel(key) {
+  const field = props.fields[key];
+  if (!field || !props.tabs?.length) return "";
+  const id = fieldTab(field, props.tabs);
+  return props.tabs.find((tab) => tab.id === id)?.label ?? "";
+}
+function gapTarget(area, section, row) {
+  return { type: "gap", area, section, row };
+}
+function sameTarget(a, b) {
+  return !!a && JSON.stringify(a) === JSON.stringify(b);
+}
+function isOver(candidate) {
+  return sameTarget(target.value, candidate);
+}
+function setTarget(candidate) {
+  blocked.value = null;
+  if (!sameTarget(target.value, candidate)) target.value = candidate;
+}
+function onDragStart(event, key) {
+  dragging.value = key;
+  event.dataTransfer?.setData("text/plain", key);
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+function onChipOver(event, key, row) {
+  if (!dragging.value || key === dragging.value) {
+    target.value = null;
+    return;
+  }
+  const full = row.length >= MAX_LAYOUT_ROW_FIELDS && !row.includes(dragging.value);
+  if (full) {
+    target.value = null;
+    blocked.value = key;
+    return;
+  }
+  const box = event.currentTarget.getBoundingClientRect();
+  setTarget({ type: "inline", key, after: event.clientX > box.left + box.width / 2 });
+}
+function onDragEnd() {
+  dragging.value = null;
+  target.value = null;
+  blocked.value = null;
+}
+function cloneLayout(layout) {
+  const copy = (sections) => sections.map((section) => ({ ...section, rows: section.rows.map((row) => [...row]) }));
+  return { main: copy(layout.main) };
+}
+function drop() {
+  const key = dragging.value;
+  const to = target.value;
+  onDragEnd();
+  if (!key || !to) return;
+  const next = cloneLayout(model.value);
+  const sections = next.main;
+  const anchorRow = to.type === "gap" ? next[to.area][to.section]?.rows[to.row] ?? null : null;
+  for (const section of sections) {
+    for (const row of section.rows) {
+      const index = row.indexOf(key);
+      if (index !== -1) row.splice(index, 1);
+    }
+  }
+  if (to.type === "inline") {
+    const row = sections.flatMap((section) => section.rows).find((r) => r.includes(to.key));
+    if (!row) return;
+    row.splice(row.indexOf(to.key) + (to.after ? 1 : 0), 0, key);
+  } else if (to.type === "gap") {
+    const section = next[to.area][to.section];
+    if (!section) return;
+    const index = anchorRow ? section.rows.indexOf(anchorRow) : section.rows.length;
+    section.rows.splice(index === -1 ? section.rows.length : index, 0, [key]);
+  } else {
+    next[to.area] = [...next[to.area].filter((s) => s.title), { rows: [[key]] }];
+  }
+  for (const section of sections) {
+    section.rows = section.rows.filter((row) => row.length);
+  }
+  next.main = next.main.filter((section) => section.title || section.rows.length);
+  model.value = next;
+}
+</script>

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

@@ -0,0 +1,16 @@
+import type { CmsFormLayout, CmsTab, FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    fields: Record<string, FieldConfig>;
+    tabs?: CmsTab[];
+};
+type __VLS_ModelProps = {
+    modelValue: CmsFormLayout;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CmsFormLayout) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CmsFormLayout) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { type CmsTheme } from '../../composables/cms-theme.js';
+type __VLS_ModelProps = {
+    'open'?: boolean;
+    'theme': CmsTheme;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    logout: () => any;
+    "update:open": (value: boolean) => any;
+    "update:theme": (value: CmsTheme) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onLogout?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:theme"?: ((value: CmsTheme) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,179 @@
+<template>
+   <Teleport to="body">
+      <Transition name="cms-modal">
+         <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
+            <div
+               class="cms-modal cms-settings"
+               role="dialog"
+               aria-modal="true"
+               aria-label="Settings"
+            >
+               <aside class="cms-settings-nav">
+                  <CmsButton
+                     icon="x-mark"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     aria-label="Close settings"
+                     class="cms-settings-close"
+                     @click="close"
+                  />
+                  <div class="cms-settings-nav-list">
+                     <button
+                        type="button"
+                        class="cms-settings-tab"
+                        :class="{ 'is-active': active === 'general' }"
+                        @click="active = 'general'"
+                     >
+                        <CmsIcon name="cog-6-tooth" class="size-4 shrink-0" />
+                        General
+                     </button>
+                     <button
+                        type="button"
+                        class="cms-settings-tab"
+                        :class="{ 'is-active': active === 'account' }"
+                        @click="active = 'account'"
+                     >
+                        <CmsIcon name="user-circle" class="size-4 shrink-0" />
+                        Account
+                     </button>
+                     <button
+                        v-if="isSuperAdmin"
+                        type="button"
+                        class="cms-settings-tab"
+                        :class="{ 'is-active': active === 'users' }"
+                        @click="active = 'users'"
+                     >
+                        <CmsIcon name="users" class="size-4 shrink-0" />
+                        Users
+                     </button>
+                     <p class="cms-settings-nav-label">Content</p>
+                     <button
+                        v-for="item in entries"
+                        :key="item.name"
+                        type="button"
+                        class="cms-settings-tab"
+                        :class="{ 'is-active': active === item.key }"
+                        @click="active = item.key"
+                     >
+                        <CmsIcon :name="item.icon" class="size-4 shrink-0" />
+                        <span class="truncate">{{ item.label }}</span>
+                     </button>
+                  </div>
+                  <hr class="cms-settings-divider" />
+                  <button type="button" class="cms-settings-tab is-danger" @click="emit('logout')">
+                     <CmsIcon name="arrow-right-start-on-rectangle" class="size-4 shrink-0" />
+                     Sign out
+                  </button>
+               </aside>
+
+               <section v-if="active === 'account'" class="cms-settings-content">
+                  <CmsSettingsAccount />
+               </section>
+               <section v-else-if="active === 'users'" class="cms-settings-content">
+                  <CmsSettingsUsers />
+               </section>
+               <section v-else-if="activeEntry" class="cms-settings-content">
+                  <CmsSettingsEntry :key="activeEntry" :name="activeEntry" />
+               </section>
+               <section v-else class="cms-settings-content">
+                  <h2 class="cms-title cms-title-sm">General</h2>
+
+                  <div class="cms-settings-group">
+                     <div class="cms-settings-heading">
+                        <p class="cms-settings-label">Theme</p>
+                        <p class="cms-settings-hint">
+                           Choose how the panel looks. System follows your device.
+                        </p>
+                     </div>
+                     <div class="cms-theme-cards" role="radiogroup" aria-label="Theme">
+                        <button
+                           v-for="option in CMS_THEMES"
+                           :key="option.value"
+                           type="button"
+                           role="radio"
+                           :aria-checked="theme === option.value"
+                           class="cms-theme-card"
+                           :class="{ 'is-active': theme === option.value }"
+                           @click="selectTheme(option.value)"
+                        >
+                           <span class="cms-theme-preview" :class="`is-${option.value}`">
+                              <span
+                                 v-for="half in previewHalves(option.value)"
+                                 :key="half"
+                                 class="cms-theme-preview-app"
+                                 :class="`is-${half}`"
+                              >
+                                 <span class="cms-theme-preview-side" />
+                                 <span class="cms-theme-preview-panel">
+                                    <span class="cms-theme-preview-line is-accent" />
+                                    <span class="cms-theme-preview-line" />
+                                    <span class="cms-theme-preview-line is-short" />
+                                 </span>
+                              </span>
+                           </span>
+                           <span class="cms-theme-card-label">
+                              <CmsIcon :name="option.icon" class="size-3.5" />
+                              {{ option.label }}
+                              <CmsIcon
+                                 v-if="theme === option.value"
+                                 name="check"
+                                 class="cms-theme-card-check size-3.5"
+                              />
+                           </span>
+                        </button>
+                     </div>
+                  </div>
+               </section>
+            </div>
+         </div>
+      </Transition>
+   </Teleport>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "#imports";
+import cmsConfig from "#cms-config";
+import { CMS_THEMES, setCmsTheme } from "../../composables/cms-theme";
+import { useCmsAccount } from "../../composables/cms-account";
+const { isSuperAdmin } = useCmsAccount();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const theme = defineModel("theme", { type: String, ...{ required: true } });
+const emit = defineEmits(["logout"]);
+const KIND_ICONS = {
+  collection: "square-3-stack-3d",
+  single: "document-text",
+  page: "window"
+};
+const ENTRY_PREFIX = "entry:";
+const entries = Object.entries(cmsConfig).map(([name, entry]) => ({
+  name,
+  key: `${ENTRY_PREFIX}${name}`,
+  label: entry.label,
+  icon: entry.icon ?? KIND_ICONS[entry.kind]
+}));
+const active = ref("general");
+const activeEntry = computed(
+  () => active.value.startsWith(ENTRY_PREFIX) ? active.value.slice(ENTRY_PREFIX.length) : null
+);
+function selectTheme(value) {
+  setCmsTheme(theme, value);
+}
+function previewHalves(value) {
+  return value === "system" ? ["light", "dark"] : [value];
+}
+function close() {
+  open.value = false;
+}
+function onKeydown(event) {
+  if (event.key === "Escape") close();
+}
+watch(open, (value) => {
+  if (import.meta.server) return;
+  if (value) document.addEventListener("keydown", onKeydown);
+  else document.removeEventListener("keydown", onKeydown);
+});
+onBeforeUnmount(() => {
+  if (import.meta.client) document.removeEventListener("keydown", onKeydown);
+});
+</script>

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

@@ -0,0 +1,16 @@
+import { type CmsTheme } from '../../composables/cms-theme.js';
+type __VLS_ModelProps = {
+    'open'?: boolean;
+    'theme': CmsTheme;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    logout: () => any;
+    "update:open": (value: boolean) => any;
+    "update:theme": (value: CmsTheme) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onLogout?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:theme"?: ((value: CmsTheme) => 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

@@ -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/SettingsUsers.vue

@@ -0,0 +1,270 @@
+<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;
+  await navigator.clipboard.writeText(
+    `Email: ${created.value.email}
+Password: ${created.value.password}`
+  );
+  copied.value = true;
+}
+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>