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

frontend/src/utils/youtube.js

@@ -0,0 +1,64 @@
+/**
+ * Regular expression for matching YouTube video IDs in various URL formats
+ */
+const VIDEO_ID_REGEX = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
+
+/**
+ * Regular expression for matching standalone YouTube video IDs
+ */
+const SHORT_URL_REGEX = /^[a-zA-Z0-9_-]{11}$/;
+
+/**
+ * Extracts the video ID from a YouTube URL or returns the input if it's already a video ID.
+ * @param {string} input - The YouTube URL or video ID
+ * @returns {string|null} The extracted video ID or null if invalid
+ */
+export function extractVideoId(input) {
+    if (!input) return null;
+
+    // If it's already a valid video ID, return it
+    if (isValidVideoId(input)) {
+        return input;
+    }
+
+    // Try to extract video ID from URL
+    const match = input.match(VIDEO_ID_REGEX);
+    return match ? match[1] : null;
+}
+
+/**
+ * Validates if the input is a valid YouTube video ID.
+ * @param {string} input - The video ID to validate
+ * @returns {boolean} True if the input is a valid video ID
+ */
+export function isValidVideoId(input) {
+    if (!input) return false;
+    return SHORT_URL_REGEX.test(input);
+}
+
+/**
+ * Validates if the input is a valid YouTube URL or video ID.
+ * @param {string} input - The URL or video ID to validate
+ * @returns {boolean} True if the input is a valid YouTube URL or video ID
+ */
+export function isValidYouTubeUrlOrId(input) {
+    if (!input) return false;
+
+    // Check if it's a valid video ID
+    if (isValidVideoId(input)) {
+        return true;
+    }
+
+    // Check if it's a valid YouTube URL
+    return VIDEO_ID_REGEX.test(input);
+}
+
+/**
+ * Builds a YouTube embed URL from a video ID.
+ * @param {string} videoId - The YouTube video ID
+ * @returns {string} The YouTube embed URL
+ */
+export function buildEmbedUrl(videoId) {
+    if (!videoId) return '';
+    return `https://www.youtube.com/embed/${videoId}`;
+} 

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"
       }
     }
   }

frontend/src/views/creators/AlbumEditor.vue

@@ -2,50 +2,68 @@
   <div class="album-editor">
     <h2 class="text-xl font-semibold mb-4">{{ t('creator.sections.album.title') }}</h2>
     
-    <div class="image-grid">
-      <!-- Upload button -->
-      <div class="image-wrapper upload-wrapper" @click="triggerFileInput">
-        <input
-          type="file"
-          ref="fileInput"
-          @change="handleFileUpload"
-          accept="image/*"
-          multiple
-          class="hidden"
-        />
-        <div class="upload-content">
-          <v-icon size="large">mdi-plus</v-icon>
-          <span class="text-sm mt-2">{{ t('upload') }}</span>
-        </div>
+    <!-- Drop zone with photos -->
+    <div class="drop-zone" 
+         @dragover.prevent
+         @drop.prevent="handleDrop"
+         @click="triggerFileInput">
+      <!-- Upload prompt -->
+      <div class="drop-zone-content">
+        <v-icon size="large">mdi-plus</v-icon>
+        <span class="text-sm mt-2">{{ t('dropzoneText') }}</span>
       </div>
 
-      <!-- Draggable images -->
+      <!-- Hidden file input -->
+      <input
+        type="file"
+        ref="fileInput"
+        @change="handleFileUpload"
+        accept="image/*"
+        multiple
+        class="hidden"
+      />
+
+      <!-- Photos grid -->
       <draggable
         v-model="localImages"
-        class="image-grid"
+        class="photos-grid"
         item-key="id"
         @end="handleReorder"
       >
         <template #item="{ element, index }">
-          <div class="image-wrapper">
+          <div class="photo-wrapper">
+            <div class="index-bubble">{{ index + 1 }}</div>
             <img :src="element.url" :alt="'Image ' + (index + 1)" />
