[6.x] Fix backup downloads

resources/js/components/utilities/DatabaseBackup.vue

@@ -2,34 +2,55 @@
   import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
   import dbBackupController from '@actions/Utilities/DbBackupController';
   import {useForm} from '@inertiajs/vue3';
-  import type CraftCheckbox from '@craftcms/cp/src/components/checkbox/checkbox';
+  import CraftCheckbox from '@craftcms/cp/vue/CraftCheckbox.vue';
+  import {useTemplateRef} from 'vue';
+  import useCraftData from '@/composables/useCraftData';
 
   const form = useForm({
-    downloadBackup: false,
+    downloadBackup: true,
   });
 
+  const {csrfTokenValue, csrfTokenName} = useCraftData();
+  const formRef = useTemplateRef('formRef');
+
   function handleSubmit() {
     form.clearErrors();
-    form.submit(dbBackupController(), {
-      onError: (e) => {
-        console.log('uh oh');
+
+    // If downloading, submit form natively to handle file response
+    if (form.downloadBackup) {
+      formRef.value?.submit();
+      return;
+    }
+
+    form.post(dbBackupController().url, {
+      onSuccess: () => {
+        form.reset();
       },
     });
   }
 </script>
 
 <template>
   <div class="p-4">
-    <form @submit.prevent="handleSubmit" id="db-backup" method="post">
-      <craft-checkbox
+    <form
+      :action="dbBackupController().url"
+      ref="formRef"
+      @submit.prevent="handleSubmit"
+      id="db-backup"
+      method="post"
+    >
+      <input
+        v-if="csrfTokenName && csrfTokenValue"
+        type="hidden"
+        :name="csrfTokenName"
+        :value="csrfTokenValue"
+      />
+      <CraftCheckbox
         :label="t('Download backup')"
         name="downloadBackup"
-        .checked="form.downloadBackup"
-        @model-value-changed="
-          form.downloadBackup =
-            ($event.target as CraftCheckbox)?.checked === true
-        "
-      ></craft-checkbox>
+        v-model="form.downloadBackup"
+        value="on"
+      />
 
       <div class="mt-4">
         <craft-button

resources/js/composables/useCraftData.ts

@@ -1,6 +1,8 @@
 import {usePage} from '@inertiajs/vue3';
 
 export interface CraftData {
+  csrfTokenValue?: string | null;
+  csrfTokenName?: string | null;
   system: {
     name: string;
     icon: string | null;

resources/translations/en/app.php

@@ -390,6 +390,8 @@
     'Copy “{name}” value' => 'Copy “{name}” value',
     'Copy' => 'Copy',
     'Could not create a preview token.' => 'Could not create a preview token.',
+    'Could not create backup: check the logs for details.' => 'Could not create backup: check the logs for details.',
+    'Could not create backup: the backup file doesn’t exist.' => 'Could not create backup: the backup file doesn’t exist.',
     'Could not create the group:' => 'Could not create the group:',
     'Could not duplicate all elements due to validation errors.' => 'Could not duplicate all elements due to validation errors.',
     'Could not duplicate elements due to validation errors.' => 'Could not duplicate elements due to validation errors.',

src/Http/Controllers/Utilities/DbBackupController.php

@@ -5,17 +5,19 @@
 namespace CraftCms\Cms\Http\Controllers\Utilities;
 
 use CraftCms\Cms\Database\Backups;
+use CraftCms\Cms\Http\RespondsWithFlash;
 use CraftCms\Cms\Support\File;
 use CraftCms\Cms\Utility\Utilities;
 use CraftCms\Cms\Utility\Utilities\DbBackup;
-use Exception;
 use Illuminate\Http\Request;
 use Throwable;
 
 use function CraftCms\Cms\t;
 
 readonly class DbBackupController
 {
+    use RespondsWithFlash;
+
     public function __construct(Utilities $utilitiesService)
     {
         if (! $utilitiesService->checkAuthorization(DbBackup::class)) {
@@ -28,20 +30,22 @@ public function __invoke(Request $request, Backups $backups)
         try {
             $backupPath = $backups->backup();
         } catch (Throwable $e) {
-            throw new Exception('Could not create backup: '.$e->getMessage());
+            report($e);
+
+            return $this->asFailure(t('Could not create backup: check the logs for details.'));
         }
 
         if (! is_file($backupPath)) {
-            throw new Exception("Could not create backup: the backup file doesn't exist.");
+            return $this->asFailure(t('Could not create backup: the backup file doesn’t exist.'));
         }
 
         // Zip it up and delete the SQL file
         $zipPath = File::zip($backupPath);
 
         File::delete($backupPath);
 
-        if (! $request->input('downloadBackup')) {
-            return back()->with('success', t('Backup created.'));
+        if (! $request->boolean('downloadBackup')) {
+            return $this->asSuccess(t('Backup created.'));
         }
 
         return response()->download($zipPath);

src/Http/Middleware/HandleInertiaRequests.php

@@ -95,6 +95,8 @@ public function share(Request $request): array
                 'hasWaitingJobs' => false,
             ],
             'craft' => fn () => [
+                'csrfTokenValue' => $generalConfig->enableCsrfProtection ? csrf_token() : null,
+                'csrfTokenName' => $generalConfig->enableCsrfProtection ? $generalConfig->csrfTokenName : null,
                 'general' => [
                     'useEmailAsUsername' => $generalConfig->useEmailAsUsername,
                 ],