From 81d2ae4fdac5c74504eb7d2555a85d81e4a79da6 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 26 Jul 2024 12:21:21 -0400
Subject: [PATCH] I added the modal files and connected them to their buttons.
 I need to complete every modal file.

---
 src/views/Account/AccountSecurity.vue         | 55 -----------
 src/views/Profile/AccountSecurity.vue         | 93 +++++++++++++++++++
 .../Dialogs/AccountSecurity/ModalPassword.vue | 11 +++
 .../ModalRecoveryByEmailInfo.vue              | 11 +++
 .../ModalRecoveryByPhoneInfo.vue              | 11 +++
 .../PageInformations/ModalFacebook.vue        | 11 +++
 .../PageInformations/ModalInstagram.vue       | 11 +++
 .../PageInformations/ModalLinkedIn.vue        | 11 +++
 .../Dialogs/PageInformations/ModalReddit.vue  | 11 +++
 .../Dialogs/PageInformations/ModalTikTok.vue  | 11 +++
 .../Dialogs/PageInformations/ModalWebsite.vue | 11 +++
 .../Dialogs/PageInformations/ModalX.vue       | 11 +++
 .../Dialogs/PageInformations/ModalYoutube.vue | 11 +++
 .../Dialogs/PersonnalInfo/AdressesHome.vue    | 11 +++
 .../Dialogs/PersonnalInfo/AdressesWork.vue    | 11 +++
 .../Dialogs/PersonnalInfo/Birthday.vue        | 11 +++
 .../Profile/Dialogs/PersonnalInfo/Email.vue   | 11 +++
 .../Profile/Dialogs/PersonnalInfo/Gender.vue  | 11 +++
 .../Profile/Dialogs/PersonnalInfo/Name.vue    | 11 +++
 .../Profile/Dialogs/PersonnalInfo/Phone.vue   | 11 +++
 .../{Account => Profile}/ManageAccount.vue    |  0
 .../{Account => Profile}/PageInformations.vue | 74 +++++++++++++--
 .../{Account => Profile}/PersonnalInfo.vue    | 82 +++++++++++++---
 src/views/main/Profile.vue                    |  8 +-
 24 files changed, 428 insertions(+), 82 deletions(-)
 delete mode 100644 src/views/Account/AccountSecurity.vue
 create mode 100644 src/views/Profile/AccountSecurity.vue
 create mode 100644 src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
 create mode 100644 src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
 create mode 100644 src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalX.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/Email.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/Gender.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/Name.vue
 create mode 100644 src/views/Profile/Dialogs/PersonnalInfo/Phone.vue
 rename src/views/{Account => Profile}/ManageAccount.vue (100%)
 rename src/views/{Account => Profile}/PageInformations.vue (63%)
 rename src/views/{Account => Profile}/PersonnalInfo.vue (53%)

