Merge pull request #12142 from owncloud/feat/psec-popup

feat(password-protected-folders): open folder in an iframe

Author: LukasHirt

changelog/unreleased/enhancement-add-password-protected-folders-handler.md

@@ -0,0 +1,6 @@
+Enhancement: Add password protected folders handler
+
+We've added a new file action used to handle password protected folders. When a password protected folder is opened, a popup is opened prompting the user to enter the password. After successfully entering the password, content of the folder is displayed inside of the popup.
+
+https://github.com/owncloud/web/pull/12142
+https://github.com/owncloud/web/issues/12039

changelog/unreleased/enhancement-control-more-elements-visibility-via-url-query.md

@@ -0,0 +1,9 @@
+Enhancement: Control more elements visibility via URL query
+
+We've added new params into the URL query that allows configuring elements visibility. The following params can be used:
+
+- `hide-app-switcher`: hides the application switcher in the top bar
+- `hide-account-menu`: hides the feedback action, notifications bell, and user menu
+- `hide-navigation`: hides the navigation sidebar and mobile navigation
+
+https://github.com/owncloud/web/pull/12142

dev/docker/ocis/csp.yaml

@@ -11,6 +11,8 @@ directives:
     - '''self'''
   frame-ancestors:
     - '''self'''
+    - 'https://host.docker.internal:9200'
+    - 'https://host.docker.internal:9201'
   frame-src:
     - '''self'''
     - 'blob:'

packages/web-app-password-protected-folders/src/components/FolderViewModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="oc-height-1-1" tabindex="0">
+    <app-loading-spinner v-if="isLoading" />
+    <iframe
+      v-show="!isLoading"
+      id="iframe-folder-view"
+      ref="iframeRef"
+      class="oc-width-1-1 oc-height-1-1"
+      :title="iframeTitle"
+      :src="iframeUrl.href"
+      tabindex="0"
+      @load="onLoad"
+    ></iframe>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Modal, useThemeStore } from '@ownclouders/web-pkg/src/composables'
+import AppLoadingSpinner from '@ownclouders/web-pkg/src/components/AppLoadingSpinner.vue'
+import { unref } from 'vue'
+
+const props = defineProps<{
+  modal: Modal
+  publicLink: string
+}>()
+
+const iframeRef = ref<HTMLIFrameElement>()
+const isLoading = ref(true)
+const themeStore = useThemeStore()
+
+const iframeTitle = themeStore.currentTheme.common?.name
+const iframeUrl = new URL(props.publicLink)
+iframeUrl.searchParams.append('hide-logo', 'true')
+iframeUrl.searchParams.append('hide-app-switcher', 'true')
+iframeUrl.searchParams.append('hide-account-menu', 'true')
+iframeUrl.searchParams.append('hide-navigation', 'true')
+
+const onLoad = () => {
+  isLoading.value = false
+  unref(iframeRef).contentWindow.focus()
+}
+</script>
+
+<style lang="scss">
+.oc-modal.folder-view-modal {
+  max-width: 80vw;
+  border: none;
+  overflow: hidden;
+
+  .oc-modal-title {
+    display: none;
+  }
+
+  .oc-modal-body {
+    padding: 0;
+
+    &-message {
+      height: 60vh;
+      margin: 0;
+    }
+  }
+
+  .oc-modal-body-actions {
+    background-color: var(--oc-color-swatch-brand-default);
+  }
+}
+</style>

packages/web-app-password-protected-folders/src/composables/useCreateFileHandler.ts

