@live-change/access-control-frontend 0.0.3

package/front/src/configuration/AccessList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div v-if="synchronizedAccesses.length > 0" class="mb-4">
+    <div class="text-900 font-medium text-xl mb-2">Authorized</div>
+    <div v-for="access of synchronizedAccesses" :key="access.to"
+         class="flex flex-row flex-wrap align-items-center">
+      <div class="col-12 md:col-6 py-1">
+        <UserIdentification :ownerType="access.sessionOrUserType" :owner="access.sessionOrUser"
+                            :data="access.identification" />
+      </div>
+      <div class="col-12 md:col-6 flex flex-row pr-0" v-if="isMounted">
+        <Dropdown v-if="!multiRole && (access.roles?.length ?? 0) <= 1"
+                  id="userPublicAccess" class="w-14em"
+                  style="width: calc(100% - 2.357rem) !important"
+                  :options="['none'].concat(availableRoles)"
+                  :optionLabel="optionLabel"
+                  :modelValue="access.roles?.[0] ?? 'none'"
+                  @update:modelValue="newValue => access.roles = [newValue]"
+                  :feedback="false" toggleMask />
+        <MultiSelect v-else id="userPublicAccess"
+                     style="width: calc(100% - 2.357rem) !important"
+                     :options="availableRoles"
+                     :optionLabel="optionLabel"
+                     v-model="access.roles"
+                     :feedback="false" toggleMask />
+        <Button @click="deleteAccess(access)" icon="pi pi-times"
+                class="p-button-rounded p-button-text p-button-plain ml-2 px-3"
+                style="padding-top: 0.77rem" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Button from "primevue/button"
+  import Dropdown from "primevue/dropdown"
+  import MultiSelect from "primevue/multiselect"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  import { UserIdentification } from "@live-change/user-frontend"
+  import { synchronized, synchronizedList } from "@live-change/vue3-components"
+
+  import { computed, watch, ref, onMounted } from 'vue'
+
+  const { object, objectType, availableRoles, multiRole } = defineProps({
+    object: {
+      type: String,
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    availableRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    multiRole: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  function optionLabel(option) {
+    if(option == 'none') return 'none'
+    return option
+  }
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+  const accessControlApi = actions().accessControl
+
+  const [ accesses ] = await Promise.all([
+    live(path().accessControl.objectOwnedAccesses({ object, objectType })
+        .with(access => path().userIdentification.sessionOrUserOwnedIdentification({
+          sessionOrUserType: access.sessionOrUserType, sessionOrUser: access.sessionOrUser
+        }).bind('identification'))
+    )
+  ])
+
+  const synchronizedAccessesList = synchronizedList({
+    source: accesses,
+    update: accessControlApi.updateSessionOrUserAndObjectOwnedAccess,
+    delete: accessControlApi.resetSessionOrUserAndObjectOwnedAccess,
+    identifiers: { object, objectType },
+    objectIdentifiers: ({ to, sessionOrUser, sessionOrUserType }) =>
+        ({ access: to, sessionOrUser, sessionOrUserType, object, objectType }),
+    onSave: () => toast.add({ severity: 'info', summary: 'Access saved', life: 1500 }),
+    recursive: true
+  })
+  const synchronizedAccesses = synchronizedAccessesList.value
+
+  function deleteAccess(access) {
+    console.log("DELETE ACCESS", access)
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to revoke user "${access.identification.name}" access?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        await synchronizedAccessesList.delete(access)
+        /*await accessControlApi.deleteObjectRelatedAccess({
+          access: access.to, object: access.object, objectType: access.objectType
+        })*/
+        toast.add({ severity:'info', summary: 'Access Revoked', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+</script>

package/front/src/configuration/AccessRequests.vue

@@ -0,0 +1,132 @@
+<template>
+  <div v-if="synchronizedAccessRequests.length > 0" class="mb-4">
+    <div class="text-900 font-medium text-xl mb-2">Access Requests</div>
+    <div v-for="access of synchronizedAccessRequests" :key="access.to"
+         class="flex flex-row flex-wrap align-items-center">
+      <div class="col-12 md:col-6 py-1">
+        <UserIdentification :ownerType="access.sessionOrUserType" :owner="access.sessionOrUser"
+                            :data="access.identification" />
+      </div>
+      <div class="col-12 md:col-6 flex flex-row pr-0" v-if="isMounted">
+        <Dropdown v-if="!multiRole && (access.roles?.length ?? 0) <= 1" id="userPublicAccess" class="w-14em"
+                  style="width: calc(100% - 4.714rem) !important"
+                  :options="['none'].concat(availableRoles)"
+                  :optionLabel="optionLabel"
+                  :modelValue="access.roles?.[0] ?? 'none'"
+                  @update:modelValue="newValue => access.roles = [newValue]"
+                  :feedback="false" toggleMask />
+        <MultiSelect v-else id="userPublicAccess"
+                     style="width: calc(100% - 4.714rem) !important"
+                     :options="availableRoles"
+                     :optionLabel="optionLabel"
+                     v-model="access.roles"
+                     :feedback="false" toggleMask />
+        <Button @click="acceptAccessRequest(access)" icon="pi pi-check"
+                class="p-button-rounded p-button-text p-button-plain ml-2 px-3"
+                style="padding-top: 0.77rem" />
+        <Button @click="deleteAccessRequest(access)" icon="pi pi-times"
+                class="p-button-rounded p-button-text p-button-plain px-3"
+                style="padding-top: 0.77rem" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Button from "primevue/button"
+  import Dropdown from "primevue/dropdown"
+  import MultiSelect from "primevue/multiselect"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  import { UserIdentification } from "@live-change/user-frontend"
+  import { synchronized, synchronizedList } from "@live-change/vue3-components"
+
+  import { computed, watch, ref, onMounted } from 'vue'
+
+  const { object, objectType, availableRoles, multiRole } = defineProps({
+    object: {
+      type: String,
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    availableRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    multiRole: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  function optionLabel(option) {
+    if(option == 'none') return 'none'
+    return option
+  }
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+  const accessControlApi = actions().accessControl
+
+  const [ accessRequests ] = await Promise.all([
+    live(path().accessControl.objectOwnedAccessRequests({ object, objectType })
+        .with(access => path().userIdentification.sessionOrUserOwnedIdentification({
+          sessionOrUserType: access.sessionOrUserType, sessionOrUser: access.sessionOrUser
+        }).bind('identification'))
+        .action('delete', ({ sessionOrUserType, sessionOrUser, objectType, object }) =>
+          path().accessControl.resetSessionOrUserAndObjectOwnedAccessRequest(
+            { sessionOrUserType, sessionOrUser, objectType, object }
+          )
+        )
+    )
+  ])
+
+  const synchronizedAccessRequestsList = synchronizedList({
+    source: accessRequests,
+    update: accessControlApi.updateSessionOrUserAndObjectOwnedAccessRequest,
+    delete: accessControlApi.resetSessionOrUserAndObjectOwnedAccessRequest,
+    identifiers: { object, objectType },
+    objectIdentifiers: ({ to, sessionOrUser, sessionOrUserType }) =>
+        ({ accessRequest: to, sessionOrUser, sessionOrUserType, object, objectType }),
+    onSave: () => toast.add({ severity: 'info', summary: 'Access request saved', life: 1500 }),
+    recursive: true
+  })
+  const synchronizedAccessRequests = synchronizedAccessRequestsList.value
+
+  function deleteAccessRequest(accessRequest) {
+    console.log("DELETE ACCESS REQUEST", accessRequest)
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to delete user "${accessRequest.identification.name}" access request?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        await synchronizedAccessRequestsList.delete(accessRequest)
+        //accessRequest.delete()
+        toast.add({ severity:'info', summary: 'Access Request Deleted', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+  async function acceptAccessRequest(accessRequest) {
+    console.log("ACCEPT ACCESS REQUEST", accessRequest)
+    await accessControlApi.acceptAccessRequest({
+      ...accessRequest, access: accessRequest.to
+    })
+    toast.add({ severity:'info', summary: 'Access Request accepted', life: 1500 })
+  }
+
+</script>

package/front/src/configuration/PublicAccess.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="grid formgrid p-fluid mb-2">
+    <div class="p-field field mb-4 col-12 md:col-6" v-if="isMounted && sessionRolesVisible">
+      <label for="publicAccess" class="block text-900 font-medium mb-2">Public access:</label>
+      <Dropdown v-if="!multiRole && (synchronizedPublicAccess.sessionRoles?.length ?? 0) <= 1"
+                id="publicAccess" class="w-full" inputClass="w-full"
+                :options="['none'].concat(availableSessionRoles)"
+                :optionLabel="optionLabel"
+                :modelValue="synchronizedPublicAccess.sessionRoles?.[0] ?? 'none'"
+                @update:modelValue="newValue => synchronizedPublicAccess.sessionRoles = [newValue]"
+                :feedback="false" toggleMask />
+      <MultiSelect v-else
+                   id="publicAccess" class="w-full" inputClass="w-full"
+                   :options="availableSessionRoles"
+                   :optionLabel="optionLabel"
+                   v-model="synchronizedPublicAccess.sessionRoles"
+                   :feedback="false" toggleMask />
+    </div>
+    <div class="p-field field mb-4 col-12 md:col-6" v-if="isMounted && userRolesVisible">
+      <label for="userPublicAccess" class="block text-900 font-medium mb-2">Public access for users:</label>
+      <Dropdown v-if="!multiRole && (synchronizedPublicAccess.userRoles?.length ?? 0) <= 1"
+                id="userPublicAccess" class="w-full" inputClass="w-full"
+                :options="['none'].concat(availableUserRoles)"
+                :optionLabel="optionLabel"
+                :modelValue="synchronizedPublicAccess.userRoles?.[0] ?? 'none'"
+                @update:modelValue="newValue => synchronizedPublicAccess.userRoles = [newValue]"
+                :feedback="false" toggleMask />
+      <MultiSelect v-else id="userPublicAccess" class="w-full" inputClass="w-full"
+                   :options="availableUserRoles"
+                   :optionLabel="optionLabel"
+                   v-model="synchronizedPublicAccess.userRoles"
+                   :feedback="false" toggleMask />
+    </div>
+    <div class="p-field field mb-4 col-12" v-if="isMounted && requestedRolesVisible">
+      <label for="availablePublicAccess" class="block text-900 font-medium mb-2">Roles available to request:</label>
+      <MultiSelect id="userPublicAccess" class="w-full" inputClass="w-full"
+                   :options="availableRequestedRoles"
+                   :optionLabel="optionLabel"
+                   v-model="synchronizedPublicAccess.availableRoles"
+                   :feedback="false" toggleMask />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Dropdown from "primevue/dropdown"
+  import MultiSelect from "primevue/multiselect"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  import { synchronized } from "@live-change/vue3-components"
+
+  function optionLabel(option) {
+    if(option == 'none') return 'none'
+    return option
+  }
+
+  import { computed, watch, ref, onMounted } from 'vue'
+
+  const {
+    object, objectType,
+    availableRequestedRoles, availableSessionRoles, availableUserRoles,
+    sessionRolesVisible, userRolesVisible, requestedRolesVisible,
+    multiRole
+  } = defineProps({
+    object: {
+      type: String,
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    sessionRolesVisible: {
+      type: Boolean,
+      default: true
+    },
+    userRolesVisible: {
+      type: Boolean,
+      default: true
+    },
+    requestedRolesVisible: {
+      type: Boolean,
+      default: true
+    },
+    availableRequestedRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    availableSessionRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    availableUserRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    multiRole: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+  const accessControlApi = actions().accessControl
+
+  const [ publicAccess ] = await Promise.all([
+    live(path().accessControl.objectOwnedPublicAccess({ object, objectType }))
+  ])
+
+  const synchronizedPublicAccess = synchronized({
+    source: publicAccess,
+    update: accessControlApi.setOrUpdateObjectOwnedPublicAccess,
+    identifiers: { object, objectType },
+    recursive: true,
+    onSave: () => toast.add({ severity: 'info', summary: 'Public access saved', life: 1500 })
+  }).value
+
+</script>

package/front/src/configuration/routes.js

@@ -0,0 +1,10 @@
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+  ]
+}
+
+export default routes

package/front/src/entry-client.js

@@ -0,0 +1,6 @@
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+
+clientEntry(App, createRouter)

package/front/src/entry-server.js

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

package/front/src/invite/InviteDialog.vue

@@ -0,0 +1,117 @@
+<template>
+  <Dialog :visible="visible" @update:visible="v => $emit('update:visible', v)"
+          :modal="true" class="w-full sm:w-9 md:w-8 lg:w-6">
+    <template #header>
+      <h3>Invite user with email</h3>
+    </template>
+
+    <command-form service="accessControl" action="inviteEmail"
+                  ref="inviteForm"
+                  v-slot="{ data }"
+                  :parameters="{ objectType, object }"
+                  :initialValues="{ roles: availableRoles }"
+                  @done="handleInvited" keepOnDone>
+
+      <div class="flex flex-row flex-wrap align-items-center" style="margin-left: -0.5rem; margin-right: -0.5rem;">
+        <div class="col-12 md:col-6 py-1">
+          <div class="p-field mb-3">
+            <label for="email" class="block text-900 font-medium mb-2">
+              Email address
+            </label>
+            <InputText id="email" type="text" class="w-full"
+                       aria-describedby="email-help" :class="{ 'p-invalid': data.emailError }"
+                       v-model="data.email" />
+            <small id="email-help" class="p-error">{{ data.emailError }}</small>
+          </div>
+        </div>
+        <div class="col-12 md:col-6">
+          <div class="p-field mb-3">
+            <label for="inviteAccess" class="block text-900 font-medium mb-2">
+              Roles
+            </label>
+            <Dropdown v-if="!multiRole" id="inviteAccess" class="w-14em w-full"
+                      :options="['none'].concat(availableRoles)"
+                      :optionLabel="optionLabel"
+                      :modelValue="data.roles?.[0] ?? 'none'"
+                      @update:modelValue="newValue => data.roles = [newValue]"
+                      :feedback="false" toggleMask />
+            <MultiSelect v-if="multiRole" id="inviteAccess" class="w-full"
+                         :options="availableRoles"
+                         :optionLabel="optionLabel"
+                         v-model="data.roles"
+                         :feedback="false" toggleMask />
+            <small id="email-help" class="p-error">{{ data.rolesError }}</small>
+          </div>
+
+        </div>
+      </div>
+      <div class="p-field mb-1">
+        <label for="inviteMessage" class="block text-900 font-medium mb-2">
+          Message ( optional )
+        </label>
+        <Textarea id="inviteMessage" v-model="data.message" :autoResize="true" rows="3" class="w-full" />
+      </div>
+
+    </command-form>
+
+    <template #footer>
+      <Button label="Invite" icon="pi pi-envelope" autofocus @click="inviteForm.submit()" />
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import Dropdown from "primevue/dropdown"
+  import MultiSelect from "primevue/multiselect"
+
+  import Dialog from 'primevue/dialog'
+  import InputText from 'primevue/inputtext'
+  import Textarea from 'primevue/textarea'
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  import { ref } from 'vue'
+  import { toRefs } from "@vueuse/core"
+
+  const props = defineProps({
+    object: {
+      type: String,
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    availableRoles: {
+      type: Array,
+      default: () => ['reader']
+    },
+    multiRole: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const { visible, availableRoles, multiRole, object, objectType } = toRefs(props)
+
+  function optionLabel(option) {
+    if(option == 'none') return 'none'
+    return option
+  }
+
+  const inviteForm = ref()
+  function handleInvited() {
+    emit('update:visible', false)
+    toast.add({ severity:'info', summary: 'Invitation sent!', life: 1500 })
+    console.log("INVITED", arguments)
+  }
+
+</script>

package/front/src/invite/InviteEmail.vue

@@ -0,0 +1,112 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <div data-html class="message m-6">
+    <p class="text-lg">
+      Hello!
+    </p>
+    <p>
+      <span v-if="from?.name">
+        Our user
+        <strong>{{ from.name }}</strong>
+      </span>
+      <span v-else>One of our users</span>
+       invited you to use X by entering your email address.
+    </p>
+    <div v-if="data.message.trim().length > 0">
+      <p>He left message for you:</p>
+      <blockquote class="font-italic">{{ data.message }}</blockquote>
+    </div>
+    <p>
+      if you already have an account, you can add this email to your account
+      and the invitation will be linked to your account.
+    </p>
+    <p>
+      Click the button below:
+    </p>
+    <div>
+      <a :href="linkAddress" class="no-underline">
+        <Button label="Confirm email" class="p-button-lg" />
+      </a>
+    </div>
+    <p>
+      Or copy this address to your browser address bar:<br>
+      <a :href="linkAddress">
+        {{ linkAddress }}
+      </a>
+    </p>
+    <p>
+      Let us know in case it's not for you.
+    </p>
+    <p>
+      See you soon<br>
+      Live Change Team
+    </p>
+    <img src="/images/logo128.png">
+  </div>
+  <pre class="message" data-text>
+    Hello!
+
+    {{ from?.name ? `Our user ${from?.name}` : 'One of our users' }} invited you to use X by entering your email address.
+
+    Click link below or copy address to your browser address bar:
+
+    {{ linkAddress }}
+
+    Let us know in case it's not for you.
+
+    See you soon
+    Live Change Team
+  </pre>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+
+  const { action, contact, json } = defineProps({
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+
+  const secrets = data.secrets
+  const secretLink = secrets.find(secret => secret.type == 'link')
+
+  const [ from ] = await Promise.all([
+    live(path().userIdentification.sessionOrUserOwnedIdentification(
+        { sessionOrUserType: data.fromType, sessionOrUser: data.from }))
+  ])
+
+  const metadata = {
+    from: '<noreply@flipchart.live>',
+    subject: `${from?.name ?? 'Our user'} invited you to ${data.objectType}`,
+    to: contact
+  }
+
+  const linkAddress = ENV_BASE_HREF + '/link/' + secretLink.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>

package/front/src/invite/routes.js

@@ -0,0 +1,11 @@
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+    route({ name: 'accessControl:email:invite', path: '/_email/inviteWithMessage/:contact/:json',
+      props: true, meta: { raw: true }, component: () => import("./InviteEmail.vue") }),
+  ]
+}
+
+export default routes