From 68e8ac4a31d93a5bceb5dfe52a42d2513993111c Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Fri, 2 May 2025 16:19:02 -0700
Subject: [PATCH 1/5] Public Folders

---
 app/.eslintrc.js                              |   2 +-
 frontend/.eslintrc.js                         |   2 +-
 .../components/bucket/BucketConfigForm.vue    |  14 +-
 .../components/bucket/BucketPermission.vue    |  24 +-
 .../components/bucket/BucketPublicToggle.vue  |  82 ++++
 .../components/object/PublicObjectList.vue    |  42 ++
 .../components/object/PublicObjectTable.vue   | 424 ++++++++++++++++++
 frontend/src/components/object/index.ts       |   2 +
 frontend/src/router/index.ts                  |  15 +-
 frontend/src/services/bucketService.ts        |  26 ++
 frontend/src/store/bucketStore.ts             |  55 +++
 frontend/src/store/objectStore.ts             |   3 +
 frontend/src/types/Bucket.ts                  |   1 +
 frontend/src/utils/constants.ts               |   1 +
 .../src/views/list/ListPublicObjectsView.vue  |  67 +++
 .../components/bucket/BucketSidebar.spec.ts   |   1 +
 frontend/tests/unit/store/bucketStore.spec.ts |   2 +
 17 files changed, 752 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/bucket/BucketPublicToggle.vue
 create mode 100644 frontend/src/components/object/PublicObjectList.vue
 create mode 100644 frontend/src/components/object/PublicObjectTable.vue
 create mode 100644 frontend/src/views/list/ListPublicObjectsView.vue

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 9bd438c3..0137b18d 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -31,7 +31,7 @@ module.exports = {
     'max-len': ['warn', { code: 120, comments: 120, ignoreUrls: true }],
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-    quotes: ['error', 'single'],
+    quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'always']
   },
   overrides: [
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index acfc189b..caa2364e 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -33,7 +33,7 @@ module.exports = {
     'max-len': ['warn', { code: 120, comments: 120, ignoreUrls: true }],
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-    quotes: ['error', 'single'],
+    quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'always'],
     'vue/component-tags-order': [
       'error',
diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
index 90b97948..228c7a1f 100644
--- a/frontend/src/components/bucket/BucketConfigForm.vue
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -132,33 +132,33 @@ const onCancel = () => {
       <TextInput
         name="bucketName"
         label="Folder name *"
-        placeholder="My Documents"
+        placeholder="eg: My Documents"
         help-text="Your custom display name for the storage location,
-          shown in BCBox as a folder. Any name as you would like to see it listed in BCBox."
+          shown in BCBox as a folder."
         focus-trap
       />
       <TextInput
         name="bucket"
         label="Bucket *"
-        placeholder="bucket0123456789"
+        placeholder="eg: mybucket"
         :help-text="'The name of the bucket given to you. For example: \'yxwgj\'.'"
       />
       <TextInput
         name="endpoint"
         label="Endpoint *"
-        placeholder="https://example.com"
+        placeholder="eg: https://nrs.objectstore.gov.bc.ca"
         help-text="The URL of your object storage namespace without the bucket identifier/name."
       />
       <Password
         name="accessKeyId"
-        label="Access key identifier / User account *"
-        placeholder="username"
+        label="Access key ID *"
+        placeholder=""
         help-text="User/Account identifier or username."
       />
       <Password
         name="secretAccessKey"
         label="Secret access key *"
-        placeholder="password"
+        placeholder=""
         help-text="A password used to access the bucket."
       />
       <TextInput
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
index 80de8332..eb1b0258 100644
--- a/frontend/src/components/bucket/BucketPermission.vue
+++ b/frontend/src/components/bucket/BucketPermission.vue
@@ -3,12 +3,13 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeMount, ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
+import BucketPublicToggle from '@/components/bucket/BucketPublicToggle.vue';
 import BucketPermissionAddUser from '@/components/bucket/BucketPermissionAddUser.vue';
 import { BulkPermission } from '@/components/common';
 import { useAlert } from '@/composables/useAlert';
 import { Button, Checkbox, Column, DataTable, Message, TabPanel, TabView } from '@/lib/primevue';
 
-import { useBucketStore, usePermissionStore } from '@/store';
+import { useAuthStore, useBucketStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
@@ -25,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {});
 const permissionStore = usePermissionStore();
 const bucketStore = useBucketStore();
 const { getMappedBucketToUserPermissions } = storeToRefs(permissionStore);
+const { getUserId } = storeToRefs(useAuthStore());
+
 
 // State
 const showSearchUsers: Ref<boolean> = ref(false);
@@ -78,6 +81,25 @@ onBeforeMount(async () => {
 <template>
   <TabView>
     <TabPanel header="Manage permissions">
+      <!-- public toggle -->
+      <div class="flex flex-row gap-6 pb-3">
+        <div>
+          <h3 class="pb-1">Public</h3>
+          <ul>
+            <li>This option toggles all files in this folder to be publicly available and accessible to anyone</li>
+            <li>To instead set explicit permissions, add users and use the options below</li>
+          </ul>
+        </div>
+        <BucketPublicToggle
+          v-if="bucket && getUserId"
+          class="ml-4"
+          :bucket-id="bucket.bucketId"
+          :bucket-name="bucket.bucketName"
+          :bucket-public="bucket.public"
+          :user-id="getUserId"
+        />
+      </div>
+      <!-- user search -->
       <div v-if="!showSearchUsers">
         <Button
           class="mt-1 mb-4"
diff --git a/frontend/src/components/bucket/BucketPublicToggle.vue b/frontend/src/components/bucket/BucketPublicToggle.vue
new file mode 100644
index 00000000..58069c1e
--- /dev/null
+++ b/frontend/src/components/bucket/BucketPublicToggle.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { InputSwitch, useConfirm, useToast } from '@/lib/primevue';
+import { useBucketStore, usePermissionStore } from '@/store';
+import { Permissions } from '@/utils/constants';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  bucketId: string;
+  bucketName: string;
+  bucketPublic: boolean;
+  userId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// Store
+const bucketStore = useBucketStore();
+const permissionStore = usePermissionStore();
+
+// State
+const isPublic: Ref<boolean> = ref(props.bucketPublic);
+
+// Actions
+const toast = useToast();
+const confirm = useConfirm();
+
+const togglePublic = async (setPublicValue: boolean) => {
+  if (setPublicValue) {
+    confirm.require({
+      message:
+        'Please confirm that you want to set folder to public. ' +
+        'This allows the share link to be accessible by anyone, even without credentials.',
+      header: 'Confirm set to public',
+      acceptLabel: 'Confirm',
+      rejectLabel: 'Cancel',
+      accept: () => {
+        bucketStore
+          .togglePublic(props.bucketId, true)
+          .then(() => {
+            toast.success(`"${props.bucketName}" set to public`);
+          })
+          .catch((e) => toast.error(e));
+      },
+      reject: () => (isPublic.value = false),
+      onHide: () => (isPublic.value = false)
+    });
+  } else
+    bucketStore
+      .togglePublic(props.bucketId, false)
+      .then(() => {
+        toast.success(`"${props.bucketName}" is no longer public`);
+      })
+      .catch((e) => toast.error(e));
+};
+
+watch(props, () => {
+  isPublic.value = props.bucketPublic;
+});
+</script>
+
+<template>
+  <InputSwitch
+    v-model="isPublic"
+    aria-label="Toggle to make public"
+    :disabled="
+      !(
+        usePermissionStore().isUserElevatedRights() &&
+        permissionStore.isObjectActionAllowed(
+          props.bucketId,
+          props.userId,
+          Permissions.MANAGE,
+          props.bucketId as string
+        )
+      )
+    "
+    @change="togglePublic(isPublic)"
+  />
+</template>
diff --git a/frontend/src/components/object/PublicObjectList.vue b/frontend/src/components/object/PublicObjectList.vue
new file mode 100644
index 00000000..1ac97543
--- /dev/null
+++ b/frontend/src/components/object/PublicObjectList.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import {
+  PublicObjectTable,
+} from '@/components/object';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  bucketId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined
+});
+
+
+// State
+const objectTableKey = ref(0);
+
+
+</script>
+
+<template>
+  <div>
+    <div
+      class="flex mt-4"
+    >
+      <div class="flex-grow-1">
+        <PublicObjectTable
+          :key="objectTableKey"
+          :bucket-id="props.bucketId"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/frontend/src/components/object/PublicObjectTable.vue b/frontend/src/components/object/PublicObjectTable.vue
new file mode 100644
index 00000000..85f5f857
--- /dev/null
+++ b/frontend/src/components/object/PublicObjectTable.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { onUnmounted, onMounted, ref } from 'vue';
+
+import { Spinner } from '@/components/layout';
+import {
+  DeleteObjectButton,
+  DownloadObjectButton,
+  ObjectFilters,
+  ObjectPermission,
+  ObjectPublicToggle
+} from '@/components/object';
+import { SyncButton, ShareButton } from '@/components/common';
+import { Button, Column, DataTable, Dialog, InputText } from '@/lib/primevue';
+import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
+import { Permissions, RouteNames } from '@/utils/constants';
+import { onDialogHide } from '@/utils/utils';
+import { ButtonMode } from '@/utils/enums';
+import { formatDateLong } from '@/utils/formatters';
+import { objectService } from '@/services';
+
+import type { Ref } from 'vue';
+import type { COMSObject } from '@/types';
+
+type COMSObjectDataSource = {
+  lastUpdatedDate?: string;
+} & COMSObject;
+
+type DataTableObjectSource = {
+  [key: string]: any;
+};
+
+type DataTableFilter = {
+  [key: string]: { value: any; matchMode: string };
+};
+// Props
+type Props = {
+  bucketId?: string;
+  objectInfoId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined,
+  objectInfoId: undefined
+});
+
+// Emits
+const emit = defineEmits(['show-object-info']);
+
+// Store
+const objectStore = useObjectStore();
+const permissionStore = usePermissionStore();
+const { getUserId } = storeToRefs(useAuthStore());
+const { focusedElement } = storeToRefs(useNavStore());
+
+// State
+const permissionsVisible = ref(false);
+const permissionsObjectId = ref('');
+const permissionsObjectName: Ref<string | undefined> = ref('');
+const tableData: Ref<Array<COMSObjectDataSource>> = ref([]);
+const lazyDataTable = ref();
+const loading: Ref<boolean> = ref(false);
+const lazyParams: Ref<DataTableObjectSource> = ref({});
+const totalRecords: Ref<number> = ref(0);
+const first: Ref<number> = ref(0);
+const filters: Ref<DataTableFilter> = ref({
+  name: { value: undefined, matchMode: 'contains' },
+  tags: { value: undefined, matchMode: 'contains' },
+  meta: { value: undefined, matchMode: 'contains' }
+});
+
+// Actions
+const formatShortUuid = (uuid: string) => uuid?.slice(0, 8) ?? uuid;
+const onObjectDeleted = () => {
+  loadLazyData();
+};
+
+const showInfo = (id: string) => {
+  emit('show-object-info', id);
+  focusedElement.value = document.activeElement;
+};
+
+async function showPermissions(objectId: string) {
+  await permissionStore.fetchObjectPermissions({ objectId });
+
+  permissionsVisible.value = true;
+  permissionsObjectId.value = objectId;
+  permissionsObjectName.value = objectStore.getObject(objectId)?.name;
+  focusedElement.value = document.activeElement;
+}
+
+onMounted(() => {
+  loading.value = true;
+  lazyParams.value = {
+    first: 0,
+    rows: lazyDataTable.value.rows,
+    sortField: 'updatedAt',
+    page: lazyDataTable.value.page,
+    sortOrder: 'desc',
+    filters: filters
+  };
+  loadLazyData();
+});
+
+const loadLazyData = (event?: any) => {
+  lazyParams.value = { ...lazyParams.value, first: event?.first || first.value, page: event?.page || 0 };
+  objectService
+    .searchObjects(
+      {
+        bucketId: props.bucketId ? [props.bucketId] : undefined,
+        deleteMarker: false,
+        latest: true,
+        page: lazyParams.value?.page ? ++lazyParams.value.page : 1,
+        name: lazyParams.value?.filters?.name.value ? lazyParams.value?.filters?.name.value : undefined,
+        limit: lazyParams.value.rows,
+        sort: lazyParams.value.sortField,
+        order: lazyParams.value.sortOrder === 1 ? 'asc' : 'desc',
+        tagset: lazyParams.value?.filters?.tags.value
+      },
+      lazyParams.value?.filters?.meta.value //Header
+    )
+    .then((r: any) => {
+      tableData.value = r.data.map((item: any) => ({
+        ...item,
+        updatedAt: item.updatedAt === null ? item.createdAt : item.updatedAt
+      }));
+      totalRecords.value = +r?.headers['x-total-rows'];
+      // add objects to store
+      objectStore.setObjects(r.data);
+      loading.value = false;
+      return r.data;
+    })
+    // add object permissions to store
+    .then((objects: Array<COMSObjectDataSource>) => {
+      if (objects.length > 0) {
+        permissionStore.fetchObjectPermissions({ objectId: objects.map((o: COMSObject) => o.id) });
+      }
+    });
+};
+
+const onPage = (event?: any) => {
+  lazyParams.value = event;
+  loadLazyData(event);
+};
+
+const onSort = (event?: any) => {
+  lazyParams.value = event;
+  loadLazyData(event);
+};
+
+const onFilter = (event?: any) => {
+  lazyParams.value.filters = filters;
+  // Seems to be a bug as current page is not being reset when filter trigger
+  lazyDataTable.value.resetPage();
+  loadLazyData(event);
+};
+
+// Clear selections when navigating away
+onUnmounted(() => {
+  objectStore.setSelectedObjects([]);
+});
+
+const selectedFilters = (payload: any) => {
+  filters.value.meta.value = payload.metaToSearch
+    .flatMap((o: any) => ({ [o.key]: o.value }))
+    .reduce((r: any, c: any) => {
+      const key = Object.keys(c)[0];
+      const value = c[key];
+      r['x-amz-meta-' + key] = value;
+      return r;
+    }, {});
+  filters.value.tags.value = payload.tagSetToSearch
+    .flatMap((o: any) => ({ [o.key]: o.value }))
+    .reduce((r: any, c: any) => {
+      const key = Object.keys(c)[0];
+      const value = c[key];
+      r[key] = value;
+      return r;
+    }, {});
+  lazyParams.value.filters = filters;
+  loadLazyData();
+};
+</script>
+
+<template>
+  <div class="object-table">
+    <DataTable
+      ref="lazyDataTable"
+      v-model:value="tableData"
+      v-model:selection="objectStore.selectedObjects"
+      v-model:filters="filters"
+      lazy
+      paginator
+      :loading="loading"
+      :total-records="totalRecords"
+      data-key="id"
+      class="p-datatable-sm"
+      responsive-layout="scroll"
+      :rows="10"
+      :rows-per-page-options="[10, 20, 50]"
+      sort-field="updatedAt"
+      :sort-order="-1"
+      :global-filter-fields="['name']"
+      :first="first"
+      update:filters
+      update:page
+      @page="onPage($event)"
+      @sort="onSort($event)"
+      @filter="onFilter($event)"
+    >
+      <template #header>
+        <div class="flex justify-content-end">
+          <ObjectFilters
+            :bucket-id="props.bucketId"
+            @selected-filters="selectedFilters"
+          />
+
+          <span class="ml-4">
+            <InputText
+              v-model="filters.name.value"
+              class="pr-6"
+              placeholder="Search File Names"
+              @keyup.enter="loadLazyData"
+            />
+            <Button
+              v-show="filters.name.value"
+              v-tooltip.bottom="'Clear'"
+              class="overlap"
+              icon="pi pi-times"
+              outlined
+              aria-label="Clear"
+              @click="
+                () => {
+                  filters.name.value = undefined;
+                }
+              "
+            />
+          </span>
+          <Button
+            v-tooltip.bottom="'Search'"
+            class="ml-2"
+            icon="pi pi-search"
+            outlined
+            rounded
+            aria-label="Filter"
+            @click="onFilter()"
+          />
+        </div>
+      </template>
+      <template #empty>
+        <div
+          v-if="!loading"
+          class="flex justify-content-center"
+        >
+          <h4 class="py-5">There are no files associated with your account in this folder.</h4>
+        </div>
+      </template>
+      <template #loading>
+        <Spinner />
+      </template>
+      <Column
+        selection-mode="multiple"
+        header-style="width: 3rem"
+      />
+      <Column
+        field="name"
+        sortable
+        header="Name"
+        header-style="min-width: 25%"
+        body-class="truncate"
+      >
+        <template #body="{ data }">
+          <div>
+            <router-link :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }">
+              <span v-tooltip.bottom="'View file details'">
+                {{ data.name }}
+              </span>
+            </router-link>
+          </div>
+        </template>
+      </Column>
+      <Column
+        field="id"
+        sortable
+        header="Object ID"
+        style="width: 150px"
+      >
+        <template #body="{ data }">
+          <div
+            v-tooltip.bottom="{ value: data.id }"
+            :data-objectId="data.id"
+          >
+            {{ formatShortUuid(data.id) }}
+          </div>
+        </template>
+      </Column>
+      <Column
+        field="updatedAt"
+        header="Updated date"
+        style="width: 300px"
+        sortable
+      >
+        <template #body="{ data }">
+          {{ formatDateLong(data.lastModifiedDate ?? data.createdAt) }}
+        </template>
+      </Column>
+      <Column
+        field="publicSharing"
+        header="Public"
+        style="width: 100px"
+      >
+        <template #body="{ data }">
+          <ObjectPublicToggle
+            v-if="props.bucketId && getUserId"
+            :bucket-id="props.bucketId"
+            :object-id="data.id"
+            :object-name="data.name"
+            :object-public="data.public"
+            :user-id="getUserId"
+          />
+        </template>
+      </Column>
+      <Column
+        header="Actions"
+        header-style="min-width: 270px"
+        header-class="header-right"
+        body-class="action-buttons"
+      >
+        <template #body="{ data }">
+          <ShareButton
+            :object-id="data.id"
+            label-text="File"
+          />
+          <DownloadObjectButton
+            v-if="
+              data.public ||
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string)
+            "
+            :mode="ButtonMode.ICON"
+            :ids="[data.id]"
+          />
+          <Button
+            v-if="
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.MANAGE, props.bucketId as string)
+            "
+            id="file_permissions"
+            v-tooltip.bottom="'File permissions'"
+            class="p-button-lg p-button-text"
+            aria-label="File permissions"
+            @click="showPermissions(data.id)"
+          >
+            <span class="material-icons-outlined">supervisor_account</span>
+          </Button>
+          <SyncButton
+            label-text="Synchronize file"
+            :object-id="data.id"
+            :mode="ButtonMode.ICON"
+          />
+          <Button
+            v-if="
+              data.public ||
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string)
+            "
+            v-tooltip.bottom="'File details'"
+            class="p-button-lg p-button-rounded p-button-text"
+            aria-label="File details"
+            @click="showInfo(data.id)"
+          >
+          <span class="material-icons-outlined">info</span>
+        </Button>
+          <DeleteObjectButton
+            v-if="
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.DELETE, props.bucketId as string)
+            "
+            :mode="ButtonMode.ICON"
+            :hard-delete="false"
+            :ids="[data.id]"
+            @on-object-deleted="onObjectDeleted"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <!-- eslint-disable vue/no-v-model-argument -->
+    <Dialog
+      id="permissions_dialog"
+      v-model:visible="permissionsVisible"
+      :draggable="false"
+      :modal="true"
+      class="bcbox-info-dialog"
+      aria-labelledby="permissions_label"
+      aria-describedby="permissions_desc"
+      @after-hide="onDialogHide"
+    >
+      <!-- eslint-enable vue/no-v-model-argument -->
+      <template #header>
+        <span class="material-icons-outlined">supervisor_account</span>
+        <span
+          id="permissions_label"
+          class="p-dialog-title"
+        >
+          File Permissions
+        </span>
+      </template>
+
+      <h3
+        id="permissions_desc"
+        class="bcbox-info-dialog-subhead"
+      >
+        {{ permissionsObjectName }}
+      </h3>
+
+      <ObjectPermission :object-id="permissionsObjectId" />
+    </Dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.overlap {
+  position: absolute;
+  right: 3.4rem;
+  width: 2.5rem;
+  height: 2.4rem;
+}
+</style>
diff --git a/frontend/src/components/object/index.ts b/frontend/src/components/object/index.ts
index a7a9b166..89022897 100644
--- a/frontend/src/components/object/index.ts
+++ b/frontend/src/components/object/index.ts
@@ -19,4 +19,6 @@ export { default as ObjectUpload } from './ObjectUpload.vue';
 export { default as ObjectUploadBasic } from './ObjectUploadBasic.vue';
 export { default as ObjectUploadFile } from './ObjectUploadFile.vue';
 export { default as ObjectVersion } from './ObjectVersion.vue';
