From f5b86e59e7e41bbbe1555ec8a85ec1f849e8271d Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 17 Aug 2023 13:48:55 +0200
Subject: [PATCH 1/2] feat: ability to export connections

---
 src/common/libs/encrypter.ts                  |  31 ++
 .../components/ModalConnectionAppearance.vue  |   2 +-
 src/renderer/components/ModalExportSchema.vue |   4 +-
 src/renderer/components/ModalSettings.vue     |  23 +-
 src/renderer/components/ModalSettingsData.vue |  84 +++++
 .../components/ModalSettingsDataExport.vue    | 327 ++++++++++++++++++
 src/renderer/i18n/ca-ES.ts                    |   1 -
 src/renderer/i18n/en-US.ts                    |  13 +-
 src/renderer/i18n/fr-FR.ts                    |   1 -
 src/renderer/i18n/pt-BR.ts                    |   1 -
 src/renderer/libs/unproxify.ts                |   2 +-
 src/renderer/scss/themes/dark-theme.scss      |  10 +-
 12 files changed, 485 insertions(+), 14 deletions(-)
 create mode 100644 src/common/libs/encrypter.ts
 create mode 100644 src/renderer/components/ModalSettingsData.vue
 create mode 100644 src/renderer/components/ModalSettingsDataExport.vue

