Adds edition of user profile

src/locales/en.json

@@ -78,10 +78,13 @@
     "ago": "ago"
   },
   "personnalinformation": {
-    "basicinformation": "Basic information",
+    "informations": "Informations",
     "title": "Personal information",
     "profilepicture": "Profile picture",
-    "name": "Name",
+    "fullname": "Name",
+    "firstname": "Firstname",
+    "lastname": "Lastname",
+    "alias": "Alias",
     "dob": "Date of birth",
     "gender": "Gender",
     "contactdetails": "Contact details",

src/locales/fr.json

@@ -78,10 +78,13 @@
     "ago": ""
   },
   "personnalinformation": {
-    "basicinformation": "Information de base",
+    "informations": "Informations",
     "title": "Informations personnelles",
     "profilepicture": "Photo de profil",
-    "name": "Nom",
+    "fullname": "Nom",
+    "firstname": "Prénom",
+    "lastname": "Nom",
+    "alias": "Pseudonyme",
     "dob": "Date de naissance",
     "gender": "Genre",
     "contactdetails": "Coordonnées",

src/stores/userStore.js

@@ -13,6 +13,7 @@ export const useUserStore = defineStore(
             async (newValue) => {
                 if (newValue) {
                     await fetchCurrentUserProfile()
+                    await fetchCurrentCreatorProfile()
                 } else {
                     user.value = undefined
                     creator.value = undefined
@@ -31,10 +32,25 @@ export const useUserStore = defineStore(
         const hasCreator = computed(() =>
             creator.value
             && Object.getOwnPropertyNames(creator.value).length >= 1)
-        
+
+        const fullname = computed(() => {
+            if (user.value) {
+                const {firstname, lastname} = user.value;
+
+                if (firstname && lastname) {
+                    return `${lastname}, ${firstname}`;
+                } else if (firstname) {
+                    return firstname;
+                } else if (lastname) {
+                    return lastname;
+                }
+            }
+            return 'n/a';
+        })
+
         const alias = computed(() => {
             if (user.value) {
-                return user.value.alias || `${user.value.firstName || ''} ${user.value.lastName || ''}`.trim() || 'Anonyme'
+                return user.value.alias || `${user.value.firstname || ''} ${user.value.lastname || ''}`.trim() || 'Anonyme'
             }
             return 'Anonyme';
         })
@@ -44,24 +60,120 @@ export const useUserStore = defineStore(
                 : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
         })
 
+        const client = useClient()
+
         async function fetchCurrentUserProfile() {
             try {
-                const client = useClient()
-                const userResponse = await client.get("/api/GetMyUser");
+                const userResponse = await client.get("/api/users/profile");
                 user.value = userResponse.data
-
-                try {
-                    const creatorId = userResponse.data.id
-                    const creatorResponse = await client.get(`/api/creators/${creatorId}`)
-                    creator.value = creatorResponse.data
-                } catch (error) {
-                    creator.value = undefined
-                }
             } catch (error) {
                 user.value = undefined;
+            }
+        }
+
+        async function fetchCurrentCreatorProfile() {
+            try {
+                const creatorResponse = await client.get(`/api/creators/profile`)
+                creator.value = creatorResponse.data
+            } catch (error) {
                 creator.value = undefined
             }
         }
 
-        return {user, creator, alias, hasCreator, portraitUrl, fetchCurrentUserProfile}
+        async function changeFullname(firstname, lastname) {
+            try {
+                await client.post(
+                    `/api/users/fullname`,
+                    {
+                        firstname: firstname,
+                        lastname: lastname
+                    })
+                user.value.firstname = firstname;
+                user.value.lastname = lastname;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+
+        async function changeAlias(alias) {
+            try {
+                await client.post(
+                    `/api/users/alias`,
+                    {
+                        alias: alias
+                    })
+                user.value.alias = alias;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+        
+        async function changeBirthday(birthdate) {
+            try {
+                await client.post(
+                    `/api/users/birthdate`,
+                    {
+                        birthdate: birthdate
+                    })
+                user.value.birthDate = birthdate;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+        
+        async function changePhone(phoneNumber) {
+            try {
+                await client.post(
+                    `/api/users/phone`,
+                    {
+                        phoneNumber: phoneNumber
+                    })
+                user.value.phoneNumber = phoneNumber;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+        
+        async function changeEmail(email) {
+            try {
+                await client.post(
+                    `/api/users/email`,
+                    {
+                        email: email
+                    })
+                user.value.email = email;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+
+        async function changeAddress(address) {
+            try {
+                await client.post(
+                    `/api/users/address`,
+                    {
+                        address: address
+                    })
+                user.value.address = address;
+            } catch (error) {
+                console.error(error)
+            }
+        }
+
+        return {
+            user,
+            creator,
+            alias,
+            hasCreator,
+            fullname,
+            portraitUrl,
+            changeFullname,
+            changeAlias,
+            changeBirthday,
+            changePhone,
+            changeEmail,
+            changeAddress,
+            fetchCurrentUserProfile,
+            fetchCurrentCreatorProfile
+        }
     })

src/views/main/Header.vue

@@ -15,7 +15,7 @@
             alt="Hutopy Logo"
             class="w-10"
         ></v-img>
-        <Div class="text-xs flex justify-center">ALPHA</Div>
+        <div class="text-xs flex justify-center">ALPHA</div>
       </RouterLink>
 
       <RouterLink class="d-none d-lg-flex" to="/">

src/views/profile/ProfilePage.vue

@@ -27,7 +27,7 @@
                 {{ $t('profilemenu.creator') }}
               </v-btn>
 
-              <v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
+              <v-btn variant="text" @click="currentComponent = 'AccountPage'">
                 <v-icon class="mr-2">mdi-information</v-icon>
                 {{ $t('profilemenu.user') }}
               </v-btn>
@@ -61,8 +61,8 @@
       <template v-else-if="currentComponent === 'CreatorPage'">
         <creator-page></creator-page>
       </template>
-      <template v-else-if="currentComponent === 'PersonnalInfo'">
-        <personnal-info></personnal-info>
+      <template v-else-if="currentComponent === 'AccountPage'">
+        <account-page></account-page>
       </template>
       <template v-else-if="currentComponent === 'AccountSecurity'">
         <account-security></account-security>
@@ -76,10 +76,10 @@
 import {ref, onMounted} from "vue";
 import ManageAccount from "@/views/profile/management/ManageAccount.vue";
 import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
-import PersonnalInfo from "@/views/profile/account/PersonnalInfo.vue";
+import AccountPage from "@/views/profile/account/AccountPage.vue";
 import AccountSecurity from "@/views/profile/security/AccountSecurity.vue";
 
-const currentComponent = ref('PersonnalInfo'); // Default component
+const currentComponent = ref('AccountPage'); // Default component
 const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);

src/views/profile/account/AccountPage.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="flex flex-col items-center w-[800px] gap-4">
+
+    <h1 class="uppercase pb-5 text-2xl">
+      <v-icon class="mr-2">mdi-information</v-icon>
+      {{ $t('personnalinformation.title') }}
+    </h1>
+
+    <v-card class="w-full">
+      <v-card-title>
+        {{ $t('personnalinformation.informations') }}
+      </v-card-title>
+
+      <button
+          class="editableValue"
+          @click="openEditPortrait">
+        <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>
+        <span class="value">Un portrait vous permet de personnaliser votre profil</span>
+        <span>
+            <img
+                :src="userStore.portraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="48px"
+                height="48px">
+          </span>
+      </button>
+
+      <button
+          class="editableValue"
+          @click="openEditFullname">
+        <span class="label">{{ $t('personnalinformation.fullname') }}</span>
+        <span class="value">{{ userStore.fullname }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+
+      <button
+          class="editableValue"
+          @click="openEditAlias">
+        <span class="label">{{ $t('personnalinformation.alias') }}</span>
+        <span class="value">{{ userStore.user.alias }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+      
+      <button
+          class="editableValue"
+          @click="openEditBirthday">
+        <span class="label">{{ $t('personnalinformation.dob') }}</span>
+        <span class="value">{{ userStore.user.birthDate }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+
+    </v-card>
+
+    <!-- Phone & email -->
+    <v-card class="w-full">
+      <v-card-title>
+        {{ $t('personnalinformation.contactdetails') }}
+      </v-card-title>
+
+      <button
+          class="editableValue"
+          @click="openEditEmail">
+        <span class="label">{{ $t('personnalinformation.email') }}</span>
+        <span class="value">{{ userStore.user.email }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+
+      <button
+          class="editableValue"
+          @click="openEditPhone">
+        <span class="label">{{ $t('personnalinformation.phone') }}</span>
+        <span class="value">{{ userStore.user.phoneNumber }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+    </v-card>
+
+    <!-- Address -->
+    <v-card class="w-full">
+      <v-card-title>
+        {{ $t('personnalinformation.addresses') }}
+      </v-card-title>
+
+      <button
+          class="editableValue"
+          @click="openEditAddress">
+        <span class="label">{{ $t('personnalinformation.home') }}</span>
+        <span class="value">{{ userStore.user.address }}</span>
+        <span><v-icon>mdi-chevron-right</v-icon></span>
+      </button>
+    </v-card>
+  </div>
+
+  <!-- Modal -->
+  <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
+    <portrait-dialog
+        @close="handleCloseEditPortrait"
+        @save="handleSaveEditPortrait"
+    ></portrait-dialog>
+  </v-dialog>
+  
+  <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
+    <fullname-dialog
+        @close="handleCloseEditFullname"
+        @save="handleSaveEditFullname"
+    ></fullname-dialog>
+  </v-dialog>
+  
+  <v-dialog v-model="dialogEditAliasShown" max-width="600px">
+    <alias-dialog
+        @close="handleCloseEditAlias"
+        @save="handleSaveEditAlias"
+    ></alias-dialog>
+  </v-dialog>
+  
+  <v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
+    <birthday-dialog
+        @close="handleCloseEditBirthday"
+        @save="handleSaveEditBirthday"
+    ></birthday-dialog>
+  </v-dialog>
+
+  <v-dialog v-model="dialogEditPhoneShown" max-width="600px">
+    <phone-dialog
+        @close="handleCloseEditPhone"
+        @save="handleSaveEditPhone"
+    ></phone-dialog>
+  </v-dialog>
+
+  <v-dialog v-model="dialogEditEmailShown" max-width="600px">
+    <email-dialog
+        @close="handleCloseEditEmail"
+        @save="handleSaveEditEmail"
+    ></email-dialog>
+  </v-dialog>
+
+  <v-dialog v-model="dialogEditAddressShown" max-width="600px">
+    <address-dialog
+        @close="handleCloseEditAddress"
+        @save="handleSaveEditAddress"
+    ></address-dialog>
+  </v-dialog>
+
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import AddressDialog from './AddressDialog.vue';
+import EmailDialog from "./EmailDialog.vue";
+import PhoneDialog from "@/views/profile/account/PhoneDialog.vue";
+import BirthdayDialog from "@/views/profile/account/BirthdayDialog.vue";
+import AliasDialog from "@/views/profile/account/AliasDialog.vue";
+import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
+import PortraitDialog from "@/views/profile/account/PortraitDialog.vue";
+import {useUserStore} from "@/stores/userStore.js";
+
+const userStore = useUserStore()
+
+// ### Portrait
+
+const dialogEditPortraitShown = ref(false)
+
+function openEditPortrait() {
+  dialogEditPortraitShown.value = true
+}
+
+function handleCloseEditPortrait() {
+  dialogEditPortraitShown.value = false
+}
+
+function handleSaveEditPortrait(portraitUrl) {
+  console.log(`going to save portrait: ${portraitUrl}`)
+  dialogEditPortraitShown.value = false
+}
+
+// ### Fullname
+
+const dialogEditFullnameShown = ref(false)
+
+function openEditFullname() {
+  dialogEditFullnameShown.value = true
+}
+
+function handleCloseEditFullname() {
+  dialogEditFullnameShown.value = false
+}
+
+function handleSaveEditFullname(firstname, lastname) {
+  userStore.changeFullname(firstname, lastname)
+  dialogEditFullnameShown.value = false
+}
+
+// ### Alias
+
+const dialogEditAliasShown = ref(false)
+
+function openEditAlias() {
+  dialogEditAliasShown.value = true
+}
+
+function handleCloseEditAlias() {
+  dialogEditAliasShown.value = false
+}
+
+function handleSaveEditAlias(alias) {
+  userStore.changeAlias(alias)
+  dialogEditAliasShown.value = false
+}
+
+// ### Birthday
+
+const dialogEditBirthdayShown = ref(false)
+
+function openEditBirthday() {
+  dialogEditBirthdayShown.value = true
+}
+
+function handleCloseEditBirthday() {
+  dialogEditBirthdayShown.value = false
+}
+
+function handleSaveEditBirthday(birthday) {
+  userStore.changeBirthday(birthday)
+  dialogEditBirthdayShown.value = false
+}
+
+// ### Phone
+
+const dialogEditPhoneShown = ref(false)
+
+function openEditPhone() {
+  dialogEditPhoneShown.value = true
+}
+
+function handleCloseEditPhone() {
+  dialogEditPhoneShown.value = false
+}
+
+function handleSaveEditPhone(phone) {
+  userStore.changePhone(phone)
+  dialogEditPhoneShown.value = false
+}
+
+// ### Email
+
+const dialogEditEmailShown = ref(false)
+
+function openEditEmail() {
+  dialogEditEmailShown.value = true
+}
+
+function handleCloseEditEmail() {
+  dialogEditEmailShown.value = false
+}
+
+function handleSaveEditEmail(email) {
+  userStore.changeEmail(email)
+  dialogEditEmailShown.value = false
+}
+
+// ### ADDRESS
+const dialogEditAddressShown = ref(false)
+
+function openEditAddress() {
+  dialogEditAddressShown.value = true
+}
+
+function handleCloseEditAddress() {
+  dialogEditAddressShown.value = false
+}
+
+function handleSaveEditAddress(address) {
+  userStore.changeAddress(address)
+  dialogEditAddressShown.value = false
+}
+
+</script>
+
+<style>
+
+.editableValue {
+  @apply py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
+  @apply hover:bg-[#A6147D] hover:text-white hover:opacity-90;
+}
+
+.label {
+  @apply p-2 min-w-40 text-left;
+}
+
+.value {
+  @apply flex-auto pr-6 text-left;
+}
+
+</style>

src/views/profile/account/AddressDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Adresse
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="address"
+          label="Votre adresse"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['address'])
+const emit = defineEmits(['close', 'save'])
+
+const title = ref(props.title);
+const address = ref(props.address);
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', address.value)
+
+
+</script>
+
+<style scoped>
+</style>

src/views/profile/account/AdressesHome.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Adresse à votre domicile</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="homeAddress"
-      label="Votre adresse à votre domicile"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain">Annuler</v-btn>
-    <v-btn color="#A6147D" >Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const homeAddress = ref('');
-</script>
-
-<style scoped>
-</style>

src/views/profile/account/AdressesWork.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Adresse au travail</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="homeAddress"
-      label="Votre adresse au travail"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain">Annuler</v-btn>
-    <v-btn color="#A6147D" >Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const homeAddress = ref('');
-</script>
-
-<style scoped>
-</style>

src/views/profile/account/AliasDialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-card-title>
+      {{ $t('personnalinformation.alias') }}
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="alias"
+          :label="$t('personnalinformation.alias')"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['alias'])
+const emit = defineEmits(['close', 'save'])
+
+const alias = ref(props.alias)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', alias.value)
+</script>
+
+

src/views/profile/account/Birthday.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Date de naissance</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="date"
-      label="AAAA-MM-JJ"
-      outlined
-  ></v-text-field> 
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain" color="black" >Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import {ref} from "vue";
-const date = ref('');
-
-
-
-</script>
-
-<style scoped>
-</style>

src/views/profile/account/BirthdayDialog.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Date de naissance
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="birthDate"
+          label="AAAA-MM-JJ"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['birthDate'])
+const emit = defineEmits(['close', 'save'])
+
+const birthDate = ref(props.birthDate)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', birthDate.value)
+</script>

src/views/profile/account/Email.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Courriel</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="email"
-      label="Votre courriel"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D" >Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const email = ref('');
-</script>
-
-

src/views/profile/account/EmailDialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Courriel
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="email"
+          label="Votre courriel"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['email'])
+const emit = defineEmits(['close', 'save'])
+
+const email = ref(props.email)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', email.value)
+</script>
+
+

src/views/profile/account/FullnameDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-card>
+    <v-card-title>
+      {{ $t('personnalinformation.fullname') }}
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="firstname"
+          :label="$t('personnalinformation.firstname')"
+      ></v-text-field>
+
+      <v-text-field
+          variant="outlined"
+          v-model="lastname"
+          :label="$t('personnalinformation.lastname')"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['firstname', 'lastname'])
+const emit = defineEmits(['close', 'save'])
+
+const firstname = ref(props.firstname)
+const lastname = ref(props.lastname)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', firstname.value, lastname.value)
+</script>
+
+

src/views/profile/account/Gender.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Genre</div>
-
-  <v-radio-group v-model="gender" row>
-    <v-radio label="Homme" value="Homme"></v-radio>
-    <v-radio label="Femme" value="Femme"></v-radio>
-    <v-radio label="Autre" value="Autre"></v-radio>
-  </v-radio-group>
-
-  <v-text-field
-      v-if="gender === 'Autre'"
-      v-model="otherGender"
-      label="Veuillez spécifier"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const gender = ref('');
-const otherGender = ref('');
-
-</script>
-
-
-<style scoped>
-</style>

src/views/profile/account/Name.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Nom</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="name"
-      label="Name"
-      outlined
-  ></v-text-field>
-
-  <v-text-field
-      variant="outlined"
-      v-model="lastName"
-      label="Last Name"
-      outlined
-  ></v-text-field>
-
-  <v-text-field
-      variant="outlined"
-      v-model="displayName"
-      label="Display Name as"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain" color="black" @click="handleCancel">Annuler</v-btn>
-    <v-btn color="#A6147D" >Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const name = ref('');
-const lastName = ref('');
-const displayName = ref('');
-
-
-
-const handleCancel = () => {
-  // Logic for canceling the changes
-  name.value = '';
-  lastName.value = '';
-  displayName.value = '';
-  console.log('Cancelled');
-};
-</script>
-
-<style scoped>
-</style>

src/views/profile/account/PersonnalInfo.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="flex flex-col items-center w-full">
-    <h1 class="uppercase pb-5 text-2xl">
-      <v-icon class="mr-2">mdi-information</v-icon> {{$t('personnalinformation.title')}}
-    </h1>
-
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.basicinformation')}}</div>
-
-      <div class="flex flex-col w-full">
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-            @click="openModal('Name')">
-          <span class="min-w-40 text-left">{{$t('personnalinformation.profilepicture')}}</span>
-          <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
-          <span class="flex-none">
-            <img
-                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
-                alt="Profile Image"
-                class="ml-2 rounded-full"
-                style="width: 48px; height: 48px;">
-          </span>
-        </button>
-
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-            @click="openModal('Name')">
-          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.name')}}</span>
-          <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-            @click="openModal('Birthday')">
-          <span class="flex-none pa-2 min-w-40 text-left">{{$t('personnalinformation.dob')}}</span>
-          <span class="flex-auto text-left pr-6">27 octobre 1988</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
-            @click="openModal('Gender')">
-          <span class="flex-none pa-2 min-w-40 text-left">{{$t('personnalinformation.gender')}}</span>
-          <span class="flex-auto text-left pr-6">Homme</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Phone & email -->
-  <div class="flex flex-col items-center mt-10 w-full">
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.contactdetails')}}</div>
-
-      <div class="flex flex-col w-full">
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-            @click="openModal('Email')">
-          <span class="min-w-40 text-left">{{$t('personnalinformation.email')}}</span>
-          <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
-            @click="openModal('Phone')">
-          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.phone')}}</span>
-          <span class="flex-auto text-left pr-6">(581) 999-7540</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Address -->
-  <div class="flex flex-col items-center mt-10 w-full">
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.addresses')}}</div>
-
-      <div class="flex flex-col w-full">
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-            @click="openModal('AdressesHome')">
-          <span class="min-w-40 text-left">{{$t('personnalinformation.home')}}</span>
-          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
-            @click="openModal('AdressesWork')">
-          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.work')}}</span>
-          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Modal -->
-  <v-dialog v-model="dialog" max-width="600px">
-    <v-card>
-      <v-card-title>
-      
-        <v-spacer></v-spacer>
-      
-      </v-card-title>
-      <v-card-text>
-        <component :is="currentComponent"></component>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import Name from './Name.vue';
-import AdressesHome from './AdressesHome.vue';
-import AdressesWork from './AdressesWork.vue';
-import Birthday from './Birthday.vue';
-import Email from './Email.vue';
-import Gender from './Gender.vue';
-import Phone from './Phone.vue';
-
-const dialog = ref(false);
-const currentComponent = ref('');
-
-const componentsMap = {
-  Name,
-  AdressesHome,
-  AdressesWork,
-  Birthday,
-  Email,
-  Gender,
-  Phone
-};
-
-const openModal = (component) => {
-  currentComponent.value = componentsMap[component];
-  dialog.value = true;
-};
-</script>
-
-<style>
-.HoverBtn:hover {
-  @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90; /* Réduire l'opacité au survol */
-}
-</style>

src/views/profile/account/Phone.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="pb-5 text-2xl">Numéro de téléphone</div>
-
-  <v-text-field
-      variant="outlined"
-      v-model="cellNumber"
-      label="Numéro de cellulaire"
-      outlined
-  ></v-text-field>
-
-  <v-text-field
-      variant="outlined"
-      v-model="workNumber"
-      label="Numéro au travail"
-      outlined
-  ></v-text-field>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D" >Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const cellNumber = ref('');
-const workNumber = ref('');
-
-</script>
-
-<style scoped>
-</style>

src/views/profile/account/PhoneDialog.vue

@@ -0,0 +1,39 @@
+<template>
+
+  <v-card>
+    <v-card-title>
+      Numéro de téléphone
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="phone"
+          label="Votre numéro de téléphone"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  
+  </v-card>
+
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['phone'])
+const emit = defineEmits(['close', 'save'])
+
+const phone = ref(props.email)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', phone.value)
+</script>

src/views/profile/account/PortraitDialog.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Portrait
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="portraitUrl"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        Annuler
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        Enregistrer
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(['portraitUrl'])
+const emit = defineEmits(['close', 'save'])
+
+const portraitUrl = ref(props.portraitUrl)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', portraitUrl.value)
+</script>

src/views/profile/management/ManageAccount.vue

@@ -8,7 +8,7 @@
       <div class="flex flex-col w-full">
         <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="min-w-32 text-left">{{$t('accountmanagement.pageid')}}</span>
-          <span class="flex-auto pr-6 text-left">Nom de la page / utilisateur </span>
+          <span class="value">Nom de la page / utilisateur </span>
           <span class="flex-none">
             <img
                 :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
@@ -35,7 +35,7 @@
       <div class="flex flex-col w-full">
         <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="min-w-32 text-left">{{$t('accountmanagement.pageid')}}</span>
-          <span class="flex-auto pr-6 text-left">Nom de utilisateur </span>
+          <span class="value">Nom de utilisateur </span>
           <span class="flex-none">
             <img
                 :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"