init conection

src/components/modal/ConnnectPhone.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    max-width="500px"
+    :persistent="!AppStore.validConnection"
+  >
+    <v-card>
+      <v-card-text>
+        <v-alert type="error" v-if="error">
+          {{ Array.isArray(error) ? error.join(", ") : error }}
+        </v-alert>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          v-if="AppStore.validConnection"
+          text
+          @click="dialog = false"
+          :disabled="loading"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="success"
+          variant="tonal"
+          @click="save"
+          :disabled="!valid"
+          :loading="loading"
+        >
+          Conectar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+import { useAppStore } from "@/store/app";
+
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    dialog: false,
+    loading: false,
+    error: false,
+    AppStore: useAppStore(),
+  }),
+  methods: {
+    async save() {
+      try {
+        this.loading = true;
+        this.error = false;
+
+        const instance = await instanceController.create(this.instance);
+        await this.AppStore.reconnect();
+
+        this.$router.push({
+          name: "instance",
+          params: { id: instance.instance.instanceName },
+        });
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+    open() {
+      this.dialog = true;
+      this.error = false;
+      this.instance.instanceName = "";
+      this.generateApiKey();
+    },
+  },
+
+  emits: ["close"],
+};
+</script>

src/components/modal/CreateInstance.vue

@@ -14,7 +14,7 @@
             required
             outlined
             :rules="[
-              // Verify is not have any caracter except letters, numbers, _ and -
+              (v) => !!v || 'Nome é obrigatório',
               (v) =>
                 new RegExp('^[a-zA-Z0-9_-]*$', 'i').test(v) ||
                 'Nome inválido (apenas letras, números, _ e -)',
@@ -36,6 +36,11 @@
           />
         </v-form>
 
+        <v-alert type="info" density="comfortable">
+          O WebHook, WebSocket, RabbitMQ, Chatwoot e Typebot poderão ser
+          configurados após a criação da instância.
+        </v-alert>
+
         <v-alert type="error" v-if="error">
           {{ Array.isArray(error) ? error.join(", ") : error }}
         </v-alert>
@@ -93,12 +98,12 @@ export default {
         this.error = false;
 
         const instance = await instanceController.create(this.instance);
+        await this.AppStore.reconnect();
 
         this.$router.push({
           name: "instance",
           params: { id: instance.instance.instanceName },
         });
-
       } catch (e) {
         this.error = e.message?.message || e.message || e;
       } finally {
@@ -107,6 +112,8 @@ export default {
     },
     open() {
       this.dialog = true;
+      this.error = false;
+      this.instance.instanceName = "";
       this.generateApiKey();
     },
   },

src/views/Instance.vue

@@ -2,7 +2,8 @@
   <v-alert v-if="error" type="error">
     {{ error }}
   </v-alert>
-  <div v-else-if="instance">
+  <div v-else-if="instance" class="d-flex flex-column" style="gap: 1.5rem">
+    ;
     <v-card variant="outlined" class="d-flex align-center">
       <v-avatar size="100">
         <v-icon v-if="statusMapper[instance.instance.status].icon" size="70">
@@ -13,6 +14,16 @@
         <h2>{{ instance.instance.instanceName }}</h2>
       </div>
     </v-card>
+    <v-alert
+      icon="mdi-qrcode-scan"
+      v-if="instance.status != 'connected'"
+      type="warning"
+    >
+      <div class="d-flex justify-space-between align-center flex-wrap">
+        <span>Telefone não conectado</span>
+        <v-btn @click="connectPhone" size="small"> Conectar </v-btn>
+      </div>
+    </v-alert>
   </div>
 </template>