@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/layer/pages/_cwa/index/users/[iri].vue

@@ -0,0 +1,337 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData && resource"
+    v-model="localResourceData.username"
+    title-placeholder="No Username"
+    :is-loading="isLoading"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <CwaUiFormToggle
+              v-model="localResourceData.enabled"
+              label="User Enabled"
+            />
+          </div>
+          <div>
+            <ModalInput
+              v-model="emailAddress"
+              label="Email"
+              type="email"
+            />
+          </div>
+          <div
+            v-if="!!resource.newEmailAddress"
+            class="cwa:mb-4 cwa:text-sm"
+          >
+            <p>You have requested to change the email address to <span class="cwa:font-bold">{{ resource.newEmailAddress }}</span></p>
+            <TextButton
+              :disabled="requestingEmail"
+              @click="resendVerifyEmail(resource.username, 'new')"
+            >
+              <span class="cwa:group-disabled:opacity-50">Resend email verification</span>
+              <span
+                class="cwa:transition-opacity"
+                :class="{ 'cwa:opacity-0': !showSpinnerTick }"
+              >
+                <SpinnerTick
+                  :is-loading="requestingEmail"
+                  :is-pending="!!requestError"
+                  size="cwa:size-4"
+                />
+              </span>
+            </TextButton>
+          </div>
+          <div v-else-if="localResourceData.emailAddressVerified === false">
+            <p>Email not verified.</p>
+            <TextButton
+              :disabled="requestingEmail"
+              @click="resendVerifyEmail(resource.username, 'current')"
+            >
+              <span class="cwa:group-disabled:opacity-50">Resend email verification</span>
+              <span
+                class="cwa:transition-opacity"
+                :class="{ 'cwa:opacity-0': !showSpinnerTick }"
+              >
+                <SpinnerTick
+                  :is-loading="requestingEmail"
+                  :is-pending="!!requestError"
+                  size="cwa:size-4"
+                />
+              </span>
+            </TextButton>
+          </div>
+          <div>
+            <ModalSelect
+              v-model="selectRole"
+              label="Role"
+              :options="roleOptions"
+            />
+          </div>
+          <template v-if="isAdding">
+            <div>
+              <ModalInput
+                v-model="localResourceData.plainPassword"
+                label="Password"
+                type="password"
+                placeholder="***"
+                autocomplete="new-password"
+              />
+            </div>
+            <div>
+              <ModalInput
+                v-model="localResourceData.repeatPassword"
+                label="Repeat Password"
+                type="password"
+                placeholder="***"
+                autocomplete="new-password"
+              />
+            </div>
+          </template>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(!isAdding)"
+              >
+                {{ isAdding ? 'Add Now' : 'Save & Close' }}
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(isAdding)"
+              >
+                {{ isAdding ? 'Add & Close' : 'Save' }}
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #password>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInput
+              v-model="localResourceData.plainPassword"
+              label="New Password"
+              type="password"
+              placeholder="***"
+              autocomplete="new-password"
+            />
+          </div>
+          <div>
+            <ModalInput
+              v-model="localResourceData.repeatPassword"
+              label="Repeat Password"
+              type="password"
+              placeholder="***"
+              autocomplete="new-password"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div v-if="!isAdding">
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(true)"
+              >
+                Save & Close
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(false)"
+              >
+                Save
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #info>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInfo
+              label="Created"
+              :content="formatDate(localResourceData.createdAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="Updated"
+              :content="formatDate(localResourceData.updatedAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="ID"
+              :content="localResourceData['@id']"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-start cwa:pt-6">
+            <div>
+              <CwaUiFormButton
+                :disabled="isUpdating"
+                @click="handleDeleteClick"
+              >
+                Delete
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ResourceModalTabs>
+  </ResourceModal>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useItemPage } from '../composables/useItemPage'
+import SpinnerTick from '#cwa/templates/components/utils/SpinnerTick.vue'
+import { useResendVerifyEmail } from '#cwa/composables/useResendVerifyEmail'
+import TextButton from '#cwa-layer/_components/TextButton.vue'
+import { definePageMeta } from '#imports'
+import type { SelectOption } from '#cwa/composables/cwa-select-input'
+import ResourceModal from '#cwa/templates/components/core/admin/ResourceModal.vue'
+import ResourceModalTabs from '#cwa/templates/components/core/admin/ResourceModalTabs.vue'
+import type { ResourceModalTab } from '#cwa/templates/components/core/admin/ResourceModalTabs.vue'
+import ModalInfo from '#cwa/templates/components/core/admin/form/ModalInfo.vue'
+import ModalSelect from '#cwa/templates/components/core/admin/form/ModalSelect.vue'
+import ModalInput from '#cwa/templates/components/core/admin/form/ModalInput.vue'
+
+const emit = defineEmits<{
+  close: []
+  reload: []
+}>()
+
+const emailAddress = computed({
+  get() {
+    return localResourceData.value?.newEmailAddress || localResourceData.value?.emailAddress
+  },
+  set(newEmailAddress: string) {
+    if (!localResourceData.value) {
+      return
+    }
+    if (isAdding.value) {
+      localResourceData.value.emailAddress = newEmailAddress
+    }
+    else {
+      localResourceData.value.newEmailAddress = newEmailAddress
+    }
+  },
+})
+
+const { isAdding, isLoading, isUpdating, localResourceData, formatDate, deleteResource, saveResource, saveTitle, resource } = useItemPage({
+  createEndpoint: '/users',
+  emit,
+  resourceType: 'User',
+  defaultResource: {
+    enabled: true,
+    roles: ['ROLE_USER'],
+  },
+  validate: (data) => {
+    if (data?.plainPassword) {
+      if (data.plainPassword !== data.repeatPassword) {
+        return 'The passwords entered do not match'
+      }
+    }
+    return true
+  },
+})
+
+const roleOptions: SelectOption[] = [
+  {
+    label: 'User',
+    value: 'ROLE_USER',
+  },
+  {
+    label: 'Admin',
+    value: 'ROLE_ADMIN',
+  },
+  {
+    label: 'Super Admin',
+    value: 'ROLE_SUPER_ADMIN',
+  },
+]
+
+const tabs = computed<ResourceModalTab[]>(() => {
+  const t: ResourceModalTab[] = [
+    {
+      label: 'Details',
+      id: 'details',
+    },
+  ]
+  if (!isAdding.value) {
+    t.push({
+      label: 'Password',
+      id: 'password',
+    })
+    t.push({
+      label: 'Info',
+      id: 'info',
+    })
+  }
+  return t
+})
+
+function handleDeleteClick() {
+  deleteResource()
+}
+
+const {
+  resendVerifyEmail,
+  submitting: requestingEmail,
+  error: requestError,
+} = useResendVerifyEmail()
+
+const debouncedHideSpinner = useDebounceFn(() => {
+  if (!requestingEmail.value) {
+    showSpinnerTick.value = false
+  }
+}, 5000)
+
+const showSpinnerTick = ref(false)
+watch(requestingEmail, (isRequesting) => {
+  if (isRequesting) {
+    showSpinnerTick.value = true
+    return
+  }
+  debouncedHideSpinner()
+})
+
+function getHighestRole() {
+  const resourceRoles = localResourceData.value?.roles
+  if (!Array.isArray(resourceRoles)) {
+    return
+  }
+  const reversed = roleOptions.slice().reverse()
+  for (const roleOption of reversed) {
+    if (resourceRoles.includes(roleOption.value)) {
+      return roleOption.value
+    }
+  }
+}
+const selectRole = ref(getHighestRole())
+
+watch(localResourceData, () => {
+  selectRole.value = getHighestRole()
+})
+watch(selectRole, (newRole) => {
+  if (!localResourceData.value) {
+    return
+  }
+  localResourceData.value.roles = [newRole]
+})
+
+definePageMeta({
+  name: '_cwa-users-user-iri',
+})
+</script>

