diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..9c0a503 --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +VITE_API_URL=https://localhost:5001/ diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..5a800a5 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_API_URL=todo diff --git a/index.html b/index.html index 243f446..7846ff0 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Vite App + Hutopy diff --git a/package-lock.json b/package-lock.json index bf6ac4c..915a947 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@mdi/font": "^7.4.47", + "@stripe/stripe-js": "^3.0.10", "axios": "^1.6.7", "pinia": "^2.1.7", "vue": "^3.4.15", @@ -841,6 +842,14 @@ "win32" ] }, + "node_modules/@stripe/stripe-js": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.10.tgz", + "integrity": "sha512-CFRNha+aPXR8GrqJss2TbK1j4aSGZXQY8gx0hvaYiSp+dU7EK/Zs5uwFTSAgV+t8H4+jcZ/iBGajAvoMYOwy+A==", + "engines": { + "node": ">=12.16" + } + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", diff --git a/package.json b/package.json index 295825f..1a647ed 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@mdi/font": "^7.4.47", + "@stripe/stripe-js": "^3.0.10", "axios": "^1.6.7", "pinia": "^2.1.7", "vue": "^3.4.15", diff --git a/src/App.vue b/src/App.vue index 64a6e68..7e1f5b6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,8 +7,5 @@ - diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue index 2144e96..b44472d 100644 --- a/src/layouts/DefaultLayout.vue +++ b/src/layouts/DefaultLayout.vue @@ -67,18 +67,18 @@ diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue index a288dea..9fc4c83 100644 --- a/src/layouts/FooterLayout.vue +++ b/src/layouts/FooterLayout.vue @@ -20,17 +20,17 @@ - Description image 2 + Description image 2 - Description image 3 + Description image 3 - Description image 1 + Description image 1 diff --git a/src/main.js b/src/main.js index e55acf4..39f62fb 100644 --- a/src/main.js +++ b/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, diff --git a/src/plugins/api.js b/src/plugins/api.js new file mode 100644 index 0000000..ee75e5b --- /dev/null +++ b/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; +} + diff --git a/src/plugins/clientPlugin.js b/src/plugins/clientPlugin.js deleted file mode 100644 index c5faed0..0000000 --- a/src/plugins/clientPlugin.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/plugins/store/authStore.js b/src/stores/auth.js similarity index 97% rename from src/plugins/store/authStore.js rename to src/stores/auth.js index cf0fef0..bc2c12f 100644 --- a/src/plugins/store/authStore.js +++ b/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); } } -}); \ No newline at end of file +}); diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 701d1bf..d62c6d6 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -8,7 +8,7 @@ - + @@ -58,7 +58,7 @@
+ src="../../images/loginpage/loginhutopy.png">

Connexion

Comment souhaitez-vous @@ -96,29 +96,24 @@ diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue index e66ff1d..c1dac89 100644 --- a/src/views/main/CreatorFolio.vue +++ b/src/views/main/CreatorFolio.vue @@ -15,7 +15,7 @@ @@ -72,7 +72,7 @@ - + @@ -169,7 +169,7 @@ - + T# @@ -182,7 +182,7 @@ - + 1

- - - - - -
- - - - - - - - - - - - @@ -466,7 +448,7 @@ export default { .sticky-top-label { position: sticky; bottom: 0; - right: 10; + right: 10%; width: 100%; z-index: 1000; } @@ -722,7 +704,6 @@ export default { .mobile-profile-picture { height: 40px; - border-radius: px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ajouter une ombre à la photo */ border: 2px solid #a30e79; diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue index a5cfc0d..ac26e1c 100644 --- a/src/views/main/HomeView.vue +++ b/src/views/main/HomeView.vue @@ -12,7 +12,7 @@ Connexion @@ -189,14 +189,14 @@ + style="margin-bottom: 4%; border-radius: 30px; width: 80px;"> + style="border-radius: 30px; min-width: 250px; max-height: 350;"> @@ -277,7 +277,7 @@
- +
@@ -403,7 +403,7 @@