fix: resolve feedback validation issues from GitHub issue #16

- Fixed backend validation to properly handle empty strings in validateGuestRequirements
- Added Boolean conversion for SQLite boolean values in feedback settings API response
- Created FeedbackIdentityModal component for collecting name/email when required
- Updated PhotoLikes, PhotoRating, and PhotoFavorites components to show modal when requireNameEmail is true
- Fixed issue where require_name_email field was not reaching frontend due to missing boolean conversion

This ensures that when 'Require Name & Email' is enabled, guests are prompted with a modal to provide their information before submitting feedback, preventing 400 Bad Request errors.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

backend/src/routes/galleryFeedback.js

@@ -24,14 +24,15 @@ router.get('/:slug/feedback-settings',
       const settings = await feedbackService.getEventFeedbackSettings(event.id);
       
       // Only send relevant settings to guests
+      // Convert SQLite boolean values (0/1) to proper booleans
       const guestSettings = {
-        feedback_enabled: settings.feedback_enabled,
+        feedback_enabled: Boolean(settings.feedback_enabled),
-        allow_ratings: settings.allow_ratings,
+        allow_ratings: Boolean(settings.allow_ratings),
-        allow_likes: settings.allow_likes,
+        allow_likes: Boolean(settings.allow_likes),
-        allow_comments: settings.allow_comments,
+        allow_comments: Boolean(settings.allow_comments),
-        allow_favorites: settings.allow_favorites,
+        allow_favorites: Boolean(settings.allow_favorites),
-        require_name_email: settings.require_name_email,
+        require_name_email: Boolean(settings.require_name_email),
-        show_feedback_to_guests: settings.show_feedback_to_guests
+        show_feedback_to_guests: Boolean(settings.show_feedback_to_guests)
       };
       
       res.json(guestSettings);

backend/src/utils/feedbackValidation.js

@@ -227,11 +227,17 @@ async function validateGuestRequirements(settings, guestData) {
   
   const errors = [];
   
-  if (!guestData.guest_name || guestData.guest_name.trim().length === 0) {
+  // Check for name - handle both undefined and empty strings
+  const name = guestData.guest_name;
+  if (!name || (typeof name === 'string' && name.trim().length === 0)) {
     errors.push('Name is required');
   }
   
-  if (!guestData.guest_email || !validator.isEmail(guestData.guest_email)) {
+  // Check for email - handle both undefined and empty strings
+  const email = guestData.guest_email;
+  if (!email || (typeof email === 'string' && email.trim().length === 0)) {
+    errors.push('Valid email is required');
+  } else if (email && !validator.isEmail(email.trim())) {
     errors.push('Valid email is required');
   }
   

frontend/src/components/gallery/FeedbackIdentityModal.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input } from '../common';
+
+interface FeedbackIdentityModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (name: string, email: string) => void;
+  feedbackType: string;
+}
+
+export const FeedbackIdentityModal: React.FC<FeedbackIdentityModalProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  feedbackType
+}) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors: Record<string, string> = {};
+
+    if (!name.trim()) {
+      newErrors.name = t('feedback.nameRequired', 'Name is required');
+    }
+    if (!email.trim()) {
+      newErrors.email = t('feedback.emailRequired', 'Email is required');
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = t('feedback.invalidEmail', 'Invalid email address');
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    onSubmit(name.trim(), email.trim());
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-1 hover:bg-neutral-100 rounded-lg transition-colors"
+        >
+          <X className="w-5 h-5 text-neutral-600" />
+        </button>
+
+        <h2 className="text-lg font-semibold text-neutral-900 mb-2">
+          {t('feedback.identityRequired', 'Your Information Required')}
+        </h2>
+        <p className="text-sm text-neutral-600 mb-4">
+          {t('feedback.identityReason', 'Please provide your name and email to submit {{type}}.', { type: feedbackType })}
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            label={t('feedback.yourName', 'Your Name')}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            error={errors.name}
+            placeholder={t('feedback.namePlaceholder', 'Enter your name')}
+            required
+          />
+          <Input
+            type="email"
+            label={t('feedback.yourEmail', 'Your Email')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            error={errors.email}
+            placeholder={t('feedback.emailPlaceholder', 'Enter your email')}
+            required
+          />
+          <div className="flex gap-2 pt-2">
+            <Button
+              type="submit"
+              variant="primary"
+              className="flex-1"
+            >
+              {t('feedback.submitFeedback', 'Submit Feedback')}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              className="flex-1"
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/components/gallery/PhotoFavorites.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';
 
 interface PhotoFavoritesProps {
   photoId: string;
@@ -11,6 +12,7 @@ interface PhotoFavoritesProps {
   isFavorited: boolean;
   favoriteCount: number;
   isEnabled: boolean;
+  requireNameEmail?: boolean;
   onFavoriteChange?: (favorited: boolean) => void;
 }
 
@@ -20,17 +22,22 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
   isFavorited,
   favoriteCount,
   isEnabled,
+  requireNameEmail = false,
   onFavoriteChange
 }) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [animating, setAnimating] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
 
   const submitFavoriteMutation = useMutation({
-    mutationFn: () => 
+    mutationFn: (data: { guest_name?: string; guest_email?: string } = {}) => 
       feedbackService.submitFeedback(gallerySlug, photoId, {
-        feedback_type: 'favorite'
+        feedback_type: 'favorite',
+        guest_name: data.guest_name,
+        guest_email: data.guest_email
       }),
     onMutate: async () => {
       setIsSubmitting(true);
@@ -62,13 +69,25 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
 
   const handleFavoriteClick = () => {
     if (!isEnabled || isSubmitting) return;
-    submitFavoriteMutation.mutate();
+    
+    if (requireNameEmail && !savedIdentity) {
+      setShowIdentityModal(true);
+    } else {
+      submitFavoriteMutation.mutate(savedIdentity || {});
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitFavoriteMutation.mutate({ guest_name: name, guest_email: email });
   };
 
   if (!isEnabled) return null;
 
   return (
-    <button
+    <>
+      <button
       onClick={handleFavoriteClick}
       disabled={isSubmitting}
       className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
@@ -88,6 +107,13 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
       <span className="text-sm font-medium">
         {favoriteCount > 0 ? favoriteCount : ''}
       </span>
-    </button>
+      </button>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.favorite', 'favorite')}
+      />
+    </>
   );
 };

frontend/src/components/gallery/PhotoFeedback.tsx

@@ -26,7 +26,11 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
   // Fetch feedback settings for the gallery
   const { data: settings, isLoading: settingsLoading } = useQuery({
     queryKey: ['gallery-feedback-settings', gallerySlug],
-    queryFn: () => feedbackService.getGalleryFeedbackSettings(gallerySlug),
+    queryFn: async () => {
+      const data = await feedbackService.getGalleryFeedbackSettings(gallerySlug);
+      console.log('PhotoFeedback received settings:', data);
+      return data;
+    },
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
   });
 
@@ -104,6 +108,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
           averageRating={Number(feedbackData?.summary?.average_rating) || 0}
           totalRatings={Number(feedbackData?.summary?.total_ratings) || 0}
           isEnabled={true}
+          requireNameEmail={settings.require_name_email || false}
           onRatingChange={handleRatingChange}
         />
       )}
@@ -118,6 +123,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
               isLiked={isLiked}
               likeCount={likeCount}
               isEnabled={true}
+              requireNameEmail={settings.require_name_email || false}
               onLikeChange={handleLikeChange}
             />
           )}
