User experience improvements in profile

frontend/src/views/creators/NameEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted, onUnmounted} from "vue";
+import {ref, onMounted, onUnmounted, computed} from "vue";
 import {v7} from "uuid";
 import {useClient} from "@/plugins/api.js";
 import { useI18n } from 'vue-i18n';
@@ -10,6 +10,10 @@ const props = defineProps({
   },
   creatorNameReservationId: {
     required: true
+  },
+  originalSlug: {
+    type: String,
+    default: null
   }
 });
 
@@ -27,11 +31,21 @@ const reservationState = ref(null);
 // Use the reservationId from props if provided, otherwise generate a new one
 const reservationId = ref(props.creatorNameReservationId || v7());
 
+// Check if the current name is the same as the original slug
+const isCurrentSlug = computed(() => {
+  return props.originalSlug && name.value === props.originalSlug;
+});
+
 // Ensure we emit the reservationId on mount if we generated a new one
 onMounted(() => {
   if (!props.creatorNameReservationId) {
     emits('update:creatorNameReservationId', reservationId.value);
   }
+  
+  // If the name is the same as the original slug, set reservation state to "reserved"
+  if (isCurrentSlug.value) {
+    reservationState.value = "reserved";
+  }
 });
 
 // Request handling
@@ -53,6 +67,15 @@ const handleInput = () => {
     if (currentName === lastProcessedName) {
       return; // Skip if we've already processed this exact name
     }
+    
+    // If the name is the same as the original slug, set reservation state to "reserved"
+    if (props.originalSlug && currentName === props.originalSlug) {
+      reservationState.value = "reserved";
+      lastProcessedName = currentName;
+      emits('update:name', currentName);
+      return;
+    }
+    
     checkNameAvailability(currentName);
   }, 200);
 };
@@ -141,21 +164,21 @@ onUnmounted(() => {
   "en": {
     "creator": {
       "name": {
-        "label": "Page name"
+        "label": "Your creator handle"
       }
     }
   },
   "fr": {
     "creator": {
       "name": {
-        "label": "Nom de la page"
+        "label": "Votre identifiant de créateur"
       }
     }
   },
   "es": {
     "creator": {
       "name": {
-        "label": "Nombre de la página"
+        "label": "Tu identificador de creador"
       }
     }
   }