Refactor!: Codebase

src/views/LoginView.vue

@@ -96,13 +96,15 @@
 
 
 <script setup>
-import { useClient } from '@/plugins/clientPlugin';
-import { useAuthStore } from '@/plugins/store/authStore';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import {auth} from '@/stores/auth.js';
+import {ref} from 'vue';
+import {useRouter} from 'vue-router';
+import {useClient} from "@/plugins/api.js";
 
-const authStore = useAuthStore();
-const client = useClient();
+const api = useClient()
+
+const store = auth();
 const router = useRouter()
 
 let user = ref({});
@@ -453,4 +455,4 @@ async function login() {
 
 
 }
-</style>
+</style>

src/views/StripePayment.vue

@@ -2,7 +2,7 @@
   <v-container>
     <v-row>
       <v-col>
-        <v-text-field 
+        <v-text-field
           label="Montant ($)"
           v-model="price"
           style="color: rgb(0, 109, 119); background-color: #f4f4f4">
@@ -35,12 +35,12 @@
       </template>
     </v-dialog>
   </v-container>
-  
+
 
 </template>
 
 <script setup>
-import { useClient } from '@/plugins/clientPlugin';
+import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
@@ -84,4 +84,4 @@ import { onMounted, ref } from "vue";
     await checkout.mount('#checkout');
   }
 
-</script>
+</script>

src/views/main/HomeView.vue

@@ -15,7 +15,7 @@
               <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
               <RouterLink :to="{ name: 'login' }">
                 <v-btn size="large"
-                  style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
+                  style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
                   light elevation="0">
                   Connexion
                 </v-btn>
@@ -193,14 +193,14 @@
             <!-- Colonne de droite -->
             <v-col cols="3">
               <v-img src="../../../images/homepage/grinding.png"
-                style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
+                style="margin-bottom: 4%; border-radius: 30px; width: 80vw;"></v-img>
               <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
             </v-col>
             <v-col cols="3" style>
               <v-img src="../../../images/homepage/microphone.png"
                 style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
               <v-img src="../../../images/homepage/girlvr.png"
-                style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
+                style="border-radius: 30px; min-width: 250px; max-height: 350px;"></v-img>
             </v-col>
           </v-row>
         </v-container>
@@ -408,10 +408,9 @@
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { useClient } from '@/plugins/clientPlugin';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
+import {useClient} from "@/plugins/api.js";
+import {ref} from "vue";
+import {useRouter} from "vue-router";
 
 const router = useRouter()
 const client = useClient();