added modals files

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>

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>
-</style>

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>
+  <v-text-field
-  RecoveryByEmail
+      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>

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>
+  <v-text-field
- RecoveryByPhoneInfo
+      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>

src/views/Profile/Dialogs/PageInformations/BannerPicker.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Banner Picker
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PageInformations/ColorBorder.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Border Color
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ColorBottomBanner
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PageInformations/ColorMenu.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Menu Color
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Color Top Banner
+</template>
+
+<style scoped>
+
+</style>

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>
-</style>

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>
-</style>

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>
-</style>

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>
-</style>

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>
-</style>

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>
-</style>

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>
-</style>

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>
-</style>

src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Profile picture Picker
+</template>
+
+<style scoped>
+
+</style>

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>
 

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) => {