Merge pull request #239 from bcgov/idp

Changes to support BCSC auth

Author: norrisng-bc

bcgovpubcode.yaml

@@ -7,6 +7,7 @@ product_external_dependencies:
     - Common-Object-Management-Service
   identity_authorization:
     - IDIR
+    - BCSC
     - BceId
     - Business-BceId
   notification_standard: []

frontend/src/assets/main.scss

@@ -125,6 +125,16 @@ div:focus-visible {
   max-width: 400px !important;
 }
 
+.help-link {
+  font-size: 100%;
+  cursor: pointer;
+  position: relative;
+  top: -.25rem;
+  margin-left: .1rem;
+  opacity: 1;
+  color: $bcbox-link-text;
+}
+
 /* layout */
 .layout-main {
   margin: 1rem;

frontend/src/components/bucket/BucketList.vue

@@ -109,6 +109,11 @@ onMounted(async () => {
           {{ bucketConfigTitle }}
         </h3>
 
+        <Message severity="warn">
+          If you intend to share files in your bucket with BCeID or BC Services Card users, please notify
+          <a href="mailto:[email protected]">[email protected]</a> that you plan to use BCBox.
+        </Message>
+
         <Message severity="info">
           Please contact
           <a
@@ -121,12 +126,6 @@ onMounted(async () => {
           location sources.
         </Message>
 
-        <Message severity="warn">
-          If you intend to share files in your bucket with BCeID users, you are required to email
-          <a href="mailto:[email protected]">[email protected]</a>
-          to share your BCeID-related intentions and where you intend to advertise this.
-        </Message>
-
         <BucketConfigForm
           :bucket="bucketToUpdate"
           @submit-bucket-config="closeBucketConfig"

frontend/src/components/bucket/BucketPermissionAddUser.vue

@@ -4,20 +4,22 @@ import { storeToRefs } from 'pinia';
 import SearchUsers from '@/components/form/SearchUsers.vue';
 import { useConfigStore, usePermissionStore } from '@/store';
 
-import type { User } from '@/types';
+import type { User, IdentityProvider } from '@/types';
 
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
 const permissionStore = usePermissionStore();
 
 // Actions
 const onAdd = (selectedUser: User) => {
-  const idp = getConfig.value.idpList.find((idp: any) => idp.idp === selectedUser?.idp);
+  const configuredIdp = getConfig.value.idpList.find((idp: IdentityProvider) => idp.idp === selectedUser.idp);
+  const idpName = configuredIdp?.name || 'BCSC';
+  const idpElevated = configuredIdp?.elevatedRights || false;
 
   permissionStore.addBucketUser({
     userId: selectedUser.userId,
-    idpName: idp?.name,
-    elevatedRights: idp?.elevatedRights,
+    idpName: idpName,
+    elevatedRights: idpElevated,
     fullName: selectedUser.fullName,
     create: false,
     read: false,

frontend/src/components/bucket/BucketTable.vue

@@ -134,6 +134,8 @@ function createDummyNodes(neighbour: BucketTreeNode, node: BucketTreeNode) {
     // Fix broken endpoints caused by delimiter splitting
     fullPath = fullPath.replace(/^https?:\//i, (match) => `${match}/`);
 
+    // TODO: exclude un-mapped parent folders
+    // if(getBuckets.value.find(b => b.key === key || (key).startsWith(b.bucket+'/'+b.key))){
     dummyNodes.push({
       key: fullPath,
       data: {
@@ -305,7 +307,7 @@ watch(getBuckets, () => {
             label-text="Folder"
           />
           <BucketChildConfig
-            v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
+            v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.CREATE)"
             :parent-bucket="node.data"
           />
           <Button

frontend/src/components/common/BulkPermission.vue

@@ -386,8 +386,8 @@ const onSubmit = handleSubmit(async (values: any, { resetForm }) => {
         class="block"
       >
         Enter an email address for each person whose permissions you wish to update for this
-        {{ props.resourceType === 'bucket' ? 'folder' : 'file' }}. The email address should be associated with the IDIR
-        or BCeID account they will use to sign in to BCBox.
+        {{ props.resourceType === 'bucket' ? 'folder' : 'file' }}. The email address should be associated with the
+        account they will use to sign in to BCBox.
       </small>
       <ErrorMessage name="multiEmail" />
     </div>

frontend/src/components/form/SearchUsers.vue

@@ -1,15 +1,16 @@
+<!-- eslint-disable vue/no-v-html -->
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { isProxy, onMounted, ref, watch } from 'vue';
+import { computed, isProxy, onMounted, ref, watch } from 'vue';
 
-import { Button, Dropdown, RadioButton } from '@/lib/primevue';
-import { useConfigStore, useUserStore } from '@/store';
+import { Button, OverlayPanel, Dropdown, RadioButton } from '@/lib/primevue';
+import { useUserStore, useAuthStore } from '@/store';
 import { Regex } from '@/utils/constants';
 
 import type { Ref } from 'vue';
 import type { IInputEvent } from '@/interfaces';
 import type { DropdownChangeEvent } from '@/lib/primevue';
-import type { IdentityProvider, User, UserPermissions } from '@/types';
+import type { User, UserPermissions } from '@/types';
 
 // Props
 type Props = {
@@ -23,20 +24,26 @@ const emit = defineEmits(['add-user', 'cancel-search-users']);
 
 // Store
 const userStore = useUserStore();
-const { getConfig } = storeToRefs(useConfigStore());
-const { userSearch } = storeToRefs(useUserStore());
+const { getExternalUsers, userSearch } = storeToRefs(useUserStore());
+const { getUserId } = storeToRefs(useAuthStore());
 
 // State
 const invalidSelectedUser: Ref<boolean> = ref(false);
-const selectedIDP: Ref<IdentityProvider | null> = ref(null);
+const selectedIdpType: Ref<string | undefined> = ref('internal');
 const selectedUser: Ref<User | null> = ref(null);
 const userSearchInput: Ref<string | undefined> = ref('');
-const userSearchPlaceholder: Ref<string | undefined> = ref('');
+const userSearchPlaceholder: Ref<string | undefined> = ref('Name or email address');
+// search results
+const userSearchResults: Ref<User[]> = computed(() => {
+  return (selectedIdpType.value === 'internal' ? userSearch.value : getExternalUsers.value)
+    // filter current user
+    .filter((user: User) => user.userId !== getUserId.value);
+});
 
 // Actions
 const getUserDropdownLabel = (option: User) => {
-  if (selectedIDP.value?.idp) {
-    if (selectedIDP.value.searchable) {
+  if (selectedIdpType.value) {
+    if (selectedIdpType.value === 'internal') {
       return `${option.fullName} [${option.email}]`;
     } else {
       return option.email;
@@ -73,15 +80,15 @@ const onChange = (event: DropdownChangeEvent) => {
 
 const onInput = (event: IInputEvent) => {
   const input: string = event.target.value;
-  if (selectedIDP.value?.idp) {
+  if (selectedIdpType.value) {
     // Reset selection on any input change
     selectedUser.value = null;
     invalidSelectedUser.value = false;
-
-    if (selectedIDP.value.searchable && input.length >= 3) {
-      userStore.fetchUsers({ idp: selectedIDP.value.idp, search: input });
-    } else if (input.match(Regex.EMAIL)) {
-      userStore.fetchUsers({ idp: selectedIDP.value.idp, email: input });
+    if (selectedIdpType.value === 'internal' && input.length >= 3) {
+      userStore.fetchUsers({ idp: 'idir', search: input });
+    }
+    else if (input.match(Regex.EMAIL)) {
+      userStore.fetchUsers({ email: input });
     } else {
       userStore.clearSearch();
     }
@@ -96,59 +103,98 @@ const onReset = () => {
   userSearchInput.value = '';
 };
 
-watch(selectedIDP, () => {
-  if (selectedIDP.value?.searchable) {
-    userSearchPlaceholder.value = `Enter the full name or email address of an existing ${selectedIDP.value?.name}`;
-  } else {
-    userSearchPlaceholder.value = `Enter an existing user's ${selectedIDP.value?.name} email address`;
-  }
+watch(selectedIdpType, () => {
+  // user search field placeholder
+  userSearchPlaceholder.value = selectedIdpType.value === 'internal' ?
+    'Name or email address' : 'Complete email address';
 });
 
-onMounted(() => {
-  // Set default IDP
-  selectedIDP.value = getConfig.value.idpList[0];
+const helpText = ref('');
+const help1 = ref();
+const help2 = ref();
+
+const toggleHelp = (id: string | undefined, event:any) => {
+  switch(id) {
+    case 'help1':
+      help1.value.toggle(event);
+      helpText.value = 'Select the authentication method this person will use to sign into BCBox.';
+      break;
+    case 'help2':
+      help2.value.toggle(event);
+      helpText.value = 'Note: If the person you are adding is new to BCBox, ' +
+        'please ask them to first sign in to the website, so we can find them in the system.';
+      break;
+  }
+};
 
+onMounted(() => {
   onReset();
 });
 </script>
 
 <template>
   <div>
-    <ul v-if="getConfig.idpList.length <= 3">
-      <li
-        v-for="idp of getConfig.idpList"
-        :key="idp.idp"
-        class="field-radiobutton mt-1"
+    <h4 class="mb-3">Add User(s)</h4>
+    <div class="mb-2">
+      <label>How will his person sign in to BCBox?</label>
+      <span
+        class="help-link material-icons-outlined"
+        @click="toggleHelp('help1', $event)"
       >
-        <RadioButton
-          v-model="selectedIDP"
-          :input-id="idp.idp"
-          name="idp"
-          :value="idp"
-          @click="onReset"
-        />
-        <label :for="idp.idp">{{ idp.name }}</label>
-      </li>
-    </ul>
-    <div v-else>
-      <Dropdown
-        v-model="selectedIDP"
-        :options="getConfig.idpList"
-        :option-label="
-          (option: any) => {
-            return `${option.name} (${option.elevatedRights ? 'internal' : 'external'})`;
-          }
-        "
-        class="mt-1"
-        @change="onReset"
-      />
+        help_outline
+      </span>
+      <OverlayPanel
+        ref="help1"
+        class="max-w-25rem"
+      >
+        <span>{{ helpText }}</span>
+      </OverlayPanel>
+    </div>
+    <div class="card flex justify-center mb-4">
+      <div class="flex flex-wrap gap-4">
+          <div class="flex items-center align-items-center gap-2">
+            <RadioButton
+              v-model="selectedIdpType"
+              input-id="internal"
+              name="idpType"
+              value="internal"
+              @click="onReset"
+            />
+          <label for="internal">Government IDIR</label>
+        </div>
+        <div class="flex align-items-center items-center gap-2">
+            <RadioButton
+              v-model="selectedIdpType"
+              input-id="external"
+              name="idpType"
+              value="external"
+              @click="onReset"
+            />
+            <label for="external">External (eg: BCeID or BC Services Card)</label>
+        </div>
+      </div>
     </div>
 
+    <div class="mb-2">
+      <label>Search for user</label>
+      <span
+        class="help-link material-icons-outlined"
+        @click="toggleHelp('help2', $event)"
+      >
+        help_outline
+      </span>
+      <OverlayPanel
+        ref="help2"
+        class="max-w-25rem"
+      >
+        <span>{{ helpText }}</span>
+      </OverlayPanel>
+    </div>
     <div class="flex">
       <div class="flex flex-auto">
         <Dropdown
           v-model="userSearchInput"
-          :options="userSearch"
+          :options="userSearchResults"
           :option-label="(option: any) => getUserDropdownLabel(option)"
           editable
           :placeholder="userSearchPlaceholder"

frontend/src/components/layout/Navbar.vue

@@ -5,16 +5,19 @@ import { Toolbar } from '@/lib/primevue';
 import { useAuthStore } from '@/store';
 import { RouteNames } from '@/utils/constants';
 
-// const { home, items } = storeToRefs(useNavStore());
-const { getIsAuthenticated } = storeToRefs(useAuthStore());
+const { getIsAuthenticated, getProfile } = storeToRefs(useAuthStore());
 </script>
 
 <template>
   <nav class="navigation-main lg:px-7">
     <Toolbar>
       <template #start>
         <ol class="list-none m-0 p-0 flex flex-row align-items-center font-semibold">
-          <li class="mr-2">
+          <!-- hide Home nav for non-idir users-->
+          <li
+            v-if="!getIsAuthenticated || (getIsAuthenticated && getProfile?.identity_provider === 'idir')"
+            class="mr-2"
+          >
             <router-link :to="{ name: RouteNames.HOME }">Home</router-link>
           </li>
           <li

frontend/src/lib/primevue/index.ts

@@ -5,6 +5,7 @@ export { default as Button } from 'primevue/button';
 export { default as Checkbox } from 'primevue/checkbox';
 export { default as Column } from 'primevue/column';
 export { default as ConfirmDialog } from 'primevue/confirmdialog';
+export { default as OverlayPanel  } from 'primevue/overlaypanel';
 export { default as DataTable } from 'primevue/datatable';
 export { default as Dialog } from 'primevue/dialog';
 export { default as Divider } from 'primevue/divider';

frontend/src/store/authStore.ts

@@ -70,10 +70,13 @@ export const useAuthStore = defineStore('auth', () => {
     const user = await authService.getUser();
     const profile = user?.profile;
     const isAuthenticated = !!user && !user.expired;
-    const identityId = configService
+    // gets identityId from jwt.<first found identityKey idpList>
+    let identityId = configService
       .getConfig()
       .idpList.map((provider: IdentityProvider) => (profile ? profile[provider.identityKey] : undefined))
       .filter((item?: string) => item)[0];
+    // try and get using one of configured identityKey's otherwise use `sub` field
+    if(profile) identityId = identityId ?? profile['sub'];
 
     state.accessToken.value = user?.access_token;
     state.expiresAt.value = user?.expires_at;