From 98c598f3c6a4082387b249540b41cc86e59ab826 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Sat, 19 Apr 2025 03:19:07 -0400
Subject: [PATCH] User experience improvements in profile

---
 frontend/src/locales/en.json                  |  1 -
 frontend/src/locales/es.json                  |  1 -
 frontend/src/locales/fr.json                  |  1 -
 frontend/src/views/creators/NameEditor.vue    | 31 ++++++++++++++++---
 frontend/src/views/profile/ProfilePage.vue    | 27 ++++++++++------
 .../profile/creators/ChangeSlugDialog.vue     | 27 +++++++++-------
 6 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 2a4aa47..607c05a 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -25,7 +25,6 @@
   "required": "This field is required",
   "invalidEmail": "Invalid email address",
   "invalidPassword": "Invalid password",
-  "socialNetworks": "Social Networks",
   "facebook": "Facebook",
   "instagram": "Instagram",
   "linkedin": "LinkedIn",
diff --git a/frontend/src/locales/es.json b/frontend/src/locales/es.json
index d12d160..0c64d44 100644
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -25,7 +25,6 @@
   "required": "Este campo es obligatorio",
   "invalidEmail": "Correo electrónico inválido",
   "invalidPassword": "Contraseña inválida",
-  "socialNetworks": "Redes Sociales",
   "facebook": "Facebook",
   "instagram": "Instagram",
   "linkedin": "LinkedIn",
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index e885fb5..697f101 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -25,7 +25,6 @@
   "required": "Ce champ est requis",
   "invalidEmail": "Adresse email invalide",
   "invalidPassword": "Mot de passe invalide",
-  "socialNetworks": "Réseaux Sociaux",
   "facebook": "Facebook",
   "instagram": "Instagram",
   "linkedin": "LinkedIn",
diff --git a/frontend/src/views/creators/NameEditor.vue b/frontend/src/views/creators/NameEditor.vue
index f2fd767..74d2d25 100644
--- a/frontend/src/views/creators/NameEditor.vue
+++ b/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"
       }
     }
   }
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index bf549e6..9662fa3 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/profile/creators/ChangeSlugDialog.vue b/frontend/src/views/profile/creators/ChangeSlugDialog.vue
index 770e257..4d3d3a8 100644
--- a/frontend/src/views/profile/creators/ChangeSlugDialog.vue
+++ b/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> 
\ No newline at end of file