Item 85 migrer le composant de modification de l'adresse mail (2) modifier le résumé migrer le composant de modification de l'adresse mail (2)

src/App.vue

@@ -75,10 +75,16 @@ function liftErrors() {
 }
 function onLoginSuccess(){
   authenticated.value = true
+  const user = JSON.parse(sessionStorage.getItem('user'));
+  if( !user.email ){
+    router.push('premiere-connexion')
+  } else {
+    router.push('accueil')
+  }
 }
 function onLogout(){
   authenticated.value = false
-  router.push('/identification')
+  router.push('identification')
 }
 function checkAuthentication() {
   const user = sessionStorage.getItem('user');

src/components/Email.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-card class="elevation-5">
+    <v-card-title style="background-color: #295494; color: white" >
+      <span v-if="!email">Première connexion</span>
+      <span v-else>Modifier les informations de votre compte</span>
+    </v-card-title>
+    <v-card-text>
+      <v-form ref="form" class="pt-5">
+        <span>
+          Votre adresse mail est obligatoire pour utiliser l'application. Pour ajouter plusieurs adresses mail, séparez-les par des points virgules ;
+        </span>
+        <v-text-field
+          prepend-inner-icon="mdi-email-outline"
+          class="pt-12"
+          type="email"
+          name="email"
+          id="email"
+          v-model="emailModel"
+          :rules="rules"
+          @keyup.enter="validate()">
+        </v-text-field>
+      </v-form>
+      <v-alert
+        v-if="messageError"
+        type="error"
+        title="Erreur"
+        :text="messageError"
+      ></v-alert>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn
+        color="#295494"
+        variant="flat"
+        :disabled="isDisabled"
+        @click="validate()">Valider</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+<script setup>
+import {onMounted, ref, watch} from 'vue';
+import demandesService from '@/service/DemandesService';
+
+const emits = defineEmits(['validate']);
+const props = defineProps({
+  email: {
+    type: String,
+    required: true
+  },
+  userId: {
+    type: String,
+    required: true
+  }
+});
+
+const emailModel = ref();
+const isDisabled = ref(true);
+const pattern = /^((([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))[;]?)+$/;
+const rules = ref([
+  value => {
+    if (value) {
+      isDisabled.value = false;
+      return true;
+    }
+    isDisabled.value = true;
+    return 'Champ obligatoire.';
+  },
+  value => {
+    if (pattern.test(value)) {
+      isDisabled.value = false;
+      return true;
+    }
+    isDisabled.value = true;
+    return 'mail(s) invalide'
+  }
+]);
+const messageError = ref();
+
+onMounted(() => {
+  emailModel.value = props.email;
+});
+
+function validate() {
+  demandesService.modifierEmail(props.userId, emailModel.value)
+    .then(result => {
+      emits('validate', result.data.email);
+    })
+    .catch(err => {
+      messageError.value = err.response.data.message;
+      throw err;
+    });
+}
+</script>

src/router/index.js

@@ -1,41 +1,49 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Main from '@/views/AppLogin.vue'
+import Login from '@/views/Login.vue'
 import ExempTable from '@/views/ExempTable.vue'
 import ModifTable from '@/views/ModifTable.vue'
 import RecouvTable from '@/views/RecouvTable.vue'
 import ModifSteps from '@/views/ModifSteps.vue';
 import Accueil from '@/views/Accueil.vue';
-
+import ModificationEmail from '@/views/ModificationEmail.vue';
 import DemandesService from '@/service/DemandesService'
 
+const service = DemandesService;
+
 const routes = [
   {
     path: '/',
     component: Accueil,
-    meta: {requiresAuth: true}
+    meta: { requiresAuth: true }
   },
   {
     path: '/identification',
     name: 'identification',
-    component: Main,
-    meta: {requiresAuth: false}
+    component: Login,
+    meta: { requiresAuth: false }
   },
   {
     path: '/deconnexion',
     name: 'deconnexion',
-    component: Main,
-    meta: {requiresAuth: true}
+    component: Login,
+    meta: { requiresAuth: true }
   },
   {
     path: '/accueil',
     name: 'accueil',
     component: Accueil,
-    meta: {requiresAuth: true}
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/premiere-connexion',
+    name: 'premiere-connexion',
+    component: ModificationEmail,
+    meta: { requiresAuth: true }
   },
   {
     path: '/modification-adresse-mail',
     name: 'modification-adresse-mail',
-    component: Accueil,
+    component: ModificationEmail,
     meta: {requiresAuth: true}
   },
   {
@@ -165,22 +173,20 @@ router.beforeEach(async (to, from, next) => {
   if (requiresAuth) {
     const user = JSON.parse(sessionStorage.getItem('user'))
     const isAuthenticated = user && user.token
-    console.log(JSON.stringify(sessionStorage))
 
     if (isAuthenticated) {
       try {
-        const valid = await DemandesService.checkToken();
-        console.log(valid)
+        const valid = await service.checkToken();
         if (valid.data) {
           next();
         } else {
           console.error('Token invalide auprès du serveur')
-          DemandesService.logout()
-          next('identification')
+          service.logout()
+          next('/identification')
         }
       } catch (error) {
         console.error(error)
-        DemandesService.logout()
+        service.logout()
         next('/identification');
       }
     } else {

src/service/DemandesService.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export class DemandesService {
-
+  //todo: renommer le service
   constructor() {
     this.client = axios.create({
       baseURL: import.meta.env.VITE_API_URL
@@ -26,8 +26,7 @@ export class DemandesService {
     const url = import.meta.env.VITE_API_URL + `signin`
     console.info('appel:' + url)
 
-    //NOTE : this.client.post semble provoquer des appels multiples asynchrone (erreurs console)
-    return axios.post(import.meta.env.VITE_API_URL + `signin`, {username: login, password: password})
+    this.client.post(`signin`, {username: login, password: password})
       .then((response) => {
         sessionStorage.setItem('user', JSON.stringify({
           login: login,
@@ -91,7 +90,6 @@ export class DemandesService {
         return response
       })
       .catch((error) => {
-        console.log(JSON.stringify(error))
         if (error.response && error.response.status === 500) {
           // Masquer l'erreur 500 dans la console
           return Promise.resolve({ status: 500, data: null });
@@ -121,6 +119,12 @@ export class DemandesService {
     console.info('appel: ' + import.meta.env.VITE_API_URL + url);
     return this.client.get(url)
   }
+
+  modifierEmail(id, email){
+    const config = { headers: {'Content-Type': 'text/plain'} };
+    return this.client.put(`utilisateurs/${id}`, email, config)
+  }
+
 }
 
 export default new DemandesService()

src/views/AppLogin.vue → src/views/Login.vue

@@ -60,9 +60,8 @@
 <script setup>
 import {ref} from 'vue'
 import DemandesService from '@/service/DemandesService'
-import router from "@/router";
 
-const service = DemandesService
+const service = DemandesService;
 
 //Emit
 const emit = defineEmits(['backendError', 'backendSuccess', 'login-success'])
@@ -77,7 +76,6 @@ async function login() {
     await service.login(userLogin.value, userPassword.value)
     emit('backendSuccess')
     emit('login-success');
-    await router.push('/accueil');
   }catch(error){
     emit('backendError', error);
   }

src/views/ModificationEmail.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- MODIFICATION DE L'ADRESSE MAIL -->
+  <v-container class="fill-height" fluid >
+    <v-row align="center" justify="center">
+      <v-col md="7">
+        <email :email="user.email ? user.email : ''" :user-id="user.userNum" @validate="setEmailUser"></email>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import Email from '@/components/Email.vue';
+import { ref } from 'vue';
+import router from '@/router';
+
+const user = ref(JSON.parse(sessionStorage.getItem('user')));
+
+function setEmailUser(email){
+  user.value.email = email;
+  sessionStorage.setItem('user',JSON.stringify(user.value));
+  router.push('Accueil');
+}
+</script>