package/dist/layer/pages/_cwa/index/users.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ListHeading
+      title="Users"
+      @add="goToAdd"
+    />
+    <ListFilter
+      :order-options="orderOptions"
+      :search-fields="['emailAddress', 'username']"
+    />
+    <ListContent
+      ref="listContent"
+      fetch-url="/users"
+    >
+      <template #item="{ data }">
+        <div
+          class="cwa:flex cwa:border-b cwa:border-b-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center"
+          :class="{ 'cwa:opacity-50': !data.enabled }"
+        >
+          <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1">
+            <span class="cwa:text-xl">{{ data.username }} <span class="cwa:text-stone-400 cwa:text-sm">{{ getUserRole(data.roles) }}</span></span>
+            <span>{{ data.emailAddress }}</span>
+          </div>
+          <div>
+            <CwaUiFormButton :to="computedItemLink(data['@id'])">
+              <CwaUiIconCogIcon class="cwa:w-6" />
+              <span class="cwa:sr-only">Settings</span>
+            </CwaUiFormButton>
+          </div>
+        </div>
+      </template>
+    </ListContent>
+    <ResourceModalOverlay @reload="triggerReload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+import { CwaUserRoles } from '#cwa/storage/stores/auth/state'
+import ListFilter from '#cwa/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/templates/components/core/admin/ResourceModalOverlay.vue'
+import { useListPage } from '#cwa-layer/pages/_cwa/index/composables/useListPage'
+import { definePageMeta, useHead } from '#imports'
+
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+
+const { goToAdd, triggerReload, computedItemLink } = useListPage(listContent)
+
+const orderOptions = [
+  {
+    label: 'New - Old',
+    value: { createdAt: 'desc' },
+  },
+  {
+    label: 'Old - New',
+    value: { createdAt: 'asc' },
+  },
+  {
+    label: 'A - Z',
+    value: { username: 'asc' },
+  },
+  {
+    label: 'Z - A',
+    value: { username: 'desc' },
+  },
+]
+
+function getUserRole(roles: CwaUserRoles[]) {
+  if (roles.includes(CwaUserRoles.SUPER_ADMIN)) {
+    return 'Super Admin'
+  }
+  if (roles.includes(CwaUserRoles.ADMIN)) {
+    return 'Admin'
+  }
+  if (roles.includes(CwaUserRoles.USER)) {
+    return 'User'
+  }
+  return 'Unknown'
+}
+
+definePageMeta({
+  name: '_cwa-users-user',
+})
+
+useHead({
+  title: 'Users',
+})
+</script>