@@ -30,7 +30,7 @@ export const useCreateFileHandler = () => {
     const folder = await clientService.webdav.createFolder(unref(space), { path: folderPath })
     upsertResource(folder)
 
-    await addLink({
+    const share = await addLink({
       clientService,
       space,
       resource: folder,
@@ -39,7 +39,10 @@ export const useCreateFileHandler = () => {
 
     const path = urlJoin(currentFolder.path, fileName + '.psec')
 
-    const file = await clientService.webdav.putFileContents(unref(space), { path })
+    const file = await clientService.webdav.putFileContents(unref(space), {
+      path,
+      content: btoa(share.webUrl)
+    })
     upsertResource(file)
   }
 

packages/web-app-password-protected-folders/src/composables/useOpenFolderAction.ts

@@ -1,16 +1,31 @@
-import { FileAction } from '@ownclouders/web-pkg'
+import { FileAction, useClientService, useModals } from '@ownclouders/web-pkg'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import FolderViewModal from '../components/FolderViewModal.vue'
 
 export const useOpenFolderAction = () => {
   const { $gettext } = useGettext()
+  const { dispatchModal } = useModals()
+  const clientService = useClientService()
 
   const action = computed<FileAction>(() => ({
     name: 'open-password-protected-folder',
     icon: 'external-link',
-    handler: () => {
-      // TODO: add handler
-      console.warn('NOT IMPLEMENTED')
+    async handler({ resources, space }) {
+      const [file] = resources
+      const { body } = await clientService.webdav.getFileContents(space, file)
+      const publicLink = atob(body)
+
+      dispatchModal({
+        title: resources.at(0).name,
+        elementClass: 'folder-view-modal',
+        customComponent: FolderViewModal,
+        customComponentAttrs: () => ({
+          publicLink
+        }),
+        hideConfirmButton: true,
+        cancelText: $gettext('Close folder')
+      })
     },
     label: () => $gettext('Open folder'),
     isDisabled: () => false,

packages/web-app-password-protected-folders/tests/unit/components/FolderViewModal.spec.ts

@@ -0,0 +1,38 @@
+import { defaultComponentMocks, defaultPlugins, shallowMount } from '@ownclouders/web-test-helpers'
+import FolderViewModal from '../../../src/components/FolderViewModal.vue'
+import { Modal } from '@ownclouders/web-pkg'
+import { mock } from 'vitest-mock-extended'
+
+const SELECTORS = Object.freeze({
+  iframe: '#iframe-folder-view'
+})
+
+describe('FolderViewModal', () => {
+  it('should set iframe src', () => {
+    const { wrapper } = getWrapper()
+    const iframe = wrapper.find(SELECTORS.iframe)
+
+    expect(iframe.attributes('src')).toEqual(
+      'https://example.org/public-link?hide-logo=true&hide-app-switcher=true&hide-account-menu=true&hide-navigation=true'
+    )
+  })
+})
+
+function getWrapper() {
+  const mocks = defaultComponentMocks()
+
+  return {
+    mocks,
+    wrapper: shallowMount(FolderViewModal, {
+      props: {
+        modal: mock<Modal>(),
+        publicLink: 'https://example.org/public-link'
+      },
+      global: {
+        plugins: defaultPlugins(),
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}

packages/web-app-password-protected-folders/tests/unit/composables/useCreateFileHandler.spec.ts

@@ -1,9 +1,10 @@
 import { defaultComponentMocks, getComposableWrapper } from '@ownclouders/web-test-helpers'
 import { useCreateFileHandler } from '../../../src/composables/useCreateFileHandler'
 import { mock } from 'vitest-mock-extended'
-import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { LinkShare, Resource, SpaceResource } from '@ownclouders/web-client'
 import { useSharesStore } from '@ownclouders/web-pkg'
 import { SharingLinkType } from '@ownclouders/web-client/graph/generated'
+import { MockedFunction } from 'vitest'
 
 const space = mock<SpaceResource>()
 const currentFolder = mock<Resource>({ path: '/current/folder' })
@@ -15,6 +16,12 @@ describe('createFileHandler', () => {
       async setup(instance, mocks) {
         const { addLink } = useSharesStore()
 
+        ;(addLink as MockedFunction<typeof addLink>).mockResolvedValue(
+          mock<LinkShare>({
+            webUrl: 'https://example.org/public-link'
+          })
+        )
+
         await instance.createFileHandler({
           fileName: 'protected',
           space,
@@ -33,7 +40,8 @@ describe('createFileHandler', () => {
           options: { password: 'Pass$123', type: SharingLinkType.Edit }
         })
         expect(mocks.$clientService.webdav.putFileContents).toHaveBeenCalledWith(space, {
-          path: '/current/folder/protected.psec'
+          path: '/current/folder/protected.psec',
+          content: btoa('https://example.org/public-link')
         })
       }
     })
@@ -49,6 +57,7 @@ function getWrapper({
   ) => void
 }) {
   const mocks = defaultComponentMocks()
+
   mocks.$clientService.webdav.createFolder.mockResolvedValue(createdFolder)
 
   return {

packages/web-app-password-protected-folders/tests/unit/composables/useOpenFolderAction.spec.ts

@@ -0,0 +1,60 @@
+import { defaultComponentMocks, getComposableWrapper } from '@ownclouders/web-test-helpers'
+import { useOpenFolderAction } from '../../../src/composables/useOpenFolderAction'
+import { unref } from 'vue'
+import { mock } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { useModals } from '@ownclouders/web-pkg'
+import { MockedFunction } from 'vitest'
+import FolderViewModal from '../../../src/components/FolderViewModal.vue'
+
+describe('openFolderAction', () => {
+  it('should open a modal with the public link', () => {
+    getWrapper({
+      async setup(instance) {
+        const { dispatchModal } = useModals()
+
+        await unref(instance).handler({
+          resources: [mock<Resource>()],
+          space: mock<SpaceResource>()
+        })
+
+        const modalConfig = (dispatchModal as MockedFunction<typeof dispatchModal>).mock.calls
+          .at(0)
+          .at(0)
+        const attrs = modalConfig.customComponentAttrs()
+
+        expect(dispatchModal).toHaveBeenCalledWith(
+          expect.objectContaining({ customComponent: FolderViewModal })
+        )
+        expect(attrs).toStrictEqual({ publicLink: 'https://example.org/public-link' })
+      }
+    })
+  })
+})
+
+function getWrapper({
+  setup
+}: {
+  setup: (
+    instance: ReturnType<typeof useOpenFolderAction>,
+    mocks: ReturnType<typeof defaultComponentMocks>
+  ) => void
+}) {
+  const mocks = defaultComponentMocks()
+  mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+    body: btoa('https://example.org/public-link')
+  })
+
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useOpenFolderAction()
+        setup(instance, mocks)
+      },
+      {
+        mocks,
+        provide: mocks
+      }
+    )
+  }
+}

packages/web-pkg/src/composables/piniaStores/config/types.ts

@@ -122,7 +122,10 @@ const OptionsConfigSchema = z.object({
     })
     .optional(),
   userListRequiresFilter: z.boolean().optional(),
-  hideLogo: z.boolean().optional()
+  hideLogo: z.boolean().optional(),
+  hideAppSwitcher: z.boolean().optional(),
+  hideAccountMenu: z.boolean().optional(),
+  hideNavigation: z.boolean().optional()
 })
 
 export type OptionsConfig = z.infer<typeof OptionsConfigSchema>