add share connection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolution-manager",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "main": "dist",
   "engines": {
     "node": ">=16.0.0"

src/components/modal/Settings.vue

@@ -32,9 +32,7 @@
       </v-card-text>
       <v-card-actions>
         <div class="d-flex flex-wrap justify-space-between w-100 align-center">
-          <v-btn size="small" text @click="showAbout">
-            Sobre esse Manager
-          </v-btn>
+          <v-btn size="small" text @click="showAbout"> Sobre </v-btn>
           <div class="d-flex justify-end flex-grow-1 gap-1">
             <v-btn
               v-if="!!AppStore.connection.host"
@@ -46,7 +44,7 @@
             >
               <v-icon>mdi-logout</v-icon>
             </v-btn>
-            <v-btn
+            <!-- <v-btn
               v-if="AppStore.validConnection"
               class="ml-0"
               text
@@ -54,6 +52,17 @@
               :disabled="loading"
             >
               Cancel
+            </v-btn> -->
+            <v-btn
+              v-if="AppStore.validConnection"
+              class="ml-0"
+              text
+              @click="share"
+              :disabled="loading"
+              icon
+              size="small"
+            >
+              <v-icon>mdi-share-variant</v-icon>
             </v-btn>
             <v-btn
               color="success"
@@ -125,13 +134,15 @@
     </v-card>
   </v-dialog>
   <about-modal ref="about" />
+  <share-connection ref="share" />
 </template>
 
 <script>
 import { useAppStore } from "@/store/app";
 import AboutModal from "./About.vue";
+import ShareConnection from "./ShareConnection.vue";
 export default {
-  components: { AboutModal },
+  components: { AboutModal, ShareConnection },
   name: "SettingsModal",
   data: () => ({
     dialog: false,
@@ -147,6 +158,11 @@ export default {
     isHttps: window.location.protocol === "https:",
   }),
   methods: {
+    share() {
+      const connection = Object.assign({}, this.AppStore.connection);
+      this.$refs.share.open(connection);
+        
+    },
     logout() {
       this.AppStore.logout();
       this.connection = {

src/components/modal/ShareConnection.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-dialog v-model="dialog" max-width="450px" scrollable>
+    <v-card>
+      <v-card-text>
+        <div class="d-flex flex-column align-center">
+          <h4>Compatilhar conexão</h4>
+          <v-alert type="warning" class="mt-4">
+            Ao compartilhar sua conexão, você estará compartilhando todas as
+            suas configurações de conexão, incluindo a URL e a chave de API
+            global.
+          </v-alert>
+          <!-- host and global key -->
+          <v-card class="w-100 ma-2 pa-4" variant="outlined">
+            <div class="w-100">
+              <p class="text-truncate">
+                <v-icon start>mdi-link</v-icon> {{ connection.host }}
+              </p>
+              <p class="text-truncate">
+                <v-icon start>mdi-key</v-icon> {{ connection.globalApiKey }}
+              </p>
+              <v-btn
+                class="mt-4"
+                color="primary"
+                text
+                @click="copy"
+                :disabled="copied"
+                block
+              >
+                <v-icon start
+                  >mdi-{{ copied ? "check" : "content-copy" }}</v-icon
+                >
+                Copiar link
+              </v-btn>
+            </div>
+          </v-card>
+          <!-- {{ connection }} -->
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    dialog: false,
+    copied: false,
+    connection: null,
+  }),
+  methods: {
+    copy() {
+      if (this.copied) return;
+      if (!navigator.clipboard)
+        return alert("Seu navegador não suporta a função de copiar texto.");
+
+      const url = new URL(window.location.href);
+      const connection = JSON.stringify(this.connection);
+      const base64 = btoa(connection);
+      url.searchParams.set("connection", base64);
+
+      navigator.clipboard.writeText(url.href);
+      this.copied = true;
+      setTimeout(() => {
+        this.copied = false;
+      }, 2000);
+    },
+    open(connection) {
+      this.dialog = true;
+      this.connection = connection;
+    },
+  },
+};
+</script>

src/layouts/default/AppBar.vue

@@ -53,6 +53,23 @@ export default {
     openSettings() {
       this.$refs.settings.open();
     },
+    async loadConnectionFromUrl() {
+      try {
+        const { connection } = this.$route.query;
+        if (!connection) return null;
+        this.$router.replace({ query: {} });
+
+        const json = atob(connection);
+        const data = JSON.parse(json);
+        if (!data.host || !data.globalApiKey) return null;
+
+        await this.AppStore.setConnection(data);
+        return data;
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    },
   },
   computed: {
     dark() {
@@ -60,7 +77,8 @@ export default {
     },
   },
   async mounted() {
-    await this.AppStore.loadConnection();
+    const urlConnection = await this.loadConnectionFromUrl();
+    if (!urlConnection) await this.AppStore.loadConnection();
     if (!this.AppStore.validConnection) this.openSettings();
   },
 };