@live-change/access-control-frontend 0.1.5 → 0.2.2

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2019-2022 Michał Łaszczewski
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/e2e/codecept.conf.js

@@ -1,6 +1,6 @@
 const { devices } = require('playwright')
 
-const testServerPort = process.env.TEST_URL ? 0 : require('get-port-sync')() 
+const testServerPort = process.env.TEST_URL ? 0 : require('get-port-sync')()
 const testServerUrl = process.env.TEST_URL || `http://localhost:${testServerPort}`
 
 const device = devices['Pixel 2']
@@ -13,8 +13,9 @@ exports.config = {
       require: '@live-change/codeceptjs-helper',
       startServer: !process.env.TEST_URL,
       enableSessions: true,
-      initScript: "./init.js",
+      //initScript: "./init.js",
       port: testServerPort,
+      dbAccess: true,
       dev: true
     },
     VideoHelper: {
@@ -57,4 +58,4 @@ exports.config = {
       enabled: true
     }
   }
-}
+}

package/e2e/inviteExistingUser.test.js

@@ -0,0 +1,23 @@
+const happyPath = false
+
+Feature('access control invite')
+
+Scenario('invite user that already exists', async ({ I }) => {
+
+  const adminUser = await I.haveUser()
+  const anotherUser = await I.haveUser()
+  await I.haveUserWithAccess(adminUser, 'example_Example', 'one', ['administrator'])
+
+  await I.amOnPage('/')
+  await I.amLoggedIn(adminUser)
+
+  I.see('Access Granted!')
+  I.click('Share')
+  I.see('Access Control')
+  I.click('Invite with email')
+  I.see('Invite user with email')
+  I.see('Email address')
+  I.fillField('input[id="email"]', anotherUser.email)
+  I.click('Invite')
+  I.click('Invite')
+})

package/e2e/steps_file.js

@@ -1,11 +1,28 @@
-// in this file you can append custom step methods to 'I' object
+const App = require('@live-change/framework')
+const app = App.app()
 
-const userSteps = require('../../user-frontend/e2e/steps_file.js')
+const userSteps = require('../../user-frontend/e2e/steps_file.js').steps
 
