@edgedev/create-edge-app 1.1.28 → 1.2.29

package/edge/components/cms/site.vue

@@ -14,6 +14,11 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  disableAddSiteForNonAdmin: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 const edgeFirebase = inject('edgeFirebase')
 const { createDefaults: createSiteSettingsDefaults, createNewDocSchema: createSiteSettingsNewDocSchema } = useSiteSettingsTemplate()
@@ -33,6 +38,22 @@ const normalizeForCompare = (value) => {
 
 const stableSerialize = value => JSON.stringify(normalizeForCompare(value))
 const areEqualNormalized = (a, b) => stableSerialize(a) === stableSerialize(b)
+const isJsonInvalid = (value) => {
+  if (value === null || value === undefined)
+    return false
+  if (typeof value === 'object')
+    return false
+  const text = String(value).trim()
+  if (!text)
+    return false
+  try {
+    JSON.parse(text)
+    return false
+  }
+  catch {
+    return true
+  }
+}
 
 const isTemplateSite = computed(() => props.site === 'templates')
 const router = useRouter()
@@ -121,6 +142,17 @@ const schemas = {
 const isAdmin = computed(() => {
   return edgeGlobal.isAdminGlobal(edgeFirebase).value
 })
+const currentOrgRoleName = computed(() => {
+  return String(edgeGlobal.getRoleName(edgeFirebase?.user?.roles || [], edgeGlobal.edgeState.currentOrganization) || '').toLowerCase()
+})
+const isOrgAdmin = computed(() => {
+  return currentOrgRoleName.value === 'admin'
+})
+const canCreateSite = computed(() => {
+  if (!props.disableAddSiteForNonAdmin)
+    return true
+  return isOrgAdmin.value
+})
 
 const siteData = computed(() => {
   return edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites`]?.[props.site] || {}
@@ -339,12 +371,72 @@ const themeOptionsMap = computed(() => {
 const orgUsers = computed(() => edgeFirebase.state?.users || {})
 const userOptions = computed(() => {
   return Object.entries(orgUsers.value || {})
+    .filter(([, user]) => Boolean(user?.userId))
     .map(([id, user]) => ({
-      value: user?.userId || id,
+      value: user?.userId,
       label: user?.meta?.name || user?.userId || id,
     }))
     .sort((a, b) => a.label.localeCompare(b.label))
 })
+const authUid = computed(() => String(edgeFirebase?.user?.uid || '').trim())
+const currentOrgUser = computed(() => {
+  if (!authUid.value)
+    return null
+  const users = Object.values(orgUsers.value || {})
+  return users.find((user) => {
+    const userId = String(user?.userId || '').trim()
+    const docId = String(user?.docId || '').trim()
+    const uid = String(user?.uid || '').trim()
+    return userId === authUid.value || docId === authUid.value || uid === authUid.value
+  }) || null
+})
+const currentOrgUserId = computed(() => {
+  return String(
+    currentOrgUser.value?.userId
+    || currentOrgUser.value?.docId
+    || authUid.value
+    || '',
+  ).trim()
+})
+const currentUserOption = computed(() => {
+  if (!currentOrgUserId.value)
+    return null
+  return {
+    value: currentOrgUserId.value,
+    label: currentOrgUser.value?.meta?.name || currentOrgUser.value?.meta?.email || currentOrgUserId.value,
+  }
+})
+const shouldForceCurrentUserForNewSite = computed(() => !isAdmin.value && props.site === 'new')
+const aiUserOptions = computed(() => {
+  if (!shouldForceCurrentUserForNewSite.value)
+    return userOptions.value
+  return currentUserOption.value ? [currentUserOption.value] : []
+})
+const normalizeUserIds = items => (Array.isArray(items) ? items : [])
+  .map(item => String(item || '').trim())
+  .filter(Boolean)
+const getSiteUsersModel = (workingDoc) => {
+  if (!workingDoc || typeof workingDoc !== 'object')
+    return []
+  const users = normalizeUserIds(workingDoc?.users)
+  if (!shouldForceCurrentUserForNewSite.value)
+    return users
+  if (!currentOrgUserId.value)
+    return users
+  if (users.length === 1 && users[0] === currentOrgUserId.value)
+    return users
+  workingDoc.users = [currentOrgUserId.value]
+  return workingDoc.users
+}
+const updateSiteUsersModel = (workingDoc, value) => {
+  if (!workingDoc || typeof workingDoc !== 'object')
+    return
+  if (shouldForceCurrentUserForNewSite.value) {
+    workingDoc.users = currentOrgUserId.value ? [currentOrgUserId.value] : []
+    return
+  }
+  workingDoc.users = normalizeUserIds(value)
+}
 
 const themeItemsForAllowed = (allowed, current) => {
   const base = themeOptions.value
@@ -859,6 +951,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
       {
         content: draftPage.content,
@@ -868,6 +963,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: draftPage.metaTitle,
         metaDescription: draftPage.metaDescription,
         structuredData: draftPage.structuredData,
+        postMetaTitle: draftPage.postMetaTitle,
+        postMetaDescription: draftPage.postMetaDescription,
+        postStructuredData: draftPage.postStructuredData,
       },
     )
   }
@@ -1069,6 +1167,9 @@ const isAnyPagesDiff = computed(() => {
         metaTitle: pageData.metaTitle,
         metaDescription: pageData.metaDescription,
         structuredData: pageData.structuredData,
+        postMetaTitle: pageData.postMetaTitle,
+        postMetaDescription: pageData.postMetaDescription,
+        postStructuredData: pageData.postStructuredData,
       },
       {
         content: publishedPage.content,
@@ -1078,6 +1179,9 @@ const isAnyPagesDiff = computed(() => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
     )) {
       return true
@@ -1104,7 +1208,7 @@ const pageSettingsUpdated = async (pageData) => {
     v-if="edgeGlobal.edgeState.organizationDocPath"
   >
     <edge-editor
-      v-if="!props.page && props.site === 'new'"
+      v-if="!props.page && props.site === 'new' && canCreateSite"
       collection="sites"
       :doc-id="props.site"
       :schema="schemas.sites"
@@ -1186,7 +1290,8 @@ const pageSettingsUpdated = async (pageData) => {
           />
           <edge-shad-select-tags
             v-if="Object.keys(orgUsers).length > 0"
-            v-model="slotProps.workingDoc.users" :disabled="!edgeGlobal.isAdminGlobal(edgeFirebase).value"
+            :model-value="getSiteUsersModel(slotProps.workingDoc)"
+            :disabled="shouldForceCurrentUserForNewSite || !edgeGlobal.isAdminGlobal(edgeFirebase).value"
             :items="userOptions"
             name="users"
             label="Users"
@@ -1195,6 +1300,7 @@ const pageSettingsUpdated = async (pageData) => {
             placeholder="Select users"
             class="w-full"
             :multiple="true"
+            @update:model-value="value => updateSiteUsersModel(slotProps.workingDoc, value)"
           />
           <div class="rounded-lg border border-dashed border-slate-200 p-4 ">
             <div class="flex items-start justify-between gap-3">
@@ -1219,7 +1325,7 @@ const pageSettingsUpdated = async (pageData) => {
                 label="User Data for AI to use to build initial site"
                 placeholder="- select one -"
                 class="w-full"
-                :items="userOptions"
+                :items="aiUserOptions"
                 item-title="label"
                 item-value="value"
                 @update:model-value="value => (slotProps.workingDoc.aiAgentUserId = value || '')"
@@ -1236,6 +1342,9 @@ const pageSettingsUpdated = async (pageData) => {
         </div>
       </template>
     </edge-editor>
+    <div v-else-if="!props.page && props.site === 'new' && !canCreateSite" class="p-6 text-sm text-red-600">
+      Only organization admins can create sites.
+    </div>
     <div v-else class="flex flex-col h-[calc(100vh-58px)] overflow-hidden">
       <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 py-2 border-b bg-secondary">
         <div class="flex items-center gap-3">
@@ -1596,7 +1705,7 @@ const pageSettingsUpdated = async (pageData) => {
               <edge-shad-button variant="destructive" class="text-white" @click="state.siteSettings = false">
                 Cancel
               </edge-shad-button>
-              <edge-shad-button :disabled="slotProps.submitting" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
+              <edge-shad-button :disabled="slotProps.submitting || isJsonInvalid(slotProps.workingDoc?.structuredData)" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
                 <Loader2 v-if="slotProps.submitting" class=" h-4 w-4 animate-spin" />
                 Update
               </edge-shad-button>

package/edge/components/cms/siteSettingsForm.vue

@@ -534,11 +534,18 @@ onMounted(async () => {
           label="Meta Description"
           name="metaDescription"
         />
+        <div class="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+          CMS tokens in double curly braces are replaced on the front end.
+          Example: <span v-pre class="font-semibold text-foreground">"{{cms-site}}"</span> for the site URL,
+          <span v-pre class="font-semibold text-foreground">"{{cms-url}}"</span> for the page URL, and
+          <span v-pre class="font-semibold text-foreground">"{{cms-logo}}"</span> for the logo URL. Keep the tokens intact.
+        </div>
         <edge-cms-code-editor
           v-model="props.settings.structuredData"
           title="Structured Data (JSON-LD)"
           language="json"
           name="structuredData"
+          validate-json
           height="300px"
           class="mb-4 w-full"
         />

package/edge/components/cms/themeEditor.vue

@@ -132,7 +132,10 @@ watch(headObject, (newHeadElements) => {
 }, { immediate: true, deep: true })
 
 const sites = computed(() => {
-  return Object.values(edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites`] || {})
+  const sitesMap = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites`] || {}
+  return Object.entries(sitesMap)
+    .map(([docId, data]) => ({ docId, ...(data || {}) }))
+    .filter(site => site.docId && site.docId !== 'templates')
 })
 
 const templatePages = computed(() => {
@@ -324,9 +327,12 @@ const templatePageOptions = computed(() => {
 
 watch (sites, async (newSites) => {
   state.loading = true
-  if (!edgeGlobal.edgeState.blockEditorSite && newSites.length > 0) {
+  const selectedSite = String(edgeGlobal.edgeState.blockEditorSite || '').trim()
+  const hasSelectedSite = newSites.some(site => site.docId === selectedSite)
+  if ((!selectedSite || !hasSelectedSite) && newSites.length > 0)
     edgeGlobal.edgeState.blockEditorSite = newSites[0].docId
-  }
+  else if (!newSites.length)
+    edgeGlobal.edgeState.blockEditorSite = ''
   await nextTick()
   state.loading = false
 }, { immediate: true, deep: true })

package/edge/components/dashboard.vue

@@ -170,6 +170,20 @@ const getByPath = (obj, path) => {
   }, obj)
 }
 
+const normalizeCollectionItems = (collectionMap = {}) => {
+  const items = Object.entries(collectionMap).map(([docId, data]) => {
+    const source = (data && typeof data === 'object') ? data : {}
+    return {
+      ...source,
+      docId: String(source.docId || docId || ''),
+    }
+  })
+  if (props.collection === 'sites') {
+    return items.filter(item => item.docId !== 'templates')
+  }
+  return items
+}
+
 const snapShotQuery = computed(() => {
   if (state.queryField && state.queryValue) {
     // console.log('snapShotQuery', state.queryField, state.queryOperator, state.queryValue)
@@ -232,7 +246,10 @@ const allData = computed(() => {
     if (!edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]) {
       return []
     }
-    return Object.values(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`])
+    return normalizeCollectionItems(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`])
+  }
+  if (props.collection === 'sites') {
+    return state.paginatedResults.filter(item => String(item?.docId || '') !== 'templates')
   }
   return state.paginatedResults
 })
@@ -243,10 +260,12 @@ const filtered = computed(() => {
     if (!edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]) {
       return []
     }
-    allData = Object.values(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`])
+    allData = normalizeCollectionItems(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`])
   }
   else {
-    allData = state.paginatedResults
+    allData = props.collection === 'sites'
+      ? state.paginatedResults.filter(item => String(item?.docId || '') !== 'templates')
+      : state.paginatedResults
   }
 
   const qRaw = filterText.value

package/edge/components/imagePicker.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { ImagePlus, Trash2 } from 'lucide-vue-next'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: 'Photo',
+  },
+  dialogTitle: {
+    type: String,
+    default: 'Select Image',
+  },
+  site: {
+    type: String,
+    default: 'clearwater-hub-images',
+  },
+  defaultTags: {
+    type: Array,
+    default: () => [],
+  },
+  includeCmsAll: {
+    type: Boolean,
+    default: true,
+  },
+  heightClass: {
+    type: String,
+    default: 'h-[160px]',
+  },
+  showRemove: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  dialog: false,
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+const openDialog = () => {
+  if (props.disabled)
+    return
+  state.dialog = true
+}
+
+const closeDialog = () => {
+  state.dialog = false
+}
+
+const selectImage = (url) => {
+  modelValue.value = url || ''
+  closeDialog()
+}
+
+const clearImage = () => {
+  if (props.disabled)
+    return
+  modelValue.value = ''
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-background p-4 space-y-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {{ props.label }}
+      </div>
+      <div class="flex items-center gap-2">
+        <edge-shad-button size="sm" variant="outline" class="h-8 px-2" :disabled="props.disabled" @click="openDialog">
+          <ImagePlus class="h-4 w-4 mr-2" />
+          Select
+        </edge-shad-button>
+        <edge-shad-button
+          v-if="props.showRemove && modelValue"
+          size="icon"
+          variant="ghost"
+          class="h-8 w-8 text-destructive/80 hover:text-destructive"
+          :disabled="props.disabled"
+          @click="clearImage"
+        >
+          <Trash2 class="h-4 w-4" />
+        </edge-shad-button>
+      </div>
+    </div>
+    <div class="rounded-lg flex items-center justify-center overflow-hidden border bg-muted/20" :class="props.heightClass">
+      <img
+        v-if="modelValue"
+        :src="modelValue"
+        alt=""
+        class="max-h-full max-w-full h-auto w-auto object-contain"
+      >
+      <span v-else class="text-sm text-muted-foreground italic">No photo selected</span>
+    </div>
+  </div>
+
+  <Dialog v-model:open="state.dialog">
+    <DialogContent class="w-full max-w-[1200px] max-h-[80vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>{{ props.dialogTitle }}</DialogTitle>
+        <DialogDescription />
+      </DialogHeader>
+      <edge-cms-media-manager
+        :site="props.site"
+        :default-tags="props.defaultTags"
+        :include-cms-all="props.includeCmsAll"
+        :select-mode="true"
+        @select="selectImage"
+      />
+    </DialogContent>
+  </Dialog>
+</template>

package/edge/components/myAccount.vue

@@ -34,6 +34,7 @@ const updateUser = async () => {
   state.userError = { success: state.userError.success, message: state.userError.message.replace('Firebase: ', '').replace(' (auth/invalid-email)', '') }
   if (state.userError.success) {
     state.userError = { success: true, message: 'A verification link has been sent to your new email address. Please click the link to complete the email change process.' }
+    await edgeFirebase.setUserMeta({ email: state.username })
   }
   edgeGlobal.edgeState.changeTracker = {}
   state.loaded = false