From d1d73181f589f4cd42f3fd6fed87749e6df1197f Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Sat, 8 Feb 2025 09:49:52 -0500
Subject: [PATCH] Cleanup profile

---
 frontend/src/App.vue                          |   2 +-
 frontend/src/router/router.js                 |   2 +-
 frontend/src/views/profile/AccountPage.vue    | 293 ------------------
 frontend/src/views/profile/CreatorPage.vue    | 257 ---------------
 frontend/src/views/profile/ProfilePage.vue    | 282 ++++++++++++++++-
 .../src/views/profile/account/EmailDialog.vue |  72 +++--
 ...eStripeID.vue => ChangeStripeIdDialog.vue} |   2 +-
 ...{ChangeTitle.vue => ChangeTitleDialog.vue} |   0
 .../{Socials.vue => SocialsDialog.vue}        |   1 +
 9 files changed, 326 insertions(+), 585 deletions(-)
 delete mode 100644 frontend/src/views/profile/AccountPage.vue
 delete mode 100644 frontend/src/views/profile/CreatorPage.vue
 rename frontend/src/views/profile/creators/{ChangeStripeID.vue => ChangeStripeIdDialog.vue} (95%)
 rename frontend/src/views/profile/creators/{ChangeTitle.vue => ChangeTitleDialog.vue} (100%)
 rename frontend/src/views/profile/creators/{Socials.vue => SocialsDialog.vue} (99%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 05c4058..bdb5494 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,7 +18,7 @@
       <div v-if="!smAndDown" class="w-full ml-64">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center bg-hBackground">
-          <router-view class="p-2"></router-view>
+          <router-view></router-view>
         </div>
       </div>
     </div>
diff --git a/frontend/src/router/router.js b/frontend/src/router/router.js
index 61c3dd8..7c2053c 100644
--- a/frontend/src/router/router.js
+++ b/frontend/src/router/router.js
@@ -31,10 +31,10 @@ const routes = [
   {
     path: '/@:creator',
     component: CreatorLayout,
-    name: 'creator',
     children: [
       {
         path: '',
+        name: 'creator',
         component: CreatorHome,
       }
     ],
diff --git a/frontend/src/views/profile/AccountPage.vue b/frontend/src/views/profile/AccountPage.vue
deleted file mode 100644
index 8c8dc76..0000000
--- a/frontend/src/views/profile/AccountPage.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-
-  <v-card rounded="xl" 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="userProfileStore.user.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">{{ userProfileStore.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">{{ userProfileStore.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">{{ userProfileStore.user.birthDate }}</span>-->
-    <!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
-    <!--      </button>-->
-
-  </v-card>
-
-  <!-- Phone & email -->
-  <v-card rounded="xl" 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">{{ userProfileStore.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">{{ userProfileStore.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">{{ userProfileStore.user.address }}</span>-->
-  <!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
-  <!--      </button>-->
-  <!--    </v-card>-->
-
-  <!-- Modal -->
-  <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
-    <portrait-dialog
-        :portrait-url="userProfileStore.user.portraitUrl"
-        @close="handleCloseEditPortrait"
-        @save="handleSaveEditPortrait"
-    ></portrait-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
-    <fullname-dialog
-        :firstname="userProfileStore.user.firstname"
-        :lastname="userProfileStore.user.lastname"
-        @close="handleCloseEditFullname"
-        @save="handleSaveEditFullname"
-    ></fullname-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditAliasShown" max-width="600px">
-    <alias-dialog
-        :alias="userProfileStore.user.alias"
-        @close="handleCloseEditAlias"
-        @save="handleSaveEditAlias"
-    ></alias-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
-    <birthday-dialog
-        :birth-date="userProfileStore.user.birthDate"
-        @close="handleCloseEditBirthday"
-        @save="handleSaveEditBirthday"
-    ></birthday-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditPhoneShown" max-width="600px">
-    <phone-dialog
-        :phone="userProfileStore.user.phoneNumber"
-        @close="handleCloseEditPhone"
-        @save="handleSaveEditPhone"
-    ></phone-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditEmailShown" max-width="600px">
-    <email-dialog
-        :email="userProfileStore.user.email"
-        @close="handleCloseEditEmail"
-        @save="handleSaveEditEmail"
-    ></email-dialog>
-  </v-dialog>
-
-  <v-dialog v-model="dialogEditAddressShown" max-width="600px">
-    <address-dialog
-        :address="userProfileStore.user.address"
-        @close="handleCloseEditAddress"
-        @save="handleSaveEditAddress"
-    ></address-dialog>
-  </v-dialog>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-import AddressDialog from './account/AddressDialog.vue';
-import EmailDialog from "./account/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 {useUserProfileStore} from "@/stores/userProfileStore.js";
-
-const userProfileStore = useUserProfileStore()
-
-
-// ### Portrait
-
-const dialogEditPortraitShown = ref(false)
-
-function openEditPortrait() {
-  dialogEditPortraitShown.value = true
-}
-
-function handleCloseEditPortrait() {
-  dialogEditPortraitShown.value = false
-}
-
-function handleSaveEditPortrait(portraitData) {
-  userProfileStore.changePortrait(portraitData)
-  dialogEditPortraitShown.value = false
-}
-
-// ### Fullname
-
-const dialogEditFullnameShown = ref(false)
-
-function openEditFullname() {
-  dialogEditFullnameShown.value = true
-}
-
-function handleCloseEditFullname() {
-  dialogEditFullnameShown.value = false
-}
-
-function handleSaveEditFullname(firstname, lastname) {
-  userProfileStore.changeFullname(firstname, lastname)
-  dialogEditFullnameShown.value = false
-}
-
-// ### Alias
-
-const dialogEditAliasShown = ref(false)
-
-function openEditAlias() {
-  dialogEditAliasShown.value = true
-}
-
-function handleCloseEditAlias() {
-  dialogEditAliasShown.value = false
-}
-
-function handleSaveEditAlias(alias) {
-  userProfileStore.changeAlias(alias)
-  dialogEditAliasShown.value = false
-}
-
-// ### Birthday
-
-const dialogEditBirthdayShown = ref(false)
-
-function openEditBirthday() {
-  dialogEditBirthdayShown.value = true
-}
-
-function handleCloseEditBirthday() {
-  dialogEditBirthdayShown.value = false
-}
-
-function handleSaveEditBirthday(birthday) {
-  userProfileStore.changeBirthday(birthday)
-  dialogEditBirthdayShown.value = false
-}
-
-// ### Phone
-
-const dialogEditPhoneShown = ref(false)
-
-function openEditPhone() {
-  dialogEditPhoneShown.value = true
-}
-
-function handleCloseEditPhone() {
-  dialogEditPhoneShown.value = false
-}
-
-function handleSaveEditPhone(phone) {
-  userProfileStore.changePhone(phone)
-  dialogEditPhoneShown.value = false
-}
-
-// ### Email
-
-const dialogEditEmailShown = ref(false)
-
-function openEditEmail() {
-  dialogEditEmailShown.value = true
-}
-
-function handleCloseEditEmail() {
-  dialogEditEmailShown.value = false
-}
-
-function handleSaveEditEmail(email) {
-  userProfileStore.changeEmail(email)
-  dialogEditEmailShown.value = false
-}
-
-// ### ADDRESS
-const dialogEditAddressShown = ref(false)
-
-function openEditAddress() {
-  dialogEditAddressShown.value = true
-}
-
-function handleCloseEditAddress() {
-  dialogEditAddressShown.value = false
-}
-
-function handleSaveEditAddress(address) {
-  userProfileStore.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>
diff --git a/frontend/src/views/profile/CreatorPage.vue b/frontend/src/views/profile/CreatorPage.vue
deleted file mode 100644
index df9d211..0000000
--- a/frontend/src/views/profile/CreatorPage.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<script setup>
-import XIcon from '@/assets/icons/x.svg';
-import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
-import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
-import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
-import {ref} from 'vue';
-import LogoPicker from '../creators/CreatorLogoEditor.vue';
-import Socials from './creators/Socials.vue';
-
-const creatorProfileStore = useCreatorProfileStore();
-
-const dialog = ref(false);
-const currentComponent = ref('');
-
-const componentsMap = {
-  LogoPicker,
-  Socials,
-  ChangeTitle,
-  ChangeStripeID,
-};
-
-function requestCancel() {
-  currentComponent.value = null;
-  dialog.value = false;
-}
-
-const openDialog = (component) => {
-  currentComponent.value = componentsMap[component];
-  dialog.value = true;
-};
-
-const closeDialog = () => {
-  currentComponent.value = null;
-  dialog.value = false;
-};
-</script>
-
-<template>
-  <v-dialog v-model="dialog" max-width="800px">
-    <v-card
-        :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"
-    >
-      <v-card-text>
-        <component
-            :is="currentComponent"
-            :creator="creatorProfileStore.creator"
-            @closeRequested="closeDialog"
-            @requestAccept="requestAccept"
-            @requestCancel="requestCancel"
-        ></component>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-
-  <!--  Lorsque l'utilisateur n'a pas de creator name-->
-  <v-card rounded="xl" class="w-full">
-    <h1 class="uppercase">
-      {{ $t('creatorinfopage.informations') }}
-    </h1>
-
-    <!-- INFOS -->
-    <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="flex-none pa-2 min-w-32 text-left">
-          {{ $t('creatorinfopage.name') }}
-        </span>
-
-        <span class="flex-auto text-left pr-6 capitalize">
-          {{ creatorProfileStore.creator.name }}
-        </span>
-
-        <span class="flex-none">
-          <v-icon>mdi-chevron-right</v-icon>
-        </span>
-
-      </button>
-    </div>
-
-    <!-- TITLE -->
-    <div class="flex flex-col w-full">
-      <button
-          @click="openDialog('ChangeTitle')"
-          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">{{
-                $t('creatorinfopage.title')
-              }}</span>
-        <span class="flex-auto text-left pr-6 capitalize">`{{
-            creatorProfileStore.creator.title
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-    </div>
-
-    <!-- STRIPE -->
-    <div class="flex flex-col w-full">
-      <button
-          @click="openDialog('ChangeStripeID')"
-          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"
-      >
-            <span class="flex-none pa-2 min-w-32 text-left"
-            >Stripe Account ID</span
-            >
-        <span class="flex-auto text-left pr-6">{{
-            creatorProfileStore.creator.stripeId
-          }}</span>
-
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-    </div>
-
-  </v-card>
-
-  <v-card rounded="xl" class="w-full">
-    <div class="uppercase">
-      {{ $t('creatorinfopage.socialnetwork') }}
-    </div>
-
-    <div class="flex flex-col w-full">
-      <button
-          @click="openDialog('Socials')"
-          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">
-          {{ creatorProfileStore.creator.socials?.facebookUrl }}
-        </span>
-
-        <span class="flex-none">
-          <v-icon>mdi-chevron-right</v-icon>
-        </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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">{{
-            creatorProfileStore.creator.socials?.instagramUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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 w-9 h-9 text-left ml-0.5">
-              <XIcon></XIcon>
-            </span>
-        <span class="flex-auto text-left pr-6">{{
-            creatorProfileStore.creator.socials?.xUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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">{{
-            creatorProfileStore.creator.socials?.linkedInUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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">
-              <XIcon class="w-5 h-5"></XIcon>
-            </span>
-        <span class="flex-auto text-left pr-6">{{
-            creatorProfileStore.creator.socials?.tikTokUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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">{{
-            creatorProfileStore.creator.socials?.youtubeUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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">{{
-            creatorProfileStore.creator.socials?.redditUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-
-      <button
-          @click="openDialog('Socials')"
-          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"
-      >
-            <span class="pa-2 min-w-32 text-left"
-            ><v-icon>mdi-web</v-icon></span
-            >
-        <span class="flex-auto text-left pr-6">{{
-            creatorProfileStore.creator.socials?.websiteUrl
-          }}</span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-    </div>
-  </v-card>
-
-</template>
-
-<style>
-.HoverBtn:hover {
-  @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90;
-}
-</style>
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index f4b6746..e38797e 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -1,16 +1,284 @@
 <template>
 
-  <div class="flex flex-col gap-8 p-8">
-    <account-page></account-page>
-    <creator-page></creator-page>
-  </div>
+  <!-- Modal -->
+  <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
+    <fullname-dialog
+        :firstname="userProfileStore.user.firstname"
+        :lastname="userProfileStore.user.lastname"
+        @close="handleCloseEditFullname"
+        @save="handleSaveEditFullname"
+    ></fullname-dialog>
+  </v-dialog>
 
+  <v-dialog v-model="dialogEditAliasShown" max-width="800px">
+    <alias-dialog
+        :alias="userProfileStore.user.alias"
+        @close="handleCloseEditAlias"
+        @save="handleSaveEditAlias"
+    ></alias-dialog>
+  </v-dialog>
+
+  <!-- Creator Section (integrated directly) -->
+  <v-dialog v-model="dialog" max-width="800px">
+    <div class="card">
+        <component
+            :is="currentComponent"
+            :creator="creatorProfileStore.creator"
+            @closeRequested="closeDialog"
+        ></component>
+      </div>
+  </v-dialog>
+
+  <div class="space-y-6 p-4">
+
+    <div class="card">
+
+      <div class="title">
+        {{ $t('personnalinformation.informations') }}
+      </div>
+
+      <div class="content">
+        <button
+            class="action"
+            @click="openEditFullname">
+          <span class="label">{{ $t('personnalinformation.fullname') }}</span>
+          <span class="value">{{ userProfileStore.fullname }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button
+            class="action"
+            @click="openEditAlias">
+          <span class="label">{{ $t('personnalinformation.alias') }}</span>
+          <span class="value">{{ userProfileStore.user.alias }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+      </div>
+
+    </div>
+
+    <!-- Phone & email -->
+    <div class="card">
+
+      <div class="title">
+        {{ $t('personnalinformation.contactdetails') }}
+      </div>
+
+      <div class="content">
+        <button class="action" @click="openDialog('EmailDialog')">
+          <span class="label">{{ $t('personnalinformation.email') }}</span>
+          <span class="value">{{ userProfileStore.user.email }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+      </div>
+
+    </div>
+
+    <!--  Lorsque l'utilisateur n'a pas de creator name-->
+    <div class="card">
+
+      <div class="title">
+        {{ $t('creatorinfopage.informations') }}
+      </div>
+
+      <div class="content">
+
+        <!-- NAME -->
+        <button class="action">
+          <span class="label">{{ $t('creatorinfopage.name') }}</span>
+          <span class="value">{{ creatorProfileStore.creator.name }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <!-- TITLE -->
+        <button class="action" @click="openDialog('ChangeTitleDialog')">
+          <span class="label">{{ $t('creatorinfopage.title') }}</span>
+          <span class="value">{{ creatorProfileStore.creator.title }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <!-- STRIPE -->
+        <button class="action" @click="openDialog('ChangeStripeIdDialog')">
+          <span class="label">Stripe Account ID</span>
+          <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+      </div>
+
+    </div>
+
+    <div class="card">
+
+      <div class="title">
+        {{ $t('creatorinfopage.socialnetwork') }}
+      </div>
+
+      <div class="content">
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-facebook</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-instagram</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-linkedin</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-youtube</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-reddit</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+        <button class="action" @click="openDialog('SocialsDialog')">
+          <span class="label"><v-icon>mdi-web</v-icon></span>
+          <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
+          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+        </button>
+
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script setup>
-import CreatorPage from "@/views/profile/CreatorPage.vue";
-import AccountPage from "@/views/profile/AccountPage.vue";
+import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
+import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
+import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
+import {ref} from 'vue';
+import SocialsDialog from './creators/SocialsDialog.vue';
+import AliasDialog from "@/views/profile/account/AliasDialog.vue";
+import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
+import EmailDialog from "@/views/profile/account/EmailDialog.vue";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import XIcon from "@/assets/icons/x.svg"
+
+const userProfileStore = useUserProfileStore()
+
+// ### Fullname
+const dialogEditFullnameShown = ref(false)
+function openEditFullname() {
+  dialogEditFullnameShown.value = true
+}
+function handleCloseEditFullname() {
+  dialogEditFullnameShown.value = false
+}
+function handleSaveEditFullname(firstname, lastname) {
+  userProfileStore.changeFullname(firstname, lastname)
+  dialogEditFullnameShown.value = false
+}
+
+// ### Alias
+const dialogEditAliasShown = ref(false)
+function openEditAlias() {
+  dialogEditAliasShown.value = true
+}
+function handleCloseEditAlias() {
+  dialogEditAliasShown.value = false
+}
+function handleSaveEditAlias(alias) {
+  userProfileStore.changeAlias(alias)
+  dialogEditAliasShown.value = false
+}
+
+// ### Email
+const dialogEditEmailShown = ref(false)
+function openEditEmail() {
+  dialogEditEmailShown.value = true
+}
+function handleCloseEditEmail() {
+  dialogEditEmailShown.value = false
+}
+function handleSaveEditEmail(firstname, lastname) {
+  userProfileStore.changeEmail(firstname, lastname)
+  dialogEditEmailShown.value = false
+}
+
+const creatorProfileStore = useCreatorProfileStore();
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  EmailDialog,
+  SocialsDialog,
+  ChangeTitleDialog,
+  ChangeStripeIdDialog,
+};
+
+function requestCancel() {
+  currentComponent.value = null;
+  dialog.value = false;
+}
+
+const openDialog = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+
+const closeDialog = () => {
+  currentComponent.value = null;
+  dialog.value = false;
+};
 </script>
 
 <style scoped>
-</style>
+
+.card {
+  @apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
+}
+
+.title {
+  @apply text-lg font-semibold text-hOnSecondary mb-2;
+}
+
+.content {
+  @apply text-base font-semibold text-hOnSurface flex flex-col w-full;
+}
+
+.action {
+  @apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
+}
+
+.label {
+  @apply flex-none min-w-32 text-left;
+}
+
+.value {
+  @apply flex-auto text-left pr-6 capitalize;
+}
+
+.chevron {
+  @apply flex-none;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index 5dfac87..194c8b6 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -1,38 +1,60 @@
 <template>
-  <v-card>
-    <v-card-title>
-      Courriel
-    </v-card-title>
+  <div class="pb-5 text-2xl">Courriel</div>
 
-    <div class="m-4">
-      <v-text-field
-          variant="outlined"
-          v-model="email"
-          label="Votre courriel"
-      ></v-text-field>
-    </div>
+  <div class="m-4">
+    <v-text-field
+        variant="outlined"
+        v-model="email"
+        label="Votre courriel"
+    ></v-text-field>
+  </div>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn color="black" variant="text" @click="cancel">
+      Annuler
+    </v-btn>
+    <v-btn color="#A6147D" @click="save">
+      Enregistrer
+    </v-btn>
+  </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';
+import {useClient} from "@/plugins/api.js";
 
-const props = defineProps(['email'])
-const emit = defineEmits(['close', 'save'])
+const props = defineProps({
+  creator: {
+    required: true
+  }
+})
 
-const email = ref(props.email)
+const emits = defineEmits(['closeRequested'])
+
+const email = ref(props.creator.email)
+
+const client = useClient()
+const save = async () => {
+  try {
+    await client.post(
+        `/api/creators/${props.creator.id}/email`,
+        {
+          "facebookUrl": facebookUrl.value
+        })
+
+    props.creator.socials.facebookUrl = facebookUrl
+
+    emits('closeRequested')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const cancel = () => {
+  emits('closeRequested')
+}
 
-const requestClose = () => emit('close')
-const requestSave = () => emit('save', email.value)
 </script>
 
 
diff --git a/frontend/src/views/profile/creators/ChangeStripeID.vue b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
similarity index 95%
rename from frontend/src/views/profile/creators/ChangeStripeID.vue
rename to frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
index f9818b7..779498e 100644
--- a/frontend/src/views/profile/creators/ChangeStripeID.vue
+++ b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
@@ -33,7 +33,7 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="pb-5 text-2xl">Modifier le id Stripe</div>
+  <div class="pb-5 text-2xl">Modifier le Stripe ID</div>
   <div class="flex flex-col space-y-4">
     <v-text-field
       variant="outlined"
diff --git a/frontend/src/views/profile/creators/ChangeTitle.vue b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
similarity index 100%
rename from frontend/src/views/profile/creators/ChangeTitle.vue
rename to frontend/src/views/profile/creators/ChangeTitleDialog.vue
diff --git a/frontend/src/views/profile/creators/Socials.vue b/frontend/src/views/profile/creators/SocialsDialog.vue
similarity index 99%
rename from frontend/src/views/profile/creators/Socials.vue
rename to frontend/src/views/profile/creators/SocialsDialog.vue
index 19d662a..4716049 100644
--- a/frontend/src/views/profile/creators/Socials.vue
+++ b/frontend/src/views/profile/creators/SocialsDialog.vue
@@ -68,6 +68,7 @@ const cancel = () => {
 
 <template>
   <div class="pb-5 text-2xl">Reseaux Sociaux</div>
+
   <div class="flex flex-row align-center">
     <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
     <v-text-field