+export { default as PublicObjectList } from './PublicObjectList.vue';
+export { default as PublicObjectTable } from './PublicObjectTable.vue';
 export { default as RestoreObjectButton } from './RestoreObjectButton.vue';
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0fdb8c7b..107759e3 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -66,7 +66,20 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/list/ListDeletedObjectsView.vue'),
         meta: { requiresAuth: true, breadcrumb: '__listDeletedObjectsDynamic', title: 'My Deleted Objects' },
         props: createProps
-      }
+      },
+      {
+        path: 'public',
+        component: () => import('@/views/GenericView.vue'),
+        children: [
+          {
+            path: 'objects',
+            name: RouteNames.LIST_OBJECTS_PUBLIC,
+            component: () => import('@/views/list/ListPublicObjectsView.vue'),
+            meta: { requiresAuth: false, breadcrumb: '__listPublicObjectsDynamic', title: 'My Public Objects' },
+            props: createProps,
+          }
+        ]
+      },
     ]
   },
   {
diff --git a/frontend/src/services/bucketService.ts b/frontend/src/services/bucketService.ts
index 0fa794ee..4fe10bfd 100644
--- a/frontend/src/services/bucketService.ts
+++ b/frontend/src/services/bucketService.ts
@@ -96,6 +96,16 @@ export default {
     });
   },
 
