Fix Unicode character support and form validation feedback

- Support international characters (accents, apostrophes) in names
- Update regex to use Unicode letter/number patterns (\p{L}, \p{N})
- Add explicit dangerous character blacklist for security
- Add JavaScript escaping helper for Alpine.js x-data attributes
- Return HTML error messages instead of JSON for better UX
- Add WebSocket error messaging for real-time validation feedback
- Create reusable ErrorDisplay component for consistent error UI
- Add GetClient method to Hub for targeted error messaging
- Comprehensive test coverage for French, German, Spanish, and other international names

Author: damione1

internal/handlers/room.go

@@ -40,9 +40,10 @@ func (h *RoomHandlers) CreateRoom(re *core.RequestEvent) error {
 	// Validate and sanitize room name
 	sanitizedName, err := security.ValidateRoomName(name)
 	if err != nil {
-		return re.JSON(http.StatusBadRequest, map[string]string{
-			"error": err.Error(),
-		})
+		// Return HTML error for htmx or regular form submission
+		component := templates.ErrorDisplay(err.Error())
+		re.Response.WriteHeader(http.StatusBadRequest)
+		return templates.Render(re.Response, re.Request, component)
 	}
 	name = sanitizedName
 
@@ -59,26 +60,26 @@ func (h *RoomHandlers) CreateRoom(re *core.RequestEvent) error {
 		customValues = h.voteValidator.GetFibonacciValues()
 	case "custom":
 		if customValuesRaw == "" {
-			return re.JSON(http.StatusBadRequest, map[string]string{
-				"error": "Custom values are required when using custom pointing method",
-			})
+			component := templates.ErrorDisplay("Custom values are required when using custom pointing method")
+			re.Response.WriteHeader(http.StatusBadRequest)
+			return templates.Render(re.Response, re.Request, component)
 		}
 
 		parsedValues, err := h.voteValidator.ParseCustomValues(customValuesRaw)
 		if err != nil {
-			return re.JSON(http.StatusBadRequest, map[string]string{
-				"error": fmt.Sprintf("Invalid custom values: %s", err.Error()),
-			})
+			component := templates.ErrorDisplay(fmt.Sprintf("Invalid custom values: %s", err.Error()))
+			re.Response.WriteHeader(http.StatusBadRequest)
+			return templates.Render(re.Response, re.Request, component)
 		}
 		customValues = parsedValues
 	}
 
 	// Create room in database
 	roomRecord, err := h.roomManager.CreateRoom(name, pointingMethod, customValues)
 	if err != nil {
-		return re.JSON(http.StatusInternalServerError, map[string]string{
-			"error": "Failed to create room",
-		})
+		component := templates.ErrorDisplay("Failed to create room. Please try again.")
+		re.Response.WriteHeader(http.StatusInternalServerError)
+		return templates.Render(re.Response, re.Request, component)
 	}
 
 	// Redirect to room
@@ -259,26 +260,26 @@ func (h *RoomHandlers) JoinRoom(re *core.RequestEvent) error {
 
 	// Validate room ID
 	if err := security.ValidateUUID(roomID); err != nil {
-		return re.JSON(http.StatusBadRequest, map[string]string{
-			"error": "Invalid room ID",
-		})
+		component := templates.ErrorDisplay("Invalid room ID")
+		re.Response.WriteHeader(http.StatusBadRequest)
+		return templates.Render(re.Response, re.Request, component)
 	}
 
 	// Validate and sanitize participant name
 	sanitizedName, err := security.ValidateParticipantName(name)
 	if err != nil {
-		return re.JSON(http.StatusBadRequest, map[string]string{
-			"error": err.Error(),
-		})
+		component := templates.ErrorDisplay(err.Error())
+		re.Response.WriteHeader(http.StatusBadRequest)
+		return templates.Render(re.Response, re.Request, component)
 	}
 	name = sanitizedName
 
 	// Verify room exists
 	_, err = h.roomManager.GetRoom(roomID)
 	if err != nil {
-		return re.JSON(http.StatusNotFound, map[string]string{
-			"error": "Room not found",
-		})
+		component := templates.ErrorDisplay("Room not found")
+		re.Response.WriteHeader(http.StatusNotFound)
+		return templates.Render(re.Response, re.Request, component)
 	}
 
 	// Determine role
@@ -293,9 +294,9 @@ func (h *RoomHandlers) JoinRoom(re *core.RequestEvent) error {
 	// Create participant in database
 	participantRecord, err := h.roomManager.AddParticipant(roomID, name, participantRole, sessionCookie)
 	if err != nil {
-		return re.JSON(http.StatusInternalServerError, map[string]string{
-			"error": "Failed to join room",
-		})
+		component := templates.ErrorDisplay("Failed to join room. Please try again.")
+		re.Response.WriteHeader(http.StatusInternalServerError)
+		return templates.Render(re.Response, re.Request, component)
 	}
 
 	// Set cookie

internal/handlers/ws.go

@@ -626,35 +626,54 @@ func (h *WSHandler) getRoomState(roomID string) (models.RoomState, error) {
 }
 
 func (h *WSHandler) handleUpdateName(roomID string, msg *models.WSMessage, participantID string) {
+	// Helper to send error to the client
+	sendError := func(message string) {
+		client := h.hub.GetClient(roomID, participantID)
+		if client != nil {
+			h.hub.SendToClient(client, &models.WSMessage{
+				Type: models.MsgTypeError,
+				Payload: map[string]any{
+					"message": message,
+					"action":  "update_name",
+				},
+			})
+		}
+	}
+
 	if participantID == "" {
 		log.Printf("Update name rejected: no participant ID")
+		sendError("Could not identify participant")
 		return
 	}
 
 	// Extract new name from payload
 	payload, ok := msg.Payload.(map[string]any)
 	if !ok {
 		log.Printf("Invalid update name payload format")
+		sendError("Invalid request format")
 		return
 	}
 
 	newName, ok := payload["name"].(string)
 	if !ok {
 		log.Printf("Invalid name value type")
+		sendError("Invalid name format")
 		return
 	}
 
 	// Validate and sanitize name
 	sanitizedName, err := security.ValidateParticipantName(newName)
 	if err != nil {
 		log.Printf("Invalid participant name: %v", err)
+		sendError(err.Error())
 		return
 	}
 	newName = sanitizedName
 
 	// Update participant name in database
 	if err := h.roomManager.UpdateParticipantName(participantID, newName); err != nil {
 		log.Printf("Failed to update participant name: %v", err)
+		sendError("Failed to update name. Please try again.")
 		return
 	}
 
@@ -671,36 +690,55 @@ func (h *WSHandler) handleUpdateName(roomID string, msg *models.WSMessage, parti
 }
 
 func (h *WSHandler) handleUpdateRoomName(roomID string, msg *models.WSMessage, participantID string) {
+	// Helper to send error to the client
+	sendError := func(message string) {
+		client := h.hub.GetClient(roomID, participantID)
+		if client != nil {
+			h.hub.SendToClient(client, &models.WSMessage{
+				Type: models.MsgTypeError,
+				Payload: map[string]any{
+					"message": message,
+					"action":  "update_room_name",
+				},
+			})
+		}
+	}
+
 	// Verify participant is the room creator
 	if !h.roomManager.IsRoomCreator(roomID, participantID) {
 		log.Printf("Update room name rejected: participant %s is not room creator", participantID)
+		sendError("Only the room creator can change the room name")
 		return
 	}
 
 	// Extract new name from payload
 	payload, ok := msg.Payload.(map[string]any)
 	if !ok {
 		log.Printf("Invalid update room name payload format")
+		sendError("Invalid request format")
 		return
 	}
 
 	newName, ok := payload["name"].(string)
 	if !ok {
 		log.Printf("Invalid room name value type")
+		sendError("Invalid room name format")
 		return
 	}
 
 	// Validate and sanitize room name
 	sanitizedName, err := security.ValidateRoomName(newName)
 	if err != nil {
 		log.Printf("Invalid room name: %v", err)
+		sendError(err.Error())
 		return
 	}
 	newName = sanitizedName
 
 	// Update room name in database
 	if err := h.roomManager.UpdateRoomName(roomID, newName); err != nil {
 		log.Printf("Failed to update room name: %v", err)
+		sendError("Failed to update room name. Please try again.")
 		return
 	}
 

internal/models/message.go

@@ -31,4 +31,5 @@ const (
 	MsgTypeNameUpdated       = "name_updated"
 	MsgTypeRoomNameUpdated   = "room_name_updated"
 	MsgTypeConfigUpdated     = "config_updated"
+	MsgTypeError             = "error" // Error message to client
 )

internal/security/validators.go

@@ -20,8 +20,13 @@ var (
 	pocketbaseIDRegex = regexp.MustCompile(`^[a-zA-Z0-9]{15}$`)
 	// UUID validation regex (for potential future use)
 	uuidRegex = regexp.MustCompile(`^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$`)
-	// Name validation regex (alphanumeric, spaces, common punctuation)
-	nameRegex = regexp.MustCompile(`^[a-zA-Z0-9\s\-_.]+$`)
+	// Name validation regex - Unicode letters, digits, spaces, apostrophes, hyphens, underscores, dots
+	// \p{L} matches any Unicode letter (includes accented characters)
+	// \p{N} matches any Unicode number
+	// ' allows apostrophes (for French and English possessives)
+	nameRegex = regexp.MustCompile(`^[\p{L}\p{N}\s'\-_.]+$`)
+	// Dangerous characters that could be used for injection attacks
+	dangerousCharsRegex = regexp.MustCompile(`[<>{}[\]\\;|&$()` + "`" + `]`)
 )
 
 // ValidateUUID validates that a string is a valid PocketBase ID or UUID format
@@ -69,9 +74,14 @@ func ValidateName(name string, maxLen int) (string, error) {
 		return "", fmt.Errorf("name too long (max %d characters)", maxLen)
 	}
 
-	// Check for invalid characters
+	// Check for invalid characters (must match allowed character set)
 	if !nameRegex.MatchString(name) {
-		return "", fmt.Errorf("name contains invalid characters (allowed: letters, numbers, spaces, hyphens, underscores, dots)")
+		return "", fmt.Errorf("name contains invalid characters (allowed: letters, numbers, spaces, apostrophes, hyphens, underscores, dots)")
+	}
+
+	// Check for dangerous characters that could be used for injection
+	if dangerousCharsRegex.MatchString(name) {
+		return "", fmt.Errorf("name contains potentially dangerous characters")
 	}
 
 	// Check for control characters (belt-and-suspenders with regex)

internal/services/hub.go

@@ -250,3 +250,20 @@ func (h *Hub) GetRoomCount() int {
 func (h *Hub) SetMessageHandler(handler MessageHandler) {
 	h.messageHandler = handler
 }
+
+// GetClient finds a client in a room by participant ID
+func (h *Hub) GetClient(roomID string, participantID string) *Client {
+	value, ok := h.rooms.Load(roomID)
+	if !ok {
+		return nil
+	}
+
+	clients := value.(map[*Client]bool)
+	for client := range clients {
+		if client.participantID == participantID {
+			return client
+		}
+	}
+
+	return nil
+}

tests/unit/security/validators_test.go

@@ -62,16 +62,28 @@ func TestValidateRoomName(t *testing.T) {
 		{"valid with trailing space", "Sprint Planning  ", "Sprint Planning", false},
 		{"minimum length", "S", "S", false},
 		{"maximum length", strings.Repeat("a", 100), strings.Repeat("a", 100), false},
+		// French names with accents and apostrophes
+		{"french with apostrophe", "L'équipe Sprint", "L'équipe Sprint", false},
+		{"french with multiple accents", "Réunion d'été", "Réunion d'été", false},
+		{"english possessive", "Bob's Team", "Bob's Team", false},
+		{"simple accent", "Café Planning", "Café Planning", false},
+		{"multiple apostrophes", "L'équipe d'Alice", "L'équipe d'Alice", false},
+		{"german umlauts", "Müller's Planung", "Müller's Planung", false},
+		{"spanish accents", "Reunión España", "Reunión España", false},
 
 		// Invalid cases
 		{"empty", "", "", true},
 		{"whitespace only", "   ", "", true},
 		{"too long", strings.Repeat("a", 101), "", true},
 		{"xss attempt", "<script>alert('xss')</script>", "", true},
 		{"sql injection", "'; DROP TABLE rooms--", "", true},
-		{"special chars", "Sprint @ Planning", "", true},
+		{"special chars @", "Sprint @ Planning", "", true},
 		{"control characters", "Sprint\nPlanning", "", true},
 		{"unicode emoji", "Sprint 🚀", "", true},
+		{"brackets", "Room[1]", "", true},
+		{"pipe", "Room|Test", "", true},
+		{"ampersand", "Room & Planning", "", true},
+		{"dollar sign", "Room$123", "", true},
 	}
 
 	for _, tt := range tests {
@@ -103,6 +115,15 @@ func TestValidateParticipantName(t *testing.T) {
 		{"minimum length", "A", "A", false},
 		{"maximum length", strings.Repeat("a", 50), strings.Repeat("a", 50), false},
 		{"trim whitespace", "  Alice  ", "Alice", false},
+		// French and international names
+		{"french name with accent", "François", "François", false},
+		{"french name with apostrophe", "D'Artagnan", "D'Artagnan", false},
+		{"german name", "Müller", "Müller", false},
+		{"spanish name", "José García", "José García", false},
+		{"portuguese name", "João", "João", false},
+		{"scandinavian name", "Søren", "Søren", false},
+		{"polish name", "Łukasz", "Łukasz", false},
+		{"multiple accents", "Stéphane Bücher", "Stéphane Bücher", false},
 
 		// Invalid cases
 		{"empty", "", "", true},
@@ -112,8 +133,11 @@ func TestValidateParticipantName(t *testing.T) {
 		{"img onerror", "<img src=x onerror=alert('xss')>", "", true},
 		{"event handler", "<div onload=alert('xss')>Alice</div>", "", true},
 		{"sql injection", "'; DROP TABLE--", "", true},
-		{"special chars", "Alice@Bob", "", true},
+		{"special chars @", "Alice@Bob", "", true},
 		{"control chars", "Alice\x00Bob", "", true},
+		{"brackets", "Alice[0]", "", true},
+		{"pipe", "Alice|Bob", "", true},
+		{"ampersand", "Alice&Bob", "", true},
 	}
 
 	for _, tt := range tests {

web/templates/error_display.templ

@@ -0,0 +1,13 @@
+package templates
+
+// ErrorDisplay renders an error message alert
+templ ErrorDisplay(message string) {
+	<div id="error-display" class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
+		<div class="flex items-start gap-3">
+			<span class="text-red-500 text-xl">⚠️</span>
+			<div class="flex-1">
+				<p class="text-sm font-medium text-red-900">{ message }</p>
+			</div>
+		</div>
+	</div>
+}

web/templates/home.templ

@@ -103,8 +103,10 @@ templ roomCreationForm(voteTemplates []services.TemplateInfo, errorParam string)
 				</div>
 			</div>
 		}
+		<!-- Error Container -->
+		<div id="form-errors"></div>
 		<!-- Form Fields -->
-		<form method="POST" action="/room" x-data="roomForm()" class="space-y-6">
+		<form method="POST" action="/room" x-data="roomForm()" hx-post="/room" hx-target="#form-errors" hx-swap="innerHTML" class="space-y-6">
 			<!-- Room Name Input -->
 			<div>
 				<label for="name" class="block text-sm font-semibold text-slate-700 mb-2">

web/templates/join_modal.templ

@@ -5,7 +5,9 @@ templ JoinModal(roomID string) {
 		<div class="elevated-card bg-gradient-to-br from-white to-slate-50 rounded-2xl shadow-2xl max-w-md w-full mx-4 p-8" x-show="show">
 			<h2 class="text-2xl font-bold text-slate-800 mb-2">Join Room</h2>
 			<p class="text-sm text-slate-600 mb-6">Enter your details to participate</p>
-			<form hx-post={"/room/" + roomID + "/join"} hx-swap="outerHTML" class="space-y-6">
+			<!-- Error Container -->
+			<div id="join-form-errors"></div>
+			<form hx-post={"/room/" + roomID + "/join"} hx-target="#join-form-errors" hx-swap="innerHTML" class="space-y-6">
 				<div>
 					<label for="name" class="block text-sm font-semibold text-slate-700 mb-2">
 						Your Name

web/templates/room.templ

@@ -2,9 +2,21 @@ package templates
 
 import (
 	"fmt"
+	"strings"
 	"github.com/damione1/planning-poker/internal/models"
 )
 
+// escapeJS escapes a string for safe use in JavaScript string literals
+func escapeJS(s string) string {
+	s = strings.ReplaceAll(s, "\\", "\\\\")  // Escape backslashes first
+	s = strings.ReplaceAll(s, "'", "\\'")     // Escape single quotes
+	s = strings.ReplaceAll(s, "\"", "\\\"")   // Escape double quotes
+	s = strings.ReplaceAll(s, "\n", "\\n")    // Escape newlines
+	s = strings.ReplaceAll(s, "\r", "\\r")    // Escape carriage returns
+	s = strings.ReplaceAll(s, "\t", "\\t")    // Escape tabs
+	return s
+}
+
 templ Room(room *models.Room, participant *models.Participant, isCreator bool) {
 	@Base(room.Name) {
 		<div class="bg-white rounded-lg shadow-lg p-6 min-h-[600px]" x-data="roomStateManager()" hx-ext="ws" ws-connect={"/ws/" + room.ID}>
@@ -116,7 +128,7 @@ templ Room(room *models.Room, participant *models.Participant, isCreator bool) {
 				<div class="flex items-center gap-3">
 					if participant != nil {
 						<div
-							x-data={ fmt.Sprintf("{ editing: false, newName: '', currentName: '%s', participantId: '%s' }", participant.Name, participant.ID) }
+							x-data={ fmt.Sprintf("{ editing: false, newName: '', currentName: '%s', participantId: '%s' }", escapeJS(participant.Name), participant.ID) }
 							@name-updated.window="if ($event.detail.participantId === participantId) { currentName = $event.detail.name }"
 							class="flex items-center gap-3 px-4 py-2 bg-gradient-to-br from-primary-50 to-success-50 border border-primary-200 rounded-xl shadow-sm"
 						>