From 5b140bb8b940fd9bd8e4e5e6f2a0ff269a8e9212 Mon Sep 17 00:00:00 2001
From: Jerome Villiseck <jerome.villiseck@outlook.com>
Date: Thu, 4 Jul 2024 14:32:14 +0200
Subject: [PATCH 1/2] =?UTF-8?q?-=20Mise=20en=20place=20du=20store=20pour?=
 =?UTF-8?q?=20l'utilisateur=20-=20Refactor=20complet=20de=20la=20gestion?=
 =?UTF-8?q?=20des=20utilisateurs=20-=20Refactor=20de=20l'authentification?=
 =?UTF-8?q?=20et=20de=20la=20persistance=20des=20donn=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                        | 51 ++++++++++++++++++++++++
 package.json                             |  1 +
 src/App.vue                              | 47 ++++------------------
 src/components/Header.vue                | 14 ++++---
 src/components/Navbar.vue                |  9 +++--
 src/components/Simulation.vue            |  1 -
 src/main.js                              |  5 ++-
 src/router/index.js                      | 25 +++++-------
 src/service/DemandesService.js           | 24 ++++++-----
 src/store/authStore.js                   | 30 ++++++++++++++
 src/views/Exemplarisation/ExempSteps.vue |  2 -
 src/views/Utilisateur/Login.vue          | 24 +++++++----
 12 files changed, 147 insertions(+), 86 deletions(-)
 create mode 100644 src/store/authStore.js

diff --git a/package-lock.json b/package-lock.json
index bfa747f..82b8f9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@mdi/font": "7.0.96",
+				"pinia": "^2.1.7",
 				"roboto-fontface": "*",
 				"vue": "^3.4.26",
 				"vue-i18n": "^9.13.1",