package/dist/layer/pages/_cwa/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="cwa:flex cwa:flex-col cwa:h-full">
+    <div class="cwa:bg-stone-800 cwa:text-white cwa:grow">
+      <NuxtPage />
+    </div>
+    <div class="cwa:text-stone-600 p-6 cwa:flex cwa:justify-center">
+      <NuxtLink
+        to="https://cwa.rocks"
+        target="_blank"
+        rel="noopener"
+      >
+        <CwaLogo class="cwa:h-5 cwa:w-auto" /><span class="cwa:sr-only">Components Web App</span>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount } from 'vue'
+import { definePageMeta, useCwa, navigateTo, useHead } from '#imports'
+
+const $cwa = useCwa()
+
+onBeforeMount(async () => {
+  if (!$cwa.auth.isAdmin.value) {
+    await navigateTo('/')
+  }
+})
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+    admin: true,
+  },
+  layout: 'cwa-root-layout',
+})
+
+useHead({
+  bodyAttrs: {
+    class: 'cwa:bg-stone-800',
+  },
+})
+</script>

package/dist/layer/pages/confirm-new-email/[username]/[newEmail]/[token].vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import AuthTemplate from '#cwa/templates/components/main/auth/_parts/AuthTemplate.vue'
+import SpinnerTick from '#cwa/templates/components/utils/SpinnerTick.vue'
+import { definePageMeta, useVerifyEmail } from '#imports'
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+  },
+})
+
+const {
+  confirmEmail,
+  error,
+  submitting,
+  success,
+  getStringFromParam,
+} = useVerifyEmail()
+
+onMounted(() => {
+  confirmEmail()
+})
+</script>
+
+<template>
+  <AuthTemplate
+    :submitting="submitting"
+    submit-button-text="Verify Email"
+    :error="error"
+    :hide-submit="!!(success || error)"
+    @submit="confirmEmail"
+  >
+    <div
+      v-if="!error"
+      class="cwa:flex cwa:gap-x-2"
+    >
+      <div v-if="submitting || success">
+        <SpinnerTick :is-loading="submitting" />
+      </div>
+      <div v-if="success">
+        New email address confirmed
+      </div>
+      <div v-else-if="!submitting">
+        Verify your new email address <span class="cwa:font-bold">{{ getStringFromParam('newEmail') }}</span>
+      </div>
+    </div>
+  </AuthTemplate>
+</template>

