Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive input validation

Browse Source 
- Created lib/validation.ts with validation utilities for all form inputs
- Added validation for list titles, item titles, colors, dates, tags, descriptions, and notes
- Implemented inline validation with real-time error feedback in ListForm
- Enhanced ItemForm with comprehensive validation for all fields
- Updated InlineItemCreate with validation
- Added input sanitization to prevent XSS attacks
- Updated server actions to use validation utilities
- Added maxLength attributes to prevent excessive input
- Improved accessibility with aria-invalid and aria-describedby attributes
- Added visual feedback for validation errors with red borders
- Validates Requirements 1.1 and 2.1
This commit is contained in:
Paul Bailey
2025-12-01 21:26:26 +00:00
parent 12ce70e495
commit 796bde22e7
6 changed files with 667 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.kiro/specs/ultimate-lists-app/tasks.md
View File

@@ -199,7 +199,7 @@
- Implement skeleton loaders
- _Requirements: 7.3_
- [-] 16. Implement error handling
- [x] 16. Implement error handling
- Add try-catch blocks to all server actions
- Implement error boundaries in React components
- Add user-friendly error messages
@@ -207,7 +207,7 @@
- Implement retry logic for failed operations
- _Requirements: All (error handling is cross-cutting)_
- [ ] 17. Add input validation
- [x] 17. Add input validation
- Validate all form inputs before submission
- Add inline validation errors
- Prevent empty task/list creation