-module.exports = function() {
-  return actor({
+const steps = {
+
+  ...userSteps,
 
-    ...userSteps
+  async haveUserWithAccess(user, objectType, object, roles = ['administrator']) {
+    const I = this
+    const Access = await I.haveModel('accessControl', 'Access')
+    await Access.create({
+      id: App.encodeIdentifier(['user_User', user.id, 'example_Example', 'one']),
+      sessionOrUserType: 'user_User', sessionOrUser: user.id,
+      objectType: 'example_Example', object: 'one',
+      roles
+    })
+  }
 
-  })
 }
+
+module.exports = function() {
+  return actor(steps)
+}
+
+module.exports.steps = steps
+

package/front/src/App.vue

@@ -15,6 +15,7 @@
   import ViewRoot from "@live-change/frontend-base/ViewRoot.vue"
   import "./notifications"
 
+
   import { useMeta } from 'vue-meta'
   const { meta } = useMeta({
     title: 'Title',
@@ -25,10 +26,16 @@
   })
 
   import { watch } from 'vue'
-  import { client as useClient } from '@live-change/vue3-ssr'
+  import { client as useClient, useApi } from '@live-change/vue3-ssr'
   const client = useClient()
   watch(client, (newClient, oldClient) => {
     console.log("WATCH CLIENT", oldClient, '=>', newClient)
   })
 
+  const api = useApi()
+  import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+  import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
+  api.validators.email = emailValidator
+  api.validators.password = passwordValidator
+
 </script>

package/front/src/ConfigurationTestPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
+    <div class="text-center mb-5">
+      <div class="text-900 text-3xl font-medium mb-3">
+        Access Control
+      </div>
+    </div>
+
+    <AccessControl :objectType="objectType" :object="object" />
+  </div>
+</template>
+
+<script>
+
+  import AccessControl from "./configuration/AccessControl.vue"
+
+  const {
+    object, objectType
+  } = defineProps({
+    object: {
+      type: String,
+      default: 'example_Example'
+    },
+    objectType: {
+      type: String,
+      default: 'one'
+    }
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/NavBar.vue

@@ -8,6 +8,27 @@
     </div>
     <div class="flex flex-grow-1"></div>
     <NotificationsIcon />
+    <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">
+        <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>
+        </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>
+        </li>
+      </ul>
+    </div>
+
+
     <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 }">
       <i class="pi pi-bars text-4xl"></i>
@@ -96,8 +117,12 @@
 
   import { NotificationsIcon } from "@live-change/user-frontend"
 
+  import { UserIcon } from "@live-change/user-frontend"
+
+
+
 </script>
 
 <style scoped>
 
-</style>
+</style>

package/front/src/TestPage.vue

@@ -0,0 +1,76 @@
+<template>
+  <Dialog v-model:visible="shareDialog"
+          :modal="true">
+    <template #header>
+      <div class="text-900 text-3xl font-medium">
+        Access Control
+      </div>
+    </template>
+    <AccessControl :objectType="objectType" :object="object" />
+  </Dialog>
+  <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
+    <LimitedAccess :objectType="objectType" :object="object" :requiredRoles="requiredRoles"
+                   v-slot="{ authorized, roles, accesses }">
+      <div v-if="authorized" class="text-right">
+        <Button label="Share" icon="pi pi-share-alt" class="p-button mb-4" @click="showShareDialog" />
+      </div>
+      <div v-if="authorized" class="text-900 text-3xl font-medium mb-3">
+        Access Granted!
+      </div>
+      <div>
+        <p>
+          <strong>Roles:</strong>
+          <span v-for="role in roles" class="mx-1">{{ role }}</span>
+        </p>
+        <div>
+          <strong>Accesses:</strong>
+          <ol>
+            <li v-for="access of accesses">
+              <em class="mr-2">{{ access.id.split(':').join(' : ') }}</em>
+              <span v-for="role in access.roles" class="mx-1">{{ role }}</span>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </LimitedAccess>
+  </div>
+</template>
+
+<script setup>
+
+  import Button from "primevue/button"
+  import Dialog from "primevue/dialog"
+
+  import { ref } from 'vue'
+
+  import LimitedAccess from "./components/LimitedAccess.vue"
+  import AccessControl from "./configuration/AccessControl.vue"
+
+  const {
+    object, objectType, requiredRoles
+  } = defineProps({
+    object: {
+      type: String,
+      default: 'example_Example'
+    },
+    objectType: {
+      type: String,
+      default: 'one'
+    },
+    requiredRoles: {
+      type: Array,
+      default: () => ['reader', 'writer', 'moderator', 'administrator']
+    }
+  })
+
+  const shareDialog = ref(false)
+
+  function showShareDialog() {
+    shareDialog.value = true
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/LimitedAccess.vue

@@ -1,5 +1,5 @@
 <template>
-  <slot v-if="!authorized" name="blocked" :authorized="authorized" :roles="accessRoles" :accesses="accesses">
+  <slot v-if="!hidden && !authorized" name="blocked" :authorized="authorized" :roles="accessRoles" :accesses="accesses">
     <div class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
       <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
       <div class="mr-3">
@@ -10,22 +10,18 @@
       </div>
     </div>
   </slot>
-  <BlockUI :blocked="notAuthorized">
+  <BlockUI v-if="!hidden" :blocked="!authorized">
     <slot :authorized="authorized" :roles="accessRoles" :accesses="accesses"></slot>
   </BlockUI>
-  <div v-if="false">
-    <h4>Bans</h4>
-    <pre>{{ JSON.stringify(bansState, null, '  ') }}</pre>
-    <h4>Counters</h4>
-    <pre>{{ JSON.stringify(countersState, null, '  ') }}</pre>
-  </div>
+  <slot v-if="authorized && hidden" :roles="accessRoles" :accesses="accesses"></slot>
+  <slot v-if="!authorized && hidden" name="alternative" :roles="accessRoles" :accesses="accesses"></slot>
 </template>
 
 <script setup>
 
   import BlockUI from 'primevue/blockui'
 
-  const { objectType, object, objects, requiredRoles } = defineProps({
+  const props = defineProps({
     objectType: {
       type: String,
       default: null
@@ -41,9 +37,15 @@
     requiredRoles: {
       type: Array,
       default: () => []
-    }
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    },
   })
 
+  const { objectType, object, objects, requiredRoles } = props
+
   const allObjects = ((objectType && object) ? [{ objectType, object }] : []).concat(objects || [])
 
   import { provide, computed } from 'vue'
@@ -62,14 +64,17 @@
     for(const access of accessesList) {
       roles = roles.filter(role => access.roles.includes(role))
     }
+    return roles
   })
 
   const authorized = computed(() => {
-    const roles = accessRoles.value
-    for(const requiredRole of requiredRoles) {
-      if(!roles.includes(requiredRole)) return false
+    const clientRoles = accessRoles.value
+    for(const requiredRolesOption of requiredRoles) {
+      if((Array.isArray(requiredRolesOption) ? requiredRolesOption : [requiredRolesOption])
+        .every(role => clientRoles.includes(role))
+      ) return true
     }
-    return true
+    return false
   })
 
 </script>

package/front/src/configuration/AccessControl.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
-    <div class="text-center mb-5">
-      <div class="text-900 text-3xl font-medium mb-3">
-        Access Control
-      </div>
-    </div>
+  <div>
 
     <div class="text-center">
       <Button label="Invite with email" icon="pi pi-envelope" class="p-button mb-4" @click="inviteDialog = true" />

package/front/src/router.js

@@ -20,7 +20,7 @@ export function routes(config = {}) {
     ...inviteRoutes(config),
 
     route({
-      name: 'accessControl:testPage', path: prefix + '', meta: { },
+      name: 'accessControl:configurationPage', path: prefix + 'configuration', meta: { },
       component: () => import("./configuration/AccessControl.vue"),
       props: {
         objectType: 'example_Example',
@@ -28,6 +28,15 @@ export function routes(config = {}) {
       }
     }),
 
+    route({
+      name: 'accessControl:testPage', path: prefix + '', meta: { },
+      component: () => import("./TestPage.vue"),
+      props: {
+        objectType: 'example_Example',
+        object: 'one'
+      }
+    }),
+
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
   ]
 }

package/index.js

@@ -0,0 +1,13 @@
+import LimitedAccess from "./front/src/components/LimitedAccess.vue"
+export { LimitedAccess }
+
+import AccessControl from "./front/src/configuration/AccessControl.vue"
+import AccessInvitations from "./front/src/configuration/AccessInvitations.vue"
+import AccessList from "./front/src/configuration/AccessList.vue"
+import AccessRequests from "./front/src/configuration/AccessRequests.vue"
+import PublicAccess from "./front/src/configuration/PublicAccess.vue"
+export { AccessControl, AccessInvitations, AccessList, AccessRequests, PublicAccess }
+
+import "./front/src/notifications/index.js"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/access-control-frontend",
-  "version": "0.1.5",
+  "version": "0.2.2",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,21 +20,22 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@live-change/access-control-service": "0.2.40",
-    "@live-change/cli": "0.6.8",
-    "@live-change/dao": "0.5.0",
-    "@live-change/dao-vue3": "0.5.0",
-    "@live-change/dao-websocket": "0.5.0",
-    "@live-change/db-admin": "0.5.13",
-    "@live-change/framework": "0.6.8",
-    "@live-change/password-authentication-service": "0.2.41",
-    "@live-change/secret-code-service": "0.2.41",
-    "@live-change/secret-link-service": "0.2.41",
-    "@live-change/session-service": "0.2.41",
-    "@live-change/user-frontend": "^0.1.5",
-    "@live-change/user-service": "0.2.41",
-    "@live-change/vue3-components": "0.2.14",
-    "@live-change/vue3-ssr": "0.2.14",
+    "@live-change/access-control-service": "0.2.51",
+    "@live-change/cli": "0.6.14",
+    "@live-change/dao": "0.5.6",
+    "@live-change/dao-vue3": "0.5.6",
+    "@live-change/dao-websocket": "0.5.6",
+    "@live-change/db-admin": "0.5.17",
+    "@live-change/framework": "0.6.14",
+    "@live-change/frontend-base": "^0.2.2",
+    "@live-change/password-authentication-service": "0.2.51",
+    "@live-change/secret-code-service": "0.2.51",
+    "@live-change/secret-link-service": "0.2.51",
+    "@live-change/session-service": "0.2.51",
+    "@live-change/user-frontend": "^0.2.2",
+    "@live-change/user-service": "0.2.51",
+    "@live-change/vue3-components": "0.2.15",
+    "@live-change/vue3-ssr": "0.2.15",
     "@vueuse/core": "^9.1.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -52,7 +53,7 @@
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.6.8",
+    "@live-change/codeceptjs-helper": "0.6.14",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -62,7 +63,7 @@
     "webdriverio": "^7.20.9"
   },
   "author": "",
-  "license": "ISC",
+  "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "ca3253bac1e9c01143244f5236bd40278a86ebaa"
+  "gitHead": "f7abc1d907b85c321e629086c162e4b622eee91b"
 }

package/server/init.js

@@ -1,35 +1,23 @@
 const App = require('@live-change/framework')
 const app = App.app()
 
+const { createUser } = require('@live-change/user-frontend/server/init-functions.js')
+
 module.exports = async function(services) {
 
   const { PasswordAuthentication } = services.passwordAuthentication.models
   const { PublicAccess, Access, AccessRequest, AccessInvitation } = services.accessControl.models
 
-  async function createUser(name, email, password, user = app.generateUid()) {
-    const passwordHash = PasswordAuthentication.definition.properties.passwordHash.preFilter(password)
-    await services.user.models.User.create({ id: user, roles: [] })
-    await PasswordAuthentication.create({ id: user, user, passwordHash })
-    await services.email.models.Email.create({ id: email, email, user })
-    await services.userIdentification.models.Identification.create({
-      id: App.encodeIdentifier(['user_User', user]), sessionOrUserType: 'user_User', sessionOrUser: user,
-      name
-    })
-    return {
-      id: user,
-      name,
-      email,
-      password
-    }
-  }
-
-  const session = 'Q6OytlOJ54r0tF1BriDB8bEYoGEUIf+i__'
+  const session = 'l5W5GIeTfffiFpfUTkvpjNjrVR6buWDX'
 
   //console.log("MDL", services.passwordAuthentication.models.PasswordAuthentication)
 
-  const user1 = await createUser('Test User 1', 'test1@test.com', 'Testy123', 'u1')
-  const user2 = await createUser('Test User 2 with very long name!', 'test2@test.com', 'Testy123')
-  const user3 = await createUser('Test User 3', 'test3@test.com', 'Testy123')
+  const user1 = await createUser(services,
+    'Test User 1', 'test1@test.com', 'Testy123', 'u1')
+  const user2 = await createUser(services,
+    'Test User 2 with very long name!', 'test2@test.com', 'Testy123')
+  const user3 = await createUser(services,
+    'Test User 3', 'test3@test.com', 'Testy123')
 
   await services.user.models.AuthenticatedUser.create({ id: session, session, user: user1.id })
 
@@ -37,7 +25,7 @@ module.exports = async function(services) {
     "id": app.generateUid(),
     "notificationType": "accessControl_Invitation",
     "objectType": "example_Example",
-    "object": "two",
+    "object": "one",
     "fromType": "user_User",
     "from": user1.id,
     "sessionOrUserType": "user_User",
@@ -46,12 +34,12 @@ module.exports = async function(services) {
     "readState": "new"
   })
 
-  await PublicAccess.create({
+ /* await PublicAccess.create({
     id: App.encodeIdentifier(['example_Example', 'one']),
     objectType: 'example_Example', object: 'one',
     userRoles: ['reader'],
     sessionRoles: ['reader']
-  })
+  })*/
 
   await Access.create({
     id: App.encodeIdentifier(['user_User', user1.id, 'example_Example', 'one']),