@@ -1641,6 +1642,56 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pinia": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+			"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+			"dependencies": {
+				"@vue/devtools-api": "^6.5.0",
+				"vue-demi": ">=0.14.5"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/posva"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.4.0",
+				"typescript": ">=4.4.4",
+				"vue": "^2.6.14 || ^3.3.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				},
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/pinia/node_modules/vue-demi": {
+			"version": "0.14.8",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+			"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+			"hasInstallScript": true,
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.4.38",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
diff --git a/package.json b/package.json
index 849e25f..4c0f853 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"@mdi/font": "7.0.96",
+		"pinia": "^2.1.7",
 		"roboto-fontface": "*",
 		"vue": "^3.4.26",
 		"vue-i18n": "^9.13.1",
diff --git a/src/App.vue b/src/App.vue
index 8bf5492..efd0790 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-app>
-    <Header :authenticated="authenticated" @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
-    <Navbar :authenticated="authenticated" :drawer="drawer" v-if="authenticated" @close="drawer = false"/>
+    <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
+    <Navbar :drawer="drawer" @close="drawer = false"/>
 		<Footer />
     <v-main>
       <v-alert color="red" :title="backendErrorMessage" variant='outlined' density='compact' type='warning' :text='backendErrorDescription' closable v-if="backendError"></v-alert>
@@ -9,8 +9,7 @@
         <component
           :is="Component"
           @backendError="setBackendError"
-          @backendSuccess="liftErrors"
-          @login-success="onLoginSuccess"
+          @backendSuccess="liftBackendError"
         />
       </router-view>
     </v-main>
@@ -18,31 +17,21 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import {ref} from 'vue'
 import Header from '@/components/Header.vue'
 import Navbar from '@/components/Navbar.vue'
 import Footer from '@/components/Footer.vue'
 import router from '@/router/index'
-import { HttpStatusCode } from 'axios';
-import DemandesService from '@/service/DemandesService'
+import {HttpStatusCode} from 'axios'
 import {useTheme} from 'vuetify'
 
 const backendError = ref(false)
 const backendErrorMessage = ref('')
 const backendErrorDescription = ref('')
-const authenticated = ref(false)
 const drawer = ref(false)
 
 const theme = useTheme()
 
-onMounted(() => {
-  checkAuthentication();
-  const savedTheme = localStorage.getItem('theme')
-  if (savedTheme) {
-    theme.global.name.value = savedTheme
-  }
-});
-
 function setBackendError(error) {
   backendError.value = true
   let titleMessage = ''
@@ -80,35 +69,13 @@ function setBackendError(error) {
   }
 }
 
-function liftErrors() {
+function liftBackendError() {
   backendError.value = false
 }
-function onLoginSuccess(userData) {
-  authenticated.value = true;
-  if (!userData.email) {
-    router.push('premiere-connexion');
-  } else {
-    router.push('accueil');
-  }
-}
+
 function onLogout(){
-  authenticated.value = false
   router.push('identification')
 }
-function checkAuthentication() {
-  const user = sessionStorage.getItem('user');
-  authenticated.value = !!user;
-  if (authenticated.value) {
-    DemandesService.checkToken()
-      .then(() => {
-        console.log('Token valide');
-      })
-      .catch((error) => {
-        console.error('Erreur de vérification du token:', error);
-        onLogout();
-      });
-  }
-}
 function toggleDrawer() {
   drawer.value = !drawer.value;
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 2fc5696..8368f8a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -55,17 +55,19 @@
 
 <script setup>
 import DemandesService from '@/service/DemandesService'
+import {useAuthStore} from '@/store/authStore'
+import {computed} from 'vue'
 
 const emit = defineEmits(['logout-success', 'toggle-drawer'])
 
-defineProps({
-  authenticated: {
-    type: Boolean,
-    required: true,
-  },
+const authStore = useAuthStore()
+
+const authenticated = computed(() => {
+  return authStore.isAuthenticated
 })
 
-function logout () {
+function logout() {
+  authStore.logout()
   DemandesService.logout()
   emit('logout-success')
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 3268f7b..6bdfd1c 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -117,10 +117,11 @@ defineProps({
     type: Boolean,
     required: true,
   },
-  authenticated: {
-    type: Boolean,
-    required: true,
-  },
+})
+
+const authenticated = computed(() => {
+  const user = JSON.parse(sessionStorage.getItem('user'))
+  return !!user;
 })
 
 const theme = useTheme()
diff --git a/src/components/Simulation.vue b/src/components/Simulation.vue
index 5a5318f..0860210 100644
--- a/src/components/Simulation.vue
+++ b/src/components/Simulation.vue
@@ -80,7 +80,6 @@ const isLoading = ref(true);
 onMounted(() => {
   demandesService.getNbLigneFichier(props.demande.id, 'EXEMP')
     .then(response => {
-      console.log(response.data);
       nbNotice.value.nbTotalNotice = response.data;
     });
   demandesService.simulerLigne(props.demande.id, 0, 'EXEMP')
diff --git a/src/main.js b/src/main.js
index 2e78f58..951bbb2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
 import router from '@/router'
 import { en, fr } from 'vuetify/locale'
+import { createPinia } from 'pinia'
 
 const app = createApp(App)
 app.config.productionTip = false
@@ -21,7 +22,9 @@ const vuetify = createVuetify({
   },
 })
 
+const pinia = createPinia()
+
 registerPlugins(app)
 
-app.use(router).use(vuetify)
+app.use(router).use(vuetify).use(pinia)
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 211d911..94fa0a8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,8 +9,7 @@ import ModificationEmail from '@/views/Utilisateur/ModificationEmail.vue';
 import DemandesService from '@/service/DemandesService'
 import RecouvSteps from '@/views/Recouvrement/RecouvSteps.vue';
 import ExempSteps from '@/views/Exemplarisation/ExempSteps.vue';
-
-const service = DemandesService;
+import {useAuthStore} from '@/store/authStore'
 
 const routes = [
   {
@@ -166,25 +165,23 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
+  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
+  const authStore = useAuthStore();
 
   if (requiresAuth) {
-    const user = JSON.parse(sessionStorage.getItem('user'))
-    const isAuthenticated = user && user.token
-
-    if (isAuthenticated) {
+    if (authStore.isAuthenticated) {
       try {
-        const valid = await service.checkToken();
+        const valid = await DemandesService.checkToken();
         if (valid.data) {
           next();
         } else {
-          console.error('Token invalide auprès du serveur')
-          service.logout()
-          next('/identification')
+          console.error('Token invalide auprès du serveur');
+          DemandesService.logout();
+          next('/identification');
         }
       } catch (error) {
-        console.error(error)
-        service.logout()
+        console.error(error);
+        DemandesService.logout();
         next('/identification');
       }
     } else {
@@ -193,6 +190,6 @@ router.beforeEach(async (to, from, next) => {
   } else {
     next();
   }
-})
+});
 
 export default router
diff --git a/src/service/DemandesService.js b/src/service/DemandesService.js
index a77915f..2a082cd 100644
--- a/src/service/DemandesService.js
+++ b/src/service/DemandesService.js
@@ -1,7 +1,7 @@
-import axios from 'axios';
+import axios from 'axios'
+import { useAuthStore } from '@/store/authStore'
 
 export class DemandesService {
-  //todo: renommer le service
   constructor() {
     this.client = axios.create({
       baseURL: import.meta.env.VITE_API_URL
@@ -10,9 +10,9 @@ export class DemandesService {
     // Ajout de l'intercepteur
     this.client.interceptors.request.use(
       (config) => {
-        const user = JSON.parse(sessionStorage.getItem('user'));
-        if (user && user.token) {
-          config.headers.Authorization = user.token;
+        const authStore = useAuthStore();
+        if (authStore.isAuthenticated && authStore.getToken) {
+          config.headers.Authorization = authStore.getToken;
         }
         return config;
       },
@@ -31,26 +31,26 @@ export class DemandesService {
         const userData = {
           login: login,
           shortname: response.data.shortname,
-          token: `Bearer ${response.data.accessToken}`,
           userNum: response.data.userNum,
           iln: response.data.iln,
           role: response.data.role,
           email: response.data.email
         };
-        sessionStorage.setItem('user', JSON.stringify(userData));
+        const token = `Bearer ${response.data.accessToken}`
         this.client.defaults.headers.common.Authorization = `Bearer ${response.data.accessToken}`;
+        const authStore = useAuthStore()
+        authStore.login(userData, token)
         return userData;
       })
       .catch(error => {
         console.error(error);
-        sessionStorage.clear();
-        throw error;
+        return Promise.reject(error);
       });
   }
 
   logout() {
-    sessionStorage.removeItem('user');
-    sessionStorage.clear()
+    const authStore = useAuthStore();
+    authStore.logout();
     delete this.client.defaults.headers.common.Authorization;
   }
 
@@ -122,10 +122,12 @@ export class DemandesService {
     return this.client.get(url)
   }
 
+  //TODO MAJ STORE
   modifierEmail(id, email){
     const config = { headers: {'Content-Type': 'text/plain'} };
     return this.client.patch(`utilisateurs/${id}`, email, config);
   }
+  //TODO MAJ STORE
   creerEmail(id, email){
     const config = { headers: {'Content-Type': 'text/plain'} };
     return this.client.post(`utilisateurs/${id}`, email, config);
diff --git a/src/store/authStore.js b/src/store/authStore.js
new file mode 100644
index 0000000..1e7ddca
--- /dev/null
+++ b/src/store/authStore.js
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia';
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    authenticated: false,
+    user: null,
+    token: null
+  }),
+  getters: {
+    getUser: (state) => state.user,
+    isAuthenticated: (state) => state.authenticated,
+    getToken: (state) => state.token
+  },
+  actions: {
+    login(user, token) {
+      this.authenticated = true;
+      this.user = user;
+      this.token = token;
+    },
+    logout() {
+      this.authenticated = false;
+      this.user = null;
+      this.token = null;
+    },
+    setToken(token) {
+      this.token = token;
+    }
+  },
+  persist: true // This will persist the store to localStorage
+});
diff --git a/src/views/Exemplarisation/ExempSteps.vue b/src/views/Exemplarisation/ExempSteps.vue
index 50a0b7c..8165cf4 100644
--- a/src/views/Exemplarisation/ExempSteps.vue
+++ b/src/views/Exemplarisation/ExempSteps.vue
@@ -126,11 +126,9 @@ const isLoading = ref(false);
 const dialog = ref(false);
 
 onMounted(()=>{
-  console.log(props.id);
   if(props.id){
     DemandesService.getDemande(props.id, "EXEMP")
       .then(response => {
-        console.log(response.data);
         demande.value = response.data;
         switch (demande.value.etatDemande) {
           case 'En préparation':
diff --git a/src/views/Utilisateur/Login.vue b/src/views/Utilisateur/Login.vue
index 16254b7..93275bc 100644
--- a/src/views/Utilisateur/Login.vue
+++ b/src/views/Utilisateur/Login.vue
@@ -50,6 +50,7 @@
 							></v-text-field>
 
 							<v-btn class="mb-8" color="blue" size="large" variant="tonal" block @click="login()">Se connecter</v-btn>
+              <v-btn @click="redirect()">TEst</v-btn>
 						</v-card>
 					</div>
 				</v-col>
@@ -60,11 +61,14 @@
 <script setup>
 import {ref} from 'vue'
 import DemandesService from '@/service/DemandesService'
+import router from '@/router'
+import {useAuthStore} from '@/store/authStore'
 
-const service = DemandesService;
+const service = DemandesService
+const authStore = useAuthStore()
 
 //Emit
-const emit = defineEmits(['backendError', 'backendSuccess', 'login-success'])
+const emit = defineEmits(['backendError', 'backendSuccess'])
 
 const incident = ref(false)
 const userLogin = ref('')
@@ -73,12 +77,18 @@ const visible = ref(false)
 
 async function login() {
   try {
-    const userData = await service.login(userLogin.value, userPassword.value);
-    emit('backendSuccess');
-    emit('login-success', userData);
+    const utilisateur = await service.login(userLogin.value, userPassword.value)
+    authStore.login(utilisateur)
+    const user = authStore.user
+    emit('backendSuccess')
+    if (user && user.email) {
+      await router.push('/accueil')
+    } else {
+      await router.push('/premiere-connexion')
+    }
   } catch (error) {
-    console.error('Login error:', error);
-    emit('backendError', error);
+    console.error('Login error:', error)
+    emit('backendError', error)
   }
 }
 </script>

From cce5559dbf7e25a958f28064848bb8b8bb2827c4 Mon Sep 17 00:00:00 2001
From: Jerome Villiseck <jerome.villiseck@outlook.com>
Date: Thu, 4 Jul 2024 15:44:48 +0200
Subject: [PATCH 2/2] =?UTF-8?q?-=20Mise=20en=20place=20du=20store=20pour?=
 =?UTF-8?q?=20l'utilisateur=20-=20Refactor=20complet=20de=20la=20gestion?=
 =?UTF-8?q?=20des=20utilisateurs=20-=20Refactor=20de=20l'authentification?=
 =?UTF-8?q?=20et=20de=20la=20persistance=20des=20donn=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 45a00a1..839f1e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@mdi/font": "7.0.96",
-				"pinia": "^2.1.7",
 				"moment": "^2.30.1",
+				"pinia": "^2.1.7",
 				"roboto-fontface": "*",
 				"vue": "^3.4.26",
 				"vue-i18n": "^9.13.1",