import { createSignal, Show, For, createEffect } from "solid-js"; interface ReviewFormProps { onSubmit: (data: { name: string; surname: string; profession: string; rating: number; text: string; }) => void; onCancel?: () => void; user?: { name: string; email: string; avatar?: string; }; } const DANGEROUS_PATTERNS = [ /)<[^<]*)*<\/script>/gi, /javascript:/gi, /on\w+\s*=/gi, /)<[^<]*)*<\/iframe>/gi, /)<[^<]*)*<\/object>/gi, //gi, /data:text\/html/gi, /expression\s*\(/gi, /url\s*\(\s*['"]*\s*javascript:/gi, ]; const MAX_TEXT_LENGTH = 500; const MIN_TEXT_LENGTH = 50; const MAX_NAME_LENGTH = 50; const MAX_PROFESSION_LENGTH = 100; interface ValidationErrors { name?: string; surname?: string; profession?: string; rating?: string; text?: string; } const RATING_LABELS: Record = { 1: "Плохо", 2: "Не очень", 3: "Нормально", 4: "Хорошо", 5: "Отлично", }; export default function ReviewForm(props: ReviewFormProps) { const [name, setName] = createSignal(""); const [surname, setSurname] = createSignal(""); const [profession, setProfession] = createSignal(""); const [rating, setRating] = createSignal(0); const [hoverRating, setHoverRating] = createSignal(0); const [text, setText] = createSignal(""); const [errors, setErrors] = createSignal({}); const [touched, setTouched] = createSignal<{ [key: string]: boolean }>({}); createEffect(() => { if (props.user?.name) { const parts = props.user.name.split(" "); if (parts.length >= 2) { setName(parts[0]); setSurname(parts.slice(1).join(" ")); } else { setName(props.user.name); } } }); const sanitizeInput = (input: string): string => { return input .replace(/[<>]/g, "") .replace(/"/g, """) .replace(/'/g, "'") .replace(/&/g, "&"); }; const containsDangerousContent = (input: string): boolean => { return DANGEROUS_PATTERNS.some((pattern) => pattern.test(input)); }; const validateName = (value: string): string | undefined => { const trimmed = value.trim(); if (!trimmed) return "Введите имя"; if (trimmed.length > MAX_NAME_LENGTH) return `Макс. ${MAX_NAME_LENGTH} символов`; return undefined; }; const validateSurname = (value: string): string | undefined => { const trimmed = value.trim(); if (!trimmed) return "Введите фамилию"; if (trimmed.length > MAX_NAME_LENGTH) return `Макс. ${MAX_NAME_LENGTH} символов`; return undefined; }; const validateProfession = (value: string): string | undefined => { const trimmed = value.trim(); if (!trimmed) return "Укажите профессию"; if (trimmed.length > MAX_PROFESSION_LENGTH) return `Макс. ${MAX_PROFESSION_LENGTH} символов`; return undefined; }; const validateRating = (value: number): string | undefined => { if (!value || value < 1 || value > 5) return "Поставьте оценку"; return undefined; }; const validateText = (value: string): string | undefined => { const trimmed = value.trim(); if (!trimmed) return "Напишите отзыв"; if (trimmed.length < MIN_TEXT_LENGTH) return `Минимум ${MIN_TEXT_LENGTH} символов`; if (trimmed.length > MAX_TEXT_LENGTH) return `Макс. ${MAX_TEXT_LENGTH} символов`; if (containsDangerousContent(trimmed)) return "Недопустимый контент"; return undefined; }; const handleTextChange = (e: Event) => { const target = e.target as HTMLTextAreaElement; let value = target.value; if (containsDangerousContent(value)) { DANGEROUS_PATTERNS.forEach((pattern) => { value = value.replace(pattern, ""); }); } if (value.length > MAX_TEXT_LENGTH) { value = value.slice(0, MAX_TEXT_LENGTH); } setText(value); if (touched().text) { setErrors((prev) => ({ ...prev, text: validateText(value) })); } }; const validateForm = (): boolean => { const newErrors: ValidationErrors = { name: validateName(name()), surname: validateSurname(surname()), profession: validateProfession(profession()), rating: validateRating(rating()), text: validateText(text()), }; setErrors(newErrors); setTouched({ name: true, surname: true, profession: true, rating: true, text: true, }); return !Object.values(newErrors).some((error) => error); }; const handleSubmit = (e: Event) => { e.preventDefault(); if (!validateForm()) return; props.onSubmit({ name: sanitizeInput(name().trim()), surname: sanitizeInput(surname().trim()), profession: sanitizeInput(profession().trim()), rating: rating(), text: sanitizeInput(text().trim()), }); setName(""); setSurname(""); setProfession(""); setRating(0); setText(""); setErrors({}); setTouched({}); }; const handleBlur = (field: string) => { setTouched((prev) => ({ ...prev, [field]: true })); const fieldValidators: Record string | undefined> = { name: () => validateName(name()), surname: () => validateSurname(surname()), profession: () => validateProfession(profession()), rating: () => validateRating(rating()), text: () => validateText(text()), }; setErrors((prev) => ({ ...prev, [field]: fieldValidators[field](), })); }; const isValid = () => { return !errors().name && !errors().surname && !errors().profession && !errors().rating && !errors().text && name().trim() && surname().trim() && profession().trim() && rating() > 0 && text().trim(); }; const getFieldClass = (field: keyof ValidationErrors) => { const hasError = errors()[field] && touched()[field]; return `w-full px-4 py-3 rounded-xl border transition-all resize-none bg-white text-gray-900 placeholder-gray-400 outline-none ${ hasError ? "border-red-300 focus:border-red-500 focus:ring-2 focus:ring-red-200" : "border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200" }`; }; const displayRating = () => hoverRating() || rating(); return (

Оставить отзыв

Ваш опыт поможет другим клиентам

setName(e.currentTarget.value)} onBlur={() => handleBlur("name")} placeholder="Иван" class={getFieldClass("name")} />

{errors().name}
setSurname(e.currentTarget.value)} onBlur={() => handleBlur("surname")} placeholder="Иванов" class={getFieldClass("surname")} />

{errors().surname}
setProfession(e.currentTarget.value)} onBlur={() => handleBlur("profession")} placeholder="Например: Водитель, Предприниматель..." class={getFieldClass("profession")} />

{errors().profession}
{(star) => ( )}
0}> {RATING_LABELS[rating()]}

{errors().rating}