feat: Add ChangeEmailDialog and ChangePhoneDialog components for updating creator's email and phone number

frontend/src/views/profile/creators/ChangeEmailDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="card dialog">
+    <div class="card-title">{{ t('changeEmail') }}</div>
+    <div class="card-content">
+      <v-text-field
+          v-model="email"
+          class="w-full p-2"
+          :label="t('email')"
+          type="email"
+          variant="outlined"
+      />
+      <div class="card-actions">
+        <button class="secondary" @click="$emit('closeRequested')">
+          {{ t('cancel') }}
+        </button>
+        <button class="primary" @click="saveEmail" :disabled="isLoading">
+          {{ t('save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useClient } from '@/plugins/api.js';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+
+const { t } = useI18n();
+const client = useClient();
+const creatorProfileStore = useCreatorProfileStore();
+
+const props = defineProps({
+  creator: {
+    type: Object,
+    required: true
+  }
+});
+
+const email = ref(props.creator.presentation?.email || '');
+const isLoading = ref(false);
+
+async function saveEmail() {
+  if (!props.creator.id) {
+    console.error("Creator ID is missing!");
+    return;
+  }
+
+  try {
+    isLoading.value = true;
+
+    // Save presentation info
+    await client.post(
+      `/api/creators/${props.creator.id}/presentation-infos`,
+      {
+        description: props.creator.presentation?.description || "",
+        videoUrl: props.creator.presentation?.videoUrl || "",
+        phoneNumber: props.creator.presentation?.phoneNumber || "",
+        email: email.value || ""
+      }
+    );
+
+    // Refresh creator profile
+    await creatorProfileStore.fetchCreatorProfile();
+    
+    // Close dialog
+    emit('closeRequested');
+  } catch (error) {
+    console.error("Error saving email:", error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+const emit = defineEmits(['closeRequested']);
+</script>
+
+<style scoped>
+.dialog {
+  @apply max-w-md mx-auto;
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "changeEmail": "Change Email",
+    "email": "Email",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "fr": {
+    "changeEmail": "Modifier l'email",
+    "email": "Email",
+    "save": "Enregistrer",
+    "cancel": "Annuler"
+  },
+  "es": {
+    "changeEmail": "Cambiar correo electrónico",
+    "email": "Correo electrónico",
+    "save": "Guardar",
+    "cancel": "Cancelar"
+  }
+}
+</i18n> 

frontend/src/views/profile/creators/ChangePhoneDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="card dialog">
+    <div class="card-title">{{ t('changePhoneNumber') }}</div>
+    <div class="card-content">
+      <v-text-field
+          v-model="phoneNumber"
+          class="w-full p-2"
+          :label="t('phoneNumber')"
+          type="tel"
+          variant="outlined"
+      />
+      <div class="card-actions">
+        <button class="secondary" @click="$emit('closeRequested')">
+          {{ t('cancel') }}
+        </button>
+        <button class="primary" @click="savePhoneNumber" :disabled="isLoading">
+          {{ t('save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useClient } from '@/plugins/api.js';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+
+const { t } = useI18n();
+const client = useClient();
+const creatorProfileStore = useCreatorProfileStore();
+
+const props = defineProps({
+  creator: {
+    type: Object,
+    required: true
+  }
+});
+
+const phoneNumber = ref(props.creator.presentation?.phoneNumber || '');
+const isLoading = ref(false);
+
+async function savePhoneNumber() {
+  if (!props.creator.id) {
+    console.error("Creator ID is missing!");
+    return;
+  }
+
+  try {
+    isLoading.value = true;
+
+    // Save presentation info
+    await client.post(
+      `/api/creators/${props.creator.id}/presentation-infos`,
+      {
+        description: props.creator.presentation?.description || "",
+        videoUrl: props.creator.presentation?.videoUrl || "",
+        phoneNumber: phoneNumber.value || "",
+        email: props.creator.presentation?.email || ""
+      }
+    );
+
+    // Refresh creator profile
+    await creatorProfileStore.fetchCreatorProfile();
+    
+    // Close dialog
+    emit('closeRequested');
+  } catch (error) {
+    console.error("Error saving phone number:", error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+const emit = defineEmits(['closeRequested']);
+</script>
+
+<style scoped>
+.dialog {
+  @apply max-w-md mx-auto;
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "changePhoneNumber": "Change Phone Number",
+    "phoneNumber": "Phone Number",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "fr": {
+    "changePhoneNumber": "Modifier le numéro de téléphone",
+    "phoneNumber": "Numéro de téléphone",
+    "save": "Enregistrer",
+    "cancel": "Annuler"
+  },
+  "es": {
+    "changePhoneNumber": "Cambiar número de teléfono",
+    "phoneNumber": "Número de teléfono",
+    "save": "Guardar",
+    "cancel": "Cancelar"
+  }
+}
+</i18n>