feat(ui) backup

web/src/lang/de.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Sicherung',
+  downloadTheProjectBackupFile: 'Laden Sie die Projektsicherungsdatei (in JSON) herunter.',
   incorrectUsrPwd: 'Falscher Benutzername oder falsches Passwort',
   askDeleteUser: 'Soll dieser Benutzer gelöscht werden?',
   askDeleteTemp: 'Soll diese Vorlage gelöscht werden?',

web/src/lang/en.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Backup',
+  downloadTheProjectBackupFile: 'Download the project backup file (in json)',
   incorrectUsrPwd: 'Incorrect login or password',
   askDeleteUser: 'Do you really want to delete this user?',
   askDeleteTemp: 'Do you really want to delete this template?',

web/src/lang/es.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Respaldo',
+  downloadTheProjectBackupFile: 'Descargue el archivo de copia de seguridad del proyecto (en json)',
   incorrectUsrPwd: 'Usuario o contraseña incorrecta',
   askDeleteUser: '¿Realmente desea eliminar este usuario?',
   askDeleteTemp: '¿Realmente desea eliminar esta plantilla?',

web/src/lang/fr.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Sauvegarde',
+  downloadTheProjectBackupFile: 'Téléchargez le fichier de sauvegarde du projet (en json)',
   incorrectUsrPwd: 'Identifiant ou mot de passe incorrect',
   askDeleteUser: 'Voulez-vous vraiment supprimer cet utilisateur ?',
   askDeleteTemp: 'Voulez-vous vraiment supprimer ce modèle ?',

web/src/lang/it.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'backup',
+  downloadTheProjectBackupFile: 'Scarica il file di backup del progetto (in json)',
   incorrectUsrPwd: 'Nome utente o password errati',
   askDeleteUser: 'Vuoi davvero eliminare questo utente?',
   askDeleteTemp: 'Vuoi davvero eliminare questo modello?',

web/src/lang/pl.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Kopia zapasowa',
+  downloadTheProjectBackupFile: 'Pobierz plik kopii zapasowej projektu (w formacie json)',
   incorrectUsrPwd: 'Nieprawidłowa nazwa użytkownika lub hasło.',
   askDeleteUser: 'Czy na pewno chcesz usunąć tego użytkownika?',
   askDeleteTemp: 'Czy na pewno chcesz usunąć ten szablon?',

web/src/lang/pt.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Cópia de segurança',
+  downloadTheProjectBackupFile: 'Baixe o arquivo de backup do projeto (em json)',
   incorrectUsrPwd: 'Nome de utilizador ou palavra-passe incorretos',
   askDeleteUser: 'Tem a certeza de que deseja eliminar este utilizador?',
   askDeleteTemp: 'Tem a certeza de que deseja eliminar este modelo?',

web/src/lang/pt_br.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Cópia de segurança',
+  downloadTheProjectBackupFile: 'Baixe o arquivo de backup do projeto (em json)',
   incorrectUsrPwd: 'Usuário ou senha incorretos',
   askDeleteUser: 'Você realmente deseja excluir este usuário?',
   askDeleteTemp: 'Você realmente deseja excluir este modelo?',

web/src/lang/ru.js

@@ -1,4 +1,6 @@
 export default {
+  backup: 'Бэкап',
+  downloadTheProjectBackupFile: 'Загрузите файл резервной копии проекта (в формате JSON)',
   incorrectUsrPwd: 'Некорректный логин или пароль',
   askDeleteUser: 'Вы действительно хотите удалить этого пользователя?',
   askDeleteTemp: 'Вы действительно хотите удалить этот шаблон?',

web/src/lang/zh_hans.js

@@ -1,4 +1,6 @@
 export default {
+  backup: '备份',
+  downloadTheProjectBackupFile: '下载项目备份文件（json格式）',
   incorrectUsrPwd: '用户名或密码错误',
   askDeleteUser: '您确定要删除此用户吗？',
   askDeleteTemp: '您确实要删除此模板吗？',

web/src/lang/zh_hant.js

@@ -1,4 +1,6 @@
 export default {
+  backup: '備份',
+  downloadTheProjectBackupFile: '下載專案備份檔（json格式）',
   incorrectUsrPwd: '使用者名稱或密碼錯誤',
   askDeleteUser: '您確定要刪除此使用者嗎？ ',
   askDeleteTemp: '您確實要刪除此範本嗎？ ',

web/src/views/project/Settings.vue

@@ -27,8 +27,20 @@
         <v-btn color="primary" @click="saveProject()">{{ $t('save') }}</v-btn>
       </div>
     </div>
-
-    <div class="project-delete-form">
+    <div class="project-backup project-settings-button">
+      <v-row align="center">
+        <v-col class="shrink">
+          <v-btn color="primary" @click="backupProject" >{{ $t('backup') }}
+          </v-btn>
+        </v-col>
+        <v-col class="grow">
+          <div style="font-size: 14px;">
+            {{ $t('downloadTheProjectBackupFile') }}
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+    <div class="project-delete-form project-settings-button">
       <v-row align="center">
         <v-col class="shrink">
           <v-btn color="error" @click="deleteProjectDialog = true">{{ $t('deleteProject2') }}
@@ -44,14 +56,13 @@
   </div>
 </template>
 <style lang="scss">
-  .project-settings-form {
+.project-settings-form {
+  max-width: 400px;
+  margin: 40px auto;
+}
+  .project-settings-button {
     max-width: 400px;
-    margin: 80px auto auto;
-  }
-
-  .project-delete-form {
-    max-width: 400px;
-    margin: 80px auto auto;
+    margin: 20px auto auto;
   }
 </style>
 <script>
@@ -96,6 +107,28 @@ export default {
       await this.$refs.form.save();
     },
 
+    async backupProject() {
+      try {
+        await axios({
+          method: 'get',
+          url: `/api/project/${this.projectId}/backup`,
+          transformResponse: (res) => res, // Necessary to not parse json
+          responseType: 'json',
+        }).then((backup) => {
+          const a = document.createElement('a');
+          const blob = new Blob([backup.data], { type: 'application/json' });
+          a.download = `backup_${this.projectId}_${Date.now()}.json`;
+          a.href = URL.createObjectURL(blob);
+          a.click();
+        });
+      } catch (err) {
+        EventBus.$emit('i-snackbar', {
+          color: 'error',
+          text: getErrorMessage(err),
+        });
+      }
+    },
+
     async deleteProject() {
       try {
         await axios({