@live-change/user-frontend 0.8.10 → 0.8.11

package/front/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package/front/src/App.vue

@@ -37,8 +37,10 @@
 
   const api = useApi()
   import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+  import phoneValidator from "@live-change/smsapi-service/clientPhoneValidator.js"
   import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
   api.validators.email = emailValidator
+  api.validators.phone = phoneValidator
   api.validators.password = passwordValidator
 
 </script>

package/front/src/NavBar.vue

@@ -3,125 +3,65 @@
               relative md:sticky top-0 z-5"
        style="min-height: 80px" key="navbar">
 
-    <router-link to="/">
-      <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
+    <router-link :to="{ name: 'index' }" class="no-underline text-gray-700 text-2xl font-medium">
+      <div class="flex align-items-center">
+        <img src="/images/logo.svg" class="w-3rem mr-4">
+        <span>
+          User
+        </span>
+      </div>
     </router-link>
-    <div class="hidden lg:flex">
-      <!-- place for desktop menu -->
-    </div>
-    <div class="flex flex-grow-1"></div>
-    <UserIcon />
 
-    <div class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none hidden">
-      <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
+    <div class="align-items-center flex-grow-1 justify-content-between hidden lg:block absolute lg:static w-full
+                surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none top-menu">
+<!--      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row-reverse">
         <li>
-          <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
-            font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-inbox text-base text-2xl mr-0"></i>
-          </a>
+          <router-link :to="{ name: 'xml:search' }" v-ripple
+                       class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900
+                         hover:surface-100 font-medium border-round cursor-pointer transition-colors
+                         transition-duration-150 p-ripple no-underline">
+            <i class="pi pi-search mr-2"></i>
+            <span>XML Search</span>
+          </router-link>
         </li>
         <li>
-          <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100 font-medium
-           border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0" v-badge.danger></i>
-          </a>
+          <router-link :to="{ name: 'urls' }" v-ripple
+                       class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900
+                         hover:surface-100 font-medium border-round cursor-pointer transition-colors
+                         transition-duration-150 p-ripple no-underline">
+            <i class="pi pi-link mr-2"></i>
+            <span>XMLs</span>
+          </router-link>
         </li>
-      </ul>
+      </ul>-->
     </div>
 
+    <div class="flex flex-grow-1"></div>
+
+    <NotificationsIcon />
+
+    <UserIcon />
+
     <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
-       v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+       v-styleclass="{ selector: '.top-menu', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
       <i class="pi pi-bars text-4xl"></i>
     </a>
 
-    <div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
-      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
-        <li>
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-home mr-2"></i>
-            <span>Home</span>
-          </a>
-        </li>
-        <li class="lg:relative">
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
-             v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
-            <i class="pi pi-users mr-2"></i>
-            <span>Customers</span>
-            <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
-          </a>
-          <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
-            <li>
-              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
-                <i class="pi pi-user-plus mr-2"></i>
-                <span class="font-medium">Add New</span>
-              </a>
-            </li>
-            <li class="relative">
-              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
-                 v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
-                <i class="pi pi-search mr-2"></i>
-                <span class="font-medium">Search</span>
-                <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
-              </a>
-              <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
-                <li>
-                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
-                    <i class="pi pi-shopping-cart mr-2"></i>
-                    <span class="font-medium">Purchases</span>
-                  </a>
-                </li>
-                <li class="relative">
-                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
-                    <i class="pi pi-comments mr-2"></i>
-                    <span class="font-medium">Messages</span>
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-calendar mr-2"></i>
-            <span>Calendar</span>
-          </a>
-        </li>
-        <li>
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-chart-line mr-2"></i>
-            <span>Stats</span>
-          </a>
-        </li>
-      </ul>
-      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
-        <li>
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
-            <span class="block lg:hidden font-medium">Inbox</span>
-          </a>
-        </li>
-        <li class="border-top-1 surface-border lg:border-top-none">
-          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-            <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
-            <div class="block lg:hidden">
-              <div class="text-900 font-medium">Josephine Lillard</div>
-              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-
   </div>
 </template>
 
 <script setup>
 
-import { NotificationsIcon } from "@live-change/user-frontend"
+  import { NotificationsIcon } from "@live-change/user-frontend"
+
+  import { UserIcon } from "@live-change/user-frontend"
 
-import { UserIcon } from "@live-change/user-frontend"
+  import { useApi } from "@live-change/vue3-ssr"
+  import { computed } from "vue"
 
+  const api = useApi()
 
