From af42b0c79b4747bff4f6175a6cb2e70562782051 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 27 Jul 2024 01:16:25 -0400
Subject: [PATCH] added modals files

---
 src/views/Profile/AccountSecurity.vue         |  4 +-
 .../Dialogs/AccountSecurity/ModalPassword.vue | 47 ++++++++++++++++---
 .../ModalRecoveryByEmailInfo.vue              | 32 ++++++++++---
 .../ModalRecoveryByPhoneInfo.vue              | 32 ++++++++++---
 .../Dialogs/PageInformations/BannerPicker.vue | 11 +++++
 .../Dialogs/PageInformations/ColorBorder.vue  | 11 +++++
 .../PageInformations/ColorBottomBanner.vue    | 11 +++++
 .../Dialogs/PageInformations/ColorMenu.vue    | 11 +++++
 .../PageInformations/ColorTopBanner.vue       | 11 +++++
 .../PageInformations/ModalFacebook.vue        | 27 ++++++++---
 .../PageInformations/ModalInstagram.vue       | 27 ++++++++---
 .../PageInformations/ModalLinkedIn.vue        | 27 ++++++++---
 .../Dialogs/PageInformations/ModalReddit.vue  | 27 ++++++++---
 .../Dialogs/PageInformations/ModalTikTok.vue  | 27 ++++++++---
 .../Dialogs/PageInformations/ModalWebsite.vue | 27 ++++++++---
 .../Dialogs/PageInformations/ModalX.vue       | 27 ++++++++---
 .../Dialogs/PageInformations/ModalYoutube.vue | 27 ++++++++---
 .../PageInformations/ProfilePicturePicker.vue | 11 +++++
 .../Dialogs/PersonnalInfo/AdressesHome.vue    |  4 +-
 src/views/Profile/PageInformations.vue        | 33 ++++++++++---
 20 files changed, 349 insertions(+), 85 deletions(-)
 create mode 100644 src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue

diff --git a/src/views/Profile/AccountSecurity.vue b/src/views/Profile/AccountSecurity.vue
index 01ea51b..8f8cf48 100644
--- a/src/views/Profile/AccountSecurity.vue
+++ b/src/views/Profile/AccountSecurity.vue
@@ -20,7 +20,7 @@
             @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-auto text-left pr-6">Récupération par E-mail</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -30,7 +30,7 @@
             @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-auto text-left pr-6">Récupération par mobile</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
diff --git a/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue b/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
index f74cc4f..6e9bee1 100644
--- a/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue
@@ -1,11 +1,44 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Changer le mot de passe</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="currentPassword"
+      label="Mot de passe courant"
+      type="password"
+      outlined
+  ></v-text-field>
+
+  <v-text-field
+      variant="outlined"
+      v-model="newPassword"
+      label="Nouveau mot de passe"
+      type="password"
+      outlined
+  ></v-text-field>
+
+  <v-text-field
+      variant="outlined"
+      v-model="confirmPassword"
+      label="Confirmer le mot de passe"
+      type="password"
+      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 currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
 
 </script>
 
-<template>
-Password
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
index 76684fd..658f0b2 100644
--- a/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue
@@ -1,11 +1,31 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Récupération par E-mail</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="currentPassword"
+      label="Mot de passe"
+      type="password"
+      outlined
+  ></v-text-field>
 
-<template>
-  RecoveryByEmail
+  <v-text-field
+      variant="outlined"
+      v-model="newEmail"
+      label="Nouveau E-mail"
+      type="password"
+      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>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+const currentPassword = ref('');
+const newEmail = ref('');
+</script>
 
-</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
index 9d4023b..5759819 100644
--- a/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue
+++ b/src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue
@@ -1,11 +1,31 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Récupération par mobile</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="currentPassword"
+      label="Mot de passe"
+      type="password"
+      outlined
+  ></v-text-field>
 
-<template>
- RecoveryByPhoneInfo
+  <v-text-field
+      variant="outlined"
+      v-model="newEmail"
+      label="Nouveau numéro"
+      type="password"
+      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>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+const currentPassword = ref('');
+const newEmail = ref('');
+</script>
 
