User experience improvements in profile

frontend/src/views/profile/ProfilePage.vue

@@ -224,6 +224,12 @@ function handleDelete() {
           </div>
           <div class="content">
 
+            <button class="action" @click="openDialog('ChangeSlugDialog')">
+              <span class="label">{{ t('handle') }}</span>
+              <span class="value">@{{ creatorProfileStore.creator.slug }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
             <!-- NAME -->
             <button class="action"  @click="openDialog('ChangeNameDialog')">
               <span class="label">{{ t('name') }}</span>
@@ -231,12 +237,6 @@ function handleDelete() {
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
             
-            <button class="action" @click="openDialog('ChangeSlugDialog')">
-              <span class="label">{{ t('username') }}</span>
-              <span class="value">@{{ creatorProfileStore.creator.slug }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
             <!-- TITLE -->
             <button class="action" @click="openDialog('ChangeTitleDialog')">
               <span class="label">{{ t('title') }}</span>
@@ -410,7 +410,10 @@ function handleDelete() {
     "deleteWarning": "Are you sure you want to delete your creator page? This action cannot be undone.",
     "restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again.",
     "deleteCreatorPage": "Delete Creator Page",
-    "restoreCreatorPage": "Restore Creator Page"
+    "restoreCreatorPage": "Restore Creator Page",
+    "stripeAccountId": "Stripe Account ID",
+    "socialNetworks": "Social Networks",
+    "handle": "Creator Handle"
   },
   "fr": {
     "personalInfo": "Informations Personnelles",
@@ -424,7 +427,10 @@ function handleDelete() {
     "deleteWarning": "Êtes-vous sûr de vouloir supprimer votre page de créateur ? Cette action est irréversible.",
     "restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible.",
     "deleteCreatorPage": "Supprimer la Page Créateur",
-    "restoreCreatorPage": "Restaurer la Page Créateur"
+    "restoreCreatorPage": "Restaurer la Page Créateur",
+    "stripeAccountId": "ID de Compte Stripe",
+    "socialNetworks": "Réseaux Sociaux",
+    "handle": "Identifiant du créateur"
   },
   "es": {
     "personalInfo": "Información Personal",
@@ -438,7 +444,10 @@ function handleDelete() {
     "deleteWarning": "¿Estás seguro de que quieres eliminar tu página de creador? Esta acción no se puede deshacer.",
     "restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente.",
     "deleteCreatorPage": "Eliminar Página de Creador",
-    "restoreCreatorPage": "Restaurar Página de Creador"
+    "restoreCreatorPage": "Restaurar Página de Creador",
+    "stripeAccountId": "ID de Cuenta Stripe",
+    "socialNetworks": "Redes Sociales",
+    "handle": "Identificador del creador"
   }
 }
 </i18n>

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

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, ref, watch} from 'vue';
 import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
 import {useClient} from "@/plugins/api.js";
 import NameEditor from "@/views/creators/NameEditor.vue";
@@ -21,8 +21,17 @@ const newSlug = ref(props.creator.slug);
 const slugReservationId = ref(undefined);
 const isOperationPending = ref(false);
 const errorMessage = ref('');
+const isCurrentHandle = ref(false);
 
-const canSave = computed(() => slugReservationId.value !== undefined);
+// Watch for changes to the new slug to check if it's the same as the current one
+watch(newSlug, (newValue) => {
+  isCurrentHandle.value = newValue === props.creator.slug;
+  if (isCurrentHandle.value) {
+    slugReservationId.value = undefined;
+  }
+});
+
+const canSave = computed(() => slugReservationId.value !== undefined && !isCurrentHandle.value);
 
 function handleSlugReservationIdChanged($event) {
   slugReservationId.value = $event;
@@ -62,14 +71,11 @@ const cancel = () => {
     </div>
 
     <div class="card-content">
-      <p class="mb-4">
-        {{ t('label') }} <strong>@{{ creator.slug }}</strong>
-      </p>
-
       <name-editor
           v-model:name="newSlug"
           :creator-name-reservation-id="slugReservationId"
           @update:creator-name-reservation-id="handleSlugReservationIdChanged"
+          :original-slug="creator.slug"
       ></name-editor>
 
       <v-alert
@@ -101,16 +107,13 @@ const cancel = () => {
 <i18n>
 {
   "en": {
-    "title": "Change URL",
-    "label": "Your current URL is"
+    "title": "Change Creator Handle"
   },
   "fr": {
-    "title": "Modifier l'URL",
-    "label": "Votre URL actuelle est"
+    "title": "Modifier l'identifiant du créateur"
   },
   "es": {
-    "title": "Cambiar URL",
-    "label": "Tu URL actual es"
+    "title": "Cambiar identificador del creador"
   }
 }
 </i18n>