+  const isMember = computed(() => api.client.value.roles.includes('member'))
 
 </script>
 

package/front/src/connected/{Connect.vue → ConnectEmail.vue}

@@ -2,7 +2,7 @@
   <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="surface-card p-4 shadow-2 border-round">
       <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Connect account</div>
+        <div class="text-900 text-3xl font-medium mb-3">Add email</div>
       </div>
 
       <command-form service="messageAuthentication" action="connectEmail" v-slot="{ data }"
@@ -18,14 +18,18 @@
           <small v-if="data.emailError" id="email-help" class="p-error">{{ data.emailError }}</small>
         </div>
 
-        <Button label="Connect" icon="pi pi-user" class="w-full" type="submit"></Button>
+        <Button label="Add Email" icon="pi pi-envelope" class="w-full" type="submit" />
 
         <Divider align="center" class="my-4">
           <span class="text-600 font-normal text-sm">OR</span>
         </Divider>
 
-        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>
-        <Button label="Connect Google account" icon="pi pi-google" class="w-full p-button-secondary mb-1"></Button>
+        <router-link :to="{ name: 'user:connect-phone' }">
+          <Button label="Add Phone" icon="pi pi-github" class="w-full p-button-secondary mb-2" />
+        </router-link>
+
+<!--        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>
+        <Button label="Connect Google account" icon="pi pi-google" class="w-full p-button-secondary mb-1"></Button>-->
 
       </command-form>
     </div>

package/front/src/connected/ConnectPhone.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="surface-card p-4 shadow-2 border-round">
+      <div class="text-center mb-5">
+        <div class="text-900 text-3xl font-medium mb-3">Add phone number</div>
+      </div>
+
+      <command-form service="messageAuthentication" action="connectPhone" v-slot="{ data }"
+                    @done="handleSent" keepOnDone>
+
+        <div class="p-field mb-3">
+          <label for="email" class="block text-900 font-medium mb-2">
+            Phone number
+          </label>
+          <InputText id="email" type="text" class="w-full"
+                     aria-describedby="email-help" :class="{ 'p-invalid': data.phoneError}"
+                     v-model="data.phone" />
+          <small v-if="data.phoneError" id="email-help" class="p-error">{{ data.phoneError }}</small>
+        </div>
+
+        <Button label="Add Phone" icon="pi pi-mobile" class="w-full" type="submit" />
+
+        <Divider align="center" class="my-4">
+          <span class="text-600 font-normal text-sm">OR</span>
+        </Divider>
+
+        <router-link :to="{ name: 'user:connect-email' }">
+          <Button label="Add Email" icon="pi pi-github" class="w-full p-button-secondary mb-2" />
+        </router-link>
+
+<!--        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>-->
+<!--        <Button label="Connect Google account" icon="pi pi-google" class="w-full p-button-secondary mb-1"></Button>-->
+
+      </command-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputText from "primevue/inputtext"
+  import Checkbox from "primevue/checkbox"
+  import Button from "primevue/button"
+  import Divider from "primevue/divider"
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleSent({ parameters, result }) {
+    const { authentication } = result
+    router.push({
+      name: 'user:sent',
+      params: {
+        authentication
+      }
+    })
+  }
+
+</script>
+
+<style>
+
+</style>

package/front/src/connected/Connected.vue

@@ -22,11 +22,12 @@
 
       </ul>
 
-      <div class="flex flex-row">
-        <router-link :to="{ name: 'user:connect' }" class="mr-2 no-underline">
-          <Button label="Connect Account" icon="pi pi-user-plus" class="p-button-lg" id="connect"></Button>
+        <router-link :to="{ name: 'user:connect-email' }" class="mr-2 no-underline block mb-1">
+          <Button label="Add email" icon="pi pi-envelope" id="connect"></Button>
+        </router-link>
+        <router-link :to="{ name: 'user:connect-phone' }" class="mr-2 no-underline block mb-1">
+          <Button label="Add phone number" icon="pi pi-envelope" id="connect"></Button>
         </router-link>
-      </div>
     </div>
 
   </div>

package/front/src/connected/routes.js

