paul
e2d0a83d51
Test and Lint / backend-test (push) Successful in 1m9s
continuous-integration/drone/push Build is passing
Test and Lint / frontend-test (push) Successful in 2m13s
Version and Release / version-bump (push) Successful in 35s
Version and Release / trigger-drone (push) Successful in 3s
- Reduce minimum password length from 12 to 8 characters - Make special characters optional for gallery passwords - Lower strength requirement from score 3 to 1 for galleries - Add eye icon toggle for password visibility on each field - Remove redundant 'Show passwords' checkbox - Add translation for password security requirements error - Update both English and German translations This allows users to use simpler passwords like 'Sommer2025\!' for events while maintaining security through other measures like expiration dates. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
607 lines
22 KiB
TypeScript
607 lines
22 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Calendar,
|
|
Mail,
|
|
Lock,
|
|
Clock,
|
|
ArrowLeft,
|
|
Info,
|
|
Upload,
|
|
Eye,
|
|
EyeOff
|
|
} from 'lucide-react';
|
|
import { format, addDays } from 'date-fns';
|
|
import { toast } from 'react-toastify';
|
|
|
|
import { Button, Input, Card } from '../../components/common';
|
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
|
import { eventsService } from '../../services/events.service';
|
|
import { categoriesService } from '../../services/categories.service';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface FormData {
|
|
event_type: string;
|
|
event_name: string;
|
|
event_date: string;
|
|
host_email: string;
|
|
admin_email: string;
|
|
password: string;
|
|
confirm_password: string;
|
|
welcome_message: string;
|
|
color_theme: string;
|
|
expires_in_days: number;
|
|
allow_user_uploads: boolean;
|
|
upload_category_id: number | null;
|
|
}
|
|
|
|
const EVENT_TYPES = [
|
|
{ value: 'wedding', labelKey: 'events.types.wedding', emoji: '💒' },
|
|
{ value: 'birthday', labelKey: 'events.types.birthday', emoji: '🎂' },
|
|
{ value: 'corporate', labelKey: 'events.types.corporate', emoji: '🏢' },
|
|
{ value: 'other', labelKey: 'events.types.other', emoji: '📸' },
|
|
];
|
|
|
|
const COLOR_THEMES = [
|
|
{
|
|
value: 'default',
|
|
labelKey: 'events.themes.default',
|
|
color: 'bg-primary-600',
|
|
theme: {
|
|
primaryColor: '#5C8762',
|
|
accentColor: '#22c55e',
|
|
backgroundColor: '#fafafa',
|
|
textColor: '#171717',
|
|
borderRadius: 'md' as const
|
|
}
|
|
},
|
|
{
|
|
value: 'blue',
|
|
labelKey: 'events.themes.oceanBlue',
|
|
color: 'bg-blue-600',
|
|
theme: {
|
|
primaryColor: '#2563eb',
|
|
accentColor: '#3b82f6',
|
|
backgroundColor: '#f0f9ff',
|
|
textColor: '#0f172a',
|
|
borderRadius: 'md' as const
|
|
}
|
|
},
|
|
{
|
|
value: 'purple',
|
|
labelKey: 'events.themes.royalPurple',
|
|
color: 'bg-purple-600',
|
|
theme: {
|
|
primaryColor: '#9333ea',
|
|
accentColor: '#a855f7',
|
|
backgroundColor: '#faf5ff',
|
|
textColor: '#1e1b4b',
|
|
borderRadius: 'md' as const
|
|
}
|
|
},
|
|
{
|
|
value: 'rose',
|
|
labelKey: 'events.themes.roseGold',
|
|
color: 'bg-rose-600',
|
|
theme: {
|
|
primaryColor: '#e11d48',
|
|
accentColor: '#f43f5e',
|
|
backgroundColor: '#fff1f2',
|
|
textColor: '#881337',
|
|
borderRadius: 'md' as const
|
|
}
|
|
},
|
|
{
|
|
value: 'amber',
|
|
labelKey: 'events.themes.sunsetAmber',
|
|
color: 'bg-amber-600',
|
|
theme: {
|
|
primaryColor: '#d97706',
|
|
accentColor: '#f59e0b',
|
|
backgroundColor: '#fffbeb',
|
|
textColor: '#451a03',
|
|
borderRadius: 'md' as const
|
|
}
|
|
},
|
|
];
|
|
|
|
export const CreateEventPage: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const isMountedRef = useRef(true);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
isMountedRef.current = false;
|
|
};
|
|
}, []);
|
|
|
|
const [formData, setFormData] = useState<FormData>({
|
|
event_type: 'wedding',
|
|
event_name: '',
|
|
event_date: format(new Date(), 'yyyy-MM-dd'),
|
|
host_email: '',
|
|
admin_email: '',
|
|
password: '',
|
|
confirm_password: '',
|
|
welcome_message: '',
|
|
color_theme: 'default',
|
|
expires_in_days: 30,
|
|
allow_user_uploads: false,
|
|
upload_category_id: null,
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({});
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
// Fetch categories for user upload selection
|
|
const { data: categories } = useQuery({
|
|
queryKey: ['categories', 'global'],
|
|
queryFn: () => categoriesService.getGlobalCategories()
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: eventsService.createEvent,
|
|
onSuccess: (data) => {
|
|
if (isMountedRef.current) {
|
|
toast.success(t('toast.eventCreated'));
|
|
// Add a small delay to ensure navigation works properly
|
|
setTimeout(() => {
|
|
if (isMountedRef.current && data?.id) {
|
|
navigate(`/admin/events/${data.id}`);
|
|
} else {
|
|
navigate('/admin/events');
|
|
}
|
|
}, 100);
|
|
}
|
|
},
|
|
onError: (error: any) => {
|
|
if (!isMountedRef.current) return;
|
|
|
|
if (error.code === 'ERR_NETWORK' || error.code === 'ERR_CONNECTION_RESET') {
|
|
toast.error(t('errors.networkError'));
|
|
} else if (error.response?.data?.errors) {
|
|
const newErrors: Record<string, string> = {};
|
|
error.response.data.errors.forEach((err: any) => {
|
|
newErrors[err.path] = err.msg;
|
|
});
|
|
setErrors(newErrors);
|
|
} else if (error.response?.status === 401) {
|
|
toast.error(t('errors.sessionExpired'));
|
|
navigate('/admin/login');
|
|
} else {
|
|
const errorMessage = error.response?.data?.error;
|
|
// Check if it's the password security requirements error
|
|
if (errorMessage === 'Password does not meet security requirements') {
|
|
toast.error(t('validation.passwordSecurityRequirements'));
|
|
} else {
|
|
toast.error(errorMessage || t('errors.failedToCreateEvent'));
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
const validateForm = (): boolean => {
|
|
const newErrors: Partial<Record<keyof FormData, string>> = {};
|
|
|
|
if (!formData.event_name.trim()) {
|
|
newErrors.event_name = t('validation.eventNameRequired');
|
|
}
|
|
|
|
if (!formData.host_email) {
|
|
newErrors.host_email = t('validation.hostEmailRequired');
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.host_email)) {
|
|
newErrors.host_email = t('validation.invalidEmailFormat');
|
|
}
|
|
|
|
if (!formData.admin_email) {
|
|
newErrors.admin_email = t('validation.adminEmailRequired');
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.admin_email)) {
|
|
newErrors.admin_email = t('validation.invalidEmailFormat');
|
|
}
|
|
|
|
if (!formData.password) {
|
|
newErrors.password = t('validation.passwordRequired');
|
|
} else if (formData.password.length < 6) {
|
|
newErrors.password = t('validation.passwordMinLength');
|
|
}
|
|
|
|
if (formData.password !== formData.confirm_password) {
|
|
newErrors.confirm_password = t('validation.passwordsDoNotMatch');
|
|
}
|
|
|
|
if (formData.expires_in_days < 1 || formData.expires_in_days > 365) {
|
|
newErrors.expires_in_days = t('validation.expirationRange');
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
const selectedTheme = COLOR_THEMES.find(t => t.value === formData.color_theme);
|
|
|
|
createMutation.mutate({
|
|
event_type: formData.event_type,
|
|
event_name: formData.event_name,
|
|
event_date: formData.event_date,
|
|
host_email: formData.host_email,
|
|
admin_email: formData.admin_email,
|
|
password: formData.password,
|
|
welcome_message: formData.welcome_message || '',
|
|
color_theme: selectedTheme ? JSON.stringify(selectedTheme.theme) : undefined,
|
|
expiration_days: formData.expires_in_days,
|
|
allow_user_uploads: formData.allow_user_uploads,
|
|
upload_category_id: formData.upload_category_id,
|
|
});
|
|
};
|
|
|
|
const handleInputChange = (field: keyof FormData) => (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
|
) => {
|
|
const value = field === 'expires_in_days' ? parseInt(e.target.value) || 0 : e.target.value;
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
|
|
// Clear error when user types
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Page Header */}
|
|
<div className="mb-6">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
leftIcon={<ArrowLeft className="w-4 h-4" />}
|
|
onClick={() => navigate('/admin/events')}
|
|
className="mb-4"
|
|
>
|
|
{t('events.backToEvents')}
|
|
</Button>
|
|
|
|
<h1 className="text-2xl font-bold text-neutral-900">{t('events.createNewEvent')}</h1>
|
|
<p className="text-neutral-600 mt-1">{t('events.createNewEventSubtitle')}</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
{/* Event Details */}
|
|
<Card padding="md" className="mb-6">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.eventDetails')}</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Event Type */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.eventType')}
|
|
</label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
|
{EVENT_TYPES.map(type => (
|
|
<button
|
|
key={type.value}
|
|
type="button"
|
|
onClick={() => setFormData(prev => ({ ...prev, event_type: type.value }))}
|
|
className={`p-3 rounded-lg border-2 transition-all ${
|
|
formData.event_type === type.value
|
|
? 'border-primary-600 bg-primary-50'
|
|
: 'border-neutral-200 hover:border-neutral-300'
|
|
}`}
|
|
>
|
|
<div className="text-2xl mb-1">{type.emoji}</div>
|
|
<div className="text-sm font-medium">{t(type.labelKey)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Event Name */}
|
|
<div>
|
|
<label htmlFor="event_name" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.eventName')}
|
|
</label>
|
|
<Input
|
|
id="event_name"
|
|
type="text"
|
|
value={formData.event_name}
|
|
onChange={handleInputChange('event_name')}
|
|
error={errors.event_name}
|
|
placeholder={t('events.eventNamePlaceholder')}
|
|
leftIcon={<Calendar className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
</div>
|
|
|
|
{/* Event Date */}
|
|
<div>
|
|
<label htmlFor="event_date" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.eventDate')}
|
|
</label>
|
|
<Input
|
|
id="event_date"
|
|
type="date"
|
|
value={formData.event_date}
|
|
onChange={handleInputChange('event_date')}
|
|
error={errors.event_date}
|
|
/>
|
|
</div>
|
|
|
|
{/* Welcome Message */}
|
|
<div>
|
|
<label htmlFor="welcome_message" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.welcomeMessageOptional')}
|
|
</label>
|
|
<textarea
|
|
id="welcome_message"
|
|
value={formData.welcome_message}
|
|
onChange={handleInputChange('welcome_message')}
|
|
placeholder={t('events.welcomeMessagePlaceholder')}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact Information */}
|
|
<Card padding="md" className="mb-6">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.contactInformation')}</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Host Email */}
|
|
<div>
|
|
<label htmlFor="host_email" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.hostEmail')}
|
|
</label>
|
|
<Input
|
|
id="host_email"
|
|
type="email"
|
|
value={formData.host_email}
|
|
onChange={handleInputChange('host_email')}
|
|
error={errors.host_email}
|
|
placeholder={t('events.hostEmailPlaceholder')}
|
|
leftIcon={<Mail className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
{t('events.hostEmailHelp')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Admin Email */}
|
|
<div>
|
|
<label htmlFor="admin_email" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.adminNotificationEmail')}
|
|
</label>
|
|
<Input
|
|
id="admin_email"
|
|
type="email"
|
|
value={formData.admin_email}
|
|
onChange={handleInputChange('admin_email')}
|
|
error={errors.admin_email}
|
|
placeholder={t('events.adminEmailPlaceholder')}
|
|
leftIcon={<Mail className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
{t('events.adminEmailHelp')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Security & Access */}
|
|
<Card padding="md" className="mb-6">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.securityAndAccess')}</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Password */}
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.galleryPassword')}
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={formData.password}
|
|
onChange={handleInputChange('password')}
|
|
error={errors.password}
|
|
placeholder={t('events.enterPassword')}
|
|
leftIcon={<Lock className="w-5 h-5 text-neutral-400" />}
|
|
className="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
style={{ top: errors.password ? '0' : '0' }}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="w-5 h-5 text-neutral-400 hover:text-neutral-600" />
|
|
) : (
|
|
<Eye className="w-5 h-5 text-neutral-400 hover:text-neutral-600" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirm Password */}
|
|
<div>
|
|
<label htmlFor="confirm_password" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.confirmPassword')}
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="confirm_password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={formData.confirm_password}
|
|
onChange={handleInputChange('confirm_password')}
|
|
error={errors.confirm_password}
|
|
placeholder={t('events.confirmPasswordPlaceholder')}
|
|
leftIcon={<Lock className="w-5 h-5 text-neutral-400" />}
|
|
className="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
style={{ top: errors.confirm_password ? '0' : '0' }}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="w-5 h-5 text-neutral-400 hover:text-neutral-600" />
|
|
) : (
|
|
<Eye className="w-5 h-5 text-neutral-400 hover:text-neutral-600" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Gallery Settings */}
|
|
<Card padding="md" className="mb-6">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.gallerySettings')}</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Color Theme */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.colorTheme')}
|
|
</label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
|
{COLOR_THEMES.map(theme => (
|
|
<button
|
|
key={theme.value}
|
|
type="button"
|
|
onClick={() => setFormData(prev => ({ ...prev, color_theme: theme.value }))}
|
|
className={`p-3 rounded-lg border-2 transition-all ${
|
|
formData.color_theme === theme.value
|
|
? 'border-primary-600 ring-2 ring-primary-200'
|
|
: 'border-neutral-200 hover:border-neutral-300'
|
|
}`}
|
|
>
|
|
<div className={`w-full h-8 ${theme.color} rounded mb-2`} />
|
|
<div className="text-xs font-medium">{t(theme.labelKey)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expiration */}
|
|
<div>
|
|
<label htmlFor="expires_in_days" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.galleryExpiresIn')}
|
|
</label>
|
|
<div className="flex items-center gap-4">
|
|
<Input
|
|
id="expires_in_days"
|
|
type="number"
|
|
value={formData.expires_in_days}
|
|
onChange={handleInputChange('expires_in_days')}
|
|
error={errors.expires_in_days}
|
|
min="1"
|
|
max="365"
|
|
className="w-32"
|
|
leftIcon={<Clock className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
<span className="text-sm text-neutral-700">{t('common.days')}</span>
|
|
</div>
|
|
<div className="mt-2 p-3 bg-blue-50 rounded-lg flex items-start gap-2">
|
|
<Info className="w-5 h-5 text-blue-600 flex-shrink-0" />
|
|
<div className="text-sm text-blue-800">
|
|
<p>{t('events.galleryExpiresOn', { date: format(addDays(new Date(), formData.expires_in_days), 'MMMM d, yyyy') })}</p>
|
|
<p className="mt-1">{t('events.guestsWillReceiveWarning')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* User Upload Settings */}
|
|
<Card padding="md" className="mb-6">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.userUploads')}</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Allow User Uploads */}
|
|
<div>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.allow_user_uploads}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, allow_user_uploads: e.target.checked }))}
|
|
className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
|
|
/>
|
|
<span className="ml-2 text-sm text-neutral-700">{t('events.allowUserUploads')}</span>
|
|
</label>
|
|
<p className="text-xs text-neutral-500 mt-1 ml-6">
|
|
{t('events.allowUserUploadsHelp')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Upload Category Selection */}
|
|
{formData.allow_user_uploads && (
|
|
<div>
|
|
<label htmlFor="upload_category" className="block text-sm font-medium text-neutral-700 mb-1">
|
|
{t('events.uploadCategory')}
|
|
</label>
|
|
<select
|
|
id="upload_category"
|
|
value={formData.upload_category_id || ''}
|
|
onChange={(e) => setFormData(prev => ({
|
|
...prev,
|
|
upload_category_id: e.target.value ? parseInt(e.target.value) : null
|
|
}))}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
>
|
|
<option value="">{t('events.selectCategory')}</option>
|
|
{categories?.map((category: any) => (
|
|
<option key={category.id} value={category.id}>
|
|
{category.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
{t('events.uploadCategoryHelp')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{formData.allow_user_uploads && (
|
|
<div className="mt-2 p-3 bg-amber-50 rounded-lg flex items-start gap-2">
|
|
<Upload className="w-5 h-5 text-amber-600 flex-shrink-0" />
|
|
<div className="text-sm text-amber-800">
|
|
<p>{t('events.userUploadWarning')}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Submit Buttons */}
|
|
<div className="flex justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => navigate('/admin/events')}
|
|
>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
isLoading={createMutation.isPending}
|
|
>
|
|
{t('events.createEvent')}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
CreateEventPage.displayName = 'CreateEventPage'; |