katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRuntimeConfig, useHead } from '#imports'
+import { useCmsPaths } from '../../composables/useCmsPaths'
+import type { PublicCollectionNav } from '../../utils/collections'
+import type { PublicDictionaryNav } from '../../utils/dictionaries'
+import type { PublicOptionNav } from '../../utils/options'
+
+useHead({ title: 'Dashboard' })
+
+const rootClass = 'katecms-dashboard'
+const paths = useCmsPaths()
+const collections = computed(() => {
+  const map = (useRuntimeConfig().public.katecms?.collections ?? {}) as Record<string, PublicCollectionNav>
+  return Object.entries(map).map(([slug, def]) => ({
+    slug,
+    label: def.labels?.name || slug,
+    singular: def.labels?.singularName || def.labels?.name || slug,
+  }))
+})
+const dictionaries = computed(() => {
+  const map = (useRuntimeConfig().public.katecms?.dictionaries ?? {}) as Record<string, PublicDictionaryNav>
+  return Object.entries(map).map(([slug, def]) => ({
+    slug,
+    label: def.labels?.name || slug,
+    singular: def.labels?.singularName || def.labels?.name || slug,
+  }))
+})
+const optionPages = computed(() => {
+  const map = (useRuntimeConfig().public.katecms?.options ?? {}) as Record<string, PublicOptionNav>
+  return Object.entries(map).map(([slug, def]) => ({
+    slug,
+    label: def.label || slug,
+  }))
+})
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader title="Dashboard" />
+
+    <div
+      v-if="!collections.length"
+      :class="`${rootClass}__empty`"
+    >
+      No collections are defined in the CMS config.
+    </div>
+
+    <div
+      v-else
+      :class="`${rootClass}__list`"
+    >
+      <div
+        v-for="item in collections"
+        :key="item.slug"
+      >
+        <NuxtLink
+          :class="`${rootClass}__card`"
+          :to="paths.collection(item.slug)"
+        >
+          <span :class="`${rootClass}__card-title`">{{ item.label }}</span>
+          <span :class="`${rootClass}__card-meta`">{{ item.slug }}</span>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <template v-if="dictionaries.length">
+      <KateCmsAdminHeader title="Dictionaries" />
+      <div :class="`${rootClass}__list`">
+        <div
+          v-for="item in dictionaries"
+          :key="item.slug"
+        >
+          <NuxtLink
+            :class="`${rootClass}__card`"
+            :to="paths.dictionary(item.slug)"
+          >
+            <span :class="`${rootClass}__card-title`">{{ item.label }}</span>
+            <span :class="`${rootClass}__card-meta`">{{ item.slug }}</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="optionPages.length">
+      <KateCmsAdminHeader title="Options" />
+      <div :class="`${rootClass}__list`">
+        <div
+          v-for="item in optionPages"
+          :key="item.slug"
+        >
+          <NuxtLink
+            :class="`${rootClass}__card`"
+            :to="paths.option(item.slug)"
+          >
+            <span :class="`${rootClass}__card-title`">{{ item.label }}</span>
+            <span :class="`${rootClass}__card-meta`">{{ item.slug }}</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-dashboard';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: flex;
+    flex-direction: column;
+    gap: math-rem(16);
+    padding: math-rem(8);
+
+    &__empty {
+      margin: 0;
+      color: $color-muted;
+    }
+
+    &__list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(math-rem(220), 1fr));
+      gap: math-rem(12);
+    }
+
+    &__card {
+      display: flex;
+      flex-direction: column;
+      gap: math-rem(4);
+      padding: math-rem(16);
+      background: $color-surface;
+      border: 1px solid $color-border;
+      border-radius: $border-radius;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: $shadow-sm;
+
+      &:hover {
+        border-color: $color-accent;
+      }
+
+      &-title {
+        font-weight: 600;
+      }
+
+      &-meta {
+        font-size: math-rem(12);
+        color: $color-muted;
+      }
+    }
+  }
+}
+</style>

package/src/runtime/pages/admin/login.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { $fetch, navigateTo, useHead, useRuntimeConfig } from '#imports'
+import { parseAuthError } from '../../utils/auth-error'
+import { useAuthCooldown } from '../../composables/useAuthCooldown'
+import { useCmsPaths } from '../../composables/useCmsPaths'
+
+const rootClass = 'katecms-auth'
+
+
+useHead({
+  bodyAttrs: {
+    id: 'katecms-body',
+  },
+  title: 'Sign in',
+})
+
+const paths = useCmsPaths()
+const registrationOpen = useRuntimeConfig().public.katecms?.registration === true
+const { remainingSec, locked, start: startCooldown } = useAuthCooldown()
+const emailField = { label: 'Email', required: true }
+const passwordField = { type: 'password' as const, label: 'Password', required: true }
+const email = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const canSubmit = computed(() =>
+  !loading.value
+  && !locked.value
+  && email.value.trim().length > 0
+  && password.value.length > 0,
+)
+
+const submitLabel = computed(() => {
+  if (loading.value) {
+    return 'Signing in…'
+  }
+  if (locked.value) {
+    return `Wait ${remainingSec.value} sec.`
+  }
+  return 'Sign in'
+})
+
+async function submit() {
+  if (!canSubmit.value) {
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    await $fetch('/api/_katecms/auth/login', {
+      method: 'POST',
+      body: {
+        email: email.value.trim(),
+        password: password.value,
+      },
+    })
+    await navigateTo(paths.admin)
+  }
+  catch (err) {
+    const parsed = parseAuthError(err, 'Could not sign in.')
+    error.value = parsed.message
+    startCooldown(parsed.retryAfterMs, () => {
+      error.value = null
+    })
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div :class="rootClass">
+    <div :class="`${rootClass}__card`">
+      <img
+        :class="`${rootClass}__logo`"
+        src="../../assets/img/katecms-logo.svg"
+        alt="KateCMS"
+      >
+      <div :class="`${rootClass}__title`">
+        Sign in
+      </div>
+      <div :class="`${rootClass}__subtitle`">
+        Sign in to the CMS admin.
+      </div>
+
+      <form
+        :class="`${rootClass}__form`"
+        @submit.prevent="submit"
+      >
+        <KateCmsFieldWrapper
+          field-key="cms-login-email"
+          :field="emailField"
+        >
+          <KateCmsInputControl
+            v-model="email"
+            type="email"
+            field-key="cms-login-email"
+            :field="emailField"
+            autocomplete="email"
+          />
+        </KateCmsFieldWrapper>
+
+        <KateCmsPasswordField
+          v-model="password"
+          field-key="cms-login-password"
+          :field="passwordField"
+          autocomplete="current-password"
+        />
+
+        <div :class="`${rootClass}__actions`">
+          <KateCmsUiButton
+            tag="button"
+            type="submit"
+            :disabled="!canSubmit"
+            :aria-label="submitLabel"
+          >
+            {{ submitLabel }}
+          </KateCmsUiButton>
+        </div>
+      </form>
+
+      <div
+        v-if="error"
+        :class="`${rootClass}__error`"
+      >
+        Error: {{ error }}
+      </div>
+
+      <div
+        v-if="registrationOpen"
+        :class="`${rootClass}__footer`"
+      >
+        No account?
+        <NuxtLink :to="paths.register">
+          Register
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../assets/styles" as *;
+
+@include katecms-document;
+</style>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-auth';
+
+@include katecms-auth($root);
+</style>