@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

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

@@ -0,0 +1,248 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    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="localResourceData.emailAddress"
+              label="Email"
+              type="email"
+            />
+          </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 { computed, ref, watch } from 'vue'
+import { useItemPage } from '../composables/useItemPage'
+import type { SelectOption } from '#imports'
+import ResourceModal from '#cwa/runtime/templates/components/core/admin/ResourceModal.vue'
+import ResourceModalTabs, { type ResourceModalTab } from '#cwa/runtime/templates/components/core/admin/ResourceModalTabs.vue'
+import ModalInfo from '#cwa/runtime/templates/components/core/admin/form/ModalInfo.vue'
+import ModalSelect from '#cwa/runtime/templates/components/core/admin/form/ModalSelect.vue'
+import ModalInput from '#cwa/runtime/templates/components/core/admin/form/ModalInput.vue'
+
+const emit = defineEmits<{
+  close: []
+  reload: []
+}>()
+
+const { isAdding, isLoading, isUpdating, localResourceData, formatDate, deleteResource, saveResource, saveTitle } = 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()
+}
+
+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]
+})
+</script>

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

@@ -0,0 +1,86 @@
+<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 { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+import { CwaUserRoles } from '#cwa/runtime/storage/stores/auth/state'
+import ListFilter from '#cwa/runtime/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/runtime/templates/components/core/admin/ResourceModalOverlay.vue'
+import { useListPage } from '#cwa/layer/pages/_cwa/composables/useListPage'
+
+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'
+}
+
+useHead({
+  title: 'Users',
+})
+</script>

package/dist/layer/pages/_cwa.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 { navigateTo, useHead } from '#app'
+import { definePageMeta, useCwa } 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/forgot-password.vue

@@ -0,0 +1,32 @@
+<template>
+  <CwaAuthForgotPasswordPage
+    v-model="credentials"
+    :error="error"
+    :submitting="submitting"
+    :success="success"
+    @submit="doSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { useHead } from '#app'
+import { definePageMeta, useForgotPassword } 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,33 @@
+<template>
+  <CwaAuthLoginPage
+    v-model="credentials"
+    :error="error"
+    :submitting="submitting"
+    submit-button-text="Sign In"
+    @submit="signIn"
+  />
+</template>
+
+<script setup lang="ts">
+import { useHead } from '#app'
+import { CwaAuthLoginPage } from '#components'
+import { definePageMeta, useLogin } 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,39 @@
+<template>
+  <CwaAuthResetPasswordPage
+    v-model="passwords"
+    :error="error"
+    :submitting="submitting"
+    :success="success"
+    :input-errors="inputErrors"
+    @submit="resetPassword"
+  />
+</template>
+
+<script setup lang="ts">
+import { useHead } from '#app'
+import { definePageMeta, useResetPassword } 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/module.d.mts

@@ -0,0 +1,53 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { GlobalComponents, DefineComponent } from 'vue';
+
+type GlobalComponentNames = keyof GlobalComponents;
+type ManagerTab = GlobalComponentNames | DefineComponent<object, object, any>;
+type ComponentUi = GlobalComponentNames;
+interface CwaResourceMeta {
+    name?: string;
+    description?: string;
+    instantAdd?: boolean;
+    managerTabs?: ManagerTab[];
+    ui?: ComponentUi[];
+}
+interface CwaResourcesMeta {
+    [type: string]: CwaResourceMeta;
+}
+interface CwaUiMeta {
+    name?: string;
+    classes?: {
+        [name: string]: string[] | string;
+    };
+}
+interface CwaModuleOptions {
+    appName: string;
+    storeName: string;
+    apiUrl?: string;
+    apiUrlBrowser?: string;
+    pagesDepth?: number;
+    resources?: CwaResourcesMeta;
+    layouts?: {
+        [type: string]: CwaUiMeta;
+    };
+    pages?: {
+        [type: string]: CwaUiMeta;
+    };
+    pageData?: {
+        [resourceClass: string]: Pick<CwaUiMeta, 'name'>;
+    };
+    layoutName?: string;
+}
+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 };
+export type { ComponentUi, CwaModuleOptions, CwaResourceMeta, CwaResourcesMeta, CwaUiMeta, GlobalComponentNames, ManagerTab };

package/dist/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "@cwa/nuxt",
+  "configKey": "cwa",
+  "compatibility": {
+    "nuxt": "^3.6.5",
+    "bridge": false
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
+  }
+}