add about

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolution-manager",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "main": "dist",
   "scripts": {
     "dev": "vite",

src/components/modal/About.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-dialog v-model="dialog" max-width="600px" scrollable>
+    <v-card>
+      <v-card-text>
+        <div class="d-flex flex-column align-center">
+          <v-img
+            src="@/assets/logo.png"
+            height="100"
+            width="100"
+            class="mb-4"
+          />
+          <h3 class="mt-5 mb-2">Evolution Manager</h3>
+          <p>
+            O Evolution Manager, independente da
+            <a
+              href="https://github.com/EvolutionAPI/evolution-api/"
+              target="_blank"
+              >Evolution API</a
+            >, facilita a gestão de suas APIs com uma interface intuitiva. Ele
+            foi criado por desenvolvedores independentes, focando em melhorar a
+            experiência do usuário e a administração das funcionalidades da API.
+          </p>
+
+          <v-btn
+            href="https://github.com/gabrielpastori1/evolution-manager"
+            target="_blank"
+            class="mt-5"
+            color="grey darken-3"
+          >
+            <v-icon start>mdi-github</v-icon>
+            Repositório no GitHub
+          </v-btn>
+
+          <h3 class="mt-5 mb-2">Processamento de Dados</h3>
+          <p>
+            O processamento e armazenamento de dados ocorre <b>localmente</b> no
+            seu navegador, sem uso de um backend centralizado. Isso reforça a
+            segurança e privacidade, mantendo suas informações confidenciais e
+            protegidas.
+          </p>
+          <v-alert v-if="!isHttps" color="info" class="mt-2" variant="tonal">
+            Por conta de todo o processamento ser realizado no navegador, é
+            necessário que o servidor da Evolution API seja acessado através de
+            uma conexão segura (HTTPS).
+          </v-alert>
+
+          <h3 class="mt-5 mb-2">Limitações do Projeto</h3>
+          <p>
+            Como um projeto open-source mantido por voluntários, não há
+            garantias de atualizações futuras. A independência do Evolution
+            Manager em relação à Evolution API significa que alterações na API
+            podem afetar a funcionalidade do Manager.
+          </p>
+        </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,
+    isHttps: !window.location.protocol === "https:",
+  }),
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>

src/components/modal/Settings.vue

@@ -13,11 +13,7 @@
             label="URL"
             required
             outlined
-            :rules="[
+            :rules="hostRules"
-              // regex to verify is has http or https
-              (v) =>
-                new RegExp('^(http|https)://', 'i').test(v) || 'URL inválida',
-            ]"
           />
           <v-text-field
             v-model="connection.globalApiKey"
@@ -35,13 +31,7 @@
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn
+        <v-btn size="small" text @click="showAbout"> Sobre esse Manager </v-btn>
-          v-if="!AppStore.connection.host === connection.host"
-          text
-          @click="dialog = false"
-        >
-          Cancel
-        </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn
@@ -118,12 +108,14 @@
       </v-card-text>
     </v-card>
   </v-dialog>
+  <about-modal ref="about" />
 </template>
 
 <script>
 import { useAppStore } from "@/store/app";
-
+import AboutModal from "./About.vue";
 export default {
+  components: { AboutModal },
   name: "SettingsModal",
   data: () => ({
     dialog: false,
@@ -136,8 +128,12 @@ export default {
     loading: false,
     error: false,
     AppStore: useAppStore(),
+    isHttps: !window.location.protocol === "https:",
   }),
   methods: {
+    showAbout() {
+      this.$refs.about.open();
+    },
     removeConnection(connection) {
       this.AppStore.removeConnection(connection);
     },
@@ -159,12 +155,26 @@ export default {
       this.connection = Object.assign({}, this.AppStore.connection);
     },
   },
-
+  watch: {
+    "AppStore.validConnection"(val, oldVal) {
+      if (val === oldVal) return;
+      if (!val) this.dialog = true;
+    },
+  },
   computed: {
     connectionsList() {
       return this.AppStore.connectionsList;
     },
+    hostRules() {
+      return [
+        (v) =>
+          new RegExp(`^(${!this.isHttps ? "http|" : ""}https)://`, "i").test(
+            v
+          ) || (this.isHttps ? "URL inválida, use https" : "URL inválida"),
+      ];
+    },
   },
+
   emits: ["close"],
 };
 </script>

src/layouts/default/AppBar.vue

@@ -1,15 +1,20 @@
 <template>
   <v-app-bar flat>
-    <v-app-bar-title>
+    <v-app-bar-title class="flex-shrink-0">
       <v-btn variant="text" @click="$router.push('/')">
         <v-img src="@/assets/logo.png" height="24" width="24" class="mr-2" />
         Evolution Manager
       </v-btn>
     </v-app-bar-title>
-
+    <v-icon v-if="AppStore.connecting" color="info">
-    <v-icon v-if="AppStore.validConnection" color="success">
+      mdi-loading mdi-spin
-      mdi-check-circle
     </v-icon>
+    <v-chip v-else-if="AppStore.validConnection" color="success" style="max-width: 40vw">
+      <v-icon color="success" start> mdi-check-circle </v-icon>
+      {{
+        AppStore.connection.host.replace(/https?:\/\//, "").replace(/\/$/, "")
+      }}
+    </v-chip>
     <v-icon v-else color="error"> mdi-alert-circle </v-icon>
     <v-btn @click="openSettings" icon>
       <v-icon>mdi-cog</v-icon>

src/store/app.js

@@ -16,6 +16,7 @@ export const useAppStore = defineStore('app', {
     },
   },
   state: () => ({
+    connecting: false,
     connection: {
       valid: false,
       host: null,
@@ -31,6 +32,7 @@ export const useAppStore = defineStore('app', {
   actions: {
     async setConnection({ host, globalApiKey }) {
       try {
+        this.connecting = true
         const responde = await axios({
           method: 'GET',
           baseURL: host,
@@ -47,13 +49,15 @@ export const useAppStore = defineStore('app', {
       } catch (e) {
         this.connection.valid = false
         throw e.response?.data?.response?.message || e.response || e
-
+      } finally {
+        this.connecting = false
       }
     },
 
     async loadInstance(instanceName) {
       try {
-        const { host, globalApiKey } = this.connection;
+        console.log('loadInstance', instanceName)
+        // const { host, globalApiKey } = this.connection;
         return this.reconnect()
         // const response = await axios({
         //   method: 'GET',
@@ -93,6 +97,8 @@ export const useAppStore = defineStore('app', {
       } catch (e) {
         this.connection.valid = false
         throw e.response?.data?.response?.message || e.response || e
+      } finally {
+        this.connecting = false
       }
     },
 
@@ -152,6 +158,7 @@ export const useAppStore = defineStore('app', {
         const connection = window.localStorage.getItem('connection')
         if (connection) {
           this.connection = JSON.parse(connection || '{}')
+          this.connecting = true
           return this.reconnect()
         }
       }