Altera login, add cookie e comeca lista de videos

src/App.vue

@@ -8,7 +8,13 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-if="!isLoginPage" show-if-above v-model="leftDrawerOpen" side="left" bordered>
+    <q-drawer
+      v-if="!isLoginPage"
+      show-if-above
+      v-model="leftDrawerOpen"
+      side="left"
+      bordered
+    >
       <div class="row q-pa-md items-center">
         <div class="col q-ml-xs title">
           <span>Clipper AI</span>
@@ -18,8 +24,13 @@
       <q-separator />
 
       <q-list>
-        <q-item v-for="route in routes" clickable v-ripple :to="route.path">
+        <q-item
-          <q-item-section>{{ route.title }}</q-item-section>
+          v-for="route in routes.filter((route) => route.meta.showinModal)"
+          clickable
+          v-ripple
+          :to="route.path"
+        >
+          <q-item-section>{{ route.meta.title }}</q-item-section>
         </q-item>
       </q-list>
     </q-drawer>
@@ -61,11 +72,11 @@ export default {
   computed: {
     currentRouteTitle() {
       const route = this.$route;
-      return route.meta?.title || route.name || 'Clipper AI';
+      return route.meta?.title || route.name || "Clipper AI";
     },
     isLoginPage() {
-      return this.$route.path === '/login';
+      return this.$route.path === "/login";
-    }
+    },
   },
 };
 </script>

src/auth/router.js

@@ -31,18 +31,24 @@ export const routes = [
       requiresAuth: true,
       title: "Vídeos",
       permissions: [roles.VIDEOS_LIST],
+      showinModal: true,
     },
   },
   {
     path: "/:pathMatch(.*)*",
+    meta: {
+      showinModal: false,
+    },
     redirect: (to) => {
       return Cookies.get("token") ? "/videos" : "/login";
     },
   },
   {
     path: "/",
+    meta: {
+      showinModal: false,
+    },
     redirect: (to) => {
-      console.log(Cookies);
       return Cookies.get("token") ? "/videos" : "/login";
     },
   },
@@ -69,32 +75,33 @@ const hasPermission = (requiredPermissions = []) => {
 
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {
-    document.title = `${to.meta.title} | ClipperIA`;
+    document.title = to.meta.title;
   }
 
-  if (to.matched.some((record) => record.meta.requiresAuth)) {
+  // if (to.matched.some((record) => record.meta.requiresAuth)) {
-    if (!isAuthenticated()) {
+  if (!isAuthenticated()) {
-      next({
+    next({
-        path: "/login",
+      path: "/login",
-        query: { redirect: to.fullPath },
+      query: { redirect: to.fullPath },
-      });
+    });
-      return;
-    }
-
-    const requiredPermissions = to.meta.permissions || [];
-
-    if (requiredPermissions.length > 0 && !hasPermission(requiredPermissions)) {
-      next({ path: "/unauthorized" });
-
-      return;
-    }
-  }
-
-  if (to.matched.some((record) => record.meta.guest) && isAuthenticated()) {
-    next({ path: "/" });
 
     return;
   }
 
+  //   const requiredPermissions = to.meta.permissions || [];
+
+  //   if (requiredPermissions.length > 0 && !hasPermission(requiredPermissions)) {
+  //     next({ path: "/unauthorized" });
+
+  //     return;
+  //   }
+  // }
+
+  // if (to.matched.some((record) => record.meta.guest) && isAuthenticated()) {
+  //   next({ path: "/" });
+
+  //   return;
+  // }
+
   next();
 });

