💄 Fix bugs and adjusting styles

web/src/components/SideMenu.vue

@@ -1,15 +1,15 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
   setup() {
     const route = useRoute();
+    const router = useRouter(); // Para redirecionar após logout
 
     const items = ref<any[]>([
       { title: 'Dashboard', icon: 'mdi-view-dashboard', to: '/dashboard' },
       { title: 'Conectar', icon: 'mdi-qrcode-plus', to: '/connect' },
-      { title: 'Configurações', icon: 'mdi-cog', to: '/settings' },
     ]);
 
     const extraItems = ref<any[]>([]);
@@ -23,7 +23,17 @@ export default defineComponent({
       extraMenuName.value = typeof newRoute.name === 'string' ? newRoute.name : '';
     });
 
-    return { items, extraItems, extraMenuName, route };
+    // Função de logout
+    const logout = () => {
+      // Limpa os dados do localStorage
+      localStorage.removeItem('loginTime');
+      localStorage.removeItem('isLogged');
+      
+      // Redireciona para a página de login
+      router.push({ name: 'Login' });
+    };
+
+    return { items, extraItems, extraMenuName, route, logout };
   }
 });
 </script>
@@ -45,7 +55,8 @@ export default defineComponent({
         <v-list-item style="padding-left: 33px;" v-for="item in extraItems" :key="item.title" :to="{ name: item.to.name, params: { id: route.params.id } }"  :prepend-icon="item.icon" :value="item.title" :title="item.title"> </v-list-item>
       </template>
       <v-divider/>
-      <v-list-item prepend-icon="mdi-logout" title="Logout" value="logout"></v-list-item>
+      <!-- Botão de logout com a ação associada -->
+      <v-list-item prepend-icon="mdi-logout" title="Logout" value="logout" @click="logout"></v-list-item>
 
     </v-list>
   </v-navigation-drawer>

web/src/router/index.ts

@@ -10,7 +10,6 @@ import Dashboard from '@/views/Dashboard.vue'
 import Device from '@/views/Device.vue'
 import DeviceWebhook from '@/views/DeviceWebhook.vue'
 import Login from '@/views/Login.vue'
-import Settings from '@/views/Settings.vue'
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
 const extraMenuItems = [
@@ -40,14 +39,6 @@ const routes = [
       requiresAuth: true,
     },
   },
-  {
-    path: "/settings",
-    name: "Settings",
-    component: Settings,
-    meta: {
-      requiresAuth: true,
-    },
-  },
   {
     path: "/device/:id",
     name: "Device",

web/src/views/Dashboard.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { API_BASE_URL, API_BASE_ENDPOINTS, API_KEY_TOKEN } from '@/api.config';
 import Device from '@/types/device';
 
 const devices = ref<Device[]>([]);
-const loading = ref(true); // Adiciona uma variável para controlar o loading
+const loading = ref(true); // Variável para controlar o estado de loading
+const noDevices = ref(false); // Variável para controlar se não há dispositivos
 
 onMounted(async () => {
   try {
@@ -14,7 +15,14 @@ onMounted(async () => {
         'X-Api-Key': API_KEY_TOKEN
       },
     });
-    devices.value = response.data.map((deviceData: any) => new Device(deviceData));
+
+    devices.value = Array.isArray(response.data)
+      ? response.data.map((deviceData: any) => new Device(deviceData))
+      : [];
+
+    if (devices.value.length === 0) {
+      noDevices.value = true; // Atualiza o estado quando não há dispositivos
+    }
   } catch (error) {
     console.error(error);
   } finally {
@@ -39,25 +47,38 @@ onMounted(async () => {
         </v-row>
         <v-divider/>
 
-        <!-- Loader -->
+        <!-- Loader enquanto os dados estão sendo carregados -->
         <v-container v-if="loading" class="d-flex justify-center align-center" style="height: 400px;">
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
         </v-container>
 
+        <!-- Exibe o v-banner quando não há dispositivos -->
+        <v-container v-else-if="noDevices">
+          <v-banner color="warning" icon="mdi-alert">
+            <template v-slot:actions>
+              <v-btn text @click="() => $router.push({ name: 'Connect' })">
+                Conectar novo dispositivo
+              </v-btn>
+            </template>
+            Nenhum dispositivo foi conectado ainda.
+          </v-banner>
+        </v-container>
+
+        <!-- Lista de dispositivos -->
         <v-container v-else>
-          <v-row >
+          <v-row>
             <v-col cols="12" md="6" v-for="item in devices" :key="item.id">
               <v-card
                 class="mx-auto hover-card"
                 prepend-icon="mdi-cellphone"
                 :subtitle="item.number"
                 :title="item.pushName"
-                @click="() => $router.push({ name: 'Device', params: { id: item.id } })" 
+                @click="() => $router.push({ name: 'Device', params: { id: item.id } })"
                 transition="fade-transition"
               >
                 <v-container>
                   <div class="d-flex justify ga-2">
-                    <v-chip color="secondary" label>{{item.contacts}} Contatos</v-chip>
+                    <v-chip color="secondary" label>{{ item.contacts }} Contatos</v-chip>
                   </div>
                 </v-container>
               </v-card>
@@ -71,7 +92,7 @@ onMounted(async () => {
 
 <style scoped>
 .hover-card {
-  transition: box-shadow 0.3s, transform 0.3s; /* Efeito de hover */
+  transition: box-shadow 0.3s, transform 0.3s;
 }
 
 .hover-card:hover {
@@ -87,7 +108,7 @@ onMounted(async () => {
   opacity: 0;
 }
 
-.v-enter, .v-leave-to /* .v-leave-active in <2.1.8 */ {
+.v-enter, .v-leave-to {
   opacity: 1;
 }
 </style>

web/src/views/Login.vue

@@ -37,8 +37,8 @@ export default {
   },
   methods: {
     login() {
-      const expectedUsername = "admin";
-      const expectedPassword = "admin";
+      const expectedUsername = import.meta.env.VITE_USER_USERNAME || 'admin';
+      const expectedPassword = import.meta.env.VITE_USER_PASSWORD || 'admin';
 
       if (this.username === expectedUsername && this.password === expectedPassword) {
         // Login bem-sucedido