feat: Add validation for YouTube URL and enhance image upload experience in creator's album editor

frontend/src/views/creators/AboutCreator.vue

@@ -83,6 +83,7 @@
                 :label="t('creator.fields.videoUrl')"
                 type="text"
                 variant="outlined"
+                :error-messages="videoUrlError"
             />
           </div>
         </div>
@@ -105,12 +106,13 @@
 </template>
 
 <script setup>
-import {onMounted, ref, computed} from "vue";
+import {onMounted, ref, computed, watch} from "vue";
 import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useI18n} from 'vue-i18n';
 import CreatorAlbum from './CreatorAlbum.vue';
+import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
 
 const {t} = useI18n();
 const creatorProfileStore = useCreatorProfileStore();
@@ -132,6 +134,7 @@ const originalPhotos = ref([]);
 // Editable fields
 const editableDescription = ref("");
 const editableVideoUrl = ref("");
+const videoUrlError = ref("");
 
 // Computed property to check if there are images
 const hasImages = computed(() => {
@@ -142,7 +145,28 @@ const hasImages = computed(() => {
 // Computed property for YouTube embed URL
 const youtubeEmbedUrl = computed(() => {
   if (!videoUrl.value) return "";
-  return `https://www.youtube.com/embed/${videoUrl.value}`;
+  return buildEmbedUrl(videoUrl.value);
+});
+
+// Validate video URL
+function validateVideoUrl(url) {
+  if (!url) {
+    videoUrlError.value = "";
+    return true;
+  }
+  
+  if (!isValidYouTubeUrlOrId(url)) {
+    videoUrlError.value = t('creator.validation.invalidYoutubeUrl');
+    return false;
+  }
+  
+  videoUrlError.value = "";
+  return true;
+}
+
+// Watch for changes in editableVideoUrl
+watch(editableVideoUrl, (newValue) => {
+  validateVideoUrl(newValue);
 });
 
 // Activer/désactiver le mode édition
@@ -152,6 +176,7 @@ function toggleEditMode() {
     // Charger les valeurs pour l'édition
     editableDescription.value = description.value;
     editableVideoUrl.value = videoUrl.value;
+    videoUrlError.value = "";
   }
 }
 
@@ -206,6 +231,11 @@ async function saveChanges() {
     return;
   }
 
+  // Validate video URL before saving
+  if (!validateVideoUrl(editableVideoUrl.value)) {
+    return;
+  }
+
   try {
     isLoading.value = true;
 
@@ -220,7 +250,7 @@ async function saveChanges() {
 
     // Mettre à jour les valeurs locales pour refléter les changements
     description.value = editableDescription.value;
-    videoUrl.value = editableVideoUrl.value;
+    videoUrl.value = extractVideoId(editableVideoUrl.value) || "";
 
     // Save album photos if they've changed
     if (imageUrls.value.length > 0) {
@@ -362,6 +392,9 @@ function cancelEdit() {
       },
       "fields": {
         "videoUrl": "Video URL"
+      },
+      "validation": {
+        "invalidYoutubeUrl": "Please enter a valid YouTube URL or video ID"
       }
     }
   },
@@ -382,6 +415,9 @@ function cancelEdit() {
       },
       "fields": {
         "videoUrl": "URL de la vidéo"
+      },
+      "validation": {
+        "invalidYoutubeUrl": "Veuillez entrer une URL YouTube ou un ID de vidéo valide"
       }
     }
   },
@@ -402,6 +438,9 @@ function cancelEdit() {
       },
       "fields": {
         "videoUrl": "URL del video"
+      },
+      "validation": {
+        "invalidYoutubeUrl": "Por favor, introduce una URL de YouTube o un ID de video válido"
       }
     }
   }