@@ -128,6 +134,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
               isFavorited={isFavorited}
               favoriteCount={favoriteCount}
               isEnabled={true}
+              requireNameEmail={settings.require_name_email || false}
               onFavoriteChange={handleFavoriteChange}
             />
           )}

frontend/src/components/gallery/PhotoLikes.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';
 
 interface PhotoLikesProps {
   photoId: string;
@@ -11,6 +12,7 @@ interface PhotoLikesProps {
   isLiked: boolean;
   likeCount: number;
   isEnabled: boolean;
+  requireNameEmail?: boolean;
   onLikeChange?: (liked: boolean) => void;
 }
 
@@ -20,17 +22,22 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
   isLiked,
   likeCount,
   isEnabled,
+  requireNameEmail = false,
   onLikeChange
 }) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [animating, setAnimating] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
 
   const submitLikeMutation = useMutation({
-    mutationFn: () => 
+    mutationFn: (data: { guest_name?: string; guest_email?: string } = {}) => 
       feedbackService.submitFeedback(gallerySlug, photoId, {
-        feedback_type: 'like'
+        feedback_type: 'like',
+        guest_name: data.guest_name,
+        guest_email: data.guest_email
       }),
     onMutate: async () => {
       setIsSubmitting(true);
@@ -62,13 +69,25 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
 
   const handleLikeClick = () => {
     if (!isEnabled || isSubmitting) return;
-    submitLikeMutation.mutate();
+    
+    if (requireNameEmail && !savedIdentity) {
+      setShowIdentityModal(true);
+    } else {
+      submitLikeMutation.mutate(savedIdentity || {});
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitLikeMutation.mutate({ guest_name: name, guest_email: email });
   };
 
   if (!isEnabled) return null;
 
   return (
-    <button
+    <>
+      <button
       onClick={handleLikeClick}
       disabled={isSubmitting}
       className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
@@ -88,6 +107,13 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
       <span className="text-sm font-medium">
         {likeCount > 0 ? likeCount : ''}
       </span>
-    </button>
+      </button>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.like', 'like')}
+      />
+    </>
   );
 };

frontend/src/components/gallery/PhotoRating.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';
 
 interface PhotoRatingProps {
   photoId: string;
@@ -12,6 +13,7 @@ interface PhotoRatingProps {
   averageRating?: number;
   totalRatings?: number;
   isEnabled: boolean;
+  requireNameEmail?: boolean;
   onRatingChange?: (rating: number) => void;
 }
 
@@ -22,6 +24,7 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
   averageRating = 0,
   totalRatings = 0,
   isEnabled,
+  requireNameEmail = false,
   onRatingChange
 }) => {
   // Ensure averageRating is a valid number
@@ -30,18 +33,23 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
   const queryClient = useQueryClient();
   const [hoveredRating, setHoveredRating] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [pendingRating, setPendingRating] = useState(0);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
 
   const submitRatingMutation = useMutation({
-    mutationFn: (rating: number) => 
+    mutationFn: (data: { rating: number; guest_name?: string; guest_email?: string }) => 
       feedbackService.submitFeedback(gallerySlug, photoId, {
         feedback_type: 'rating',
-        rating
+        rating: data.rating,
+        guest_name: data.guest_name,
+        guest_email: data.guest_email
       }),
-    onMutate: async (rating) => {
+    onMutate: async (data) => {
       setIsSubmitting(true);
       // Optimistic update
       if (onRatingChange) {
-        onRatingChange(rating);
+        onRatingChange(data.rating);
       }
     },
     onSuccess: () => {
@@ -69,47 +77,75 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
     
     // If clicking the same rating, remove it
     const newRating = rating === currentRating ? 0 : rating;
-    submitRatingMutation.mutate(newRating);
+    
+    if (requireNameEmail && !savedIdentity) {
+      setPendingRating(newRating);
+      setShowIdentityModal(true);
+    } else {
+      submitRatingMutation.mutate({ 
+        rating: newRating, 
+        guest_name: savedIdentity?.name,
+        guest_email: savedIdentity?.email
+      });
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitRatingMutation.mutate({ 
+      rating: pendingRating,
+      guest_name: name,
+      guest_email: email
+    });
   };
 
   if (!isEnabled) return null;
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <>
-      {/* Star Rating Input */}
+      <div className="flex flex-col items-center gap-2">
-      <div className="flex items-center gap-1">
+        {/* Star Rating Input */}
-        {[1, 2, 3, 4, 5].map((star) => (
+        <div className="flex items-center gap-1">
-          <button
+          {[1, 2, 3, 4, 5].map((star) => (
-            key={star}
+            <button
-            onClick={() => handleRatingClick(star)}
+              key={star}
-            onMouseEnter={() => setHoveredRating(star)}
+              onClick={() => handleRatingClick(star)}
-            onMouseLeave={() => setHoveredRating(0)}
+              onMouseEnter={() => setHoveredRating(star)}
-            disabled={isSubmitting}
+              onMouseLeave={() => setHoveredRating(0)}
-            className={`p-1 transition-all ${
+              disabled={isSubmitting}
-              isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
+              className={`p-1 transition-all ${
-            }`}
+                isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
-            aria-label={t('feedback.rateStar', 'Rate {{count}} stars', { count: star })}
-          >
-            <Star
-              className={`w-6 h-6 transition-colors ${
-                star <= (hoveredRating || currentRating)
-                  ? 'fill-yellow-500 text-yellow-500'
-                  : 'text-neutral-300 hover:text-yellow-400'
               }`}
-            />
+              aria-label={t('feedback.rateStar', 'Rate {{count}} stars', { count: star })}
-          </button>
+            >
-        ))}
+              <Star
-      </div>
+                className={`w-6 h-6 transition-colors ${
-
+                  star <= (hoveredRating || currentRating)
-      {/* Average Rating Display */}
+                    ? 'fill-yellow-500 text-yellow-500'
-      {totalRatings > 0 && (
+                    : 'text-neutral-300 hover:text-yellow-400'
-        <div className="text-sm text-neutral-600">
+                }`}
-          <span className="font-medium">{safeAverageRating.toFixed(1)}</span>
+              />
-          <span className="text-neutral-400 ml-1">
+            </button>
-            ({t('feedback.ratingsCount', '{{count}} ratings', { count: totalRatings })})
+          ))}
-          </span>
         </div>
-      )}
+
-    </div>
+        {/* Average Rating Display */}
+        {totalRatings > 0 && (
+          <div className="text-sm text-neutral-600">
+            <span className="font-medium">{safeAverageRating.toFixed(1)}</span>
+            <span className="text-neutral-400 ml-1">
+              ({t('feedback.ratingsCount', '{{count}} ratings', { count: totalRatings })})
+            </span>
+          </div>
+        )}
+      </div>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.rating', 'rating')}
+      />
+    </>
   );
 };