katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/pages/admin/users/index.vue

@@ -0,0 +1,329 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { $fetch, useHead } from "#imports";
+import { OWNER_ROLE } from "@katecms/core";
+import { parseAuthError } from "../../../utils/auth-error";
+import { avatarSrc, userInitials } from "../../../utils/admin-users";
+import { useCmsPaths } from "../../../composables/useCmsPaths";
+useHead({ title: "Users" });
+const rootClass = "katecms-users";
+const paths = useCmsPaths();
+const users = ref([]);
+const roles = ref([]);
+const currentUserId = ref(null);
+const canCreate = ref(false);
+const canUpdate = ref(false);
+const canDelete = ref(false);
+const deletingId = ref(null);
+const loading = ref(true);
+const error = ref(null);
+function roleLabel(slug) {
+  return roles.value.find((role) => role.slug === slug)?.label ?? slug;
+}
+function statusLabel(status) {
+  return status === "banned" ? "Banned" : "Active";
+}
+function formatDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
+}
+function canEditRow(user) {
+  if (user.id === currentUserId.value) {
+    return true;
+  }
+  return canUpdate.value && user.role !== OWNER_ROLE;
+}
+function canDeleteRow(user) {
+  if (!canDelete.value || user.id === currentUserId.value) {
+    return false;
+  }
+  if (user.role !== OWNER_ROLE) {
+    return true;
+  }
+  return users.value.some((entry) => entry.id === currentUserId.value && entry.role === OWNER_ROLE);
+}
+async function remove(user) {
+  if (!canDeleteRow(user) || deletingId.value != null) {
+    return;
+  }
+  const label = user.name?.trim() || user.email;
+  if (!window.confirm(`Delete \u201C${label}\u201D permanently? This cannot be undone.`)) {
+    return;
+  }
+  deletingId.value = user.id;
+  error.value = null;
+  try {
+    await $fetch(`/api/_katecms/users/${user.id}`, { method: "DELETE" });
+    users.value = users.value.filter((entry) => entry.id !== user.id);
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not delete the user.").message;
+  } finally {
+    deletingId.value = null;
+  }
+}
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await $fetch("/api/_katecms/users");
+    users.value = res.users;
+    roles.value = res.roles;
+    currentUserId.value = res.currentUserId;
+    canCreate.value = res.canCreate;
+    canUpdate.value = res.canUpdate;
+    canDelete.value = res.canDelete;
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not load users.").message;
+  } finally {
+    loading.value = false;
+  }
+}
+onMounted(load);
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader title="Users">
+      <KateCmsUiButton
+        tag="a"
+        :disabled="!canCreate"
+        :link="{ url: `${paths.users}/create`, title: 'Add user' }"
+      >
+        Add user
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="error"
+      placement="static"
+      variant="danger"
+      :message="error"
+      @close="error = null"
+    />
+    <KateCmsUiNotice
+      v-else-if="!users.length"
+      placement="static"
+      variant="info"
+      message="No users yet."
+      :closable="false"
+    />
+
+    <div
+      v-else
+      :class="`${rootClass}__table-wrap`"
+    >
+      <div
+        :class="[`${rootClass}__columns`, `${rootClass}__columns--head`]"
+        role="row"
+      >
+        <span
+          role="columnheader"
+          aria-label="Avatar"
+        />
+        <span role="columnheader">Email</span>
+        <span role="columnheader">Name</span>
+        <span role="columnheader">Role</span>
+        <span role="columnheader">Status</span>
+        <span role="columnheader">Created</span>
+        <span
+          role="columnheader"
+          aria-label="Actions"
+        />
+      </div>
+      <div :class="`${rootClass}__rows`">
+        <div
+          v-for="user in users"
+          :key="user.id"
+          :class="[`${rootClass}__columns`, { [`${rootClass}__row--banned`]: user.status === 'banned' }]"
+          role="row"
+        >
+          <div role="cell">
+            <span :class="`${rootClass}__avatar`">
+              <img
+                v-if="avatarSrc(user.avatar)"
+                :src="avatarSrc(user.avatar)"
+                :alt="user.avatar?.alt || ''"
+              >
+              <span
+                v-else
+                :class="`${rootClass}__avatar-initials`"
+              >{{ userInitials(user) }}</span>
+            </span>
+          </div>
+          <div role="cell">
+            {{ user.email }}
+            <span
+              v-if="user.id === currentUserId"
+              :class="`${rootClass}__badge`"
+            >you</span>
+          </div>
+          <div role="cell">
+            {{ user.name || "\u2014" }}
+          </div>
+          <div role="cell">
+            {{ roleLabel(user.role) }}
+          </div>
+          <div role="cell">
+            <span
+              :class="[`${rootClass}__status`, `${rootClass}__status--${user.status}`]"
+            >
+              {{ statusLabel(user.status) }}
+            </span>
+          </div>
+          <div role="cell">
+            {{ formatDate(user.created_at) }}
+          </div>
+          <div
+            role="cell"
+            :class="`${rootClass}__actions`"
+          >
+            <KateCmsUiButton
+              v-if="canEditRow(user)"
+              tag="a"
+              :variant="['secondary', 'small']"
+              :link="{ url: `${paths.users}/${user.id}`, title: 'Edit' }"
+            >
+              Edit
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              v-if="canDeleteRow(user)"
+              tag="button"
+              type="button"
+              :variant="['red', 'small']"
+              :disabled="deletingId === user.id"
+              :aria-label="`Delete ${user.name || user.email}`"
+              @click="remove(user)"
+            >
+              {{ deletingId === user.id ? "Deleting\u2026" : "Delete" }}
+            </KateCmsUiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-users {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  padding: 0 0.5rem 0.5rem;
+  overflow: hidden;
+}
+body#katecms-body .katecms-users__table-wrap {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-users__columns {
+  display: grid;
+  grid-template-columns: 3.5rem minmax(11.25rem, 1.6fr) minmax(7.5rem, 1.2fr) 8.75rem 6.875rem 11.25rem minmax(9.25rem, auto);
+  align-items: center;
+  min-width: 53.75rem;
+}
+body#katecms-body .katecms-users__columns > [role=columnheader],
+body#katecms-body .katecms-users__columns > [role=cell] {
+  min-width: 0;
+  padding: 0.625rem 0.875rem;
+  overflow-wrap: anywhere;
+}
+body#katecms-body .katecms-users__columns--head {
+  flex-shrink: 0;
+  background: var(--katecms-color-bg);
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-users__columns--head > [role=columnheader] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-users__rows {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+body#katecms-body .katecms-users__rows .katecms-users__columns {
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-users__rows .katecms-users__columns:last-child {
+  border-bottom: none;
+}
+body#katecms-body .katecms-users__avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-users__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+}
+body#katecms-body .katecms-users__avatar-initials {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--katecms-color-accent);
+  line-height: 1;
+}
+body#katecms-body .katecms-users__row--banned {
+  opacity: 0.6;
+}
+body#katecms-body .katecms-users__badge {
+  margin-left: 0.375rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--katecms-border-radius-inter);
+  background: var(--katecms-color-accent-wash);
+  color: var(--katecms-color-accent);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-users__status {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--katecms-border-radius-inter);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-users__status--active {
+  background: var(--katecms-color-success-bg);
+  color: var(--katecms-color-success);
+}
+body#katecms-body .katecms-users__status--banned {
+  background: var(--katecms-color-danger-bg);
+  color: var(--katecms-color-danger);
+}
+body#katecms-body .katecms-users__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+</style>

package/dist/runtime/pages/admin/users/index.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/pages/index.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;