@@ -5,8 +5,13 @@ export function routes(config = {}) {
 
     route({ name: 'user:connected', path: prefix + 'connected',
       component: () => import("./Connected.vue") }),
-    route({ name: 'user:connect', path: prefix + 'connect',
-      component: () => import("./Connect.vue") }),
+
+    route({ name: 'user:connect-email', path: prefix + 'connect-email',
+      component: () => import("./ConnectEmail.vue") }),
+    route({ name: 'user:connect-phone', path: prefix + 'connect-phone',
+      component: () => import("./ConnectPhone.vue") }),
+
+
     route({ name: 'user:connectFinished', path: prefix + 'connect-finished',
       component: () => import("./ConnectFinished.vue") }),
 

package/front/src/entry-server.js

@@ -1,6 +1,7 @@
-import { serverEntry } from '@live-change/frontend-base/server-entry.js'
+import { serverEntry, sitemapEntry } from '@live-change/frontend-base/server-entry.js'
 import App from './App.vue'
-import { createRouter } from './router'
+import { createRouter, sitemap as routerSitemap } from './router'
 
 const render = serverEntry(App, createRouter)
-export { render }
+const sitemap = sitemapEntry(App, createRouter, routerSitemap)
+export { render, sitemap }

package/front/src/identification/IdentificationSettings.vue

@@ -62,6 +62,9 @@
 
   const workingZone = inject('workingZone')
 
+  const [ userData ] = await Promise.all([ dataPromise ])
+
+  const updateMethod = computed(() => userData.value ? 'updateMyIdentification' : 'setMyIdentification')
 
   function openImageEditor() {
     dialog.open(ComponentDialog, {
@@ -80,7 +83,8 @@
       data: {
         component: shallowRef(ImageEditor),
         props: {
-          type: 'circle'
+          type: 'circle',
+          modelValue: userData.value?.image,
         }
       },
       onClose: (options) => {
@@ -88,7 +92,7 @@
         console.log("EDITOR RESULT", data)
         console.log("WZ", workingZone)
         workingZone.addPromise('update user image', (async () => {
-          await api.command(['userIdentification', updateMethod.value], { image: data.value })
+          await api.command(['userIdentification', updateMethod.value], { image: data?.value })
           toast.add({ severity:'info', summary: 'User image saved', life: 1500 })
         })())
       }
@@ -99,9 +103,6 @@
     toast.add({ severity:'info', summary: 'User name saved', life: 1500 })
   }
 
-  const [ userData ] = await Promise.all([ dataPromise ])
-
-  const updateMethod = computed(() => userData.value ? 'updateMyIdentification' : 'setMyIdentification')
 
 </script>
 

package/front/src/nav/UserIcon.vue

@@ -1,24 +1,20 @@
 <template>
   <a v-ripple
      v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
-     class="relative w-auto left-0 top-100 z-1 shadow-none p-ripple border-circle">
-    <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
-      <li class="border-top-none">
-        <span class="flex p-0 align-items-center hover:surface-100 font-medium border-round
-           cursor-pointer transition-colors transition-duration-150 p-ripple">
-          <Image v-if="myIdentification?.image" :image="myIdentification.image"
-                 class="mr-0 border-circle border-1 surface-border" style="width: 38px; height: 38px" />
-          <img v-else-if="ownerType == 'session_Session'" src="/images/empty-user-photo.svg"
-               class="mr-0 border-circle" style="width: 38px; height: 38px" />
-          <img v-else :src="identiconUrl"
-               class="mr-0 border-circle border-1 surface-border" style="width: 38px; height: 38px" />
-        </span>
-      </li>
-    </ul>
+     class="relative shadow-none">
+      <span class="flex mx-0 px-3 align-items-center font-medium
+         cursor-pointer transition-colors transition-duration-150 border-round">
+        <Image v-if="myIdentification?.image" :image="myIdentification.image"
+               class="mr-0 border-circle border-1 surface-border" style="width: 3rem; " />
+        <img v-else-if="ownerType == 'session_Session'" src="/images/empty-user-photo.svg"
+             class="mr-0 border-circle" style="width: 3rem;" />
+        <img v-else :src="identiconUrl"
+             class="mr-0 border-circle border-1 surface-border" style="width: 3rem;" />
+      </span>
+
   </a>
   <div class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto surface-overlay
        right-0 top-100 z-1 shadow-2">
-<!--  <OverlayPanel v-if="isMounted" ref="overlayPanel" class="notifications-panel">-->
     <loading-zone suspense>
       <template v-slot:loading>
         <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
@@ -40,7 +36,6 @@
         </working-zone>
       </template>
     </loading-zone>
-<!--  </OverlayPanel>-->
   </div>
 </template>
 
@@ -49,18 +44,12 @@
   import ProgressSpinner from "primevue/progressspinner"
   import UserMenu from "./UserMenu.vue"
 
-  import { ref, computed, onMounted } from 'vue'
+  import { ref, computed, onMounted, toRefs } from 'vue'
 
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 
-  function showUserMenu(event) {
-    overlayPanel.value.toggle(event)
-  }
-
-  import { path, live, actions } from '@live-change/vue3-ssr'
-  import { client as useClient } from '@live-change/vue3-ssr'
-  import { toRefs } from '@vueuse/core'
+  import { usePath, live, useClient } from '@live-change/vue3-ssr'
 
   const client = useClient()
 
@@ -70,12 +59,14 @@
       : ['session_Session', client.value.session]
   )
 
-  const [ownerType, owner] = toRefs(ownerData)
+  const identiconUrl = computed(
+    () => `/api/identicon/jdenticon/${ownerData.value[0]}:${ownerData.value[1]}/28.svg`
+  )
 
-  const identiconUrl = computed( () => `/api/identicon/jdenticon/${ownerType.value}:${owner.value}/28.svg` )
+  const path = usePath()
 
   const [ myIdentification ] = await Promise.all([
-    live(path().userIdentification.myIdentification())
+    live(path.userIdentification.myIdentification())
   ])
 
 </script>

package/front/src/notifications/NotificationsIcon.vue

@@ -2,14 +2,16 @@
   <a v-if="unreadNotificationsCount"
      v-ripple
      v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
-     class="flex mx-0 px-3 p-3 py-3 align-items-center text-600 hover:text-900 hover:surface-100 overflow-visible
+     class="flex mx-0 pl-3 pr-5 p-3 py-3 align-items-center text-600 hover:text-900 overflow-visible
             font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
     <i class="pi pi-bell text-base text-2xl p-overlay-badge">
       <Badge v-if="unreadNotificationsCount?.count" :value="unreadNotificationsCount?.count ?? 0"></Badge>
     </i>
   </a>
-  <div class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto surface-overlay
-       right-0 top-100 z-1 shadow-2 overflow-x-hidden overflow-y-auto" style="max-height: calc(100vh - 8rem)">
+  <div v-if="isMounted"
+       class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto surface-overlay
+         right-0 top-100 z-1 shadow-2 overflow-x-hidden overflow-y-auto"
+       style="max-height: calc(100vh - 8rem)">
     <loading-zone suspense>
       <template v-slot:loading>
         <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
@@ -46,26 +48,15 @@
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 
-  function showNotifications(event) {
-    overlayPanel.value.toggle(event)
-  }
+  import { live, usePath } from '@live-change/vue3-ssr'
 
-  import { live, path } from '@live-change/vue3-ssr'
+  const path = usePath()
 
-  const unreadNotificationsCount = await live(path().notification.myUnreadCount({ }))
+  const unreadNotificationsCount = await live(path.notification.myUnreadCount({ }))
 
 </script>
 
 <style>
-  .notifications-panel .p-overlaypanel-content {
-    padding: 0px;
-    max-height: calc(90vh - 50px);
-    overflow-y: auto;
-  }
-  .notifications-panel {
-    width: 500px;
-    max-width: 80%;
-  }
   .notifications-loading {
     height: 300px;
     max-height: 80%;

package/front/src/notifications/NotificationsList.vue

@@ -12,7 +12,7 @@
          :style="{ backgroundz: `hsl(${bucket.id * 11}, 100%, 80%)` }">
       <div v-for="(notification, index) in bucket.data" :key="notification.id" :ref="el => bucket.domElements[index] = el"
            class="notification border-bottom-1 surface-border"
-           :class="{ selected: selectedNotification == notification.to }">
+           :class="{ selected: selectedNotification === notification.to }">
         <component :is="notificationComponent(notification)" :notification="notification" />
         <Button @click="() => selectNotification(notification)"
                 icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text notification-more-button" />
@@ -45,7 +45,7 @@
 
   import NotificationButtons from "./NotificationButtons.vue"
 
-  import { path, live, actions, api, rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
+  import { actions, api, rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
 
   const notificationApi = actions().notification
 
@@ -90,16 +90,12 @@
     },
   ]
 
-  const wait = new Promise(r => setTimeout(r, 100))
-
-  const [ notificationsBuckets ] = await Promise.all([
+/*  const [ notificationsBuckets ] = await Promise.all([
     rangeBuckets(
         (range, p) => p.notification.myNotifications(reverseRange(range)),
         { bucketSize: 10 }
     )
-  ])
-
-  await wait
+  ])*/
 
 </script>
 

package/front/src/notifications/UnknownNotification.vue

@@ -1,7 +1,7 @@
 <template>
   <SimpleNotification :notification="notification">
     <div class="text-orange-600 text-2xl">
-      Unknown notification!
+      Unknown notification {{ notification.notificationType }}!
     </div>
     <pre class="w-full overflow-hidden">{{ notification }}</pre>
   </SimpleNotification>
@@ -11,13 +11,17 @@
 
   import SimpleNotification from "./SimpleNotification.vue"
 
-  const { notification } = defineProps({
+  import { toRefs, watch } from 'vue'
+
+  const props = defineProps({
     notification: {
       type: Object,
       required: true
     }
   })
 
+  const { notification } = toRefs(props)
+
 </script>
 
 <style scoped>

package/front/src/router.js

@@ -49,8 +49,7 @@ export {
 }
 
 export async function sitemap(route, api) {
-  route({ name: 'SignIn' })
-  route({ name: 'SignUp' })
+  route({ name: 'index' })
 }
 
 import { client as useClient } from '@live-change/vue3-ssr'
@@ -85,7 +84,7 @@ export function createRouter(app, config) {
     // import.meta.env.SSR is injected by Vite.
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
     routes: [
-      { path: '/', component: () => import('./Index.vue') },
+      { name: 'index', path: '/', component: () => import('./Index.vue') },
       ...userRoutes(config),
       ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
     ]

package/front/vite.config.js.timestamp-1711533638521-1cea1a18c0069.mjs

@@ -0,0 +1,12 @@
+// vite.config.js
+import { defineConfig } from "file:///home/m8/IdeaProjects/live-change/node_modules/vite/dist/node/index.js";
+import baseViteConfig from "file:///home/m8/IdeaProjects/live-change/live-change-stack/frontend/frontend-base/vite-config.js";
+var vite_config_default = defineConfig(async ({ command, mode }) => {
+  return {
+    ...await baseViteConfig({ command, mode })
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9tOC9JZGVhUHJvamVjdHMvbGl2ZS1jaGFuZ2UvbGl2ZS1jaGFuZ2Utc3RhY2svZnJvbnRlbmQvdXNlci1mcm9udGVuZC9mcm9udFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvbTgvSWRlYVByb2plY3RzL2xpdmUtY2hhbmdlL2xpdmUtY2hhbmdlLXN0YWNrL2Zyb250ZW5kL3VzZXItZnJvbnRlbmQvZnJvbnQvdml0ZS5jb25maWcuanNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvbTgvSWRlYVByb2plY3RzL2xpdmUtY2hhbmdlL2xpdmUtY2hhbmdlLXN0YWNrL2Zyb250ZW5kL3VzZXItZnJvbnRlbmQvZnJvbnQvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuXG5pbXBvcnQgYmFzZVZpdGVDb25maWcgZnJvbSAnQGxpdmUtY2hhbmdlL2Zyb250ZW5kLWJhc2Uvdml0ZS1jb25maWcuanMnXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyhhc3luYyAoeyBjb21tYW5kLCBtb2RlIH0pID0+IHtcbiAgcmV0dXJuIHtcbiAgICAuLi4oYXdhaXQgYmFzZVZpdGVDb25maWcoeyBjb21tYW5kLCBtb2RlIH0pKSxcblxuXG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQWthLFNBQVMsb0JBQW9CO0FBRS9iLE9BQU8sb0JBQW9CO0FBRTNCLElBQU8sc0JBQVEsYUFBYSxPQUFPLEVBQUUsU0FBUyxLQUFLLE1BQU07QUFDdkQsU0FBTztBQUFBLElBQ0wsR0FBSSxNQUFNLGVBQWUsRUFBRSxTQUFTLEtBQUssQ0FBQztBQUFBLEVBRzVDO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

package/index.js

@@ -4,8 +4,9 @@ export { UserIdentification, ObjectIdentification }
 
 import NotificationsIcon from "./front/src/notifications/NotificationsIcon.vue"
 import SimpleNotification from "./front/src/notifications/SimpleNotification.vue"
+import UnknownNotification from './front/src/notifications/UnknownNotification.vue'
 import { notificationTypes } from "./front/src/notifications/notificationTypes.js"
-export { NotificationsIcon, SimpleNotification, notificationTypes }
+export { NotificationsIcon, SimpleNotification, notificationTypes, UnknownNotification }
 
 import UserIcon from "./front/src/nav/UserIcon.vue"
 export { UserIcon }