paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: resolve feedback validation issues from GitHub issue #16

Browse Source 
- 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>
This commit is contained in:
paul
2025-09-02 17:04:27 +02:00
parent 88659f1fa6
commit 67ff415840
9 changed files with 4835 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude-flow/metrics/system-metrics.json
+4570 -70
View File
File diff suppressed because it is too large Load Diff
backend/data/photo_sharing.db
BIN
View File
Binary file not shown.
backend/src/routes/galleryFeedback.js
+8 -7
View File
@@ -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,
allow_ratings: settings.allow_ratings,
allow_likes: settings.allow_likes,
allow_comments: settings.allow_comments,
allow_favorites: settings.allow_favorites,
require_name_email: settings.require_name_email,
show_feedback_to_guests: settings.show_feedback_to_guests
feedback_enabled: Boolean(settings.feedback_enabled),
allow_ratings: Boolean(settings.allow_ratings),
allow_likes: Boolean(settings.allow_likes),
allow_comments: Boolean(settings.allow_comments),
allow_favorites: Boolean(settings.allow_favorites),
require_name_email: Boolean(settings.require_name_email),
show_feedback_to_guests: Boolean(settings.show_feedback_to_guests)
};
res.json(guestSettings);
backend/src/utils/feedbackValidation.js
+8 -2
View File
@@ -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
+104
View File
@@ -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
+31 -5
View File
@@ -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
+8 -1
View File
@@ -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
+31 -5
View File
@@ -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
+75 -39
View File
@@ -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 items-center gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => handleRatingClick(star)}
onMouseEnter={() => setHoveredRating(star)}
onMouseLeave={() => setHoveredRating(0)}
disabled={isSubmitting}
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'
<>
<div className="flex flex-col items-center gap-2">
{/* Star Rating Input */}
<div className="flex items-center gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => handleRatingClick(star)}
onMouseEnter={() => setHoveredRating(star)}
onMouseLeave={() => setHoveredRating(0)}
disabled={isSubmitting}
className={`p-1 transition-all ${
isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
}`}
/>
</button>
))}
</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>
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'
}`}
/>
</button>
))}
</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')}
/>
</>
);
};