diff --git a/src/views/Account/AccountSecurity.vue b/src/views/Account/AccountSecurity.vue
deleted file mode 100644
index 4233e0b..0000000
--- a/src/views/Account/AccountSecurity.vue
+++ /dev/null
@@ -1,55 +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-security</v-icon> Sécurité</h1>
-
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">Comment vous connecter à Hutopy</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">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
-          <span class="flex-auto text-left pr-6">Mot de passe</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">
-          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
-          <span class="flex-auto text-left pr-6">Adresse e-mail de récupération</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">
-          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
-          <span class="flex-auto text-left pr-6">Numéro de téléphone de récupération</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-
-  
-</template>
-
-
-
-<script setup>
-
-</script>
-
-<style>
-.HoverBtn:hover {
-  @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90; /* Réduire l'opacité au survol */
-}
-
-
-</style>
-
-
diff --git a/src/views/Profile/AccountSecurity.vue b/src/views/Profile/AccountSecurity.vue
new file mode 100644
index 0000000..01ea51b
--- /dev/null
+++ b/src/views/Profile/AccountSecurity.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-security</v-icon> Sécurité</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comment vous connecter à Hutopy</div>
+
+      <div class="flex flex-col w-full">    
+        <button
+            @click="openModal('ModalPassword')"
+            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="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
+          <span class="flex-auto text-left pr-6">Mot de passe</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByEmailInfo')"
+            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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Adresse e-mail de récupération</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByPhoneInfo')"
+            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">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
+          <span class="flex-auto text-left pr-6">Numéro de téléphone de récupération</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 ModalPassword from '@/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue';
+import ModalRecoveryByEmailInfo from '@/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue';
+import ModalRecoveryByPhoneInfo from '@/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue';
+
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalPassword,
+  ModalRecoveryByEmailInfo,
+  ModalRecoveryByPhoneInfo,
+
+};
+
+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>
+
+
diff --git a/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue b/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
new file mode 100644
index 0000000..f74cc4f
--- /dev/null
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Password
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
new file mode 100644
index 0000000..76684fd
--- /dev/null
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  RecoveryByEmail
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue
new file mode 100644
index 0000000..9d4023b
--- /dev/null
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ RecoveryByPhoneInfo
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue b/src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue
new file mode 100644
index 0000000..5e657ee
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Facebook
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue b/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
new file mode 100644
index 0000000..1981065
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  Instagram
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue b/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
new file mode 100644
index 0000000..9b2488a
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  LinkedIn
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue b/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
new file mode 100644
index 0000000..93dce5a
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Reddit
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue b/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
new file mode 100644
index 0000000..f7e857a
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+TikTok
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue b/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
new file mode 100644
index 0000000..b8d6c8e
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Website
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalX.vue b/src/views/Profile/Dialogs/PageInformations/ModalX.vue
new file mode 100644
index 0000000..dce8fdb
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalX.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ X
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue b/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
new file mode 100644
index 0000000..af36a8a
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Youtube
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue b/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
new file mode 100644
index 0000000..0deb2e7
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Adresses home
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue b/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue
new file mode 100644
index 0000000..5493a20
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+AdressesWork
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue b/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue
new file mode 100644
index 0000000..f321f52
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Birthday
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Email.vue b/src/views/Profile/Dialogs/PersonnalInfo/Email.vue
new file mode 100644
index 0000000..3199603
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/Email.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Email
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue b/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue
new file mode 100644
index 0000000..b5de4d6
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+gender
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Name.vue b/src/views/Profile/Dialogs/PersonnalInfo/Name.vue
new file mode 100644
index 0000000..6478b49
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/Name.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ Name
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue b/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue
new file mode 100644
index 0000000..3fbf851
--- /dev/null
+++ b/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Phone
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Account/ManageAccount.vue b/src/views/Profile/ManageAccount.vue
similarity index 100%
rename from src/views/Account/ManageAccount.vue
rename to src/views/Profile/ManageAccount.vue
diff --git a/src/views/Account/PageInformations.vue b/src/views/Profile/PageInformations.vue
similarity index 63%
rename from src/views/Account/PageInformations.vue
rename to src/views/Profile/PageInformations.vue
index 3b0c5d0..73cfd7d 100644
--- a/src/views/Account/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -53,7 +53,9 @@
     <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
       <div class="py-5 uppercase ml-4">Réseaux Sociaux</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">
+        <button
+            @click="openModal('ModalFacebook')"
+            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="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
           <span class="flex-auto text-left pr-6">Facebook</span>
           <span class="flex-none">
@@ -61,7 +63,9 @@
           </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">
+        <button
+            @click="openModal('ModalInstagram')"
+            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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
           <span class="flex-auto text-left pr-6">Instagram</span>
           <span class="flex-none">
@@ -69,7 +73,9 @@
           </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">
+        <button
+            @click="openModal('ModalX')"
+            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="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png" class="w-5 h-5" ></span>
           <span class="flex-auto text-left pr-6">X</span>
           <span class="flex-none">          
@@ -77,7 +83,9 @@
           </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 ">
+        <button
+            @click="openModal('ModalLinkedIn')"
+            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="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
           <span class="flex-auto text-left pr-6">LinkedIn</span>
           <span class="flex-none">
@@ -85,7 +93,9 @@
           </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 ">
+        <button
+            @click="openModal('ModalTikTok')"
+            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="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/tiktokblack.png" class="w-5 h-5" ></span>
           <span class="flex-auto text-left pr-6">TikTok</span>
           <span class="flex-none">          
@@ -93,7 +103,9 @@
           </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 ">
+        <button
+            @click="openModal('ModalYoutube')"
+            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="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
           <span class="flex-auto text-left pr-6">Youtube</span>
           <span class="flex-none">
@@ -101,7 +113,9 @@
           </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 ">