+  /**
+   * @function getBucket
+   * Get a bucket
+   * @param {string} bucketId The id for the bucket to get
+   * @returns {Promise} An axios response
+   */
+  fetchBucket(bucketId: string) {
+    return comsAxios().get(`${BUCKET_PATH}/${bucketId}`);
+  },
+
   /**
    * @function updateBucket
    * Updates a bucket
@@ -106,6 +116,22 @@ export default {
     return comsAxios().patch(`${BUCKET_PATH}/${bucketId}`, data);
   },
 
+  /**
+   * @function togglePublic
+   * Toggles the public property for a bucket
+   * @param {string} bucketId The id for the bucket
+   * @param {boolean} isPublic Boolean on public status
+   * @returns {Promise} An axios response
+   */
+  togglePublic(bucketId: string, isPublic: boolean) {
+    return comsAxios().patch(`${BUCKET_PATH}/${bucketId}/public`, null, {
+      params: {
+        public: isPublic
+      }
+    });
+  },
+
+
   /**
    * @function syncBucket
    * Synchronizes a bucket
diff --git a/frontend/src/store/bucketStore.ts b/frontend/src/store/bucketStore.ts
index 62a52826..d7604808 100644
--- a/frontend/src/store/bucketStore.ts
+++ b/frontend/src/store/bucketStore.ts
@@ -62,6 +62,45 @@ export const useBucketStore = defineStore('bucket', () => {
       appStore.endIndeterminateLoading();
     }
   }
+
+  // /**
+  //  * @function fetchPublicBucket
+  //  * - Adds bucket to store if bucket is public
+  //  * @param params search parameters
+  //  * @returns an array containing single bucket
+  //  */
+  // async function fetchPublicBucket(bucketId: string) {
+  //   try {
+  //     appStore.beginIndeterminateLoading();
+  //     //search for bucket
+  //     const bucket = (await bucketService.searchBuckets()).data;
+  //     console.log(bucket);
+  //     if(bucket?.length) {
+  //       // update store
+  //       const matches = (x: Bucket) => !bucketId || x.bucketId === bucketId;
+  //       const [, difference] = partition(state.buckets.value, matches);
+  //       state.buckets.value = difference.concat(bucket);
+  //       return bucket;
+  //     } else return [];
+  //   } catch (error: any) {
+  //     toast.error('Fetching public bucket', error);
+  //   } finally {
+  //     appStore.endIndeterminateLoading();
+  //   }
+  // }
+
+  async function fetchBucket(bucketId: string) {
+    try {
+      appStore.beginIndeterminateLoading();
+      return bucketService.fetchBucket(bucketId).then((response) => response.data);
+      // return {};
+    } catch (error: any) {
+      toast.error('Getting bucket', error);
+    } finally {
+      appStore.endIndeterminateLoading();
+    }
+  }
+
   /**
    * function does the following in order:
    * - fetches bucket permissions
@@ -114,6 +153,19 @@ export const useBucketStore = defineStore('bucket', () => {
     }
   }
 
+  async function togglePublic(bucketId: string, isPublic: boolean) {
+    try {
+      appStore.beginIndeterminateLoading();
+      await bucketService.togglePublic(bucketId, isPublic);
+      const bucket = getters.getBucket.value(bucketId);
+      if (bucket) bucket.public = isPublic;
+    } catch (error: any) {
+      toast.error('Changing public state', error);
+    } finally {
+      appStore.endIndeterminateLoading();
+    }
+  }
+
   async function syncBucket(bucketId: string, recursive: boolean) {
     try {
       appStore.beginIndeterminateLoading();
@@ -149,9 +201,12 @@ export const useBucketStore = defineStore('bucket', () => {
     createBucket,
     createBucketChild,
     deleteBucket,
+    fetchBucket,
+    // fetchPublicBucket,
     fetchBuckets,
     syncBucket,
     syncBucketStatus,
+    togglePublic,
     updateBucket
   };
 });
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 6f427055..d1ff70fe 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -244,12 +244,15 @@ export const useObjectStore = defineStore('object', () => {
     try {
       appStore.beginIndeterminateLoading();
       await objectService.togglePublic(objectId, isPublic);
+      // let parent process catch the error
       const obj = getters.getObject.value(objectId);
       if (obj) obj.public = isPublic;
     } catch (error: any) {
       toast.error('Changing public state', error.response?.data.detail ?? error, { life: 0 });
     } finally {
+      // code will still excecute on error
       appStore.endIndeterminateLoading();
+      // TODO: update store
     }
   }
 
diff --git a/frontend/src/types/Bucket.ts b/frontend/src/types/Bucket.ts
index 34355514..b6169472 100644
--- a/frontend/src/types/Bucket.ts
+++ b/frontend/src/types/Bucket.ts
@@ -9,6 +9,7 @@ export type Bucket = {
   endpoint: string;
   key: string;
   lastSyncRequestedDate?: string;
+  public: boolean,
   region: string;
   secretAccessKey: string;
 } & IAudit;
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index b2668021..afa3bf8a 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -47,6 +47,7 @@ export const RouteNames = Object.freeze({
   LIST_BUCKETS: 'listBuckets',
   LIST_OBJECTS: 'listObjects',
   LIST_OBJECTS_DELETED: 'listObjectsDeleted',
+  LIST_OBJECTS_PUBLIC: 'listObjectsPublic',
   LOGIN: 'login',
   LOGOUT: 'logout'
 });
diff --git a/frontend/src/views/list/ListPublicObjectsView.vue b/frontend/src/views/list/ListPublicObjectsView.vue
new file mode 100644
index 00000000..0e1bdea8
--- /dev/null
+++ b/frontend/src/views/list/ListPublicObjectsView.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onBeforeMount, onErrorCaptured, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { PublicObjectList } from '@/components/object';
+import { useToast } from '@/lib/primevue';
+import { useBucketStore } from '@/store';
+import { RouteNames } from '@/utils/constants';
+
+import type { Ref } from 'vue';
+import type { Bucket } from '@/types';
+
+// Props
+type Props = {
+  bucketId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined
+});
+
+// Store
+const bucketStore = useBucketStore();
+
+// State
+const ready: Ref<boolean> = ref(false);
+const bucket: Ref<Bucket | undefined> = ref(undefined);
+
+onErrorCaptured((e: Error) => {
+  const toast = useToast();
+  toast.error('Loading folder', e.message);
+});
+
+onBeforeMount(async () => {
+  const router = useRouter();
+  const bucketResponse = await bucketStore.getBucket(props.bucketId);
+
+  if (bucketResponse?.public) {
+    bucket.value = bucketResponse;
+    ready.value = true;
+  } else {
+    router.replace({ name: RouteNames.FORBIDDEN });
+  }
+});
+</script>
+
+<template>
+  <div v-if="ready">
+    <h2
+      v-if="bucket"
+      class="mb-3 flex overflow-hidden"
+    >
+      <font-awesome-icon
+        icon="fa-solid fa-folder"
+        class="mr-2 mt-2"
+      />
+      <span class="wrap-block w-11">{{ bucket.bucketName }}</span>
+    </h2>
+    <PublicObjectList :bucket-id="props.bucketId" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+h2 svg {
+  color: $bcbox-primary;
+}
+</style>
diff --git a/frontend/tests/unit/components/bucket/BucketSidebar.spec.ts b/frontend/tests/unit/components/bucket/BucketSidebar.spec.ts
index 854c6c46..ae1c1cc8 100644
--- a/frontend/tests/unit/components/bucket/BucketSidebar.spec.ts
+++ b/frontend/tests/unit/components/bucket/BucketSidebar.spec.ts
@@ -19,6 +19,7 @@ const testSidebarInfo = {
   secretAccessKey: 'REDACTED',
   region: 'null',
   active: true,
+  public: false,
   createdBy: '11111111-2222-3333-4444-555555555555',
   createdAt: '2023-09-28T21:25:38.927Z',
   updatedBy: '2023-09-28T21:25:38.927Z',
diff --git a/frontend/tests/unit/store/bucketStore.spec.ts b/frontend/tests/unit/store/bucketStore.spec.ts
index d5647375..d6dd479a 100644
--- a/frontend/tests/unit/store/bucketStore.spec.ts
+++ b/frontend/tests/unit/store/bucketStore.spec.ts
@@ -17,6 +17,7 @@ const bucket: Bucket = {
   bucketName: 'unit',
   endpoint: 'https://not.a.url',
   key: 'test',
+  public: false,
   region: 'us-east-1',
   secretAccessKey: '123'
 };
@@ -29,6 +30,7 @@ const bucket2: Bucket = {
   bucketName: 'unit2',
   endpoint: 'https://not.a.url',
   key: 'test',
+  public: false,
   region: 'us-east-1',
   secretAccessKey: '456'
 };

From 309a8598b5ac3cd44ea15e77fb8d672b230a4acb Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Thu, 4 Sep 2025 16:41:48 -0700
Subject: [PATCH 2/5] BucketTable, ListObjectsView: add labels for public
 folders

---
 frontend/src/assets/main.scss                 | 16 +++++
 .../src/components/bucket/BucketTable.vue     | 58 +++++++++++++++----
 frontend/src/store/bucketStore.ts             |  7 +--
 frontend/src/views/list/ListObjectsView.vue   | 16 ++++-
 4 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index 901bc34f..fa5a2632 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -256,6 +256,21 @@ div:focus-visible {
   font-weight: 400;
 }
 
+.p-tag-danger {
+  background-color: #fef1d8;
+  outline-style: solid;
+  outline-color: #f8bb47;
+  outline-width: thin;
+
+  .p-tag-value {
+    color: #474543;
+  }
+
+  .p-tag-icon {
+    color: #474543
+  }
+}
+
 /* datatable */
 .p-datatable,
 .p-treetable {
@@ -312,6 +327,7 @@ div:focus-visible {
   }
   .action-buttons {
     text-align: right;
+    white-space: nowrap;
     // width: 150px;
   }
 
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 368832b8..f547d1cd 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import { BucketChildConfig, BucketPermission, BucketTableBucketName } from '@/components/bucket';
 import { Spinner } from '@/components/layout';
 import { SyncButton, ShareButton } from '@/components/common';
-import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
+import { Button, Column, Dialog, Tag, TreeTable, useConfirm } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useBucketStore, useNavStore, usePermissionStore } from '@/store';
 import { DELIMITER, Permissions } from '@/utils/constants';
 import { getBucketPath, joinPath, onDialogHide } from '@/utils/utils';
