katecms 0.0.0-stage → 1.0.0-beta.1

package/src/runtime/pages/admin/options/[page].vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { $fetch, useHead, useRoute } from '#imports'
+import { parseAuthError } from '../../../utils/auth-error'
+import { optionApi } from '../../../utils/options'
+import type { AdminOptionMeta, OptionPageResponse } from '../../../utils/options'
+
+const route = useRoute()
+const rootClass = 'katecms-options-page'
+const formId = 'cms-options-form'
+
+const pageSlug = computed(() => String(route.params.page ?? ''))
+
+const page = ref<AdminOptionMeta | null>(null)
+const found = ref(false)
+const loading = ref(true)
+const saving = ref(false)
+const error = ref<string | null>(null)
+const savedNoticeId = ref(0)
+const canRead = ref(false)
+const canUpdate = ref(false)
+const entryForm = ref<{ validateForSubmit: () => boolean } | null>(null)
+
+const form = reactive<Record<string, unknown>>({})
+
+const pageTitle = computed(() => page.value?.label || 'Options')
+useHead({ title: pageTitle })
+
+function applyPage(res: OptionPageResponse) {
+  page.value = res.page
+  canRead.value = res.canRead
+  canUpdate.value = res.canUpdate
+  replaceForm(res.values ?? {})
+  found.value = true
+}
+
+function replaceForm(next: Record<string, unknown>) {
+  for (const key of Object.keys(form)) {
+    Reflect.deleteProperty(form, key)
+  }
+  Object.assign(form, next)
+}
+
+async function load() {
+  loading.value = true
+  error.value = null
+  found.value = false
+  try {
+    const res = await $fetch<OptionPageResponse>(optionApi(pageSlug.value))
+    applyPage(res)
+    if (!res.canRead) {
+      found.value = false
+      error.value = 'Insufficient permissions.'
+    }
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not load the options.').message
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function submit() {
+  if (saving.value || !page.value || !canUpdate.value) {
+    return
+  }
+  if (!entryForm.value?.validateForSubmit()) {
+    return
+  }
+  saving.value = true
+  error.value = null
+  try {
+    const res = await $fetch<OptionPageResponse>(optionApi(pageSlug.value), {
+      method: 'PATCH',
+      body: { fields: { ...form } },
+    })
+    applyPage(res)
+    await nextTick()
+    savedNoticeId.value += 1
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not save the options.').message
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+watch(pageSlug, load)
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader :title="pageTitle">
+      <KateCmsUiButton
+        v-if="found && canUpdate"
+        tag="button"
+        type="submit"
+        :form="formId"
+        :disabled="saving"
+      >
+        {{ saving ? 'Saving…' : 'Save' }}
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <KateCmsUiNotice
+      v-if="savedNoticeId"
+      :key="savedNoticeId"
+      placement="fixed"
+      message="Changes saved."
+      @close="savedNoticeId = 0"
+    />
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="!found"
+      placement="static"
+      variant="danger"
+      :message="error || 'Options page not found.'"
+      :closable="false"
+    />
+
+    <div
+      v-else-if="page"
+      :class="`${rootClass}__fields`"
+    >
+      <KateCmsOptionPageForm
+        ref="entryForm"
+        :form-id="formId"
+        :page="page"
+        :model-value="form"
+        :saving="saving"
+        :error="error"
+        :can-update="canUpdate"
+        @update:model-value="replaceForm"
+        @submit="submit"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../../assets/styles" as *;
+
+$root: '.katecms-options-page';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: flex;
+    flex-direction: column;
+    gap: math-rem(16);
+    padding: 0;
+    height: 100%;
+
+    &__fields {
+      padding: 0 math-rem(8) math-rem(8);
+      flex-grow: 1;
+      min-height: 0;
+      overflow: auto;
+    }
+
+    :deep(.katecms-admin-header) {
+      padding: math-rem(8);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { $fetch, navigateTo, useHead } from '#imports'
+import { parseAuthError } from '../../utils/auth-error'
+import { useAuth } from '../../composables/useAuth'
+import { useAuthCooldown } from '../../composables/useAuthCooldown'
+import { useCmsPaths } from '../../composables/useCmsPaths'
+
+const rootClass = 'katecms-auth'
+
+
+const { authState } = useAuth()
+const isFirstUser = computed(() => authState.value?.hasUsers === false)
+
+useHead({
+  bodyAttrs: {
+    id: 'katecms-body',
+  },
+  title: () => isFirstUser.value ? 'Create owner' : 'Register',
+})
+
+const paths = useCmsPaths()
+const { remainingSec, locked, start: startCooldown } = useAuthCooldown()
+const emailField = { label: 'Email', required: true }
+const passwordField = { type: 'password' as const, label: 'Password', required: true }
+const passwordConfirmField = { type: 'password' as const, label: 'Confirm password', required: true }
+const email = ref('')
+const password = ref('')
+const passwordConfirm = 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
+  && passwordConfirm.value.length > 0,
+)
+
+const submitLabel = computed(() => {
+  if (loading.value) {
+    return 'Creating…'
+  }
+  if (locked.value) {
+    return `Wait ${remainingSec.value} sec.`
+  }
+  return 'Register'
+})
+
+async function submit() {
+  if (!canSubmit.value) {
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    await $fetch('/api/_katecms/auth/register', {
+      method: 'POST',
+      body: {
+        email: email.value.trim(),
+        password: password.value,
+        passwordConfirm: passwordConfirm.value,
+      },
+    })
+    await navigateTo(paths.admin)
+  }
+  catch (err) {
+    const parsed = parseAuthError(err, 'Could not register.')
+    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`">
+        {{ isFirstUser ? 'Create owner' : 'Register' }}
+      </div>
+      <div :class="`${rootClass}__subtitle`">
+        <template v-if="isFirstUser">
+          This is the first account — it will automatically receive the owner role.
+        </template>
+        <template v-else>
+          Fill in the form to create an account. New users are assigned the subscriber role.
+        </template>
+      </div>
+
+      <form
+        :class="`${rootClass}__form`"
+        @submit.prevent="submit"
+      >
+        <KateCmsFieldWrapper
+          field-key="cms-register-email"
+          :field="emailField"
+        >
+          <KateCmsInputControl
+            v-model="email"
+            type="email"
+            field-key="cms-register-email"
+            :field="emailField"
+            autocomplete="email"
+          />
+        </KateCmsFieldWrapper>
+
+        <KateCmsPasswordField
+          v-model="password"
+          field-key="cms-register-password"
+          :field="passwordField"
+          autocomplete="new-password"
+          minlength="8"
+        />
+
+        <KateCmsPasswordField
+          v-model="passwordConfirm"
+          field-key="cms-register-password-confirm"
+          :field="passwordConfirmField"
+          autocomplete="new-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="!isFirstUser"
+        :class="`${rootClass}__footer`"
+      >
+        Already have an account?
+        <NuxtLink :to="paths.login">
+          Sign in
+        </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>