katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+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 type { AdminUser, RoleOption, UsersResponse } from '../../../utils/admin-users'
+import { useCmsPaths } from '../../../composables/useCmsPaths'
+
+useHead({ title: 'Users' })
+
+const rootClass = 'katecms-users'
+const paths = useCmsPaths()
+
+const users = ref<AdminUser[]>([])
+const roles = ref<RoleOption[]>([])
+const currentUserId = ref<number | null>(null)
+const canCreate = ref(false)
+const canUpdate = ref(false)
+const canDelete = ref(false)
+const deletingId = ref<number | null>(null)
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+function roleLabel(slug: string): string {
+  return roles.value.find(role => role.slug === slug)?.label ?? slug
+}
+
+function statusLabel(status: AdminUser['status']): string {
+  return status === 'banned' ? 'Banned' : 'Active'
+}
+
+function formatDate(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) {
+    return iso
+  }
+  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+/** Whether the actor may open the editor for a given row. */
+function canEditRow(user: AdminUser): boolean {
+  if (user.id === currentUserId.value) {
+    return true
+  }
+  return canUpdate.value && user.role !== OWNER_ROLE
+}
+
+function canDeleteRow(user: AdminUser): boolean {
+  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: AdminUser) {
+  if (!canDeleteRow(user) || deletingId.value != null) {
+    return
+  }
+  const label = user.name?.trim() || user.email
+  if (!window.confirm(`Delete “${label}” 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<UsersResponse>('/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 || '—' }}
+          </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…' : 'Delete' }}
+            </KateCmsUiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../../assets/styles" as *;
+
+$root: '.katecms-users';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: math-rem(16);
+    min-height: 0;
+    padding: 0 math-rem(8) math-rem(8);
+    overflow: hidden;
+
+    &__table {
+      &-wrap {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-height: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        background: $color-surface;
+        border: 1px solid $color-border;
+        border-radius: $border-radius;
+      }
+    }
+
+    &__columns {
+      display: grid;
+      grid-template-columns: math-rem(56) minmax(math-rem(180), 1.6fr) minmax(math-rem(120), 1.2fr) math-rem(140) math-rem(110) math-rem(180) minmax(math-rem(148), auto);
+      align-items: center;
+      min-width: math-rem(860);
+
+      > [role='columnheader'],
+      > [role='cell'] {
+        min-width: 0;
+        padding: math-rem(10) math-rem(14);
+        overflow-wrap: anywhere;
+      }
+
+      &--head {
+        flex-shrink: 0;
+        background: $color-bg;
+        border-bottom: 1px solid $color-border;
+
+        > [role='columnheader'] {
+          font-size: math-rem(12);
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+          color: $color-muted;
+        }
+      }
+    }
+
+    &__rows {
+      flex: 1;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      #{$root}__columns {
+        border-bottom: 1px solid $color-border;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+
+    &__avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: math-rem(32);
+      height: math-rem(32);
+      border-radius: 50%;
+      overflow: hidden;
+      background: $color-accent-wash;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        object-fit: cover;
+      }
+
+      &-initials {
+        font-size: math-rem(11);
+        font-weight: 700;
+        color: $color-accent;
+        line-height: 1;
+      }
+    }
+
+    &__row {
+      &--banned {
+        opacity: 0.6;
+      }
+    }
+
+    &__badge {
+      margin-left: math-rem(6);
+      padding: math-rem(1) math-rem(6);
+      border-radius: $border-radius-inter;
+      background: $color-accent-wash;
+      color: $color-accent;
+      font-size: math-rem(11);
+      font-weight: 600;
+    }
+
+    &__status {
+      display: inline-block;
+      padding: math-rem(2) math-rem(8);
+      border-radius: $border-radius-inter;
+      font-size: math-rem(12);
+      font-weight: 600;
+
+      &--active {
+        background: $color-success-bg;
+        color: $color-success;
+      }
+
+      &--banned {
+        background: $color-danger-bg;
+        color: $color-danger;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: math-rem(8);
+      white-space: nowrap;
+    }
+  }
+}
+</style>

package/src/runtime/pages/index.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCookie, useHead, useRoute } from '#imports'
+import { useCmsPaths } from '../composables/useCmsPaths'
+
+type ThemeMode = 'system' | 'light' | 'dark'
+
+const themeOrder: ThemeMode[] = ['system', 'light', 'dark']
+
+const theme = useCookie<ThemeMode>('katecms-theme', {
+  default: () => 'system',
+  maxAge: 60 * 60 * 24 * 365,
+  sameSite: 'lax',
+  watch: true,
+})
+
+const themeMode = computed<ThemeMode>(() => themeOrder.includes(theme.value) ? theme.value : 'system')
+
+const themeClass = computed(() => themeMode.value === 'system' ? '' : `katecms-theme-${themeMode.value}`)
+
+const themeLabel = computed(() => {
+  if (themeMode.value === 'light') {
+    return 'Light theme. Switch to dark'
+  }
+  if (themeMode.value === 'dark') {
+    return 'Dark theme. Switch to system'
+  }
+  return 'System theme. Switch to light'
+})
+
+useHead(() => ({
+  bodyAttrs: {
+    id: 'katecms-body',
+    class: themeClass.value,
+  },
+  titleTemplate: (title?: string) => title ? `${title} - KateCMS` : 'KateCMS',
+}))
+
+function cycleTheme() {
+  const index = themeOrder.indexOf(themeMode.value)
+  theme.value = themeOrder[(index + 1) % themeOrder.length] ?? 'system'
+}
+
+const route = useRoute()
+const paths = useCmsPaths()
+const rootClass = 'katecms'
+const isAuthPage = computed(() => {
+  const path = route.path.length > 1 ? route.path.replace(/\/+$/, '') : route.path
+  return path === paths.login || path === paths.register
+})
+
+const sidebarHidden = useCookie<boolean>('katecms-sidebar-hidden', {
+  default: () => false,
+  maxAge: 60 * 60 * 24 * 365,
+  sameSite: 'lax',
+  watch: true,
+})
+
+function toggleSidebar() {
+  sidebarHidden.value = !sidebarHidden.value
+}
+</script>
+
+<template>
+  <NuxtPage v-if="isAuthPage" />
+  <div
+    v-else
+    :class="[rootClass, { 'is-sidebar-hidden': sidebarHidden }]"
+  >
+    <div :class="[`${rootClass}-header`]">
+      <KateCmsUiButton
+        tag="button"
+        :class="`${rootClass}-sidebar-toggle`"
+        :variant="['tertiary', 'icon']"
+        :title="sidebarHidden ? 'Show sidebar' : 'Hide sidebar'"
+        :aria-label="sidebarHidden ? 'Show sidebar' : 'Hide sidebar'"
+        :aria-expanded="sidebarHidden ? 'false' : 'true'"
+        aria-controls="katecms-sidebar"
+        @click="toggleSidebar"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M5 4.75h14c.69 0 1.25.56 1.25 1.25v12c0 .69-.56 1.25-1.25 1.25H5c-.69 0-1.25-.56-1.25-1.25V6c0-.69.56-1.25 1.25-1.25Z"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <path
+            d="M9 4.75v14.5"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+        </svg>
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        tag="button"
+        :class="`${rootClass}-theme-toggle`"
+        :variant="['tertiary', 'icon']"
+        :title="themeLabel"
+        :aria-label="themeLabel"
+        @click="cycleTheme"
+      >
+        <svg
+          v-if="themeMode === 'system'"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <rect
+            x="3.75"
+            y="4.75"
+            width="16.5"
+            height="11.5"
+            rx="1.5"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <path
+            d="M8.5 19.75h7M12 16.25v3.5"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else-if="themeMode === 'light'"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="4"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <path
+            d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.1 5.1l1.6 1.6M17.3 17.3l1.6 1.6M18.9 5.1l-1.6 1.6M6.7 17.3l-1.6 1.6"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M16.2 14.8A6.2 6.2 0 0 1 9.4 4.6 6.4 6.4 0 1 0 16.2 14.8Z"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </KateCmsUiButton>
+      <KateCmsAppUser />
+    </div>
+
+    <div
+      id="katecms-sidebar"
+      :class="[`${rootClass}-sidebar`]"
+      :inert="sidebarHidden || undefined"
+      :aria-hidden="sidebarHidden ? 'true' : undefined"
+    >
+      <div :class="[`${rootClass}-sidebar-wrap`]">
+        <KateCmsAppMenu />
+      </div>
+    </div>
+
+    <div :class="[`${rootClass}-main`]">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../assets/styles" as *;
+
+@include katecms-document;
+</style>
+
+<style scoped lang="scss">
+@use "../assets/styles" as *;
+
+$root: '.katecms';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: grid;
+    grid-template-columns: $sidebar-w minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    gap: 0;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar main";
+    width: 100%;
+    height: 100vh;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: grid-template-columns .3s ease;
+    }
+
+    &.is-sidebar-hidden {
+      grid-template-columns: 0 minmax(0, 1fr);
+
+      #{$root}-sidebar {
+        border-right-width: 0;
+      }
+    }
+
+    &-header {
+      grid-area: header;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: math-rem(12);
+      padding: 0 math-rem(12);
+      border-bottom: 1px solid $color-border;
+      box-shadow: $shadow-sm;
+      min-height: $topbar-h;
+
+      :deep(.katecms-btn.katecms-sidebar-toggle) {
+        margin-right: auto;
+        color: $color-ink;
+      }
+
+      :deep(.katecms-btn.katecms-theme-toggle) {
+        color: $color-ink;
+      }
+    }
+
+    &-sidebar {
+      grid-area: sidebar;
+      min-width: 0;
+      overflow: hidden;
+      border-right: 1px solid $color-border;
+      background-color: $color-bg;
+
+      &-wrap {
+        width: $sidebar-w;
+        min-height: 100%;
+      }
+    }
+
+    &-main {
+      grid-area: main;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/runtime/server/api/_katecms/auth/login.post.ts

@@ -0,0 +1,62 @@
+import { createError, defineEventHandler, readBody } from 'h3'
+import {
+  MAX_PASSWORD_LENGTH,
+  findUserByEmail,
+  toSafeUser,
+  verifyPassword,
+} from '@katecms/core'
+import type { SafeUser } from '@katecms/core'
+import { getDb } from '../../../utils/db'
+import { setUserSession } from '../../../utils/session'
+import {
+  assertAuthAttemptAllowed,
+  getAuthAttemptKeys,
+  invalidCredentialsError,
+  recordAuthAttemptFailure,
+  recordAuthAttemptSuccess,
+} from '../../../utils/auth-rate-limit'
+
+interface LoginBody {
+  email?: unknown
+  password?: unknown
+}
+
+export default defineEventHandler(async (event): Promise<{ user: SafeUser }> => {
+  const body = await readBody<LoginBody>(event)
+  const email = typeof body?.email === 'string' ? body.email.trim() : ''
+  const password = typeof body?.password === 'string' ? body.password : ''
+
+  if (!email || !password) {
+    throw createError({ statusCode: 422, statusMessage: 'Unprocessable Entity', message: 'Enter email and password.' })
+  }
+
+  const attemptKeys = getAuthAttemptKeys(event, 'login', email)
+  assertAuthAttemptAllowed(event, attemptKeys)
+
+  // Same generic error for "no such user", "banned" and "wrong password" so the
+  // endpoint doesn't reveal which emails are registered.
+  function fail(): never {
+    const { retryAfterMs } = recordAuthAttemptFailure(attemptKeys)
+    throw invalidCredentialsError(retryAfterMs)
+  }
+
+  // An over-long password can never match a stored hash; reject before scrypt
+  // so it can't be abused as a CPU-bound denial-of-service vector.
+  if (password.length > MAX_PASSWORD_LENGTH) {
+    fail()
+  }
+
+  const user = await findUserByEmail(getDb(), email)
+  if (!user || user.status === 'banned') {
+    fail()
+  }
+
+  const ok = await verifyPassword(password, user.password_hash)
+  if (!ok) {
+    fail()
+  }
+
+  recordAuthAttemptSuccess(attemptKeys)
+  await setUserSession(event, user.id, user.session_version)
+  return { user: toSafeUser(user) }
+})

package/src/runtime/server/api/_katecms/auth/logout.post.ts

@@ -0,0 +1,7 @@
+import { defineEventHandler } from 'h3'
+import { clearUserSession } from '../../../utils/session'
+
+export default defineEventHandler(async (event): Promise<{ ok: true }> => {
+  await clearUserSession(event)
+  return { ok: true }
+})