-            <div class="image-actions">
-              <button @click="deleteImage(index)" class="action-btn delete-btn" :title="t('delete')">
-                <v-icon>mdi-delete</v-icon>
-              </button>
-              <button @click="moveImage(index, 'up')" 
-                      class="action-btn move-btn" 
-                      :disabled="index === 0"
-                      :title="t('moveUp')">
-                <v-icon>mdi-arrow-up</v-icon>
-              </button>
-              <button @click="moveImage(index, 'down')" 
-                      class="action-btn move-btn" 
-                      :disabled="index === localImages.length - 1"
-                      :title="t('moveDown')">
-                <v-icon>mdi-arrow-down</v-icon>
-              </button>
+            <!-- Processing spinner overlay -->
+            <div v-if="element.isProcessing" class="loading-overlay">
+              <v-progress-circular indeterminate color="primary"></v-progress-circular>
+              <span class="text-white text-sm mt-2">{{ t('processing') }}</span>
             </div>
+            <!-- Upload spinner overlay -->
+            <div v-if="element.isUploading" class="loading-overlay uploading">
+              <v-progress-circular indeterminate color="secondary"></v-progress-circular>
+              <span class="text-white text-sm mt-2">{{ t('uploading') }}</span>
+            </div>
+            <!-- Left arrow -->
+            <button @click.stop="moveImage(index, 'up')" 
+                    class="action-btn left-btn" 
+                    :disabled="index === 0"
+                    :title="t('moveUp')">
+              <v-icon>mdi-arrow-left</v-icon>
+            </button>
+            <!-- Right arrow -->
+            <button @click.stop="moveImage(index, 'down')" 
+                    class="action-btn right-btn" 
+                    :disabled="index === localImages.length - 1"
+                    :title="t('moveDown')">
+              <v-icon>mdi-arrow-right</v-icon>
+            </button>
+            <!-- Delete button -->
+            <button @click.stop="deleteImage(index)" 
+                    class="action-btn delete-btn" 
+                    :title="t('delete')">
+              <v-icon>mdi-delete</v-icon>
+            </button>
           </div>
         </template>
       </draggable>
@@ -69,15 +87,16 @@ const emit = defineEmits(['update:images']);
 
 const { t } = useI18n();
 const fileInput = ref(null);
-
-// Local copy of images with IDs for drag and drop
 const localImages = ref([]);
 
 onMounted(() => {
-  // Initialize local images with IDs
+  // Initialize local images with IDs and states
   localImages.value = props.images.map((url, index) => ({
     id: index,
-    url: url
+    url: url,
+    isProcessing: false,
+    isUploading: false,
+    file: null // Store the actual file for upload
   }));
 });
 
@@ -86,31 +105,51 @@ function triggerFileInput() {
   fileInput.value.click();
 }
 
