Adds edition of slug.

frontend/src/views/profile/ProfilePage.vue

@@ -7,6 +7,8 @@ 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 ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
+import ChangeNameDialog from '@/views/profile/creators/ChangeNameDialog.vue';
+import ChangeSlugDialog from '@/views/profile/creators/ChangeSlugDialog.vue';
 import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
 import Youtube from "@/views/svg/Youtube.vue";
 import Web from "@/views/svg/Web.vue";
@@ -75,6 +77,8 @@ const currentComponent = ref('');
 const componentsMap = {
   EmailDialog,
   SocialsDialog,
+  ChangeSlugDialog,
+  ChangeNameDialog,
   ChangeTitleDialog,
   ChangeStripeIdDialog,
 };
@@ -174,15 +178,15 @@ const closeDialog = () => {
           <div class="content">
 
             <!-- NAME -->
-            <button class="action">
+            <button class="action"  @click="openDialog('ChangeNameDialog')">
               <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>
             
-            <button class="action">
+            <button class="action" @click="openDialog('ChangeSlugDialog')">
               <span class="label">{{ $t('creatorinfopage.slug') }}</span>
-              <span class="value">{{ creatorProfileStore.creator.slug }}</span>
+              <span class="value">@{{ creatorProfileStore.creator.slug }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
 
@@ -332,7 +336,7 @@ const closeDialog = () => {
 }
 
 .value {
-  @apply flex-auto text-left pr-6 capitalize;
+  @apply flex-auto text-left pr-6;
   @apply break-words overflow-auto;
 }
 

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

@@ -0,0 +1,69 @@
+<script setup>
+import {ref} from 'vue';
+import {useClient} from '@/plugins/api.js';
+
+const props = defineProps({
+  creator: {
+    required: true
+  }
+});
+
+const emits = defineEmits(['closeRequested']);
+
+const name = ref(props.creator.name);
+
+const client = useClient();
+
+async function save() {
+  try {
+    await client.post(
+        `/api/creators/${props.creator.id}/name`,
+        {
+          name: name.value
+        }
+    );
+
+    props.creator.name = name.value;
+    emits('closeRequested');
+  } catch (error) {
+    console.error('Error saving title:', error);
+  }
+}
+
+const cancel = () => {
+  emits('closeRequested');
+};
+</script>
+
+<template>
+  <div class="card dialog">
+
+    <div class="card-title">
+      Modifier le Nom
+    </div>
+
+    <div class="card-content">
+      <v-text-field
+          v-model="name"
+          label="Name"
+          outlined
+          variant="outlined"
+      ></v-text-field>
+
+      <div class="card-actions">
+        <button class="secondary"
+                @click="cancel">
+          Annuler
+        </button>
+        <button class="primary"
+                @click="save">
+          Enregistrer
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,97 @@
+<script setup>
+import {computed, ref} from 'vue';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+import { useClient } from "@/plugins/api.js";
+import NameEditor from "@/views/creators/NameEditor.vue";
+
+const props = defineProps({
+  creator: {
+    required: true
+  }
+});
+
+const emit = defineEmits(['closeRequested']);
+
+const creatorProfileStore = useCreatorProfileStore();
+const client = useClient();
+
+const newSlug = ref('');
+const slugReservationId = ref(undefined);
+const isOperationPending = ref(false);
+const errorMessage = ref('');
+
+const canSave = computed(() => slugReservationId.value !== undefined);
+
+function handleSlugReservationIdChanged($event) {
+  slugReservationId.value = $event;
+}
+
+async function save() {
+  try {
+    isOperationPending.value = true;
+    errorMessage.value = '';
+    
+    await client.put(`/api/creators/${props.creator.id}/slug`, {
+      slugReservationId: slugReservationId.value
+    });
+    
+    await creatorProfileStore.fetchCreatorProfile();
+    emit('closeRequested');
+  } catch (error) {
+    if (error?.response?.data?.errors) {
+      errorMessage.value = error.response.data.errors[0]?.['reason'] || 'An unexpected error occurred.';
+    } else {
+      errorMessage.value = error?.response?.data?.message || error.message || 'An unexpected error occurred.';
+    }
+  } finally {
+    isOperationPending.value = false;
+  }
+}
+
+const cancel = () => {
+  emit('closeRequested');
+};
+</script>
+
+<template>
+  <div class="card dialog">
+    <div class="card-title">
+      Modifier l'URL
+    </div>
+
+    <div class="card-content">
+      <p class="mb-4">
+        L'adresse actuelle de votre page est : <strong>@{{ creator.slug }}</strong>
+      </p>
+      
+      <name-editor
+          v-model:name="newSlug"
+          :creator-name-reservation-id="slugReservationId"
+          @update:creator-name-reservation-id="handleSlugReservationIdChanged"
+      ></name-editor>
+
+      <v-alert
+          v-if="!!errorMessage"
+          outlined
+          type="error"
+          class="mt-4">
+        {{ errorMessage }}
+      </v-alert>
+
+      <div class="card-actions">
+        <button class="secondary"
+                @click="cancel">
+          Annuler
+        </button>
+        <button class="primary"
+                @click="save"
+                :disabled="!canSave || isOperationPending">
+          Enregistrer
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>