Merged PR 15: Refactor!: Codebase

Ce pull request modifie légerement le backend du frontend
Le plugin qui lie l'API au site utilise maintenant des variables d'environements (.env.*) afin de mettre le base path de l'API

.env.development

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5001/api/v1

.env.production

@@ -0,0 +1 @@
+VITE_API_URL=todo

src/layouts/DefaultLayout.vue

@@ -118,18 +118,18 @@
 </template>
 
 <script setup>
-import { useAuthStore } from '@/plugins/store/authStore';
+import { auth } from '@/stores/auth.js';
 import { useRouter } from 'vue-router';
 
-const authStore = useAuthStore();
+const store = auth();
 const router = useRouter()
 
 const logout = () => {
-  authStore.logout();
+  store.logout();
   router.push('/login');
 }
 
-const user = authStore.user;
+const user = store.user;
 </script>
 
-<style src="../cssstyle/index.css"></style>
+<style src="../cssstyle/index.css"></style>

src/main.js

@@ -8,7 +8,7 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
-import clientPlugin from './plugins/clientPlugin'
+import clientPlugin from './plugins/api.js'
 
 const vuetify = createVuetify({
   components,

src/plugins/api.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import {inject} from "vue";
+
+const key = Symbol("api");
+
+export default function(app) {
+    if (!import.meta.env.VITE_API_URL) throw new Error("VITE_API_URL is not provided")
+
+    // You create a .env.development file and a .env file
+    // depending on the environment, the correct file will be used
+    const api = axios.create({
+        baseURL: import.meta.env.VITE_API_URL,
+        timeout: 2000,
+    });
+
+    const requestInterceptor = (config) => {
+        const token = localStorage.getItem("jwt");
+        if (token) config.headers["Authorization"] = `Bearer ${token}`;
+        return config;
+    }
+
+    api.interceptors.request.use(requestInterceptor);
+
+    // This is a local injection, to use it in your components you can do this:
+    // const api = inject("api")
+    // api.get("/some-endpoint")
+    app.provide(key, api)
+}
+
+export function useClient() {
+    const api = inject(key)
+    if (!api) throw new Error("api is not provided")
+    return api;
+}
+

src/plugins/clientPlugin.js

@@ -1,34 +0,0 @@
-import axios from "axios";
-import { inject } from 'vue';
-
-const clientKey = Symbol('client');
-
-export default {
-    //todo: Need to have the baseURL in the config for later ( dev and prod env. )
-    install: (app) => {
-        const axiosInstance = axios.create({
-            baseURL: 'https://localhost:5001/',
-            timeout: 2000,
-        });
-
-        axiosInstance.interceptors.request.use((config) => {
-            const token = localStorage.getItem('jwt');
-            if (token) {
-                config.headers.Authorization = `Bearer ${token}`;
-            }
-            return config;
-        }, (error) => {
-            return Promise.reject(error);
-        });
-
-        app.provide(clientKey, axiosInstance);
-    }
-};
-
-export function useClient() {
-    const client = inject(clientKey);
-    if (!client) {
-        throw new Error('Axios instance is not provided');
-    }
-    return client;
-}

src/stores/auth.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 const baseUrl = '/api/Users';
 
-export const useAuthStore = defineStore({
+export const auth = defineStore({
     id: 'auth',
     state: () => ({
         user: null,
@@ -26,9 +26,6 @@ export const useAuthStore = defineStore({
             } catch (error) {
                 throw new Error('Login failed.')
             }
-
-
-
         },
         logout() {
             localStorage.setItem('jwt', '');
@@ -52,4 +49,4 @@ export const useAuthStore = defineStore({
             clearTimeout(this.refreshTokenTimeout);
         }
     }
-});
+});

src/views/LoginView.vue

@@ -97,14 +97,14 @@
 
 <script setup>
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import {authStore} from '@/plugins/store/authStore';
+import {auth} from '@/stores/auth.js';
 import {ref} from 'vue';
 import {useRouter} from 'vue-router';
-import {useClient} from "@/plugins/clientPlugin.js";
+import {useClient} from "@/plugins/api.js";
 
 const api = useClient()
 
-const store = authStore();
+const store = auth();
 const router = useRouter()
 
 let user = ref({});

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/ContactView.vue

@@ -167,9 +167,9 @@ export default {
     }
   },
   methods: {
-    submit() {
+    /*submit() {
       this.$emit('submit', this.email)
-    }
+    }*/
   }
 }
 </script>

src/views/main/HomeView.vue

@@ -14,7 +14,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>
@@ -402,7 +402,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import {useClient} from "@/plugins/clientPlugin.js";
+import {useClient} from "@/plugins/api.js";
 import {ref} from "vue";
 import {useRouter} from "vue-router";
 

tailwind.config.js

@@ -7,9 +7,6 @@ export default {
   theme: {
     extend: {},
   },
-  theme: {
-    extend: {},
-  },
   plugins: [],
 }