-// Handle file upload
-async function handleFileUpload(event) {
-  const files = Array.from(event.target.files);
-  
+// Add drop handler
+function handleDrop(event) {
+  const files = Array.from(event.dataTransfer.files);
+  handleFiles(files);
+}
+
+// Extract file handling logic
+function handleFiles(files) {
   for (const file of files) {
     if (file.type.startsWith('image/')) {
       try {
-        // Create a data URL for preview
         const reader = new FileReader();
+        // Create a temporary image object with processing state
+        const tempImage = {
+          id: Date.now() + Math.random(),
+          url: '',
+          isProcessing: true,
+          isUploading: false,
+          file: file // Store the file for later upload
+        };
+        localImages.value.push(tempImage);
+        
         reader.onload = (e) => {
-          const newImage = {
-            id: Date.now() + Math.random(), // Unique ID
-            url: e.target.result
-          };
-          localImages.value.push(newImage);
-          emit('update:images', localImages.value.map(img => img.url));
+          const index = localImages.value.findIndex(img => img.id === tempImage.id);
+          if (index !== -1) {
+            localImages.value[index] = {
+              ...tempImage,
+              url: e.target.result,
+              isProcessing: false
+            };
+            emit('update:images', localImages.value.map(img => img.url));
+          }
         };
         reader.readAsDataURL(file);
       } catch (error) {
-        console.error('Error uploading image:', error);
+        console.error('Error processing image:', error);
       }
     }
   }
-  
-  // Reset file input
+}
+
+// Update file upload handler to use common function
+function handleFileUpload(event) {
+  const files = Array.from(event.target.files);
+  handleFiles(files);
   event.target.value = '';
 }
 
@@ -120,7 +159,12 @@ function deleteImage(index) {
   emit('update:images', localImages.value.map(img => img.url));
 }
 
-// Move image up or down
+// Handle reorder after drag and drop
+function handleReorder() {
+  emit('update:images', localImages.value.map(img => img.url));
+}
+
+// Add back the moveImage function
 function moveImage(index, direction) {
   const newIndex = direction === 'up' ? index - 1 : index + 1;
   if (newIndex >= 0 && newIndex < localImages.value.length) {
@@ -131,9 +175,42 @@ function moveImage(index, direction) {
   }
 }
 
-// Handle reorder after drag and drop
-function handleReorder() {
-  emit('update:images', localImages.value.map(img => img.url));
+// Upload images to API
+async function uploadImages() {
+  try {
+    // Mark all images as uploading
+    localImages.value = localImages.value.map(img => ({
+      ...img,
+      isUploading: true
+    }));
+
+    // Here you would implement your API upload logic
+    // For each image that has a file property:
+    for (const image of localImages.value) {
+      if (image.file) {
+        // Example API upload (replace with your actual API call)
+        // await uploadImageToAPI(image.file);
+        
+        // For demo, simulate API delay
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
+
+    // Once all uploads are complete, update states
+    localImages.value = localImages.value.map(img => ({
+      ...img,
+      isUploading: false,
+      file: null // Clear the file after upload
+    }));
+
+  } catch (error) {
+    console.error('Error uploading images:', error);
+    // Reset upload state on error
+    localImages.value = localImages.value.map(img => ({
+      ...img,
+      isUploading: false
+    }));
+  }
 }
 </script>
 
@@ -142,99 +219,143 @@ function handleReorder() {
   @apply w-full;
 }
 
-.image-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
-  width: 100%;
+.drop-zone {
+  @apply w-full;
+  @apply min-h-[200px];
+  @apply border-2;
+  @apply border-dashed;
+  @apply border-gray-300 hover:border-gray-500;
+  @apply rounded-lg;
+  @apply p-4;
+  @apply relative;
+  @apply transition-colors;
+  @apply duration-200;
+  @apply overflow-visible;
+  @apply bg-hSurface;
 }
 
-.image-wrapper {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
+.drop-zone-content {
+  @apply flex;
+  @apply flex-col;
+  @apply items-center;
+  @apply text-gray-500;
+  @apply mb-8;
+  @apply relative;
+  @apply z-10;
 }
 
-.upload-wrapper {
-  border: 2px dashed #ccc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.photos-grid {
+  @apply grid;
+  @apply grid-cols-2;
+  @apply sm:grid-cols-3;
+  @apply md:grid-cols-4;
+  @apply lg:grid-cols-5;
+  @apply gap-4;
+  @apply w-full;
+  @apply pb-1;
 }
 
-.upload-wrapper:hover {
-  border-color: #666;
-  background-color: #f5f5f5;
+.photo-wrapper {
+  @apply relative;
+  @apply aspect-square;
+  @apply rounded-lg;
+  @apply overflow-hidden;
+  @apply bg-gray-100;
 }
 
-.upload-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #666;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.image-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.image-wrapper:hover .image-actions {
-  opacity: 1;
+.photo-wrapper img {
+  @apply w-full;
+  @apply h-full;
+  @apply object-cover;
 }
 
 .action-btn {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  @apply absolute;
+  @apply bg-black;
+  @apply bg-opacity-50;
+  @apply text-white;
+  @apply rounded-full;
+  @apply p-1;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply transition-all;
+  @apply duration-200;
+  @apply opacity-0;
+  @apply z-10;
 }
 
-.action-btn:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+.photo-wrapper:hover .action-btn {
+  @apply opacity-100;
+}
+
+.action-btn:hover:not(:disabled) {
+  @apply bg-opacity-75;
+  @apply scale-110;
 }
 
 .action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  @apply opacity-30;
+  @apply cursor-not-allowed;
+  @apply bg-gray-500;
+  @apply scale-90;
 }
 
-/* Responsive adjustments */
-@media (min-width: 768px) {
-  .image-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
+.left-btn {
+  @apply top-1/2;
+  @apply -translate-y-1/2;
+  @apply left-2;
 }
 
-@media (min-width: 1024px) {
-  .image-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
+.right-btn {
+  @apply top-1/2;
+  @apply -translate-y-1/2;
+  @apply right-2;
 }
 
-@media (max-width: 640px) {
-  .image-grid {
-    gap: 0.25rem;
-  }
+.delete-btn {
+  @apply top-2;
+  @apply right-2;
+  @apply bg-red-500;
+  @apply bg-opacity-50;
+}
+
+.delete-btn:hover {
+  @apply bg-opacity-75;
+}
+
+.index-bubble {
+  @apply absolute;
+  @apply top-2;
+  @apply left-2;
+  @apply bg-black;
+  @apply bg-opacity-50;
+  @apply text-white;
+  @apply text-xs;
+  @apply font-medium;
+  @apply rounded-full;
+  @apply w-6;
+  @apply h-6;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply z-10;
+}
+
+.loading-overlay {
+  @apply absolute;
+  @apply inset-0;
+  @apply flex;
+  @apply flex-col;
+  @apply items-center;
+  @apply justify-center;
+  @apply bg-black;
+  @apply bg-opacity-50;
+  @apply z-20;
+}
+
+.loading-overlay.uploading {
+  @apply bg-opacity-75;
 }
 </style>
 
@@ -243,20 +364,45 @@ function handleReorder() {
   "en": {
     "upload": "Upload Photos",
     "delete": "Delete",
-    "moveUp": "Move Up",
-    "moveDown": "Move Down"
+    "dropzoneText": "Click or drag photos here to upload",
+    "moveUp": "Move Left",
+    "moveDown": "Move Right",
+    "uploading": "Uploading...",
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Photos"
+        }
+      }
+    }
   },
   "fr": {
     "upload": "Télécharger des photos",
     "delete": "Supprimer",
-    "moveUp": "Déplacer vers le haut",
-    "moveDown": "Déplacer vers le bas"
+    "dropzoneText": "Cliquez ou glissez-déposez les photos ici",
+    "moveUp": "Déplacer à gauche",
+    "moveDown": "Déplacer à droite",
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Photos"
+        }
+      }
+    }
   },
   "es": {
     "upload": "Subir fotos",
     "delete": "Eliminar",
-    "moveUp": "Mover arriba",
-    "moveDown": "Mover abajo"
+    "dropzoneText": "Haga clic o arrastre las fotos aquí",
+    "moveUp": "Mover a la izquierda",
+    "moveDown": "Mover a la derecha",
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Fotos"
+        }
+      }
+    }
   }
 }
 </i18n> 

frontend/src/views/creators/AlbumView.vue

@@ -72,7 +72,6 @@ const displayedImages = computed(() => {
 .image-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
   width: 100%;
 }
 
@@ -103,7 +102,7 @@ const displayedImages = computed(() => {
 
 @media (max-width: 640px) {
   .image-grid {
-    gap: 0.25rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 </style>