feat(takeout): add a takeout section to the account settings

Shows the export component in its own section of the account page, next to
the GDPR export.

Author: Tristan-C789

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,