Add backup UI

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -7,11 +7,16 @@ const DataImportExportTab = {
   data () {
     return {
       activeTab: 'profile',
-      newDomainToMute: ''
+      newDomainToMute: '',
+      listBackupsError: false,
+      addBackupError: false,
+      addedBackup: false,
+      backups: []
     }
   },
   created () {
     this.$store.dispatch('fetchTokens')
+    this.fetchBackups()
   },
   components: {
     Importer,
@@ -72,6 +77,28 @@ const DataImportExportTab = {
         }
         return user.screen_name
       }).join('\n')
+    },
+    addBackup () {
+      this.$store.state.api.backendInteractor.addBackup()
+        .then((res) => {
+          this.addedBackup = true
+          this.addBackupError = false
+        })
+        .catch((error) => {
+          this.addedBackup = false
+          this.addBackupError = error
+        })
+        .then(() => this.fetchBackups())
+    },
+    fetchBackups () {
+      this.$store.state.api.backendInteractor.listBackups()
+        .then((res) => {
+          this.backups = res
+          this.listBackupsError = false
+        })
+        .catch((error) => {
+          this.listBackupsError = error.error
+        })
     }
   }
 }

src/components/settings_modal/tabs/data_import_export_tab.vue

@@ -53,6 +53,67 @@
         :export-button-label="$t('settings.mute_export_button')"
       />
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_backup') }}</h2>
+      <p>{{ $t('settings.account_backup_description') }}</p>
+      <table>
+        <thead>
+          <tr>
+            <th>{{ $t('settings.account_backup_table_head') }}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="backup in backups"
+            :key="backup.id"
+          >
+            <td>{{ backup.inserted_at }}</td>
+            <td class="actions">
+              <a
+                v-if="backup.processed"
+                target="_blank"
+                :href="backup.url"
+              >
+                {{ $t('settings.download_backup') }}
+              </a>
+              <span
+                v-else
+              >
+                {{ $t('settings.backup_not_ready') }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        v-if="listBackupsError"
+        class="alert error"
+      >
+        {{ $t('settings.list_backups_error', { error }) }}
+        <button
+          :title="$t('settings.hide_list_backups_error_action')"
+          @click="listBackupsError = false"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="times"
+          />
+        </button>
+      </div>
+      <button
+        class="btn button-default"
+        @click="addBackup"
+      >
+        {{ $t('settings.add_backup') }}
+      </button>
+      <p v-if="addedBackup">
+        {{ $t('settings.added_backup') }}
+      </p>
+      <template v-if="addBackupError !== false">
+        <p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
+      </template>
+    </div>
   </div>
 </template>
 

src/services/api/api.service.js

@@ -87,6 +87,7 @@ const PLEROMA_CHAT_URL = id => `/api/v1/pleroma/chats/by-account-id/${id}`
 const PLEROMA_CHAT_MESSAGES_URL = id => `/api/v1/pleroma/chats/${id}/messages`
 const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
 const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
+const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
 
 const oldfetch = window.fetch
 
@@ -868,6 +869,25 @@ const fetchBlocks = ({ credentials }) => {
     .then((users) => users.map(parseUser))
 }
 
+const addBackup = ({ credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_BACKUP_URL,
+    method: 'POST',
+    credentials
+  })
+}
+
+const listBackups = ({ credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_BACKUP_URL,
+    method: 'GET',
+    credentials,
+    params: {
+      _cacheBooster: (new Date()).getTime()
+    }
+  })
+}
+
 const fetchOAuthTokens = ({ credentials }) => {
   const url = '/api/oauth_tokens.json'
 
@@ -1325,6 +1345,8 @@ const apiService = {
   generateMfaBackupCodes,
   mfaSetupOTP,
   mfaConfirmOTP,
+  addBackup,
+  listBackups,
   fetchFollowRequests,
   approveUser,
   denyUser,