From 59570dd62fa0c694b9f6cfb2298cbd54a693d963 Mon Sep 17 00:00:00 2001
From: Tristan Cendan <tristan.cendan@cern.ch>
Date: Mon, 3 Aug 2026 15:24:27 +0200
Subject: [PATCH 1/2] takeout: Add takeout section in settings

---
 packages/web-runtime/src/pages/account.vue | 30 +++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 8ec78f29d6a..3175ae7bb15 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -255,6 +255,28 @@
           </oc-td>
         </oc-tr>
       </account-table>
+
+      <account-table
+        v-if="showTakeout"
+        :title="$gettext('Takeout')"
+        :fields="[
+          $gettext('Takeout action name'),
+          $gettext('Takeout action description'),
+          $gettext('Takeout actions')
+        ]"
+        class="account-page-takeout"
+      >
+        <oc-tr class="account-page-takeout">
+          <oc-td>{{ $gettext('Export') }}</oc-td>
+          <oc-td>
+            <span v-text="$gettext('Export all your files from CERNBox')" />
+          </oc-td>
+          <oc-td data-testid="takeout">
+            <takeout />
+          </oc-td>
+        </oc-tr>
+      </account-table>
+
       <account-table
         v-if="showGdprExport"
         :title="$gettext('GDPR')"
@@ -313,6 +335,7 @@ import QuotaInformation from '../components/Account/QuotaInformation.vue'
 import AccountTable from '../components/Account/AccountTable.vue'
 import { useNotificationsSettings } from '../composables/notificationsSettings'
 import { captureException } from '@sentry/vue'