+        <button
+            @click="openModal('ModalReddit')"
+            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="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
           <span class="flex-auto text-left pr-6">Reddit</span>
           <span class="flex-none">
@@ -109,7 +123,9 @@
           </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  ">
+        <button
+            @click="openModal('ModalWebsite')"
+            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  ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
           <span class="flex-auto text-left pr-6">Site web personnel</span>
           <span class="flex-none">
@@ -122,13 +138,55 @@
     </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 ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
+import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
+import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
+import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
+import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
+import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
+import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
+import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
+
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalFacebook,
+  ModalInstagram,
+  ModalLinkedIn,
+  ModalReddit,
+  ModalTikTok,
+  ModalWebsite,
+  ModalX,
+  ModalYoutube
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
 
 </script>
 
diff --git a/src/views/Account/PersonnalInfo.vue b/src/views/Profile/PersonnalInfo.vue
similarity index 53%
rename from src/views/Account/PersonnalInfo.vue
rename to src/views/Profile/PersonnalInfo.vue
index 6fb8dc4..6e5379b 100644
--- a/src/views/Account/PersonnalInfo.vue
+++ b/src/views/Profile/PersonnalInfo.vue
@@ -1,12 +1,16 @@
 <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> Informations personnelles</h1>
+    <h1 class="uppercase pb-5 text-2xl">
+      <v-icon class="mr-2">mdi-information</v-icon> Informations personnelles
+    </h1>
 
     <div class="border rounded-2xl w-full max-w-[800px]">
       <div class="py-5 uppercase ml-4">Information de base</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">
+        <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-32 text-left">Photo de profil</span>
           <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
           <span class="flex-none">
@@ -18,7 +22,9 @@
           </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">
+        <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-32 text-left">Nom</span>
           <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
           <span class="flex-none">
@@ -26,7 +32,9 @@
           </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">
+        <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-32 text-left">Anniversaire</span>
           <span class="flex-auto text-left pr-6">27 octobre 1988</span>
           <span class="flex-none">
@@ -34,7 +42,9 @@
           </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">
+        <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-32 text-left">Genre</span>
           <span class="flex-auto text-left pr-6">Homme</span>
           <span class="flex-none">
@@ -51,7 +61,9 @@
       <div class="py-5 uppercase ml-4">Coordonnées</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">
+        <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-32 text-left">Courriel</span>
           <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
           <span class="flex-none">
@@ -59,7 +71,9 @@
           </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">
+        <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-32 text-left">Téléphone</span>
           <span class="flex-auto text-left pr-6">(581) 999-7540</span>
           <span class="flex-none">
@@ -76,7 +90,9 @@
       <div class="py-5 uppercase ml-4">Adresses</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">
+        <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-32 text-left">Domicile</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
@@ -84,7 +100,9 @@
           </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">
+        <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-32 text-left">Travail</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
@@ -94,12 +112,50 @@
       </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 '@/views/Profile/Dialogs/PersonnalInfo/Name.vue';
+import AdressesHome from '@/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue';
+import AdressesWork from '@/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue';
+import Birthday from '@/views/Profile/Dialogs/PersonnalInfo/Birthday.vue';
+import Email from '@/views/Profile/Dialogs/PersonnalInfo/Email.vue';
+import Gender from '@/views/Profile/Dialogs/PersonnalInfo/Gender.vue';
+import Phone from '@/views/Profile/Dialogs/PersonnalInfo/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>
@@ -107,8 +163,4 @@
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90; /* Réduire l'opacité au survol */
 }
-
-
 </style>
-
-
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index b45f623..e86e579 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -65,10 +65,10 @@ import { ref, onBeforeMount, onMounted } from "vue";
 import { useUserStore } from "@/stores/user.js";
 import { useClient } from "@/plugins/api.js";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
-import ManageAccount from "@/views/Account/ManageAccount.vue";
-import PageInformations from "@/views/Account/PageInformations.vue";
-import PersonnalInfo from "@/views/Account/PersonnalInfo.vue";
-import AccountSecurity from "@/views/Account/AccountSecurity.vue";
+import ManageAccount from "@/views/Profile/ManageAccount.vue";
+import PageInformations from "@/views/Profile/PageInformations.vue";
+import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
+import AccountSecurity from "@/views/Profile/AccountSecurity.vue";
 
 const userStore = useUserStore();
 const client = useClient();