diff --git a/src/common/libs/encrypter.ts b/src/common/libs/encrypter.ts
new file mode 100644
index 00000000..1d608d81
--- /dev/null
+++ b/src/common/libs/encrypter.ts
@@ -0,0 +1,31 @@
+import * as crypto from 'crypto';
+
+const algorithm = 'aes-256-gcm';
+
+function encrypt (text: string, password: string) {
+   const iv = crypto.randomBytes(16);
+   const key = crypto.scryptSync(password, 'antares', 32);
+   const cipher = crypto.createCipheriv(algorithm, key, iv);
+   const encrypted = Buffer.concat([cipher.update(text), cipher.final()]);
+   const authTag = cipher.getAuthTag();
+
+   return {
+      iv: iv.toString('hex'),
+      authTag: authTag.toString('hex'),
+      content: encrypted.toString('hex')
+   };
+}
+
+function decrypt (hash: { iv: string; content: string; authTag: string }, password: string) {
+   const key = crypto.scryptSync(password, 'antares', 32);
+   const decipher = crypto.createDecipheriv(algorithm, key, Buffer.from(hash.iv, 'hex'));
+   decipher.setAuthTag(Buffer.from(hash.authTag, 'hex'));
+   const decrpyted = decipher.update(hash.content, 'hex', 'utf8') + decipher.final('utf8');
+
+   return decrpyted;
+}
+
+export {
+   encrypt,
+   decrypt
+};
diff --git a/src/renderer/components/ModalConnectionAppearance.vue b/src/renderer/components/ModalConnectionAppearance.vue
index 02ac0241..52ddd43c 100644
--- a/src/renderer/components/ModalConnectionAppearance.vue
+++ b/src/renderer/components/ModalConnectionAppearance.vue
@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-brush-variant mr-1" />
-                     <span class="cut-text">{{ t('connection.editConnectionAppearance') }}</span>
+                     <span class="cut-text">{{ t('application.editConnectionAppearance') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
index 14072bb3..c91313c3 100644
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@@ -26,7 +26,7 @@
                               type="text"
                               required
                               readonly
-                              :placeholder="t('database.schemaName')"
+                              @click.prevent="openPathDialog"
                            >
                            <button
                               type="button"
@@ -251,7 +251,7 @@
                   </div>
                </div>
                <div class="column col-auto px-0">
-                  <button class="btn btn-link" @click.stop="closeModal">
+                  <button class="btn btn-link mr-2" @click.stop="closeModal">
                      {{ t('general.close') }}
                   </button>
                   <button
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index f2a5050e..2b39a3c8 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -37,6 +37,13 @@
                         >
                            <a class="tab-link">{{ t('application.shortcuts') }}</a>
                         </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'data'}"
+                           @click="selectTab('data')"
+                        >
+                           <a class="tab-link">{{ t('application.data') }}</a>
+                        </li>
                         <li
                            v-if="updateStatus !== 'disabled'"
                            class="tab-item c-hand"
@@ -366,6 +373,9 @@
                   <div v-show="selectedTab === 'shortcuts'" class="panel-body py-4">
                      <ModalSettingsShortcuts />
                   </div>
+                  <div v-show="selectedTab === 'data'" class="panel-body py-4">
+                     <ModalSettingsData />
+                  </div>
                   <div v-show="selectedTab === 'update'" class="panel-body py-4">
                      <ModalSettingsUpdate />
                   </div>
@@ -411,6 +421,7 @@ import { localesNames } from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
 import ModalSettingsShortcuts from '@/components/ModalSettingsShortcuts.vue';
+import ModalSettingsData from '@/components/ModalSettingsData.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { AvailableLocale } from '@/i18n';
@@ -648,10 +659,14 @@ onBeforeUnmount(() => {
     .modal-body {
       overflow: hidden;
 
-      .tab-link {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      .tab-item {
+         max-width: 20%;
+
+         .tab-link {
+           overflow: hidden;
+           white-space: nowrap;
+           text-overflow: ellipsis;
+         }
       }
 
       .panel-body {
diff --git a/src/renderer/components/ModalSettingsData.vue b/src/renderer/components/ModalSettingsData.vue
new file mode 100644
index 00000000..f0a1cb7a
--- /dev/null
+++ b/src/renderer/components/ModalSettingsData.vue
@@ -0,0 +1,84 @@
+<template>
+   <div class="container">
+      <div class="columns">
+         <div class="column col-12 h6 text-uppercase mb-2">
+            {{ t('application.exportData') }}
+         </div>
+         <div class="column col-12">
+            {{ t('application.exportDataExplanation') }}
+         </div>
+         <div class="column col-12 text-right">
+            <button
+               class="btn btn-primary d-inline-flex"
+               @click="isExportModal=true"
+            >
+               <i class="mdi mdi-tray-arrow-up mdi-24px pr-2" />
+               <span>{{ t('application.exportData') }}</span>
+            </button>
+         </div>
+      </div>
+
+      <div class="columns mt-4 mb-2">
+         <div class="column col-12 h6 text-uppercase mb-2 mt-4">
+            {{ t('application.importData') }}
+         </div>
+         <div class="column col-12">
+            {{ t('application.importDataExplanation') }}
+         </div>
+         <div class="column col-12 text-right">
+            <button
+               class="btn btn-dark d-inline-flex ml-auto"
+               @click="isImportModal=true"
+            >
+               <i class="mdi mdi-tray-arrow-down mdi-24px pr-2" />
+               <span>{{ t('application.importData') }}</span>
+            </button>
+         </div>
+      </div>
+      <ModalSettingsDataExport
+         v-if="isExportModal"
+         @close="isExportModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               <!--  -->
+            </div>
+         </template>
+      </ModalSettingsDataExport>
+
+      <!-- <ConfirmModal
+         v-if="isImportModal"
+         size="medium"
+         @confirm="null"
+         @hide="isImportModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-tray-arrow-down mr-1" /> {{ t('application.importData') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+
+            </div>
+         </template>
+      </ConfirmModal> -->
+   </div>
+</template>
+<script setup lang="ts">
+// import { useApplicationStore } from '@/stores/application';
+import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const isExportModal = ref(false);
+const isImportModal = ref(false);
+
+</script>
diff --git a/src/renderer/components/ModalSettingsDataExport.vue b/src/renderer/components/ModalSettingsDataExport.vue
new file mode 100644
index 00000000..8e37ca30
--- /dev/null
+++ b/src/renderer/components/ModalSettingsDataExport.vue
@@ -0,0 +1,327 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="columns export-options">
+                  <div class="column col-8 left">
+                     <div class="workspace-query-results" :style="'min-height: 300px;'">
+                        <div ref="table" class="table table-hover">
+                           <div class="thead">
+                              <div class="tr text-center">
+                                 <div class="th no-border" :style="'width:50%'" />
+                                 <div class="th no-border" />
+                                 <div class="th no-border">
+                                    <label
+                                       class="form-checkbox m-0 px-2 form-inline"
+                                       @click.prevent="toggleAllConnections()"
+                                    >
+                                       <input
+                                          type="checkbox"
+                                          :indeterminate="includeConnectionStatus === 2"
+                                          :checked="!!includeConnectionStatus"
+                                       >
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                              <div class="tr">
+                                 <div class="th">
+                                    <div class="table-column-title">
+                                       <span>{{ t('connection.connectionName') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th">
+                                    <div class="table-column-title">
+                                       <span>{{ t('connection.client') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th text-center">
+                                    <div class="table-column-title">
+                                       <span>{{ t('general.include') }}</span>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>
+
+                           <div class="tbody">
+                              <div
+                                 v-for="(item, i) in connections"
+                                 :key="i"
+                                 class="tr"
+                              >
+                                 <div class="td">
+                                    {{ getConnectionName(item.uid) }}
+                                 </div>
+                                 <div class="td">
+                                    {{ item.client }}
+                                 </div>
+                                 <div class="td text-center">
+                                    <label class="form-checkbox m-0 px-2 form-inline">
+                                       <input v-model="connectionToggles[item.uid]" type="checkbox">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+                  <div class="column col-4">
+                     <h5 class="h5">
+                        {{ t('general.options') }}
+                     </h5>
+                     <label class="form-checkbox">
+                        <input v-model="options.includes.passwords" type="checkbox">
+                        <i class="form-icon" />
+                        {{ t(`application.includeConnectionPasswords`) }}
+                     </label>
+                     <label class="form-checkbox">
+                        <input v-model="options.includes.folders" type="checkbox">
+                        <i class="form-icon" />
+                        {{ t(`application.includeFolders`) }}
+                     </label>
+                     <div class="h6 mt-4 mb-2">
+                        {{ t('application.encryptionPassword') }}
+                     </div>
+                     <fieldset class="form-group" :class="{'has-error': isPasswordError}">
+                        <div class="input-group">
+                           <input
+                              ref="passkey"
+                              v-model="options.passkey"
+                              :type="isPasswordVisible ? 'text' : 'password'"
+                              class="form-input"
+                              :placeholder="t('application.required')"
+                           >
+                           <button
+                              type="button"
+                              class="btn btn-link input-group-addon"
+                              @click="isPasswordVisible = !isPasswordVisible"
+                           >
+                              <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
+                              <i v-else class="mdi mdi-eye-off px-1" />
+                           </button>
+                        </div>
+                        <span v-if="isPasswordError" class="form-input-hint">
+                           {{ t('application.encryptionPasswordError') }}
+                        </span>
+                     </fieldset>
+                  </div>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button class="btn btn-link mr-2" @click.stop="closeModal">
+                  {{ t('general.close') }}
+               </button>
+               <button
+                  class="btn btn-primary mr-2"
+                  autofocus
+                  @click.prevent="exportData()"
+               >
+                  {{ t('database.export') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, Ref, ref } from 'vue';
+import * as moment from 'moment';
+import { useI18n } from 'vue-i18n';
+import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+import { uidGen } from 'common/libs/uidGen';
+import { storeToRefs } from 'pinia';
+import { encrypt } from 'common/libs/encrypter';
+
+const { t } = useI18n();
+const emit = defineEmits(['close']);
+
+const { trapRef } = useFocusTrap();
+
+const { getConnectionName } = useConnectionsStore();
+const { connectionsOrder, connections } = storeToRefs(useConnectionsStore());
+const localConnections = unproxify<typeof connections.value>(connections.value);
+const localConnectionsOrder = unproxify<typeof connectionsOrder.value>(connectionsOrder.value);
+
+const isPasswordVisible = ref(false);
+const isPasswordError = ref(false);
+const connectionToggles: Ref<{[k:string]: boolean}> = ref({});
+const options = ref({
+   passkey: '',
+   includes: {
+      passwords: true,
+      folders: true
+   }
+});
+const filename = computed(() => {
+   const date = moment().format('YYYY-MM-DD');
+   return `backup_${date}`;
+});
+const includeConnectionStatus = computed(() => {
+   if (Object.values(connectionToggles.value).every(item => item)) return 1;
+   else if (Object.values(connectionToggles.value).some(item => item)) return 2;
+   else return 0;
+});
+
+const exportData = () => {
+   if (options.value.passkey.length < 8)
+      isPasswordError.value = true;
+   else {
+      isPasswordError.value = false;
+      const connectionsToInclude: string[] = [];
+      const connectionsUidMap = new Map<string, string>();
+      for (const cUid in connectionToggles.value)
+         if (connectionToggles.value[cUid]) connectionsToInclude.push(cUid);
+
+      let filteredConnections = unproxify<typeof localConnections>(localConnections.filter(conn => connectionsToInclude.includes(conn.uid)));
+      filteredConnections = filteredConnections.map(c => {
+         const newUid = uidGen('C');
+         connectionsUidMap.set(c.uid, newUid);
+         c.uid = newUid;
+         return c;
+      });
+
+      if (!options.value.includes.passwords) { // Remove passwords and set ask:true
+         filteredConnections.map(c => {
+            if (c.password) {
+               c.password = '';
+               c.ask = true;
+            }
+            return c;
+         });
+      }
+
+      let filteredOrders = [];
+      for (const [oldVal, newVal] of connectionsUidMap) {
+         const connOrder = unproxify(localConnectionsOrder.find(c => c.uid === oldVal));
+         connOrder.uid = newVal;
+         filteredOrders.push(connOrder);
+      }
+
+      if (options.value.includes.folders) { // Includes folders
+         const oldConnUids = Array.from(connectionsUidMap.keys());
+         const newConnUids = Array.from(connectionsUidMap.values());
+         const foldersToInclude = unproxify(localConnectionsOrder).filter(f => (
+            f.isFolder && oldConnUids.some(uid => f.connections.includes(uid))
+         )).map(f => {
+            f.connections = f.connections
+               .map(fc => connectionsUidMap.get(fc))
+               .filter(fc => newConnUids.includes(fc));
+            return f;
+         });
+
+         filteredOrders = [...filteredOrders, ...foldersToInclude];
+      }
+
+      const exportObj = encrypt(JSON.stringify({
+         connections: filteredConnections,
+         connectionsOrder: filteredOrders
+      }), options.value.passkey);
+
+      // console.log(exportObj, JSON.parse(decrypt(exportObj, options.value.passkey)));
+
+      const blobContent = Buffer.from(JSON.stringify(exportObj), 'utf-8').toString('hex');
+      const file = new Blob([blobContent], { type: 'application/octet-stream' });
+      const downloadLink = document.createElement('a');
+      downloadLink.download = `${filename.value}.antares`;
+      downloadLink.href = window.URL.createObjectURL(file);
+      downloadLink.style.display = 'none';
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      downloadLink.remove();
+   }
+};
+
+const closeModal = async () => {
+   emit('close');
+};
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+const toggleAllConnections = () => {
+   if (includeConnectionStatus.value !== 1) {
+      connectionToggles.value = localConnections.reduce((acc, curr) => {
+         acc[curr.uid] = true;
+         return acc;
+      }, {} as {[k:string]: boolean});
+   }
+   else {
+      connectionToggles.value = localConnections.reduce((acc, curr) => {
+         acc[curr.uid] = false;
+         return acc;
+      }, {} as {[k:string]: boolean});
+   }
+};
+
+connectionToggles.value = localConnections.reduce((acc, curr) => {
+   acc[curr.uid] = true;
+   return acc;
+}, {} as {[k:string]: boolean});
+
+window.addEventListener('keydown', onKey);
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.export-options {
+  flex: 1;
+  overflow: hidden;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+
+.workspace-query-results {
+  flex: 1 0 1px;
+
+  .table {
+    width: 100% !important;
+  }
+
+  .form-checkbox {
+    min-height: 0.8rem;
+    padding: 0;
+
+    .form-icon {
+      top: 0.1rem;
+    }
+  }
+}
+
+.modal {
+  .modal-container {
+    max-width: 800px;
+  }
+
+  .modal-body {
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>
diff --git a/src/renderer/i18n/ca-ES.ts b/src/renderer/i18n/ca-ES.ts
index f170722b..9168e23a 100644
--- a/src/renderer/i18n/ca-ES.ts
+++ b/src/renderer/i18n/ca-ES.ts
@@ -352,7 +352,6 @@ export const caES = {
       csvStringDelimiter: 'Delimitador de cadena',
       csvIncludeHeader: 'Inclou capçalera',
       csvExportOptions: 'Opcions d\'exportació CSV',
-      scratchPadDefaultValue: '# COM SUPORTAR ANTARES\n\n- [ ] Deixa una estrella a Antares [repositori GitHub](https://github.com/antares-sql/antares)\n- [ ] Envia comentaris i consells\n- [ ] Informa d\'errors\n- [ ] Si t\'agrada, comparteix Antares amb amics\n\n# SOBRE EL BLOC DE NOTES\n\nAquest és un bloc de notes on pots guardar les teves **notes personals**. Suporta format `markdown`, però pots usar text pla.\nAquest contingut és simplement un espai reservat, pots esborrar-lo per fer lloc per les teves notes.\n',
       phpArray: 'Matriu PHP'
    },
    faker: {
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index f6fc1e3a..29a9199d 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -39,6 +39,7 @@ export const enUS = {
       new: 'New',
       select: 'Select',
       change: 'Change',
+      include: 'Include',
       includes: 'Includes',
       completed: 'Completed',
       aborted: 'Aborted',
@@ -292,6 +293,9 @@ export const enUS = {
       label: 'Label',
       icon: 'Icon',
       fileName: 'File name',
+      choseFile: 'Chose file',
+      data: 'Data',
+      required: 'Required',
       madeWithJS: 'Made with 💛 and JavaScript!',
       checkForUpdates: 'Check for updates',
       noUpdatesAvailable: 'No updates available',
@@ -358,7 +362,14 @@ export const enUS = {
       csvStringDelimiter: 'String delimiter',
       csvIncludeHeader: 'Include header',
       csvExportOptions: 'CSV export options',
-      scratchPadDefaultValue: '# HOW TO SUPPORT ANTARES\n\n- [ ] Leave a star to Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Send feedbacks and advices\n- [ ] Report for bugs\n- [ ] If you enjoy, share Antares with friends\n\n# ABOUT SCRATCHPAD\n\nThis is a scratchpad where you can save your **personal notes**. It supports `markdown` format, but you are free to use plain text.\nThis content is just a placeholder, feel free to clear it to make space for your notes.\n'
+      exportData: 'Export data',
+      exportDataExplanation: 'Export saved connections to Antares. You will be asked for a password to encrypt the exported file.',
+      importData: 'Import data',
+      importDataExplanation: 'Imports an .antares file containing connections. You will need to enter the password defined during export.',
+      includeConnectionPasswords: 'Include connection passwords',
+      includeFolders: 'Include folders',
+      encryptionPassword: 'Encryption password',
+      encryptionPasswordError: 'The encryption password must be at least 8 characters long.'
    },
    faker: { // Faker.js methods, used in random generated content
       address: 'Address',
diff --git a/src/renderer/i18n/fr-FR.ts b/src/renderer/i18n/fr-FR.ts
index 66a877c2..b24c962b 100644
--- a/src/renderer/i18n/fr-FR.ts
+++ b/src/renderer/i18n/fr-FR.ts
@@ -349,7 +349,6 @@ export const frFR = {
       csvStringDelimiter: 'Séparateur',
       csvIncludeHeader: 'Inclure l\'en-tête',
       csvExportOptions: 'Options d\'export CSV',
-      scratchPadDefaultValue: '# COMMENT SOUTENIR ANTARES\n\n- [ ] Laissez une etoile à Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Envoyez vos avis et conseils\n- [ ] Signalez les bugs\n- [ ] Si vous l\'appréciez, partagez Antares avec des amis\n\n# A PROPOS DU BLOC-NOTES\n\nCeci est un bloc-notes où vous pouvez sauvegarder vos **notes personnelles**. Il supporte le format `markdown`, mais vous êtes libre d\'utiliser du texte standard.\nCe contenu est juste un modèle, vous pouvez a tout moment l\'effacer pour le remplacer par vos notes.\n',
       phpArray: 'Tableau PHP'
    },
    faker: {
diff --git a/src/renderer/i18n/pt-BR.ts b/src/renderer/i18n/pt-BR.ts
index 9d16ad71..d2c67918 100644
--- a/src/renderer/i18n/pt-BR.ts
+++ b/src/renderer/i18n/pt-BR.ts
@@ -351,7 +351,6 @@ export const ptBR = {
       csvStringDelimiter: 'Delimitador da String',
       csvIncludeHeader: 'Incluir cabeçalho',
       csvExportOptions: 'Opções de exportação do CSV',
-      scratchPadDefaultValue: '# COMO AJUDAR O ANTARES\n\n- [ ] Deixe sua estrela para o Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Envie sugestões e avisos\n- [ ] Relate bugs\n- [ ] Se você gostar, compartilhe o Antares com amigos\n\n# SOBRE O BLOCO DE NOTAS\n\nEsse é o bloco de notas para salvar suas **notas pessoais**. ele suporta o formato `markdown`, porém você é livre para usar qualquer texto.\nEsse conteúdo é apenas um texto, fique a vontade para limpar e obter mais espaço para suas notas.\n',
       phpArray: 'Array PHP'
    },
    faker: {
diff --git a/src/renderer/libs/unproxify.ts b/src/renderer/libs/unproxify.ts
index 538cbcb4..3d7f24a4 100644
--- a/src/renderer/libs/unproxify.ts
+++ b/src/renderer/libs/unproxify.ts
@@ -5,7 +5,7 @@ import { toRaw } from 'vue';
  * @param {*} val
  * @param {Boolean} json converts the value in JSON object (default true)
  */
-export function unproxify (val: any, json = true): any {
+export function unproxify<T = any> (val: T, json = true): T {
    if (json)// JSON conversion
       return JSON.parse(JSON.stringify(val));
    else if (Array.isArray(val))// If array
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index bfbdcc81..750baa17 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -144,11 +144,17 @@
     cursor: default;
   }
 
-  .input-group .input-group-addon {
-    border-color: #3f3f3f;
+  .has-error .form-input {
     background: $bg-color-dark;
   }
 
+  .input-group {
+    .input-group-addon {
+      border-color: #3f3f3f;
+      background: $bg-color-dark;
+    }
+  }
+
   .empty {
     color: $body-font-color-dark;
     background: transparent;

From 6df214558f8186dd5fbf101505465f4c07c8ad5f Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Fri, 18 Aug 2023 12:11:08 +0200
Subject: [PATCH 2/2] feat: ability to import connections

---
 src/renderer/components/BaseUploadInput.vue   |   5 +
 src/renderer/components/ModalSettingsData.vue |  34 +--
 .../components/ModalSettingsDataExport.vue    |  12 +-
 .../components/ModalSettingsDataImport.vue    | 263 ++++++++++++++++++
 src/renderer/i18n/en-US.ts                    |   7 +-
 src/renderer/stores/connections.ts            |  10 +
 6 files changed, 297 insertions(+), 34 deletions(-)
 create mode 100644 src/renderer/components/ModalSettingsDataImport.vue

diff --git a/src/renderer/components/BaseUploadInput.vue b/src/renderer/components/BaseUploadInput.vue
index b2076b72..89d91790 100644
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@@ -16,6 +16,7 @@
             :id="`id_${id}`"
             class="file-uploader-input"
             type="file"
+            :accept="accept"
             @change="$emit('change', $event)"
          >
       </form>
@@ -33,6 +34,10 @@ defineProps({
       default: 'Browse',
       type: String
    },
+   accept: {
+      default: '',
+      type: String
+   },
    modelValue: {
       default: '',
       type: String
diff --git a/src/renderer/components/ModalSettingsData.vue b/src/renderer/components/ModalSettingsData.vue
index f0a1cb7a..46cb1c1b 100644
--- a/src/renderer/components/ModalSettingsData.vue
+++ b/src/renderer/components/ModalSettingsData.vue
@@ -38,41 +38,17 @@
       <ModalSettingsDataExport
          v-if="isExportModal"
          @close="isExportModal = false"
-      >
-         <template #header>
-            <div class="d-flex">
-               <i class="mdi mdi-24px mdi-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
-            </div>
-         </template>
-         <template #body>
-            <div class="mb-2">
-               <!--  -->
-            </div>
-         </template>
-      </ModalSettingsDataExport>
-
-      <!-- <ConfirmModal
+      />
+      <ModalSettingsDataImport
          v-if="isImportModal"
-         size="medium"
-         @confirm="null"
-         @hide="isImportModal = false"
-      >
-         <template #header>
-            <div class="d-flex">
-               <i class="mdi mdi-24px mdi-tray-arrow-down mr-1" /> {{ t('application.importData') }}
-            </div>
-         </template>
-         <template #body>
-            <div class="mb-2">
-
-            </div>
-         </template>
-      </ConfirmModal> -->
+         @close="isImportModal = false"
+      />
    </div>
 </template>
 <script setup lang="ts">
 // import { useApplicationStore } from '@/stores/application';
 import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
+import ModalSettingsDataImport from '@/components/ModalSettingsDataImport.vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
diff --git a/src/renderer/components/ModalSettingsDataExport.vue b/src/renderer/components/ModalSettingsDataExport.vue
index 8e37ca30..b239b0aa 100644
--- a/src/renderer/components/ModalSettingsDataExport.vue
+++ b/src/renderer/components/ModalSettingsDataExport.vue
@@ -140,11 +140,12 @@ import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import * as moment from 'moment';
 import { useI18n } from 'vue-i18n';
 import { useFocusTrap } from '@/composables/useFocusTrap';
-import { useConnectionsStore } from '@/stores/connections';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
 import { unproxify } from '@/libs/unproxify';
 import { uidGen } from 'common/libs/uidGen';
 import { storeToRefs } from 'pinia';
 import { encrypt } from 'common/libs/encrypter';
+import { ConnectionParams } from 'common/interfaces/antares';
 
 const { t } = useI18n();
 const emit = defineEmits(['close']);
@@ -153,8 +154,8 @@ const { trapRef } = useFocusTrap();
 
 const { getConnectionName } = useConnectionsStore();
 const { connectionsOrder, connections } = storeToRefs(useConnectionsStore());
-const localConnections = unproxify<typeof connections.value>(connections.value);
-const localConnectionsOrder = unproxify<typeof connectionsOrder.value>(connectionsOrder.value);
+const localConnections = unproxify<ConnectionParams[]>(connections.value);
+const localConnectionsOrder = unproxify<SidebarElement[]>(connectionsOrder.value);
 
 const isPasswordVisible = ref(false);
 const isPasswordError = ref(false);
@@ -217,6 +218,7 @@ const exportData = () => {
          const foldersToInclude = unproxify(localConnectionsOrder).filter(f => (
             f.isFolder && oldConnUids.some(uid => f.connections.includes(uid))
          )).map(f => {
+            f.uid = uidGen('F');
             f.connections = f.connections
                .map(fc => connectionsUidMap.get(fc))
                .filter(fc => newConnUids.includes(fc));
@@ -242,10 +244,12 @@ const exportData = () => {
       document.body.appendChild(downloadLink);
       downloadLink.click();
       downloadLink.remove();
+
+      closeModal();
    }
 };
 
-const closeModal = async () => {
+const closeModal = () => {
    emit('close');
 };
 
diff --git a/src/renderer/components/ModalSettingsDataImport.vue b/src/renderer/components/ModalSettingsDataImport.vue
new file mode 100644
index 00000000..f6f8f766
--- /dev/null
+++ b/src/renderer/components/ModalSettingsDataImport.vue
@@ -0,0 +1,263 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal modal-sm active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-tray-arrow-down mr-1" /> {{ t('application.importData') }}
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="mb-2">
+                  <div class="h6 mb-2">
+                     {{ t('application.choseFile') }}
+                  </div>
+                  <BaseUploadInput
+                     :model-value="filePath"
+                     :message="t('general.browse')"
+                     accept=".antares"
+                     @clear="filePath = ''"
+                     @change="filesChange($event)"
+                  />
+               </div>
+               <div class="mb-2">
+                  <div class="h6 mb-2">
+                     {{ t('application.password') }}
+                  </div>
+                  <fieldset class="form-group" :class="{'has-error': isPasswordError}">
+                     <div class="input-group">
+                        <input
+                           ref="passkey"
+                           v-model="options.passkey"
+                           :type="isPasswordVisible ? 'text' : 'password'"
+                           class="form-input"
+                           :placeholder="t('application.required')"
+                        >
+                        <button
+                           type="button"
+                           class="btn btn-link input-group-addon"
+                           @click="isPasswordVisible = !isPasswordVisible"
+                        >
+                           <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
+                           <i v-else class="mdi mdi-eye-off px-1" />
+                        </button>
+                     </div>
+                     <span v-if="isPasswordError" class="form-input-hint">
+                        {{ t('application.encryptionPasswordError') }}
+                     </span>
+                  </fieldset>
+               </div>
+               <div class="mb-2">
+                  <label class="form-checkbox">
+                     <input v-model="options.ignoreDuplicates" type="checkbox">
+                     <i class="form-icon" />
+                     {{ t(`application.ignoreDuplicates`) }}
+                  </label>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button
+                  class="btn btn-link mr-2"
+                  @click.stop="closeModal"
+               >
+                  {{ t('general.close') }}
+               </button>
+               <button
+                  class="btn btn-primary mr-2"
+                  :disabled="!filePath"
+                  @click.prevent="importData()"
+               >
+                  {{ t('database.import') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseUploadInput from '@/components/BaseUploadInput.vue';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+import { storeToRefs } from 'pinia';
+import { decrypt } from 'common/libs/encrypter';
+import { useNotificationsStore } from '@/stores/notifications';
+import { ConnectionParams } from 'common/interfaces/antares';
+
+const { t } = useI18n();
+const emit = defineEmits(['close']);
+
+const { addNotification } = useNotificationsStore();
+
+const connectionsStore = useConnectionsStore();
+const { importConnections } = connectionsStore;
+const { connections } = storeToRefs(connectionsStore);
+
+const filePath = ref('');
+const fileContent = ref(null);
+const isPasswordVisible = ref(false);
+const isPasswordError = ref(false);
+const options = ref({
+   passkey: '',
+   ignoreDuplicates: true
+});
+
+const closeModal = () => {
+   emit('close');
+};
+
+const filesChange = ({ target } : {target: HTMLInputElement }) => {
+   const { files } = target;
+   if (!files.length) return;
+
+   const reader = new FileReader();
+   reader.readAsText(files[0]);
+   reader.onload = () => {
+      fileContent.value = reader.result;
+      filePath.value = files[0].path;
+   };
+};
+
+const importData = () => {
+   if (options.value.passkey.length < 8)
+      isPasswordError.value = true;
+   else {
+      try {
+         const hash = JSON.parse(Buffer.from(fileContent.value, 'hex').toString('utf-8'));
+
+         try {
+            const importObj: {
+               connections: ConnectionParams[];
+               connectionsOrder: SidebarElement[];
+            } = JSON.parse(decrypt(hash, options.value.passkey));
+
+            if (options.value.ignoreDuplicates) {
+               const actualConnections = unproxify(connections.value).map(c => {
+                  delete c.uid;
+
+                  delete c.name;
+                  delete c.password;
+                  delete c.ask;
+
+                  delete c.key;
+                  delete c.cert;
+                  delete c.ca;
+
+                  delete c.sshKey;
+
+                  return JSON.stringify(c);
+               });
+
+               const incomingConnections = unproxify<ConnectionParams[]>(importObj.connections).map(c => {
+                  const uid = c.uid;
+                  delete c.uid;
+
+                  delete c.name;
+                  delete c.password;
+                  delete c.ask;
+
+                  delete c.key;
+                  delete c.cert;
+                  delete c.ca;
+
+                  delete c.sshKey;
+
+                  return { uid, jsonString: JSON.stringify(c) };
+               });
+
+               const newConnectionsUid = incomingConnections
+                  .filter(c => !actualConnections.includes(c.jsonString))
+                  .reduce((acc, cur) => {
+                     acc.push(cur.uid);
+                     return acc;
+                  }, [] as string[]);
+
+               importObj.connections = importObj.connections.filter(c => newConnectionsUid.includes(c.uid));
+               importObj.connectionsOrder = importObj.connectionsOrder
+                  .filter(c => newConnectionsUid
+                     .includes(c.uid) ||
+                     (c.isFolder && c.connections.every(c => newConnectionsUid.includes(c))));
+            }
+
+            importConnections(importObj);
+
+            addNotification({
+               status: 'success',
+               message: t('application.dataImportSuccess')
+            });
+            closeModal();
+         }
+         catch (error) {
+            addNotification({
+               status: 'error',
+               message: t('application.wrongImportPassword')
+            });
+         }
+      }
+      catch (error) {
+         addNotification({
+            status: 'error',
+            message: t('application.wrongFileFormat')
+         });
+      }
+   }
+};
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+window.addEventListener('keydown', onKey);
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.export-options {
+  flex: 1;
+  overflow: hidden;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+
+.workspace-query-results {
+  flex: 1 0 1px;
+
+  .table {
+    width: 100% !important;
+  }
+
+  .form-checkbox {
+    min-height: 0.8rem;
+    padding: 0;
+
+    .form-icon {
+      top: 0.1rem;
+    }
+  }
+}
+
+.modal {
+  .modal-body {
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index 29a9199d..c46b1b3e 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -295,6 +295,7 @@ export const enUS = {
       fileName: 'File name',
       choseFile: 'Chose file',
       data: 'Data',
+      password: 'Password',
       required: 'Required',
       madeWithJS: 'Made with 💛 and JavaScript!',
       checkForUpdates: 'Check for updates',
@@ -369,7 +370,11 @@ export const enUS = {
       includeConnectionPasswords: 'Include connection passwords',
       includeFolders: 'Include folders',
       encryptionPassword: 'Encryption password',
-      encryptionPasswordError: 'The encryption password must be at least 8 characters long.'
+      encryptionPasswordError: 'The encryption password must be at least 8 characters long.',
+      ignoreDuplicates: 'Ignore duplicates',
+      wrongImportPassword: 'Wrong import password',
+      wrongFileFormat: 'Wrong file format',
+      dataImportSuccess: 'Data successfully imported'
    },
    faker: { // Faker.js methods, used in random generated content
       address: 'Address',
diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts
index 2e888171..8f60927b 100644
--- a/src/renderer/stores/connections.ts
+++ b/src/renderer/stores/connections.ts
@@ -219,6 +219,16 @@ export const useConnectionsStore = defineStore('connections', {
 
          this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
          persistentStore.set('connectionsOrder', this.connectionsOrder);
+      },
+      importConnections (importObj: {
+         connections: ConnectionParams[];
+         connectionsOrder: SidebarElement[];
+      }) {
+         this.connections = [...this.connections, ...importObj.connections];
+         this.connectionsOrder = [...this.connectionsOrder, ...importObj.connectionsOrder];
+
+         persistentStore.set('connections', this.connections);
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       }
    }
 });