+import Takeout from '../components/Account/Takeout.vue'
 
 const MOBILE_BREAKPOINT = 800
 export default defineComponent({
@@ -323,7 +346,8 @@ export default defineComponent({
     GdprExport,
     ExtensionPreference,
     ThemeSwitcher,
-    AccountTable
+    AccountTable,
+    Takeout
   },
   setup() {
     const { showMessage, showErrorMessage } = useMessages()
@@ -373,6 +397,9 @@ export default defineComponent({
         spacesStore.personalSpace
       )
     })
+    const showTakeout = computed(() => {
+      return authStore.userContextReady
+    })
     const showChangePassword = computed(() => {
       return authStore.userContextReady && !capabilityStore.graphUsersChangeSelfPasswordDisabled
     })
@@ -754,6 +781,7 @@ export default defineComponent({
       accountEditLink: computed(() => configStore.options.accountEditLink),
       showLogout,
       showGdprExport,
+      showTakeout,
       showNotifications,
       showAccountSection,
       showChangePassword,

From 91b5db21e7b5dafcad70b95c46ceb667e74ff0f7 Mon Sep 17 00:00:00 2001
From: Tristan Cendan <tristan.cendan@cern.ch>
Date: Mon, 3 Aug 2026 15:25:19 +0200
Subject: [PATCH 2/2] takeout: Add takeout component

---
 .../src/components/Account/Takeout.vue        | 404 ++++++++++++++++++
 1 file changed, 404 insertions(+)
 create mode 100644 packages/web-runtime/src/components/Account/Takeout.vue

diff --git a/packages/web-runtime/src/components/Account/Takeout.vue b/packages/web-runtime/src/components/Account/Takeout.vue
new file mode 100644
index 00000000000..737c46d1661
--- /dev/null
+++ b/packages/web-runtime/src/components/Account/Takeout.vue
@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <span v-if="loading">
+      <oc-spinner />
+    </span>
+    <div
+      v-else-if="takeoutInProgress"
+      class="oc-flex oc-flex-middle oc-flex-right"
+      role="status"
+      data-testid="takeout-in-process"
+    >
+      <oc-spinner size="xsmall" aria-hidden="true" />
+      <span class="oc-ml-xs" v-text="statusMessage" />
+    </div>
+    <div v-else class="oc-flex oc-flex-middle oc-flex-right">
+      <template v-if="lastRunRecent">
+        <div
+          v-oc-tooltip="finishedAtExact"
+          class="oc-flex oc-flex-middle oc-mr-m"
+          data-testid="takeout-last-run"
+        >
+          <oc-icon name="checkbox-circle" fill-type="line" size="small" variation="success" />
+          <span class="oc-ml-xs" v-text="completedMessage" />
+        </div>
+        <oc-button
+          v-if="status?.archives_url"
+          appearance="raw"
+          variation="primary"
+          type="a"
+          :href="status.archives_url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="oc-mr-s"
+          data-testid="takeout-download-btn"
+        >
+          <div class="oc-flex oc-flex-middle">
+            <oc-icon name="external-link" fill-type="line" size="small" />
+            <span class="oc-ml-xs" v-text="$gettext('View export')" />
+          </div>
+        </oc-button>
+      </template>
+
+      <oc-button
+        id="takeout-export-toggle"
+        appearance="raw"
+        variation="primary"
+        data-testid="takeout-export-btn"
+      >
+        <div class="oc-flex oc-flex-middle">
+          <oc-icon name="archive" fill-type="line" size="small" />
+          <span class="oc-ml-xs" v-text="$gettext('Export your files')" />
+        </div>
+      </oc-button>
+      <oc-drop
+        ref="takeoutDrop"
+        drop-id="takeout-options-drop"
+        toggle="#takeout-export-toggle"
+        mode="click"
+        padding-size="medium"
+        position="bottom-end"
+        :close-on-click="false"
+      >
+        <div class="oc-mb-m">
+          <oc-select
+            :model-value="selectedFormat"
+            :label="$gettext('Archive format')"
+            :clearable="false"
+            :options="formatOptions"
+            class="oc-mb-s"
+            @update:model-value="(value) => (selectedFormat = value)"
+          />
+          <oc-select
+            :model-value="selectedSize"
+            :label="$gettext('Maximum archive size')"
+            :clearable="false"
+            :options="sizeOptions"
+            @update:model-value="(value) => (selectedSize = value)"
+          />
+          <p
+            class="oc-mt-s oc-text-small"
+            v-text="
+              $gettext(
+                'The maximum archive size is a soft limit. Your archives may be significantly larger or smaller.'
+              )
+            "
+          />
+          <div class="oc-flex oc-flex-right oc-mt-m">
+            <oc-button
+              variation="primary"
+              appearance="filled"
+              :disabled="requestPending"
+              data-testid="takeout-start-btn"
+              @click="requestTakeout"
+            >
+              <span v-text="$gettext('Start export')" />
+            </oc-button>
+          </div>
+        </div>
+      </oc-drop>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, ref, shallowRef, unref } from 'vue'
+import { useTask } from 'vue-concurrency'
+import { useGettext } from 'vue3-gettext'
+import { DateTime } from 'luxon'
+import { useClientService, useMessages, formatDateFromISO } from '@ownclouders/web-pkg'
+import { call } from '@ownclouders/web-client'
+
+type TakeoutState = 'enqueued' | 'running' | 'failed' | 'succeeded'
+
+interface TakeoutStatus {
+  run_id: string
+  state: TakeoutState
+  enqueued_at?: string
+  started_at?: string
+  finished_at?: string
+  archives_url?: string
+}
+
+interface SelectOption<T> {
+  label: string
+  value: T
+}
+
+const TAKEOUT_ENDPOINT = '/takeout'
+const ACTIVE_STATES: TakeoutState[] = ['enqueued', 'running', 'failed']
+const POLL_SCHEDULE = [
+  { untilElapsed: 60000, delay: 10000 },
+  { untilElapsed: 300000, delay: 30000 }
+]
+const POLL_MAX_DELAY = 60000
+const MAX_STATUS_FAILURES = 3
+const CLOCK_INTERVAL = 30000
+const ARCHIVE_LINK_MAX_AGE_HOURS = 1
+
+// TODO: add cancellation backend
+const isCancellation = (e: any) => e?.code === 'ERR_CANCELED' || e?.name === 'AbortError'
+
+const unhandledState = (state: never): string => {
+  console.error(`Unhandled takeout state: ${state}`)
+  return ''
+}
+
+export default defineComponent({
+  name: 'TakeoutExport',
+  setup() {
+    const { showMessage, showErrorMessage } = useMessages()
+    const language = useGettext()
+    const { $gettext } = language
+    const clientService = useClientService()
+
+    const loading = ref(true)
+    const requestPending = ref(false)
+    const status = ref<TakeoutStatus>()
+    const takeoutDrop = ref()
+
+    const pollTimer = ref<ReturnType<typeof setTimeout>>()
+    const pollingSince = ref(0)
+    const failureCount = ref(0)
+
+    const clockTimer = ref<ReturnType<typeof setInterval>>()
+    const now = shallowRef(DateTime.now())
+
+    const formatOptions: SelectOption<string>[] = [
+      { label: $gettext('ZIP (.zip)'), value: 'zip' },
+      { label: $gettext('Tarball (.tar.gz)'), value: 'tgz' }
+    ]
+    const sizeOptions: SelectOption<number>[] = [
+      { label: $gettext('%{size} GB', { size: '1' }), value: 1 },
+      { label: $gettext('%{size} GB', { size: '2' }), value: 2 },
+      { label: $gettext('%{size} GB', { size: '5' }), value: 5 },
+      { label: $gettext('%{size} GB', { size: '10' }), value: 10 }
+    ]
+    const selectedFormat = ref<SelectOption<string>>(formatOptions[0])
+    const selectedSize = ref<SelectOption<number>>(sizeOptions[1])
+
+    const stopClock = () => {
+      clearInterval(unref(clockTimer))
+      clockTimer.value = undefined
+    }
+
+    const startClock = () => {
+      if (unref(clockTimer)) {
+        return
+      }
+      clockTimer.value = setInterval(() => (now.value = DateTime.now()), CLOCK_INTERVAL)
+    }
+
+    const stopPolling = () => {
+      clearTimeout(unref(pollTimer))
+      pollTimer.value = undefined
+      pollingSince.value = 0
+    }
+
+    const pollDelay = () => {
+      const elapsed = Date.now() - unref(pollingSince)
+      return (
+        POLL_SCHEDULE.find(({ untilElapsed }) => elapsed < untilElapsed)?.delay ?? POLL_MAX_DELAY
+      )
+    }
+
+    const schedulePoll = () => {
+      clearTimeout(unref(pollTimer))
+      if (document.hidden) {
+        return
+      }
+      if (!unref(pollingSince)) {
+        pollingSince.value = Date.now()
+      }
+      pollTimer.value = setTimeout(() => loadStatusTask.perform(), pollDelay())
+    }
+
+    const awaitingRun = computed(() => {
+      const s = unref(status)
+      return s?.state === 'enqueued' && !s.run_id
+    })
+
+    const loadStatusTask = useTask(function* (signal) {
+      try {
+        const { data } = yield* call(
+          clientService.httpAuthenticated.get<TakeoutStatus>(TAKEOUT_ENDPOINT, { signal })
+        )
+
+        status.value = data
+        failureCount.value = 0
+
+        if (ACTIVE_STATES.includes(data.state)) {
+          schedulePoll()
+        } else {
+          stopPolling()
+        }
+      } catch (e) {
+        if (isCancellation(e)) {
+          return
+        }
+
+        const missing = e.response?.status === 404
+        if (missing && !unref(awaitingRun)) {
+          status.value = undefined
+          stopPolling()
+          return
+        }
+        if (!missing) {
+          console.error(e)
+        }
+
+        failureCount.value += 1
+        if (unref(failureCount) < MAX_STATUS_FAILURES) {
+          schedulePoll()
+          return
+        }
+
+        if (unref(awaitingRun)) {
+          status.value = undefined
+        }
+        stopPolling()
+        showErrorMessage({
+          title: $gettext('Export status could not be retrieved'),
+          errors: [e]
+        })
+      } finally {
+        loading.value = false
+      }
+    }).restartable()
+
+    const takeoutInProgress = computed(() => {
+      const s = unref(status)
+      return !!s && ACTIVE_STATES.includes(s.state)
+    })
+
+    const lastRunRecent = computed(() => {
+      const s = unref(status)
+      if (s?.state !== 'succeeded' || !s.finished_at) {
+        return false
+      }
+      const ageHours = Math.abs(DateTime.fromISO(s.finished_at).diff(unref(now), 'hours').hours)
+      return ageHours < ARCHIVE_LINK_MAX_AGE_HOURS
+    })
+
+    const coarseRelativeTime = (iso: string): string => {
+      const then = DateTime.fromISO(iso)
+      const base = unref(now)
+      if (Math.abs(then.diff(base, 'minutes').minutes) < 1) {
+        return $gettext('just now')
+      }
+      return then.toRelative({
+        base,
+        locale: language.current,
+        unit: ['days', 'hours', 'minutes']
+      })
+    }
+
+    const statusMessage = computed(() => {
+      const s = unref(status)
+      if (!s) {
+        return ''
+      }
+      switch (s.state) {
+        case 'enqueued':
+          return $gettext('Your export is pending and will start shortly…')
+        case 'running':
+          return s.started_at
+            ? $gettext('Exporting your files… Started %{when}.', {
+                when: coarseRelativeTime(s.started_at)
+              })
+            : $gettext('Exporting your files… This may take a while.')
+        case 'failed':
+          return $gettext('Something went wrong. Trying again shortly.')
+        case 'succeeded':
+          return ''
+        default:
+          return unhandledState(s.state)
+      }
+    })
+
+    const completedMessage = computed(() => {
+      const s = unref(status)
+      if (!s?.finished_at) {
+        return ''
+      }
+      return $gettext('Export completed %{when}', {
+        when: coarseRelativeTime(s.finished_at)
+      })
+    })
+
+    const finishedAtExact = computed(() => {
+      const s = unref(status)
+      return s?.finished_at ? formatDateFromISO(s.finished_at, language.current) : ''
+    })
+
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        stopPolling()
+        stopClock()
+        return
+      }
+      now.value = DateTime.now()
+      startClock()
+      if (unref(takeoutInProgress)) {
+        loadStatusTask.perform()
+      }
+    }
+
+    const requestTakeout = async () => {
+      requestPending.value = true
+      try {
+        await clientService.httpAuthenticated.post(TAKEOUT_ENDPOINT, {
+          archive_format: unref(selectedFormat).value,
+          max_archive_size: unref(selectedSize).value * 10 ** 9 // In GB, bitshifts overflow
+        })
+
+        failureCount.value = 0
+        status.value = { run_id: '', state: 'enqueued' }
+        schedulePoll()
+
+        unref(takeoutDrop)?.hide()
+        showMessage({ title: $gettext('Takeout export has been requested') })
+      } catch (e) {
+        console.error(e)
+        showErrorMessage({
+          title: $gettext('Takeout export could not be requested'),
+          errors: [e]
+        })
+      } finally {
+        requestPending.value = false
+      }
+    }
+
+    onMounted(() => {
+      loadStatusTask.perform()
+      startClock()
+      document.addEventListener('visibilitychange', onVisibilityChange)
+    })
+
+    onUnmounted(() => {
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+      stopPolling()
+      stopClock()
+      loadStatusTask.cancelAll()
+    })
+
+    return {
+      loading,
+      loadStatusTask,
+      status,
+      requestPending,
+      takeoutDrop,
+      formatOptions,
+      sizeOptions,
+      selectedFormat,
+      selectedSize,
+      takeoutInProgress,
+      lastRunRecent,
+      statusMessage,
+      completedMessage,
+      finishedAtExact,
+      requestTakeout
+    }
+  }
+})
+</script>