package/dist/layer/pages/forgot-password.vue

@@ -0,0 +1,31 @@
+<template>
+  <CwaAuthForgotPasswordPage
+    v-model="credentials"
+    :error="error"
+    :submitting="submitting"
+    :success="success"
+    @submit="doSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { definePageMeta, useForgotPassword, useHead } from '#imports'
+import { CwaAuthForgotPasswordPage } from '#components'
+
+const { doSubmit, credentials, error, submitting, success } = useForgotPassword()
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+  },
+})
+
+useHead({
+  bodyAttrs: {
+    class: 'cwa:h-full',
+  },
+  htmlAttrs: {
+    class: 'cwa:h-full cwa:bg-neutral-900',
+  },
+})
+</script>

package/dist/layer/pages/login.vue

@@ -0,0 +1,32 @@
+<template>
+  <CwaAuthLoginPage
+    v-model="credentials"
+    :error="error"
+    :submitting="submitting"
+    submit-button-text="Sign In"
+    @submit="signIn"
+  />
+</template>
+
+<script setup lang="ts">
+import { CwaAuthLoginPage } from '#components'
+import { definePageMeta, useLogin, useHead } from '#imports'
+
+const { error, submitting, signIn, credentials } = useLogin()
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+  },
+})
+
+useHead({
+  title: 'Login',
+  bodyAttrs: {
+    class: 'cwa:h-full',
+  },
+  htmlAttrs: {
+    class: 'cwa:h-full cwa:bg-neutral-900',
+  },
+})
+</script>

package/dist/layer/pages/reset-password/[username]/[token].vue

@@ -0,0 +1,38 @@
+<template>
+  <CwaAuthResetPasswordPage
+    v-model="passwords"
+    :error="error"
+    :submitting="submitting"
+    :success="success"
+    :input-errors="inputErrors"
+    @submit="resetPassword"
+  />
+</template>
+
+<script setup lang="ts">
+import { definePageMeta, useResetPassword, useHead } from '#imports'
+
+const {
+  error,
+  submitting,
+  success,
+  passwords,
+  inputErrors,
+  resetPassword,
+} = useResetPassword()
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+  },
+})
+
+useHead({
+  bodyAttrs: {
+    class: 'cwa:h-full',
+  },
+  htmlAttrs: {
+    class: 'cwa:h-full cwa:bg-neutral-900',
+  },
+})
+</script>

package/dist/layer/pages/verify-email/[username]/[token].vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import AuthTemplate from '#cwa/templates/components/main/auth/_parts/AuthTemplate.vue'
+import SpinnerTick from '#cwa/templates/components/utils/SpinnerTick.vue'
+import { definePageMeta, useVerifyEmail } from '#imports'
+
+definePageMeta({
+  cwa: {
+    disabled: true,
+  },
+})
+
+const {
+  verifyEmail,
+  error,
+  submitting,
+  success,
+} = useVerifyEmail()
+
+onMounted(() => {
+  verifyEmail()
+})
+</script>
+
+<template>
+  <AuthTemplate
+    :submitting="submitting"
+    submit-button-text="Verify Email"
+    :error="error"
+    :hide-submit="!!(success || error)"
+    @submit="verifyEmail"
+  >
+    <div
+      v-if="!error"
+      class="cwa:flex cwa:gap-x-2"
+    >
+      <div v-if="submitting || success">
+        <SpinnerTick :is-loading="submitting" />
+      </div>
+      <div v-if="success">
+        Your email address is now verified
+      </div>
+      <div v-else-if="!submitting">
+        Verify your email address
+      </div>
+    </div>
+  </AuthTemplate>
+</template>

package/dist/module.d.mts

@@ -0,0 +1,15 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { CwaModuleOptions } from '../dist/runtime/types/index.js';
+
+declare module 'nuxt/schema' {
+    interface PublicRuntimeConfig {
+        cwa: {
+            apiUrl: string;
+            apiUrlBrowser: string;
+        };
+    }
+}
+declare const NAME: "@cwa/nuxt";
+declare const _default: _nuxt_schema.NuxtModule<CwaModuleOptions, CwaModuleOptions, false>;
+
+export { NAME, _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@cwa/nuxt",
+  "configKey": "cwa",
+  "compatibility": {
+    "nuxt": ">=3.16"
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}