-</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
new file mode 100644
index 0000000..ae269fe
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Banner Picker
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
new file mode 100644
index 0000000..d23ba03
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Border Color
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
new file mode 100644
index 0000000..f21ded9
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ColorBottomBanner
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
new file mode 100644
index 0000000..ce37082
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Menu Color
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
new file mode 100644
index 0000000..de596bd
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Color Top Banner
+</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
index 5e657ee..14df41a 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalFacebook.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien Facebook</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="facebookLink"
+      label="Votre lien Facebook"
+      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 facebookLink = ref('');
 
 </script>
 
-<template>
-Facebook
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue b/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
index 1981065..6993d25 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalInstagram.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien Instagram</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="instagramLink"
+      label="Votre lien Instagram"
+      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 instagramLink = ref('');
 
 </script>
 
-<template>
-  Instagram
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue b/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
index 9b2488a..2286e60 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien LinkedIn</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="linkedInLink"
+      label="Votre lien LinkedIn"
+      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 linkedInLink = ref('');
 
 </script>
 
-<template>
-  LinkedIn
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue b/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
index 93dce5a..e23ccb0 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalReddit.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien Reddit</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="redditLink"
+      label="Votre lien Reddit"
+      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 redditLink = ref('');
 
 </script>
 
-<template>
-Reddit
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue b/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
index f7e857a..2a57004 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalTikTok.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien TikTok</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="tiktokLink"
+      label="Votre lien TikTok"
+      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 tiktokLink = ref('');
 
 </script>
 
-<template>
-TikTok
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue b/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
index b8d6c8e..b99e864 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalWebsite.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Page Web personnel</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="websiteLink"
+      label="Lien de votre page web personnel"
+      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 websiteLink = ref('');
 
 </script>
 
-<template>
-Website
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalX.vue b/src/views/Profile/Dialogs/PageInformations/ModalX.vue
index dce8fdb..f86f434 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalX.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalX.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien X</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="xLink"
+      label="Votre lien x"
+      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 xLink = ref('');
 
 </script>
 
-<template>
- X
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue b/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
index af36a8a..dd4492d 100644
--- a/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ModalYoutube.vue
@@ -1,11 +1,24 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Lien Youtube</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="youtubeLink"
+      label="Votre lien Youtube"
+      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 youtubeLink = ref('');
 
 </script>
 
-<template>
-Youtube
-</template>
-
 <style scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
new file mode 100644
index 0000000..34b10f4
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Profile picture Picker
+</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
index cc6eef7..bced59c 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
+++ b/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="pb-5 text-2xl">Adresse de votre domicile</div>
+  <div class="pb-5 text-2xl">Adresse à votre domicile</div>
 
   <v-text-field
       variant="outlined"
       v-model="homeAddress"
-      label="Votre adresse domicile"
+      label="Votre adresse à votre domicile"
       outlined
   ></v-text-field>
 
diff --git a/src/views/Profile/PageInformations.vue b/src/views/Profile/PageInformations.vue
index 73cfd7d..29017a3 100644
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -6,12 +6,15 @@
       <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
       <div class="flex flex-col w-full">    
        
-        <button class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5">
+        <button
+           @click="openModal('ColorTopBanner')"
+            class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
         <button >
           <img
+              @click="openModal('BannerPicker')"
               src="/images/hutopymedia/banners/tutorialbanner.png"
               class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
               alt="Tutorial Banner"
@@ -19,19 +22,24 @@
         </button>
 
 
-        <button class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5">
+        <button
+            @click="openModal('ColorBottomBanner')"
+            class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
         <button class="flex justify-center my-5">
           <img
+              @click="openModal('ProfilePicturePicker')"
               class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
               src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
               alt="Profile Image"
           >
         </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('ColorBorder')"
+            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-circle-outline</v-icon></span>
           <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
           <span class="flex-none">
@@ -39,7 +47,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('ColorMenu')"
+            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-menu</v-icon></span>
           <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
           <span class="flex-none">
@@ -167,7 +177,12 @@ import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vu
 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';
-
+import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
+import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
+import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
+import ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
+import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
+import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
 
 const dialog = ref(false);
 const currentComponent = ref('');
@@ -180,7 +195,13 @@ const componentsMap = {
   ModalTikTok,
   ModalWebsite,
   ModalX,
-  ModalYoutube
+  ModalYoutube,
+  BannerPicker,
+  ColorTopBanner,
+  ColorBottomBanner,
+  ProfilePicturePicker,
+  ColorBorder,
+  ColorMenu
 };
 
 const openModal = (component) => {