26014 - auth web permissions updates

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.8.15",
+  "version": "2.9.0",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/account-settings/account-info/AccountInfo.vue

@@ -131,7 +131,7 @@
             class="value"
             aria-labelledby="adminContact"
           >
-            <OrgAdminContact />
+            <OrgAdminContact :orgId="orgId"/>
           </div>
         </div>
 
@@ -298,6 +298,7 @@ export default defineComponent({
     AccountMailingAddress,
     AccountAccessType
   },
+  props: ['orgId'],
   setup (props, { root }) {
     const codesStore = useCodesStore()
     const orgStore = useOrgStore()
@@ -309,7 +310,6 @@ export default defineComponent({
       currentOrgPaymentType,
       currentOrgAddress,
       permissions,
-      getAccountFromSession,
       anonAccount,
       isGovmAccount,
       isStaffAccount,
@@ -343,16 +343,15 @@ export default defineComponent({
       isBusinessAccount: computed(() => orgStore.isBusinessAccount),
       baseAddress: computed(() => currentOrgAddress.value),
 
-      isStaff: computed(() => userStore.currentUser.roles.includes(Role.Staff)) || userStore.currentUser.roles.includes(Role.ContactCentreStaff),
+      isStaff: computed(() => userStore.currentUser.roles.includes(Role.Staff)) || userStore.currentUser.roles.includes(Role.ExternalStaffReadonly),
       isSuspendButtonVisible: computed(() => (
         (currentOrganization.value.statusCode === AccountStatus.ACTIVE ||
         currentOrganization.value.statusCode === AccountStatus.SUSPENDED) &&
         userStore.currentUser.roles.includes(Role.StaffSuspendAccounts)
       )),
       isDeactivateButtonVisible: computed(() => currentOrganization.value?.statusCode !== AccountStatus.INACTIVE),
       canChangeAccessType: computed(() => (
-        userStore.currentUser.roles.includes(Role.StaffManageAccounts) &&
-        !userStore.currentUser.roles.includes(Role.ContactCentreStaff)
+        userStore.currentUser.roles.includes(Role.StaffManageAccounts)
       )),
       isAdminContactViewable: computed(() => [Permission.VIEW_ADMIN_CONTACT].some(per => permissions.value.includes(per))),
       isAccountStatusActive: computed(() => currentOrganization.value.statusCode === AccountStatus.ACTIVE),
@@ -368,7 +367,7 @@ export default defineComponent({
         currentOrgAddress.value ? Object.keys(currentOrgAddress.value).length === 0 : true
       )),
       nameChangeNotAllowed: computed(() => (anonAccount.value || isGovmAccount.value)) &&
-      userStore.currentUser.roles.includes(Role.ContactCentreStaff)
+      userStore.currentUser.roles.includes(Role.ExternalStaffReadonly)
     })
 
     const suspensionSelectRules = [
@@ -591,8 +590,6 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      const accountSettings = getAccountFromSession()
-      await orgStore.syncOrganization(accountSettings?.id)
       setAccountChangedHandler(setup)
       await setup()
     })

auth-web/src/components/auth/account-settings/account-info/OrgAdminContact.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 import {
   Member,
   MembershipType,
@@ -49,12 +49,13 @@ import { useOrgStore } from '@/stores/org'
 
 })
 export default class OrgAdminContact extends Vue {
+  @Prop() private orgId: number
   private activeOrgMembers!: Member[]
-  private readonly syncActiveOrgMembers!: () => Member[]
+  private readonly syncActiveOrgMembers!: (orgId: number) => Member[]
   private readonly currentOrganization!: Organization
 
   private async mounted () {
-    this.syncActiveOrgMembers()
+    this.syncActiveOrgMembers(this.orgId)
   }
 
   private get getActiveAdmins (): Member[] {

auth-web/src/components/auth/account-settings/team-management/InvitationsDataTable.vue

@@ -30,7 +30,7 @@
     <template #[`item.action`]="{ item }">
       <!-- Resend Invitation -->
       <v-btn
-        v-if="canApproveOrDeny()"
+        v-can:EDIT_USER.hide
         icon
         class="mr-1"
         aria-label="Resend invitation"
@@ -43,7 +43,7 @@
 
       <!-- Remove Invitation -->
       <v-btn
-        v-if="canApproveOrDeny()"
+        v-can:EDIT_USER.hide
         icon
         aria-label="Remove Invitation"
         title="Remove Invitation"
@@ -57,72 +57,80 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Vue } from 'vue-property-decorator'
+import { computed, defineComponent, reactive, ref, toRefs } from '@vue/composition-api'
+import { storeToRefs } from 'pinia'
 import CommonUtils from '@/util/common-util'
 import { Invitation } from '@/models/Invitation'
-import { Role } from '@/util/constants'
-import { mapState } from 'pinia'
 import { useOrgStore } from '@/stores/org'
 import { useUserStore } from '@/stores/user'
 
-@Component({
-  computed: {
-    ...mapState(useOrgStore, ['pendingOrgInvitations']),
-    ...mapState(useUserStore, ['currentUser'])
-  }
-})
-export default class InvitationsDataTable extends Vue {
-  private readonly pendingOrgInvitations!: Invitation[]
-  readonly headerInvitations = [
-    {
-      text: 'Email',
-      align: 'left',
-      sortable: true,
-      value: 'recipientEmail'
-    },
-    {
-      text: 'Invitation Sent',
-      align: 'left',
-      sortable: true,
-      value: 'sentDate'
-    },
-    {
-      text: 'Expires',
-      align: 'left',
-      sortable: true,
-      value: 'expiresOn'
-    },
-    {
-      text: 'Actions',
-      align: 'right',
-      value: 'action',
-      sortable: false
-    }
-  ]
+export default defineComponent({
+  name: 'InvitationsDataTable',
+  emits: ['confirmRemoveInvite', 'resend'],
+  setup (props, { emit }) {
+    const orgStore = useOrgStore()
+    const userStore = useUserStore()
 
-  private canApproveOrDeny (): boolean {
-    return !this.currentUser.roles?.includes(Role.ContactCentreStaff)
-  }
+    const { pendingOrgInvitations, currentMembership } = storeToRefs(orgStore)
+    const { currentUser } = storeToRefs(userStore)
 
-  formatDate = CommonUtils.formatDisplayDate
+    const headerInvitations = [
+      {
+        text: 'Email',
+        align: 'left',
+        sortable: true,
+        value: 'recipientEmail'
+      },
+      {
+        text: 'Invitation Sent',
+        align: 'left',
+        sortable: true,
+        value: 'sentDate'
+      },
+      {
+        text: 'Expires',
+        align: 'left',
+        sortable: true,
+        value: 'expiresOn'
+      },
+      {
+        text: 'Actions',
+        align: 'right',
+        value: 'action',
+        sortable: false
+      }
+    ]
 
-  getIndexedTag (tag, index): string {
-    return `${tag}-${index}`
-  }
+    const state = reactive({
+      indexedInvitations: computed(() =>
+        pendingOrgInvitations.value.map((item: Invitation, index: number) => ({
+          index,
+          ...item
+        })))
+    })
 
-  get indexedInvitations () {
-    return this.pendingOrgInvitations.map((item, index) => ({
-      index,
-      ...item
-    }))
-  }
+    function getIndexedTag (tag: string, index: number): string {
+      return `${tag}-${index}`
+    }
 
-  @Emit()
-  confirmRemoveInvite () {}
+    function confirmRemoveInvite (invitation) {
+      emit('confirm-remove-invite', invitation)
+    }
 
-  @Emit()
-  resend () {}
-}
+    function resend (invitation) {
+      emit('resend', invitation)
+    }
+
+    return {
+      headerInvitations,
+      ...toRefs(state),
+      formatDate: CommonUtils.formatDisplayDate,
+      getIndexedTag,
+      confirmRemoveInvite,
+      resend
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>

auth-web/src/components/auth/account-settings/team-management/MemberDataTable.vue

@@ -231,7 +231,7 @@
 </template>
 
 <script lang="ts">
 import { AccessType, LoginSource, Permission, Role } from '@/util/constants'
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
 import { Member, MembershipStatus, MembershipType, Organization, RoleInfo } from '@/models/Organization'
 import { mapActions, mapState } from 'pinia'
@@ -404,10 +404,6 @@
   }
 
   private canChangeRole (memberBeingChanged: Member): boolean {
-    if (this.currentUser.roles?.includes(Role.ContactCentreStaff)) {
-      return false
-    }
-
     if (this.currentMembership.membershipStatus !== MembershipStatus.Active) {
       return false
     }
@@ -435,11 +431,6 @@
   }
 
   private canRemove (memberToRemove: Member): boolean {
-    // Contact Centre Staff can't remove anyone
-    if (this.currentUser.roles?.includes(Role.ContactCentreStaff)) {
-      return false
-    }
-
     // Can't remove yourself
     if (this.currentMembership.user?.username === memberToRemove.user.username) {
       return false

auth-web/src/components/auth/account-settings/team-management/PendingMemberDataTable.vue

@@ -28,7 +28,7 @@
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn
-        v-if="canApproveOrDeny()"
+        v-can:EDIT_USER.hide
         icon
         class="mr-1"
         aria-label="Approve user access to this account"
@@ -39,7 +39,7 @@
         <v-icon>mdi-check-circle-outline</v-icon>
       </v-btn>
       <v-btn
-        v-if="canApproveOrDeny()"
+        v-can:EDIT_USER.hide
         icon
         aria-label="Deny access to this account"
         title="Deny access to this account"
@@ -56,7 +56,6 @@
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
 import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
 import { Member } from '@/models/Organization'
-import { Role } from '@/util/constants'
 import { mapState } from 'pinia'
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 import moment from 'moment'
@@ -88,10 +87,6 @@ export default class PendingMemberDataTable extends Vue {
     }
   ]
 
-  private canApproveOrDeny (): boolean {
-    return !this.currentUser.roles?.includes(Role.ContactCentreStaff)
-  }
-
   getIndexedTag (tag, index): string {
     return `${tag}-${index}`
   }

auth-web/src/components/auth/account-settings/transaction/Transactions.vue

@@ -115,8 +115,8 @@
 </template>
 
 <script lang="ts">
 import { Account, Pages } from '@/util/constants'
 import { MembershipType, OrgPaymentDetails } from '@/models/Organization'
 import { Ref, computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import { useAccountChangeHandler, useTransactions } from '@/composables'
 import { BaseTableHeaderI } from '@/components/datatable/interfaces'
@@ -137,11 +137,11 @@
     showExport: { default: true },
     title: { default: '' }
   },
   setup (props, { root }) {
     const orgStore = useOrgStore()
     const currentOrgPaymentDetails = computed(() => orgStore.currentOrgPaymentDetails)
     const currentOrganization = computed(() => orgStore.currentOrganization)
     const currentMembership = computed(() => orgStore.currentMembership)
 
     const csvErrorDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
     const csvErrorTextBasic = 'We were unable to process your CSV export. Please try again later.'
@@ -188,13 +188,6 @@
     })
 
     const credit = ref(0)
-
-    const isTransactionsAllowed = computed((): boolean => {
-      return [Account.PREMIUM, Account.STAFF, Account.SBC_STAFF]
-        .includes(currentOrganization.value.orgType as Account) &&
-        [MembershipType.Admin, MembershipType.Coordinator].includes(currentMembership.value.membershipTypeCode)
-    })
-
     const getCredits = async () => {
       const accountId = currentOrgPaymentDetails.value?.accountId
       if (!accountId || Number(accountId) !== currentOrganization.value?.id) {
@@ -206,18 +199,12 @@
     }
 
     const initialize = () => {
-      if (!isTransactionsAllowed.value) {
-        // if the account switching happening when the user is already in the transaction page,
-        // redirect to account-info if account is not allowed to view transactions
-        root.$router.push(`/${Pages.MAIN}/${currentOrganization.value.id}/settings/account-info`)
-      } else {
-        setAccountChangedHandler(initialize)
-        setViewAll(props.extended)
-        clearAllFilters(true)
-        defaultSearchToOneYear()
-        loadTransactionList()
-        getCredits()
-      }
+      setAccountChangedHandler(initialize)
+      setViewAll(props.extended)
+      clearAllFilters(true)
+      defaultSearchToOneYear()
+      loadTransactionList()
+      getCredits()
     }
 
     const exportCSV = async () => {

auth-web/src/components/auth/common/ProductTOS.vue

@@ -69,7 +69,7 @@ export default defineComponent({
     const state = reactive({
       termsAccepted: false,
       istosTouched: false,
-      canAcceptTos: computed(() => !userStore?.currentUser?.roles.includes(Role.ContactCentreStaff))
+      canAcceptTos: computed(() => !userStore?.currentUser?.roles.includes(Role.ExternalStaffReadonly))
     })
 
     watch(() => props.isTOSAlreadyAccepted, (newTos, oldTos) => {

auth-web/src/components/auth/mixins/AccountMixin.vue

@@ -54,5 +54,9 @@ export default class AccountMixin extends Vue {
   get isSbcStaffAccount (): boolean {
     return this.currentOrganization?.orgType === Account.SBC_STAFF
   }
+
+  get isExternalStaffAccount (): boolean {
+    return [Account.CONTACT_CENTRE_STAFF, Account.MAXIMUS_STAFF].includes(this.currentOrganization?.orgType)
+  }
 }
 </script>