@live-change/url-frontend 0.2.5 → 0.2.6

package/front/src/components/NotAuthorized.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
+    <div class="text-center code404">
+      <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">403</span>
+    </div>
+    <div class="mt-6 mb-5 font-bold text-6xl text-900 text-center">Not authorized</div>
+    <p class="text-700 text-3xl mt-0 mb-6 text-center">
+      You do not have sufficient privileges to see this page.
+    </p>
+    <div class="text-center">
+      <Button v-if="canGoBack" @click="goBack()"
+              class="p-button-text mr-2" label="Go Back" icon="pi pi-arrow-left" />
+      <router-link to="/" replace class="no-underline">
+        <Button label="Go to Home" icon="pi pi-home" />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Button from "primevue/button"
+
+  import { computed, ref, onMounted } from 'vue'
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const canGoBack = computed(() => {
+    return isMounted.value && history.length > 1
+  })
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  function goBack() {
+    router.back()
+  }
+
+  import { useResponse } from "@live-change/frontend-base"
+  useResponse({ status: 403 })
+
+</script>
+
+<style scoped>
+  .code404 {
+    background: radial-gradient(50% 109137.91% at 50% 50%, rgba(233, 30, 99, 0.1) 0%, rgba(254, 244, 247, 0) 100%);
+  }
+</style>

package/front/src/components/NotFound.vue

@@ -34,6 +34,8 @@
     router.back()
   }
 
+  import { useResponse } from "@live-change/frontend-base"
+  useResponse({ status: 404 })
 </script>
 
 <style scoped>

package/front/src/components/ResolveUrl.vue

@@ -1,22 +1,15 @@
 <template>
-  <slot v-if="url" :url="url" :target="url.target" :class="clazz" :style="style">
+  <slot v-if="url && accessible" :url="url" :target="url.target" :class="clazz" :style="style">
     <div class="w-full surface-card p-4 shadow-2 border-round">
       <h2>Url resolved:</h2>
       <pre>{{ JSON.stringify(url, null, "  ") }}</pre>
     </div>
   </slot>
+  <slot v-else-if="url">
+    <NotAuthorized></NotAuthorized>
+  </slot>
   <slot v-else name="notFound" :path="urlPath" :class="clazz" :style="style">
-    <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-      <div style="background: radial-gradient(50% 109137.91% at 50% 50%, rgba(233, 30, 99, 0.1) 0%, rgba(254, 244, 247, 0) 100%);" class="text-center">
-        <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">404</span>
-      </div>
-      <div class="mt-6 mb-5 font-bold text-6xl text-900 text-center">Page Not Found</div>
-      <p class="text-700 text-3xl mt-0 mb-6 text-center">Sorry, we couldn't find the page.</p>
-      <div class="text-center">
-        <Button class="p-button-text mr-2" label="Go Back" icon="pi pi-arrow-left" />
-        <Button label="Go to Dashboard" icon="pi pi-home" />
-      </div>
-    </div>
+    <NotFound />
   </slot>
 </template>
 
@@ -24,6 +17,9 @@
 
   import Button from "primevue/button"
 
+  import NotFound from "./NotFound.vue"
+  import NotAuthorized from "./NotAuthorized.vue"
+
   import { computed, watch, ref, onMounted } from 'vue'
   import { toRefs } from "@vueuse/core"
   import { useHost } from "@live-change/frontend-base"
@@ -40,6 +36,10 @@
       type: String,
       default: 'content_Page'
     },
+    requiredRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
     fetchMore: {
       type: Array,
       default: () => []
@@ -47,7 +47,7 @@
     class: {},
     style: {}
   })
-  const { path: urlPath, targetType, fetchMore, class: clazz, style } = toRefs(props)
+  const { path: urlPath, targetType, fetchMore, class: clazz, style, requiredRoles } = toRefs(props)
 
   const urlDomain = useHost()
 
@@ -59,12 +59,13 @@
   const p = path()
 
   const liveUrlPath = (targetType, domain, urlPath, more) => {
-    let fetchPath = p.url.urlsByTargetAndPath({targetType, domain, path: urlPath})
+    let fetchPath = p.url.urlsByTargetAndPath({ targetType, domain, path: urlPath })
       //.with(url => p.url.targetOwnedCanonical({ targetType, target: url.target }).bind('canonical'))
       .with(url => url.type.$switch({
         'canonical': null,
-        'redirect': p.url.targetOwnedCanonical({targetType, target: url.target})
+        'redirect': p.url.targetOwnedCanonical({ targetType, target: url.target })
       }).$bind('canonical'))
+      .with(url => p.accessControl.myAccessTo({ objectType: targetType, object: url.target }).bind('access'))
     for (let fetch of more) {
       fetchPath = fetchPath.with(url => fetch(url))
     }
@@ -77,15 +78,28 @@
   const livePathWithoutDomain = computed(
     () => liveUrlPath(targetType.value, '', urlPath.value, fetchMore.value)
   )
-  const [domainUrls, globalUrls] = await Promise.all([
-    live(livePathWithDomain),
+
+  const [/*domainUrls,*/ globalUrls] = await Promise.all([
+  //  live(livePathWithDomain),
     live(livePathWithoutDomain)
   ])
+  const domainUrls = ref([])
+  console.log("OK!", domainUrls.value, globalUrls.value)
   const url = computed(() => {
     if(domainUrls.value.length > 0) return domainUrls.value[0]
     if(globalUrls.value.length > 0) return globalUrls.value[0]
     return null
   })
+  const accessible = computed(() => {
+    if(!(requiredRoles?.value?.length)) return true
+    if(!url.value) return undefined
+    const clientRoles = url.value.access?.roles ?? []
+    for(const requiredRolesOption of requiredRoles.value) {
+      if((Array.isArray(requiredRolesOption) ? requiredRolesOption : [requiredRolesOption])
+        .every(role => clientRoles.includes(role))
+      ) return true
+    }
+  })
 
   if(typeof window != 'undefined') {
     watch(() => url && isMounted.value, async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/url-frontend",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,16 +21,16 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@live-change/cli": "0.7.2",
-    "@live-change/dao": "0.5.6",
-    "@live-change/dao-vue3": "0.5.6",
-    "@live-change/dao-websocket": "0.5.6",
-    "@live-change/framework": "0.7.2",
-    "@live-change/password-authentication-service": "0.3.0",
-    "@live-change/prosemirror-service": "0.3.0",
-    "@live-change/secret-code-service": "0.3.0",
-    "@live-change/secret-link-service": "0.3.0",
-    "@live-change/session-service": "0.3.0",
+    "@live-change/cli": "0.7.4",
+    "@live-change/dao": "0.5.8",
+    "@live-change/dao-vue3": "0.5.8",
+    "@live-change/dao-websocket": "0.5.8",
+    "@live-change/framework": "0.7.4",
+    "@live-change/password-authentication-service": "0.3.2",
+    "@live-change/prosemirror-service": "0.3.2",
+    "@live-change/secret-code-service": "0.3.2",
+    "@live-change/secret-link-service": "0.3.2",
+    "@live-change/session-service": "0.3.2",
     "@live-change/vue3-components": "0.2.15",
     "@live-change/vue3-ssr": "0.2.15",
     "@tiptap/extension-blockquote": "^2.0.0-beta.29",
@@ -73,7 +73,7 @@
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.2",
+    "@live-change/codeceptjs-helper": "0.7.4",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -85,5 +85,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "76ac0dd54acf671cb564a1aa943d81a9e2bc99e9"
+  "gitHead": "323185f6d910912093b3c92df102d0f938cef367"
 }