src/config/axios.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import Cookies from "js-cookie";
 
 export const API = axios.create({
   baseURL:
@@ -8,7 +9,7 @@ export const API = axios.create({
 });
 
 API.interceptors.request.use((config) => {
-  const token = localStorage.getItem("token");
+  const token = Cookies.get("token");
 
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;

src/routes/auth/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh lpr fFf">
+  <q-layout view="hHh LpR fFf">
     <q-drawer
       v-model="leftDrawerOpen"
       show-if-above
@@ -78,6 +78,7 @@
 </template>
 
 <script>
+import Cookies from "js-cookie";
 import Button from "@components/Button";
 import { API } from "@config/axios";
 
@@ -106,18 +107,26 @@ export default {
       try {
         this.loading = true;
 
-        const form = new FormData();
+        const params = new URLSearchParams();
 
-        form.append("username", this.username);
+        params.append("username", this.username);
-        form.append("password", this.password);
+        params.append("password", this.password);
 
-        const { data } = API.post("/auth/login", form, {
+        const { data } = await API.post("/auth/login", params.toString(), {
           headers: {
-            "Content-Type": "multipart/form-data",
+            "Content-Type": "application/x-www-form-urlencoded",
           },
         });
 
-        console.log(data);
+        Cookies.set("token", data.access_token, {
+          expires: data.expires_in,
+        });
+
+        Cookies.set("refresh_token", data.refresh_token, {
+          expires: data.refresh_expires_in,
+        });
+
+        await this.$router.push("/");
       } catch (error) {
         console.log(error);
       } finally {

src/routes/videos/index.vue

@@ -6,6 +6,12 @@
           <TextField label="Nome" required />
         </div>
       </div>
+
+      <div class="row">
+        <div class="col-4">
+          <Button label="Buscar" @click="handleSearch" />
+        </div>
+      </div>
     </q-card>
 
     <Table :columns="columns" :rows="rows" :pagination="pagination">
@@ -22,8 +28,10 @@
 </template>
 
 <script>
+import Button from "@components/Button";
 import Table from "@components/Table";
 import TextField from "@components/TextField";
+import { API } from "@config/axios";
 
 const columns = [
   {
@@ -62,119 +70,17 @@ const columns = [
   },
 ];
 
-const rows = [
-  {
-    name: "Frozen Yogurt",
-    calories: 159,
-    fat: 6.0,
-    carbs: 24,
-    protein: 4.0,
-    sodium: 87,
-    calcium: "14%",
-    iron: "1%",
-  },
-  {
-    name: "Ice cream sandwich",
-    calories: 237,
-    fat: 9.0,
-    carbs: 37,
-    protein: 4.3,
-    sodium: 129,
-    calcium: "8%",
-    iron: "1%",
-  },
-  {
-    name: "Eclair",
-    calories: 262,
-    fat: 16.0,
-    carbs: 23,
-    protein: 6.0,
-    sodium: 337,
-    calcium: "6%",
-    iron: "7%",
-  },
-  {
-    name: "Cupcake",
-    calories: 305,
-    fat: 3.7,
-    carbs: 67,
-    protein: 4.3,
-    sodium: 413,
-    calcium: "3%",
-    iron: "8%",
-  },
-  {
-    name: "Gingerbread",
-    calories: 356,
-    fat: 16.0,
-    carbs: 49,
-    protein: 3.9,
-    sodium: 327,
-    calcium: "7%",
-    iron: "16%",
-  },
-  {
-    name: "Jelly bean",
-    calories: 375,
-    fat: 0.0,
-    carbs: 94,
-    protein: 0.0,
-    sodium: 50,
-    calcium: "0%",
-    iron: "0%",
-  },
-  {
-    name: "Lollipop",
-    calories: 392,
-    fat: 0.2,
-    carbs: 98,
-    protein: 0,
-    sodium: 38,
-    calcium: "0%",
-    iron: "2%",
-  },
-  {
-    name: "Honeycomb",
-    calories: 408,
-    fat: 3.2,
-    carbs: 87,
-    protein: 6.5,
-    sodium: 562,
-    calcium: "0%",
-    iron: "45%",
-  },
-  {
-    name: "Donut",
-    calories: 452,
-    fat: 25.0,
-    carbs: 51,
-    protein: 4.9,
-    sodium: 326,
-    calcium: "2%",
-    iron: "22%",
-  },
-  {
-    name: "KitKat",
-    calories: 518,
-    fat: 26.0,
-    carbs: 65,
-    protein: 7,
-    sodium: 54,
-    calcium: "12%",
-    iron: "6%",
-  },
-];
-
 export default {
   name: "UserList",
   components: {
+    Button,
     Table,
     TextField,
   },
   data() {
     return {
       columns,
-      rows,
+      rows: [],
       pagination: {
         currentPage: 1,
         totalPages: 1,
@@ -182,6 +88,17 @@ export default {
       },
     };
   },
+  methods: {
+    async handleSearch() {
+      try {
+        const { data } = await API.get("/videos");
+
+        console.log(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
 };
 </script>