@@ -40,6 +40,24 @@ const columnProps = {
     tabindex: 0
   })
 };
+const getBucketPublicStatus = computed(() => {
+  return (node: BucketTreeNode): boolean => {
+    if (node.data.dummy) {
+      return false;
+    } else if (node.data.bucketId) {
+      const storeBucket = getBuckets.value.find((bucket) => bucket.bucketId === node.data.bucketId);
+      return storeBucket?.public || false;
+    }
+
+    const nodePath = getBucketPath(node.data);
+    const matchingBucket = getBuckets.value.find((bucket) => {
+      const bucketPath = getBucketPath(bucket);
+      return nodePath.startsWith(bucketPath) || bucketPath.startsWith(nodePath);
+    });
+
+    return matchingBucket?.public || false;
+  };
+});
 
 const emit = defineEmits(['show-bucket-config', 'show-sidebar-info']);
 
@@ -81,7 +99,7 @@ const confirmDeleteBucket = (bucketId: string) => {
   });
 };
 
-async function deleteBucket(bucketId: string, recursive=true) {
+async function deleteBucket(bucketId: string, recursive = true) {
   await bucketStore.deleteBucket(bucketId, recursive);
   await bucketStore.fetchBuckets({ userId: getUserId.value, objectPerms: true });
 }
@@ -147,6 +165,7 @@ function createDummyNodes(neighbour: BucketTreeNode, node: BucketTreeNode) {
         dummy: true,
         endpoint: node.data.endpoint,
         key: key,
+        public: false,
         region: '',
         secretAccessKey: ''
       },
@@ -166,10 +185,12 @@ function createDummyNodes(neighbour: BucketTreeNode, node: BucketTreeNode) {
 }
 
 watch(getBuckets, () => {
-  // Make sure everything is clear for a rebuild
+  // Make sure everything is clear for a rebuild...
   endpointMap.clear();
   bucketTreeNodeMap.clear();
-  expandedKeys.value = {};
+
+  // ...except for what rows are curerently expanded
+  const currentExpandedKeys = { ...expandedKeys.value };
 
   // Split buckets into arrays based on endpoint
   for (const bucket of getBuckets.value) {
@@ -223,6 +244,7 @@ watch(getBuckets, () => {
                 dummy: true,
                 endpoint: node.data.endpoint,
                 key: '/',
+                public: false,
                 region: '',
                 secretAccessKey: ''
               },
@@ -245,6 +267,11 @@ watch(getBuckets, () => {
 
   //set tree state
   treeData.value = tree;
+
+  // restore previously-expanded TreeTable rows
+  nextTick(() => {
+    expandedKeys.value = currentExpandedKeys;
+  });
 });
 </script>
 
@@ -299,9 +326,20 @@ watch(getBuckets, () => {
       header-class="text-right"
       body-class="action-buttons"
       header-style="width: 320px"
-      >
+    >
       <template #body="{ node }">
         <span v-if="!node.data.dummy">
+          <Tag
+            v-if="getBucketPublicStatus(node)"
+            v-tooltip="
+              'This folder and its contents are set to public. Change the settings in &quot;Folder permissions.&quot;'
+            "
+            value="Public"
+            severity="danger"
+            rounded
+            icon="pi pi-info-circle"
+            class="public-folder"
+          />
           <ShareButton
             :bucket-id="node.data.bucketId"
             label-text="Folder"
@@ -342,8 +380,8 @@ watch(getBuckets, () => {
             aria-label="Folder details"
             @click="showSidebarInfo(node.data.bucketId)"
           >
-          <span class="material-icons-outlined">info</span>
-        </Button>
+            <span class="material-icons-outlined">info</span>
+          </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.DELETE)"
             v-tooltip.bottom="'Delete folder'"
@@ -351,8 +389,8 @@ watch(getBuckets, () => {
             aria-label="Delete folder"
             @click="confirmDeleteBucket(node.data.bucketId)"
           >
-          <span class="material-icons-outlined">delete</span>
-        </Button>
+            <span class="material-icons-outlined">delete</span>
+          </Button>
         </span>
       </template>
     </Column>
diff --git a/frontend/src/store/bucketStore.ts b/frontend/src/store/bucketStore.ts
index d7604808..6c9ec500 100644
--- a/frontend/src/store/bucketStore.ts
+++ b/frontend/src/store/bucketStore.ts
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 
 import { useToast } from '@/lib/primevue';
 import { bucketService } from '@/services';
-import { useAppStore, usePermissionStore } from '@/store';
+import { useAppStore, useAuthStore, usePermissionStore } from '@/store';
 import { partition } from '@/utils/utils';
 
 import type { Ref } from 'vue';
@@ -18,6 +18,7 @@ export const useBucketStore = defineStore('bucket', () => {
 
   // Store
   const appStore = useAppStore();
+  const authStore = useAuthStore();
   const permissionStore = usePermissionStore();
 
   // State
@@ -157,8 +158,7 @@ export const useBucketStore = defineStore('bucket', () => {
     try {
       appStore.beginIndeterminateLoading();
       await bucketService.togglePublic(bucketId, isPublic);
-      const bucket = getters.getBucket.value(bucketId);
-      if (bucket) bucket.public = isPublic;
+      await fetchBuckets({ userId: authStore.getUserId, objectPerms: true });
     } catch (error: any) {
       toast.error('Changing public state', error);
     } finally {
@@ -177,7 +177,6 @@ export const useBucketStore = defineStore('bucket', () => {
     }
   }
 
-
   async function syncBucketStatus(bucketId: string) {
     try {
       appStore.beginIndeterminateLoading();
diff --git a/frontend/src/views/list/ListObjectsView.vue b/frontend/src/views/list/ListObjectsView.vue
index 724375e4..29d0d7d1 100644
--- a/frontend/src/views/list/ListObjectsView.vue
+++ b/frontend/src/views/list/ListObjectsView.vue
@@ -87,7 +87,21 @@ onBeforeMount(async () => {
         icon="fa-solid fa-folder"
         class="mr-2 mt-2"
       />
-      <span class="wrap-block w-11">{{ bucket.bucketName }}</span>
+      <span class="wrap-block w-11">
+        {{ bucket.bucketName }}
+        <Tag
+          v-if="bucket.public"
+          v-tooltip="
+            'This folder and its contents are set to public. Change the settings in &quot;Folder permissions.&quot;'
+          "
+          style="margin-left: 30px"
+          value="Public"
+          severity="danger"
+          rounded
+          icon="pi pi-info-circle"
+          class="public-folder"
+        />
+      </span>
     </h2>
     <ObjectList :bucket-id="props.bucketId" />
   </div>

From 065c0c1ee2cbd19f70d034c357892984413cd59e Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Tue, 16 Sep 2025 17:48:18 -0700
Subject: [PATCH 3/5] Disable BucketPublicToggle if parent bucket is public

---
 .../components/bucket/BucketPublicToggle.vue  | 45 +++++++++++++------
 frontend/src/store/bucketStore.ts             |  7 +--
 frontend/src/utils/utils.ts                   |  8 ++++
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/bucket/BucketPublicToggle.vue b/frontend/src/components/bucket/BucketPublicToggle.vue
index 58069c1e..65d0d1be 100644
--- a/frontend/src/components/bucket/BucketPublicToggle.vue
+++ b/frontend/src/components/bucket/BucketPublicToggle.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 
 import { InputSwitch, useConfirm, useToast } from '@/lib/primevue';
 import { useBucketStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
+import { getBucketPath, trimUrl } from '@/utils/utils';
 
 // Props
 type Props = {
@@ -23,6 +24,7 @@ const permissionStore = usePermissionStore();
 
 // State
 const isPublic: Ref<boolean> = ref(props.bucketPublic);
+const isParentPublic = ref<boolean>(false);
 
 // Actions
 const toast = useToast();
@@ -43,7 +45,7 @@ const togglePublic = async (setPublicValue: boolean) => {
           .then(() => {
             toast.success(`"${props.bucketName}" set to public`);
           })
-          .catch((e) => toast.error(e));
+          .catch((e) => toast.error('Changing public state', e.response?.data.detail ?? e, { life: 0 }));
       },
       reject: () => (isPublic.value = false),
       onHide: () => (isPublic.value = false)
@@ -54,9 +56,34 @@ const togglePublic = async (setPublicValue: boolean) => {
       .then(() => {
         toast.success(`"${props.bucketName}" is no longer public`);
       })
-      .catch((e) => toast.error(e));
+      .catch((e) => toast.error('Changing public state', e.response?.data.detail ?? e, { life: 0 }));
 };
 
+const isParentBucketPublic = (): boolean => {
+  // @ts-ignore: bucketId will always be provided
+  const currBucketPath = getBucketPath(bucketStore.getBucket(props.bucketId));
+  const parentPath = currBucketPath.substring(0, currBucketPath.lastIndexOf('/'));
+  const parentBucket = bucketStore.getBucketByFullPath(parentPath);
+
+  const isTopLevelBucket = trimUrl(currBucketPath) === trimUrl(parentPath);
+
+  // top-level buckets by definition won't have a parent bucket restricting public status
+  return isTopLevelBucket ? false : parentBucket?.public ?? false;
+};
+
+const isToggleEnabled = computed(() => {
+  return (
+    !isParentPublic.value &&
+    usePermissionStore().isUserElevatedRights() &&
+    permissionStore.isObjectActionAllowed(props.bucketId, props.userId, Permissions.MANAGE, props.bucketId as string)
+  );
+});
+
+onMounted(async () => {
+  isPublic.value = props.bucketPublic;
+  isParentPublic.value = await isParentBucketPublic();
+});
+
 watch(props, () => {
   isPublic.value = props.bucketPublic;
 });
@@ -66,17 +93,7 @@ watch(props, () => {
   <InputSwitch
     v-model="isPublic"
     aria-label="Toggle to make public"
-    :disabled="
-      !(
-        usePermissionStore().isUserElevatedRights() &&
-        permissionStore.isObjectActionAllowed(
-          props.bucketId,
-          props.userId,
-          Permissions.MANAGE,
-          props.bucketId as string
-        )
-      )
-    "
+    :disabled="!isToggleEnabled"
     @change="togglePublic(isPublic)"
   />
 </template>
diff --git a/frontend/src/store/bucketStore.ts b/frontend/src/store/bucketStore.ts
index 6c9ec500..b330f22e 100644
--- a/frontend/src/store/bucketStore.ts
+++ b/frontend/src/store/bucketStore.ts
@@ -4,7 +4,7 @@ import { computed, ref } from 'vue';
 import { useToast } from '@/lib/primevue';
 import { bucketService } from '@/services';
 import { useAppStore, useAuthStore, usePermissionStore } from '@/store';
-import { partition } from '@/utils/utils';
+import { getBucketPath, partition } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { Bucket, BucketSearchPermissionsOptions } from '@/types';
@@ -29,6 +29,9 @@ export const useBucketStore = defineStore('bucket', () => {
   // Getters
   const getters = {
     getBucket: computed(() => (id: string) => state.buckets.value.find((bucket) => bucket.bucketId === id)),
+    getBucketByFullPath: computed(
+      () => (fullPath: string) => state.buckets.value.find((bucket) => getBucketPath(bucket) === fullPath)
+    ),
     getBuckets: computed(() => state.buckets.value)
   };
 
@@ -159,8 +162,6 @@ export const useBucketStore = defineStore('bucket', () => {
       appStore.beginIndeterminateLoading();
       await bucketService.togglePublic(bucketId, isPublic);
       await fetchBuckets({ userId: authStore.getUserId, objectPerms: true });
-    } catch (error: any) {
-      toast.error('Changing public state', error);
     } finally {
       appStore.endIndeterminateLoading();
     }
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 27415b09..82761a60 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -153,3 +153,11 @@ export function onDialogHide() {
   focusedElement.value?.focus();
   focusedElement.value = null;
 }
+/**
+ * Trims a URL of any trailing slashes, as well as any leading/trailing whitespace
+ * @param {string} input the string to cleanup
+ * @returns the cleaned-up string, less any trailing slashes and leading/trailing whitespace
+ */
+export function trimUrl(input: string) {
+  return input.trim().replace(/\/+$/, '');
+}

From 2ec8604e3dd2d4511b0a44fcf0fedd7bbf987bcd Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Wed, 17 Sep 2025 14:21:07 -0700
Subject: [PATCH 4/5] ListObjectsView: implement no-auth access if public
 folder

---
 frontend/src/components/object/ObjectList.vue |  8 ++-
 .../components/object/ObjectPublicToggle.vue  |  2 +
 .../src/components/object/ObjectTable.vue     | 58 ++++++++++++++-----
 frontend/src/router/index.ts                  |  8 +--
 frontend/src/views/list/ListObjectsView.vue   | 46 +++++++++------
 5 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/object/ObjectList.vue b/frontend/src/components/object/ObjectList.vue
index aa77ca57..4f5103b2 100644
--- a/frontend/src/components/object/ObjectList.vue
+++ b/frontend/src/components/object/ObjectList.vue
@@ -20,10 +20,12 @@ import type { Ref } from 'vue';
 // Props
 type Props = {
   bucketId?: string;
+  isBucketPublic?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  bucketId: undefined
+  bucketId: undefined,
+  isBucketPublic: undefined
 });
 
 //const navStore = useNavStore();
@@ -32,7 +34,7 @@ const permissionStore = usePermissionStore();
 const { focusedElement } = storeToRefs(useNavStore());
 
 const { getSelectedObjects } = storeToRefs(objectStore);
-const { getUserId } = storeToRefs(useAuthStore());
+const { getIsAuthenticated, getUserId } = storeToRefs(useAuthStore());
 
 // State
 const displayUpload = ref(false);
@@ -101,6 +103,7 @@ const onObjectDeleted = () => {
         :mode="ButtonMode.BUTTON"
       />
       <DeleteObjectButton
+        v-if="getIsAuthenticated"
         :disabled="displayUpload || selectedObjectIds.length === 0"
         :ids="selectedObjectIds"
         :mode="ButtonMode.BUTTON"
@@ -117,6 +120,7 @@ const onObjectDeleted = () => {
         <ObjectTable
           :key="objectTableKey"
           :bucket-id="props.bucketId"
+          :is-bucket-public="props.isBucketPublic"
           :object-info-id="objectInfoId"
           @show-object-info="showObjectInfo"
         />
diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/frontend/src/components/object/ObjectPublicToggle.vue
index ae40ef54..afdb2556 100644
--- a/frontend/src/components/object/ObjectPublicToggle.vue
+++ b/frontend/src/components/object/ObjectPublicToggle.vue
@@ -10,6 +10,7 @@ import type { Ref } from 'vue';
 // Props
 type Props = {
   bucketId: string;
+  bucketPublic?: boolean;
   objectId: string;
   objectName: string;
   objectPublic: boolean;
@@ -69,6 +70,7 @@ watch(props, () => {
     aria-label="Toggle to make public"
     :disabled="
       !(
+        !bucketPublic &&
         usePermissionStore().isUserElevatedRights() &&
         permissionStore.isObjectActionAllowed(
           props.objectId,
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 85f5f857..83201df0 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -36,11 +36,13 @@ type DataTableFilter = {
 // Props
 type Props = {
   bucketId?: string;
+  isBucketPublic?: boolean;
   objectInfoId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   bucketId: undefined,
+  isBucketPublic: undefined,
   objectInfoId: undefined
 });
 
@@ -50,7 +52,7 @@ const emit = defineEmits(['show-object-info']);
 // Store
 const objectStore = useObjectStore();
 const permissionStore = usePermissionStore();
-const { getUserId } = storeToRefs(useAuthStore());
+const { getUserId, getIsAuthenticated } = storeToRefs(useAuthStore());
 const { focusedElement } = storeToRefs(useNavStore());
 
 // State
@@ -108,14 +110,15 @@ const loadLazyData = (event?: any) => {
     .searchObjects(
       {
         bucketId: props.bucketId ? [props.bucketId] : undefined,
-        deleteMarker: false,
-        latest: true,
+        deleteMarker: getIsAuthenticated.value ? false : undefined,
+        latest: getIsAuthenticated.value ? true : undefined,
         page: lazyParams.value?.page ? ++lazyParams.value.page : 1,
         name: lazyParams.value?.filters?.name.value ? lazyParams.value?.filters?.name.value : undefined,
         limit: lazyParams.value.rows,
         sort: lazyParams.value.sortField,
         order: lazyParams.value.sortOrder === 1 ? 'asc' : 'desc',
-        tagset: lazyParams.value?.filters?.tags.value
+        public: !getIsAuthenticated.value ? true : undefined,
+        tagset: getIsAuthenticated.value ? lazyParams.value?.filters?.tags.value : undefined
       },
       lazyParams.value?.filters?.meta.value //Header
     )
@@ -132,8 +135,10 @@ const loadLazyData = (event?: any) => {
     })
     // add object permissions to store
     .then((objects: Array<COMSObjectDataSource>) => {
-      if (objects.length > 0) {
-        permissionStore.fetchObjectPermissions({ objectId: objects.map((o: COMSObject) => o.id) });
+      if (objects.length > 0 && getIsAuthenticated.value) {
+        permissionStore.fetchObjectPermissions({
+          objectId: objects.map((o: COMSObject) => o.id)
+        });
       }
     });
 };
@@ -180,6 +185,10 @@ const selectedFilters = (payload: any) => {
   lazyParams.value.filters = filters;
   loadLazyData();
 };
+
+async function downloadPublicObject(objectId: string) {
+  window.open(await objectStore.getObjectUrl(objectId));
+}
 </script>
 
 <template>
@@ -209,7 +218,10 @@ const selectedFilters = (payload: any) => {
       @filter="onFilter($event)"
     >
       <template #header>
-        <div class="flex justify-content-end">
+        <div
+          v-if="getIsAuthenticated"
+          class="flex justify-content-end"
+        >
           <ObjectFilters
             :bucket-id="props.bucketId"
             @selected-filters="selectedFilters"
@@ -271,11 +283,27 @@ const selectedFilters = (payload: any) => {
       >
         <template #body="{ data }">
           <div>
-            <router-link :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }">
+            <!-- public "file details" page and sidebar to be implemented later -->
+            <!-- for now, just redirect to direct file download -->
+            <router-link
+              v-if="getIsAuthenticated"
+              :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }"
+            >
               <span v-tooltip.bottom="'View file details'">
                 {{ data.name }}
               </span>
             </router-link>
+            <a
+              v-else
+              @click="downloadPublicObject(data.id)"
+            >
+              <span
+                v-tooltip.bottom="'Download file'"
+                style="cursor: pointer"
+              >
+                {{ data.name }}
+              </span>
+            </a>
           </div>
         </template>
       </Column>
@@ -305,6 +333,7 @@ const selectedFilters = (payload: any) => {
         </template>
       </Column>
       <Column
+        v-if="getIsAuthenticated"
         field="publicSharing"
         header="Public"
         style="width: 100px"
@@ -313,6 +342,7 @@ const selectedFilters = (payload: any) => {
           <ObjectPublicToggle
             v-if="props.bucketId && getUserId"
             :bucket-id="props.bucketId"
+            :bucket-public="props.isBucketPublic"
             :object-id="data.id"
             :object-name="data.name"
             :object-public="data.public"
@@ -322,7 +352,7 @@ const selectedFilters = (payload: any) => {
       </Column>
       <Column
         header="Actions"
-        header-style="min-width: 270px"
+        :header-style="getIsAuthenticated ? 'min-width: 270px' : 'width: 40px'"
         header-class="header-right"
         body-class="action-buttons"
       >
@@ -352,22 +382,24 @@ const selectedFilters = (payload: any) => {
             <span class="material-icons-outlined">supervisor_account</span>
           </Button>
           <SyncButton
+            v-if="getIsAuthenticated"
             label-text="Synchronize file"
             :object-id="data.id"
             :mode="ButtonMode.ICON"
           />
           <Button
             v-if="
-              data.public ||
-              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string)
+              getIsAuthenticated &&
+              (data.public ||
+                permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string))
             "
             v-tooltip.bottom="'File details'"
             class="p-button-lg p-button-rounded p-button-text"
             aria-label="File details"
             @click="showInfo(data.id)"
           >
-          <span class="material-icons-outlined">info</span>
-        </Button>
+            <span class="material-icons-outlined">info</span>
+          </Button>
           <DeleteObjectButton
             v-if="
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.DELETE, props.bucketId as string)
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 107759e3..0b078495 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -57,8 +57,8 @@ const routes: Array<RouteRecordRaw> = [
         path: 'objects',
         name: RouteNames.LIST_OBJECTS,
         component: () => import('@/views/list/ListObjectsView.vue'),
-        meta: { requiresAuth: true, breadcrumb: '__listObjectsDynamic', title: 'My Objects' },
-        props: createProps,
+        meta: { breadcrumb: '__listObjectsDynamic', title: 'My Objects' },
+        props: createProps
       },
       {
         path: 'deleted',
@@ -76,10 +76,10 @@ const routes: Array<RouteRecordRaw> = [
             name: RouteNames.LIST_OBJECTS_PUBLIC,
             component: () => import('@/views/list/ListPublicObjectsView.vue'),
             meta: { requiresAuth: false, breadcrumb: '__listPublicObjectsDynamic', title: 'My Public Objects' },
-            props: createProps,
+            props: createProps
           }
         ]
-      },
+      }
     ]
   },
   {
diff --git a/frontend/src/views/list/ListObjectsView.vue b/frontend/src/views/list/ListObjectsView.vue
index 29d0d7d1..353207c3 100644
--- a/frontend/src/views/list/ListObjectsView.vue
+++ b/frontend/src/views/list/ListObjectsView.vue
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import { differenceInSeconds } from 'date-fns';
 
 import { ObjectList } from '@/components/object';
-import { useToast } from '@/lib/primevue';
+import { Tag, useToast } from '@/lib/primevue';
 import { useAuthStore, useBucketStore, usePermissionStore } from '@/store';
 import { RouteNames, Permissions } from '@/utils/constants';
 
@@ -23,10 +23,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Store
 const bucketStore = useBucketStore();
-const { getUserId } = storeToRefs(useAuthStore());
+const { getUserId, getIsAuthenticated } = storeToRefs(useAuthStore());
 const permissionStore = usePermissionStore();
 const { getBucketPermissions } = storeToRefs(permissionStore);
-
 const toast = useToast();
 
 // State
@@ -41,13 +40,15 @@ const autoSync = async () => {
   const last = new Date(lastSyncRequestedDate.value as string);
   const now = new Date();
   const since = differenceInSeconds(now, last);
-  if(since > 3600){
-    await bucketStore.syncBucket(props.bucketId, false );
-    toast.info('Sync in progress.',
-      'It\'s been a while since we checked for changes on the file server. ' +
-      'Please refresh this page to ensure the file listing is up-to-date.', { life: 0 });
-  }
-  else if(syncQueueSize.value > 0){
+  if (since > 3600) {
+    await bucketStore.syncBucket(props.bucketId, false);
+    toast.info(
+      'Sync in progress.',
+      "It's been a while since we checked for changes on the file server. " +
+        'Please refresh this page to ensure the file listing is up-to-date.',
+      { life: 0 }
+    );
+  } else if (syncQueueSize.value > 0) {
     const word = syncQueueSize.value > 1 ? 'files' : 'file';
     toast.info('Sync in progress.', `${syncQueueSize.value} ${word} remaining.`, { life: 0 });
   }
@@ -61,17 +62,25 @@ onBeforeMount(async () => {
   const router = useRouter();
 
   // fetch buckets (which is already scoped by cur user's permissions) and populates bucket and permissions in store
-  const bucketResponse = await bucketStore.fetchBuckets({
-    bucketId: props.bucketId,
-    userId: getUserId.value,
-    objectPerms: true
-  });
+  let bucketResponse: any = [];
+  if (props?.bucketId) {
+    if (getIsAuthenticated.value) {
+      bucketResponse = await bucketStore.fetchBuckets({
+        bucketId: props.bucketId,
+        userId: getUserId.value,
+        objectPerms: true
+      });
+    } else {
+      bucketResponse = [await bucketStore.fetchBucket(props.bucketId)];
+    }
+  }
+
   if (bucketResponse?.length) {
     bucket.value = bucketResponse[0];
     ready.value = true;
     // sync bucket if necessary
     const hasRead = getBucketPermissions.value.filter((p) => p.permCode === Permissions.READ);
-    if(hasRead.length > 0) await autoSync();
+    if (hasRead.length > 0) await autoSync();
   } else {
     router.replace({ name: RouteNames.FORBIDDEN });
   }
@@ -103,7 +112,10 @@ onBeforeMount(async () => {
         />
       </span>
     </h2>
-    <ObjectList :bucket-id="props.bucketId" />
+    <ObjectList
+      :bucket-id="props.bucketId"
+      :is-bucket-public="bucket?.public"
+    />
   </div>
 </template>
 <style scoped lang="scss">

From 0cca435dc9e1150896d0526d2a44dbbba3a7a615 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Wed, 29 Oct 2025 15:09:54 -0700
Subject: [PATCH 5/5] Correctly handle public folders in ShareButton modal
 TabPanels

---
 frontend/src/components/common/Share.vue      | 19 +++++++++++--------
 .../src/components/common/ShareButton.vue     | 12 ++++++------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/common/Share.vue b/frontend/src/components/common/Share.vue
index 8f6e0603..a0a0917d 100644
--- a/frontend/src/components/common/Share.vue
+++ b/frontend/src/components/common/Share.vue
@@ -22,16 +22,19 @@ const props = withDefaults(defineProps<Props>(), {
 // store
 const { getConfig } = storeToRefs(useConfigStore());
 
+// TODO: public folders
 // Share link
-const shareLink: Ref<string>  = computed(() => {
-  if(props.inviteLink) return props.inviteLink; // use invite link if defined in prop
-  else if(props.resource.public) { // else if a public file
+const shareLink: Ref<string> = computed(() => {
+  if (props.inviteLink)
+    return props.inviteLink; // use invite link if defined in prop
+  else if (props.resource.public && props.resourceType === 'object') {
     return `${getConfig.value.coms?.apiPath}/object/${props.resource.id}`;
-  } else { // else either a protected file or bucket
-    const path = props.resourceType === 'object'
-      // eslint-disable-next-line max-len
-      ? `detail/objects?objectId=${props.resource.id}`
-      : `list/objects?bucketId=${props.resource.bucketId}`;
+  } else {
+    // else either a bucket or protected file
+    const path =
+      props.resourceType === 'object'
+        ? `detail/objects?objectId=${props.resource.id}`
+        : `list/objects?bucketId=${props.resource.bucketId}`;
     return `${window.location.origin}/${path}`;
   }
 });
diff --git a/frontend/src/components/common/ShareButton.vue b/frontend/src/components/common/ShareButton.vue
index 945affee..5aa0b497 100644
--- a/frontend/src/components/common/ShareButton.vue
+++ b/frontend/src/components/common/ShareButton.vue
@@ -110,7 +110,7 @@ const showDialog = (x: boolean) => {
     </div>
     <TabView>
       <TabPanel
-        v-if="resource?.public"
+        v-if="resource?.public && resourceType === 'object'"
         header="Direct public file link"
       >
         <Share
@@ -121,11 +121,11 @@ const showDialog = (x: boolean) => {
       </TabPanel>
       <!-- Disable for public until unauthed File Details page works -->
       <TabPanel
-        header="Share link"
-        :disabled="resource?.public"
+        :header="`BCBox ${resource?.public ? 'public ' : ''}link`"
+        :disabled="resourceType === 'object' && resource?.public"
       >
         <Share
-          label="Share link"
+          label="BCBox link"
           :resource-type="resourceType"
           :resource="resource"
         />
@@ -147,8 +147,8 @@ const showDialog = (x: boolean) => {
     :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
     @click="showDialog(true)"
   >
-  <span class="material-icons-outlined">ios_share</span>
-</Button>
+    <span class="material-icons-outlined">ios_share</span>
+  </Button>
 </template>
 
 <style scoped lang="scss">