katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,138 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, useHead } from "#imports";
+import { useCmsPaths } from "../../composables/useCmsPaths";
+useHead({ title: "Dashboard" });
+const rootClass = "katecms-dashboard";
+const paths = useCmsPaths();
+const collections = computed(() => {
+  const map = useRuntimeConfig().public.katecms?.collections ?? {};
+  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 ?? {};
+  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 ?? {};
+  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>
+body#katecms-body .katecms-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.5rem;
+}
+body#katecms-body .katecms-dashboard__empty {
+  margin: 0;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-dashboard__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
+  gap: 0.75rem;
+}
+body#katecms-body .katecms-dashboard__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--katecms-shadow-sm);
+}
+body#katecms-body .katecms-dashboard__card:hover {
+  border-color: var(--katecms-color-accent);
+}
+body#katecms-body .katecms-dashboard__card-title {
+  font-weight: 600;
+}
+body#katecms-body .katecms-dashboard__card-meta {
+  font-size: 0.75rem;
+  color: var(--katecms-color-muted);
+}
+</style>

package/dist/runtime/pages/admin/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/admin/login.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/pages/admin/login.vue

@@ -0,0 +1,373 @@
+<script setup>
+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", label: "Password", required: true };
+const email = ref("");
+const password = ref("");
+const loading = ref(false);
+const error = ref(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\u2026";
+  }
+  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>
+body#katecms-body {
+  --katecms-color-accent: #2F6FED;
+  --katecms-color-accent-hover: #1E58D4;
+  --katecms-color-accent-wash: #EAF1FD;
+  --katecms-color-ink: #141A2A;
+  --katecms-color-muted: #6B7280;
+  --katecms-color-bg: #F6F7F8;
+  --katecms-color-surface: #FFFFFF;
+  --katecms-color-border: #E6E8EB;
+  --katecms-color-on-accent: #FFFFFF;
+  --katecms-color-overlay: rgba(20, 26, 42, 0.45);
+  --katecms-color-success: #2A9A66;
+  --katecms-color-success-bg: #E7F6EE;
+  --katecms-color-info: #2A7BBD;
+  --katecms-color-info-bg: #E7F2FA;
+  --katecms-color-warning: #C4851A;
+  --katecms-color-warning-bg: #FBF3E3;
+  --katecms-color-danger: #D64545;
+  --katecms-color-danger-bg: #FDECEC;
+  --katecms-shadow-sm: 0 1px 2px rgba(20, 26, 42, 0.05);
+  --katecms-shadow-md: 0 8px 24px rgba(20, 26, 42, 0.08);
+  color-scheme: light;
+  color-scheme: light dark;
+  --katecms-border-radius: 0.375rem;
+  --katecms-border-radius-inter: 0.3125rem;
+  --katecms-sidebar-w: 15.625rem;
+  --katecms-topbar-h: 3.375rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  font-family: system-ui, sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  font-style: normal;
+  font-variant: normal;
+  font-stretch: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-shadow: none;
+  text-rendering: optimizeLegibility;
+  color: var(--katecms-color-ink);
+  background-color: var(--katecms-color-surface);
+  background-image: none;
+  caret-color: var(--katecms-color-ink);
+  accent-color: var(--katecms-color-accent);
+  tab-size: 4;
+  hyphens: none;
+  word-break: normal;
+  overflow-wrap: break-word;
+  direction: ltr;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-height: 100%;
+  overflow: hidden;
+}
+body#katecms-body *,
+body#katecms-body *::before,
+body#katecms-body *::after {
+  box-sizing: border-box;
+}
+body#katecms-body * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--katecms-color-muted) transparent;
+  font-family: inherit;
+}
+body#katecms-body img,
+body#katecms-body svg,
+body#katecms-body video,
+body#katecms-body canvas {
+  max-width: 100%;
+  height: auto;
+}
+body#katecms-body form {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  min-width: 0;
+}
+body#katecms-body.katecms-theme-light {
+  --katecms-color-accent: #2F6FED;
+  --katecms-color-accent-hover: #1E58D4;
+  --katecms-color-accent-wash: #EAF1FD;
+  --katecms-color-ink: #141A2A;
+  --katecms-color-muted: #6B7280;
+  --katecms-color-bg: #F6F7F8;
+  --katecms-color-surface: #FFFFFF;
+  --katecms-color-border: #E6E8EB;
+  --katecms-color-on-accent: #FFFFFF;
+  --katecms-color-overlay: rgba(20, 26, 42, 0.45);
+  --katecms-color-success: #2A9A66;
+  --katecms-color-success-bg: #E7F6EE;
+  --katecms-color-info: #2A7BBD;
+  --katecms-color-info-bg: #E7F2FA;
+  --katecms-color-warning: #C4851A;
+  --katecms-color-warning-bg: #FBF3E3;
+  --katecms-color-danger: #D64545;
+  --katecms-color-danger-bg: #FDECEC;
+  --katecms-shadow-sm: 0 1px 2px rgba(20, 26, 42, 0.05);
+  --katecms-shadow-md: 0 8px 24px rgba(20, 26, 42, 0.08);
+  color-scheme: light;
+}
+body#katecms-body.katecms-theme-dark {
+  --katecms-color-accent: #2F6FED;
+  --katecms-color-accent-hover: #1E58D4;
+  --katecms-color-accent-wash: #243456;
+  --katecms-color-ink: #E8EBF3;
+  --katecms-color-muted: #98A2B6;
+  --katecms-color-bg: #10141C;
+  --katecms-color-surface: #1A2030;
+  --katecms-color-border: #313A4E;
+  --katecms-color-on-accent: #FFFFFF;
+  --katecms-color-overlay: rgba(0, 0, 0, 0.64);
+  --katecms-color-success: #4ECA8E;
+  --katecms-color-success-bg: #143226;
+  --katecms-color-info: #79B7E4;
+  --katecms-color-info-bg: #152A3E;
+  --katecms-color-warning: #E6B15A;
+  --katecms-color-warning-bg: #3A2C14;
+  --katecms-color-danger: #F08B8B;
+  --katecms-color-danger-bg: #3C1E1E;
+  --katecms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --katecms-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  body#katecms-body:not(.katecms-theme-light):not(.katecms-theme-dark) {
+    --katecms-color-accent: #2F6FED;
+    --katecms-color-accent-hover: #1E58D4;
+    --katecms-color-accent-wash: #243456;
+    --katecms-color-ink: #E8EBF3;
+    --katecms-color-muted: #98A2B6;
+    --katecms-color-bg: #10141C;
+    --katecms-color-surface: #1A2030;
+    --katecms-color-border: #313A4E;
+    --katecms-color-on-accent: #FFFFFF;
+    --katecms-color-overlay: rgba(0, 0, 0, 0.64);
+    --katecms-color-success: #4ECA8E;
+    --katecms-color-success-bg: #143226;
+    --katecms-color-info: #79B7E4;
+    --katecms-color-info-bg: #152A3E;
+    --katecms-color-warning: #E6B15A;
+    --katecms-color-warning-bg: #3A2C14;
+    --katecms-color-danger: #F08B8B;
+    --katecms-color-danger-bg: #3C1E1E;
+    --katecms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+    --katecms-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
+    color-scheme: dark;
+  }
+}
+html:has(> body#katecms-body) {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+</style>
+
+<style scoped>
+body#katecms-body .katecms-auth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1.5rem;
+  background: var(--katecms-color-bg);
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-auth__card {
+  width: 100%;
+  max-width: 25rem;
+  padding: 2rem;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: 0.625rem;
+  box-shadow: var(--katecms-shadow-md);
+}
+body#katecms-body .katecms-auth__logo {
+  display: block;
+  width: 9.375rem;
+  height: auto;
+  margin: 0 auto 1.5rem;
+}
+body#katecms-body .katecms-auth__title {
+  margin: 0 0 0.5rem;
+  font-size: 1.375rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-auth__subtitle {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-auth__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+body#katecms-body .katecms-auth__actions {
+  margin-top: 0.375rem;
+}
+body#katecms-body .katecms-auth__actions :deep(.katecms-btn) {
+  width: 100%;
+}
+body#katecms-body .katecms-auth__error {
+  margin-top: 1rem;
+  padding: 0.75rem 0.875rem;
+  border-radius: var(--katecms-border-radius);
+  background: var(--katecms-color-danger-bg);
+  color: var(--katecms-color-danger);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+body#katecms-body .katecms-auth__footer {
+  margin: 1.25rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--katecms-color-muted);
+  text-align: center;
+}
+body#katecms-body .katecms-auth__footer a {
+  color: var(--katecms-color-accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+body#katecms-body .katecms-auth__footer a:hover {
+  color: var(--katecms-color-accent-hover);
+  text-decoration: underline;
+}
+</style>

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