51
components/InlineItemCreate.tsx
View File

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
import { createItem } from '@/lib/actions'
import { Plus } from 'lucide-react'
import { useToast } from './ToastContainer'
import { validateItemTitle, sanitizeString } from '@/lib/validation'
interface InlineItemCreateProps {
listId: string
@@ -16,25 +17,36 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
const [isCreating, setIsCreating] = useState(false)
const [title, setTitle] = useState('')
const [isSubmitting, setIsSubmitting] = useState(false)
const [error, setError] = useState('')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!title.trim() || isSubmitting) {
// Validate title
const validationResult = validateItemTitle(title)
if (!validationResult.isValid) {
setError(validationResult.error || 'Invalid title')
return
}
if (isSubmitting) {
return
}
setIsSubmitting(true)
setError('')
try {
await createItem(listId, title.trim())
await createItem(listId, sanitizeString(title))
showToast('Task added successfully', 'success')
setTitle('')
setIsCreating(false)
router.refresh()
} catch (error) {
console.error('Error creating item:', error)
showToast('Failed to add task', 'error')
const errorMessage = error instanceof Error ? error.message : 'Failed to add task'
setError(errorMessage)
showToast(errorMessage, 'error')
} finally {
setIsSubmitting(false)
}
@@ -65,15 +77,30 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
return (
<form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Enter task title..."
autoFocus
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
/>
<div className="mb-3 sm:mb-4">
<input
type="text"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setError('')
}}
onKeyDown={handleKeyDown}
placeholder="Enter task title..."
autoFocus
maxLength={200}
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
}`}
aria-invalid={error ? 'true' : 'false'}
aria-describedby={error ? 'inline-title-error' : undefined}
/>
{error && (
<p id="inline-title-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{error}
</p>
)}
</div>
<div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
<button
type="button"

234
components/ItemForm.tsx
View File

@@ -1,9 +1,18 @@
'use client'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { updateItem, createItem } from '@/lib/actions'
import { useToast } from './ToastContainer'
import {
validateItemTitle,
validateDescription,
validateDateString,
validateTag,
validateTags,
validateNotes,
sanitizeString,
} from '@/lib/validation'
interface ItemFormProps {
listId: string
@@ -24,6 +33,7 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
const { showToast } = useToast()
const [isSubmitting, setIsSubmitting] = useState(false)
const [errors, setErrors] = useState<Record<string, string>>({})
const [touched, setTouched] = useState<Record<string, boolean>>({})
// Form state
const [title, setTitle] = useState(item?.title || '')
@@ -40,18 +50,107 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
const [tagInput, setTagInput] = useState('')
const [notes, setNotes] = useState(item?.notes || '')
// Inline validation for title
useEffect(() => {
if (touched.title) {
const result = validateItemTitle(title)
setErrors((prev) => ({
...prev,
title: result.isValid ? '' : result.error || '',
}))
}
}, [title, touched.title])
// Inline validation for description
useEffect(() => {
if (touched.description) {
const result = validateDescription(description)
setErrors((prev) => ({
...prev,
description: result.isValid ? '' : result.error || '',
}))
}
}, [description, touched.description])
// Inline validation for due date
useEffect(() => {
if (touched.dueDate && dueDate) {
const result = validateDateString(dueDate)
setErrors((prev) => ({
...prev,
dueDate: result.isValid ? '' : result.error || '',
}))
} else if (touched.dueDate && !dueDate) {
setErrors((prev) => ({ ...prev, dueDate: '' }))
}
}, [dueDate, touched.dueDate])
// Inline validation for notes
useEffect(() => {
if (touched.notes) {
const result = validateNotes(notes)
setErrors((prev) => ({
...prev,
notes: result.isValid ? '' : result.error || '',
}))
}
}, [notes, touched.notes])
// Validate tags whenever they change
useEffect(() => {
const result = validateTags(tags)
setErrors((prev) => ({
...prev,
tags: result.isValid ? '' : result.error || '',
}))
}, [tags])
const handleBlur = (field: string) => {
setTouched((prev) => ({ ...prev, [field]: true }))
}
const validateForm = () => {
const newErrors: Record<string, string> = {}
if (!title.trim()) {
newErrors.title = 'Title is required'
// Validate title
const titleResult = validateItemTitle(title)
if (!titleResult.isValid) {
newErrors.title = titleResult.error || ''
}
if (title.length > 200) {
newErrors.title = 'Title must be less than 200 characters'
// Validate description
const descResult = validateDescription(description)
if (!descResult.isValid) {
newErrors.description = descResult.error || ''
}
// Validate due date
if (dueDate) {
const dateResult = validateDateString(dueDate)
if (!dateResult.isValid) {
newErrors.dueDate = dateResult.error || ''
}
}
// Validate tags
const tagsResult = validateTags(tags)
if (!tagsResult.isValid) {
newErrors.tags = tagsResult.error || ''
}
// Validate notes
const notesResult = validateNotes(notes)
if (!notesResult.isValid) {
newErrors.notes = notesResult.error || ''
}
setErrors(newErrors)
setTouched({
title: true,
description: true,
dueDate: true,
notes: true,
})
return Object.keys(newErrors).length === 0
}
@@ -59,6 +158,7 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
e.preventDefault()
if (!validateForm()) {
showToast('Please fix validation errors', 'error')
return
}
@@ -66,12 +166,12 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
try {
const data = {
title: title.trim(),
description: description.trim() || null,
title: sanitizeString(title),
description: sanitizeString(description) || null,
priority,
dueDate: dueDate ? new Date(dueDate) : null,
tags,
notes: notes.trim() || null,
tags: tags.map(sanitizeString),
notes: sanitizeString(notes) || null,
}
if (mode === 'create') {
@@ -90,19 +190,39 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
}
} catch (error) {
console.error('Error saving item:', error)
setErrors({ submit: 'Failed to save item. Please try again.' })
showToast('Failed to save task', 'error')
const errorMessage = error instanceof Error ? error.message : 'Failed to save item. Please try again.'
setErrors({ submit: errorMessage })
showToast(errorMessage, 'error')
} finally {
setIsSubmitting(false)
}
}
const handleAddTag = () => {
const tag = tagInput.trim()
if (tag && !tags.includes(tag)) {
setTags([...tags, tag])
setTagInput('')
const tag = sanitizeString(tagInput)
// Validate tag
const tagResult = validateTag(tag)
if (!tagResult.isValid) {
setErrors((prev) => ({ ...prev, tagInput: tagResult.error || '' }))
return
}
// Check for duplicates
if (tags.includes(tag)) {
setErrors((prev) => ({ ...prev, tagInput: 'Tag already exists' }))
return
}
// Check max tags
if (tags.length >= 20) {
setErrors((prev) => ({ ...prev, tagInput: 'Maximum 20 tags allowed' }))
return
}
setTags([...tags, tag])
setTagInput('')
setErrors((prev) => ({ ...prev, tagInput: '' }))
}
const handleRemoveTag = (tagToRemove: string) => {
@@ -128,13 +248,21 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base ${
errors.title ? 'border-red-500' : 'border-gray-300'
onBlur={() => handleBlur('title')}
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
errors.title && touched.title
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="Enter task title"
maxLength={200}
aria-invalid={errors.title && touched.title ? 'true' : 'false'}
aria-describedby={errors.title && touched.title ? 'title-error' : undefined}
/>
{errors.title && (
<p className="mt-1.5 text-xs sm:text-sm text-red-600">{errors.title}</p>
{errors.title && touched.title && (
<p id="title-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{errors.title}
</p>
)}
</div>
@@ -147,10 +275,23 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
onBlur={() => handleBlur('description')}
rows={3}
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base resize-y"
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base resize-y ${
errors.description && touched.description
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="Add a description"
maxLength={2000}
aria-invalid={errors.description && touched.description ? 'true' : 'false'}
aria-describedby={errors.description && touched.description ? 'description-error' : undefined}
/>
{errors.description && touched.description && (
<p id="description-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{errors.description}
</p>
)}
</div>
{/* Priority */}
@@ -180,14 +321,28 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
id="dueDate"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
onBlur={() => handleBlur('dueDate')}
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base tap-target ${
errors.dueDate && touched.dueDate
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
min="1900-01-01"
max="2100-12-31"
aria-invalid={errors.dueDate && touched.dueDate ? 'true' : 'false'}
aria-describedby={errors.dueDate && touched.dueDate ? 'dueDate-error' : undefined}
/>
{errors.dueDate && touched.dueDate && (
<p id="dueDate-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{errors.dueDate}
</p>
)}
</div>
{/* Tags */}
<div>
<label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-2">
Tags
Tags {tags.length > 0 && <span className="text-gray-500">({tags.length}/20)</span>}
</label>
<div className="flex gap-2 mb-2 sm:mb-3">
<input
@@ -196,17 +351,33 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
value={tagInput}
onChange={(e) => setTagInput(e.target.value)}
onKeyDown={handleKeyDown}
className="flex-1 px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
className={`flex-1 px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
errors.tagInput
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="Add a tag"
maxLength={50}
aria-invalid={errors.tagInput ? 'true' : 'false'}
aria-describedby={errors.tagInput ? 'tagInput-error' : undefined}
/>
<button
type="button"
onClick={handleAddTag}
className="px-4 sm:px-5 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
disabled={tags.length >= 20}
className="px-4 sm:px-5 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 disabled:bg-gray-100 disabled:text-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
>
Add
</button>
</div>
{errors.tagInput && (
<p id="tagInput-error" className="mb-2 text-xs sm:text-sm text-red-600">
{errors.tagInput}
</p>
)}
{errors.tags && (
<p className="mb-2 text-xs sm:text-sm text-red-600">{errors.tags}</p>
)}
{tags.length > 0 && (
<div className="flex flex-wrap gap-2">
{tags.map((tag) => (
@@ -238,10 +409,23 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
id="notes"
value={notes}
onChange={(e) => setNotes(e.target.value)}
onBlur={() => handleBlur('notes')}
rows={5}
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base resize-y"
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base resize-y ${
errors.notes && touched.notes
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="Add additional notes"
maxLength={5000}
aria-invalid={errors.notes && touched.notes ? 'true' : 'false'}
aria-describedby={errors.notes && touched.notes ? 'notes-error' : undefined}
/>
{errors.notes && touched.notes && (
<p id="notes-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{errors.notes}
</p>
)}
</div>
{/* Error message */}

51
components/ListForm.tsx
View File

@@ -1,9 +1,10 @@
'use client'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { createList, updateList } from '@/lib/actions'
import { useRouter } from 'next/navigation'
import { useToast } from './ToastContainer'
import { validateListTitle } from '@/lib/validation'
interface ListFormProps {
list?: {
@@ -33,12 +34,30 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
const [color, setColor] = useState(list?.color || PRESET_COLORS[0])
const [isSubmitting, setIsSubmitting] = useState(false)
const [error, setError] = useState('')
const [touched, setTouched] = useState(false)
// Inline validation when title changes
useEffect(() => {
if (touched) {
const result = validateListTitle(title)
setError(result.isValid ? '' : result.error || '')
}
}, [title, touched])
const handleTitleBlur = () => {
setTouched(true)
const result = validateListTitle(title)
setError(result.isValid ? '' : result.error || '')
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!title.trim()) {
setError('List title is required')
// Validate before submission
const result = validateListTitle(title)
if (!result.isValid) {
setError(result.error || 'Invalid input')
setTouched(true)
return
}
@@ -62,8 +81,9 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
router.refresh()
}
} catch (err) {
setError('Failed to save list. Please try again.')
showToast('Failed to save list', 'error')
const errorMessage = err instanceof Error ? err.message : 'Failed to save list. Please try again.'
setError(errorMessage)
showToast(errorMessage, 'error')
console.error(err)
} finally {
setIsSubmitting(false)
@@ -74,18 +94,31 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
List Title
List Title *
</label>
<input
type="text"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
onBlur={handleTitleBlur}
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
error && touched
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="Enter list title"
disabled={isSubmitting}
autoFocus
maxLength={200}
aria-invalid={error && touched ? 'true' : 'false'}
aria-describedby={error && touched ? 'title-error' : undefined}
/>
{error && touched && (
<p id="title-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
{error}
</p>
)}
</div>
<div>
@@ -111,10 +144,6 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
</div>
</div>
{error && (
<div className="text-red-600 text-xs sm:text-sm font-medium">{error}</div>
)}
<div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 justify-end pt-2">
{onCancel && (
<button

107
lib/actions.ts
View File

@@ -2,6 +2,14 @@
import { prisma } from './db'
import { revalidatePath } from 'next/cache'
import {
validateListTitle,
validateItemTitle,
validateColor,
validateDateString,
validateTags,
sanitizeString,
} from './validation'
// Retry utility for database operations
async function retryOperation<T>(
@@ -57,19 +65,23 @@ export async function getLists() {
export async function createList(title: string, color: string = '#3B82F6') {
try {
// Validate input
if (!title || !title.trim()) {
throw new Error('List title is required')
// Validate and sanitize input
const titleResult = validateListTitle(title)
if (!titleResult.isValid) {
throw new Error(titleResult.error)
}
if (title.length > 200) {
throw new Error('List title must be less than 200 characters')
const colorResult = validateColor(color)
if (!colorResult.isValid) {
throw new Error(colorResult.error)
}
const sanitizedTitle = sanitizeString(title)
const list = await retryOperation(() =>
prisma.list.create({
data: {
title: title.trim(),
title: sanitizedTitle,
color,
},
})
@@ -79,7 +91,7 @@ export async function createList(title: string, color: string = '#3B82F6') {
return list
} catch (error) {
console.error('Error creating list:', error)
if (error instanceof Error && error.message.includes('required')) {
if (error instanceof Error && (error.message.includes('required') || error.message.includes('must be'))) {
throw error
}
throw new Error('Failed to create list. Please try again.')
@@ -165,24 +177,35 @@ export async function createItem(
throw new Error('List ID is required')
}
if (!title || !title.trim()) {
throw new Error('Item title is required')
const titleResult = validateItemTitle(title)
if (!titleResult.isValid) {
throw new Error(titleResult.error)
}
if (title.length > 200) {
throw new Error('Item title must be less than 200 characters')
// Validate tags if provided
if (metadata?.tags) {
const tagsResult = validateTags(metadata.tags)
if (!tagsResult.isValid) {
throw new Error(tagsResult.error)
}
}
// Sanitize inputs
const sanitizedTitle = sanitizeString(title)
const sanitizedDescription = description ? sanitizeString(description) : null
const sanitizedNotes = metadata?.notes ? sanitizeString(metadata.notes) : null
const sanitizedTags = metadata?.tags ? metadata.tags.map(sanitizeString) : undefined
const item = await retryOperation(() =>
prisma.item.create({
data: {
title: title.trim(),
description: description?.trim() || null,
title: sanitizedTitle,
description: sanitizedDescription,
listId,
...(metadata?.priority && { priority: metadata.priority }),
...(metadata?.dueDate !== undefined && { dueDate: metadata.dueDate }),
...(metadata?.tags && { tags: metadata.tags }),
...(metadata?.notes !== undefined && { notes: metadata.notes }),
...(sanitizedTags && { tags: sanitizedTags }),
...(sanitizedNotes !== undefined && { notes: sanitizedNotes }),
},
})
)
@@ -191,7 +214,7 @@ export async function createItem(
return item
} catch (error) {
console.error('Error creating item:', error)
if (error instanceof Error && (error.message.includes('required') || error.message.includes('must be'))) {
if (error instanceof Error && (error.message.includes('required') || error.message.includes('must be') || error.message.includes('Invalid'))) {
throw error
}
throw new Error('Failed to create item. Please try again.')
@@ -247,20 +270,32 @@ export async function updateItem(
throw new Error('Item ID is required')
}
// Validate title if provided
// Validate and sanitize title if provided
if (data.title !== undefined) {
if (!data.title || !data.title.trim()) {
throw new Error('Item title cannot be empty')
const titleResult = validateItemTitle(data.title)
if (!titleResult.isValid) {
throw new Error(titleResult.error)
}
if (data.title.length > 200) {
throw new Error('Item title must be less than 200 characters')
}
data.title = data.title.trim()
data.title = sanitizeString(data.title)
}
// Trim description if provided
// Sanitize description if provided
if (data.description !== undefined && data.description !== null) {
data.description = data.description.trim() || null
data.description = sanitizeString(data.description) || null
}
// Validate tags if provided
if (data.tags !== undefined) {
const tagsResult = validateTags(data.tags)
if (!tagsResult.isValid) {
throw new Error(tagsResult.error)
}
data.tags = data.tags.map(sanitizeString)
}
// Sanitize notes if provided
if (data.notes !== undefined && data.notes !== null) {
data.notes = sanitizeString(data.notes) || null
}
const item = await retryOperation(() =>
@@ -282,7 +317,7 @@ export async function updateItem(
return updated
} catch (error) {
console.error('Error updating item:', error)
if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be'))) {
if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be') || error.message.includes('Invalid'))) {
throw error
}
throw new Error('Failed to update item. Please try again.')
@@ -364,15 +399,21 @@ export async function updateList(
throw new Error('List ID is required')
}
// Validate title if provided
// Validate and sanitize title if provided
if (data.title !== undefined) {
if (!data.title || !data.title.trim()) {
throw new Error('List title cannot be empty')
const titleResult = validateListTitle(data.title)
if (!titleResult.isValid) {
throw new Error(titleResult.error)
}
if (data.title.length > 200) {
throw new Error('List title must be less than 200 characters')
data.title = sanitizeString(data.title)
}
// Validate color if provided
if (data.color !== undefined) {
const colorResult = validateColor(data.color)
if (!colorResult.isValid) {
throw new Error(colorResult.error)
}
data.title = data.title.trim()
}
const updated = await retryOperation(() =>
@@ -387,7 +428,7 @@ export async function updateList(
return updated
} catch (error) {
console.error('Error updating list:', error)
if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be'))) {
if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be') || error.message.includes('Invalid'))) {
throw error
}
throw new Error('Failed to update list. Please try again.')

303
lib/validation.ts Normal file
View File

@@ -0,0 +1,303 @@
/**
* Input validation utilities for the Ultimate Lists App
* Provides validation functions and sanitization for user inputs
*/
export interface ValidationResult {
isValid: boolean
error?: string
}
/**
* Sanitize string input by trimming whitespace
*/
export function sanitizeString(input: string | null | undefined): string {
if (input === null || input === undefined) {
return ''
}
return input.trim()
}
/**
* Validate list title
*/
export function validateListTitle(title: string): ValidationResult {
const sanitized = sanitizeString(title)
if (!sanitized) {
return { isValid: false, error: 'List title is required' }
}
if (sanitized.length > 200) {
return { isValid: false, error: 'List title must be less than 200 characters' }
}
return { isValid: true }
}
/**
* Validate item/task title
*/
export function validateItemTitle(title: string): ValidationResult {
const sanitized = sanitizeString(title)
if (!sanitized) {
return { isValid: false, error: 'Task title is required' }
}
if (sanitized.length > 200) {
return { isValid: false, error: 'Task title must be less than 200 characters' }
}
return { isValid: true }
}
/**
* Validate hex color format
*/
export function validateColor(color: string): ValidationResult {
const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
if (!hexColorRegex.test(color)) {
return { isValid: false, error: 'Invalid color format. Use hex format (e.g., #3B82F6)' }
}
return { isValid: true }
}
/**
* Validate priority value
*/
export function validatePriority(priority: string): ValidationResult {
const validPriorities = ['low', 'medium', 'high']
if (!validPriorities.includes(priority)) {
return { isValid: false, error: 'Priority must be low, medium, or high' }
}
return { isValid: true }
}
/**
* Validate date string format (ISO 8601 or YYYY-MM-DD)
*/
export function validateDateString(dateString: string): ValidationResult {
if (!dateString) {
return { isValid: true } // Empty date is valid (optional field)
}
// Try to parse the date
const date = new Date(dateString)
// Check if date is valid
if (isNaN(date.getTime())) {
return { isValid: false, error: 'Invalid date format. Use YYYY-MM-DD format' }
}
// Check if date is reasonable (not too far in past or future)
const minDate = new Date('1900-01-01')
const maxDate = new Date('2100-12-31')
if (date < minDate || date > maxDate) {
return { isValid: false, error: 'Date must be between 1900 and 2100' }
}
return { isValid: true }
}
/**
* Validate tag string
*/
export function validateTag(tag: string): ValidationResult {
const sanitized = sanitizeString(tag)
if (!sanitized) {
return { isValid: false, error: 'Tag cannot be empty' }
}
if (sanitized.length > 50) {
return { isValid: false, error: 'Tag must be less than 50 characters' }
}
// Disallow special characters that might cause issues
const invalidCharsRegex = /[<>\"']/
if (invalidCharsRegex.test(sanitized)) {
return { isValid: false, error: 'Tag contains invalid characters' }
}
return { isValid: true }
}
/**
* Validate array of tags
*/
export function validateTags(tags: string[]): ValidationResult {
if (!Array.isArray(tags)) {
return { isValid: false, error: 'Tags must be an array' }
}
if (tags.length > 20) {
return { isValid: false, error: 'Maximum 20 tags allowed' }
}
for (const tag of tags) {
const result = validateTag(tag)
if (!result.isValid) {
return result
}
}
return { isValid: true }
}
/**
* Validate description text
*/
export function validateDescription(description: string | null | undefined): ValidationResult {
if (!description) {
return { isValid: true } // Description is optional
}
if (description.length > 2000) {
return { isValid: false, error: 'Description must be less than 2000 characters' }
}
return { isValid: true }
}
/**
* Validate notes text
*/
export function validateNotes(notes: string | null | undefined): ValidationResult {
if (!notes) {
return { isValid: true } // Notes are optional
}
if (notes.length > 5000) {
return { isValid: false, error: 'Notes must be less than 5000 characters' }
}
return { isValid: true }
}
/**
* Sanitize HTML to prevent XSS attacks
* Basic implementation - strips HTML tags
*/
export function sanitizeHtml(input: string): string {
return input.replace(/<[^>]*>/g, '')
}
/**
* Validate and sanitize list creation data
*/
export function validateListData(data: { title: string; color?: string }): {
isValid: boolean
errors: Record<string, string>
sanitized: { title: string; color: string }
} {
const errors: Record<string, string> = {}
// Validate title
const titleResult = validateListTitle(data.title)
if (!titleResult.isValid) {
errors.title = titleResult.error!
}
// Validate color if provided
const color = data.color || '#3B82F6'
const colorResult = validateColor(color)
if (!colorResult.isValid) {
errors.color = colorResult.error!
}
return {
isValid: Object.keys(errors).length === 0,
errors,
sanitized: {
title: sanitizeString(data.title),
color,
},
}
}
/**
* Validate and sanitize item creation data
*/
export function validateItemData(data: {
title: string
description?: string | null
priority?: string
dueDate?: string | null
tags?: string[]
notes?: string | null
}): {
isValid: boolean
errors: Record<string, string>
sanitized: {
title: string
description: string | null
priority: 'low' | 'medium' | 'high'
dueDate: Date | null
tags: string[]
notes: string | null
}
} {
const errors: Record<string, string> = {}
// Validate title
const titleResult = validateItemTitle(data.title)
if (!titleResult.isValid) {
errors.title = titleResult.error!
}
// Validate description
const descResult = validateDescription(data.description)
if (!descResult.isValid) {
errors.description = descResult.error!
}
// Validate priority
const priority = data.priority || 'medium'
const priorityResult = validatePriority(priority)
if (!priorityResult.isValid) {
errors.priority = priorityResult.error!
}
// Validate due date
let dueDate: Date | null = null
if (data.dueDate) {
const dateResult = validateDateString(data.dueDate)
if (!dateResult.isValid) {
errors.dueDate = dateResult.error!
} else {
dueDate = new Date(data.dueDate)
}
}
// Validate tags
const tags = data.tags || []
const tagsResult = validateTags(tags)
if (!tagsResult.isValid) {
errors.tags = tagsResult.error!
}
// Validate notes
const notesResult = validateNotes(data.notes)
if (!notesResult.isValid) {
errors.notes = notesResult.error!
}
return {
isValid: Object.keys(errors).length === 0,
errors,
sanitized: {
title: sanitizeString(data.title),
description: data.description ? sanitizeString(data.description) : null,
priority: priority as 'low' | 'medium' | 'high',
dueDate,
tags: tags.map(sanitizeString),
notes: data.notes ? sanitizeString(data.notes) : null,
},
}
}