feat: Add User Nickname System with Validation and Edit Functionality (#16)

* feat: Add user nickname system with validation modal

- Implemented beautiful welcome modal for nickname input
- Added comprehensive client and server-side validation (3-20 chars, alphanumeric+underscore, unique)
- Enhanced WebSocket protocol to handle nickname as first message
- Updated ConnectionManager to track and validate nicknames
- Modified UI to display nicknames instead of numeric IDs
- Added join/leave messages with user nicknames and emojis
- Maintained 100% backward compatibility with CDC functionality
- Fixed bug in consumer.py for unhandled CDC operation types
- Added real-time validation feedback and error handling
- Implemented smooth animations and mobile-responsive design

This feature allows users to personalize their chat identity with validated nicknames, improving user experience while maintaining all existing CDC and chat functionality.

* feat: Add localStorage persistence and Change Nickname button

- Nickname now persists across page refreshes using localStorage
- Added 'Change Nickname' button in header for easy nickname updates
- Auto-reconnect with saved nickname on page load
- Server validates uniqueness on each connection
- Clear localStorage and reconnect when changing nickname
- Improved UX: users only set nickname once per browser
- Export changeNickname to window for global access

* feat: Add user nickname system with validation and edit functionality

- Add nickname modal on page load with purple gradient theme
- Implement backend nickname validation (2-20 chars, alphanumeric + spaces/underscores/hyphens)
- Add uniqueness check to prevent duplicate nicknames
- Display nicknames in messages and header instead of client IDs
- Add edit nickname button for easy nickname changes
- Include real-time character counter and error handling
- Maintain existing CDC functionality and UI consistency
- Ask for nickname on every page refresh (no persistence)

Resolves issue: User Nickname System feature request
Hacktoberfest 2025 contribution

Author: WalkingDevFlag

app/internal/connection_manager.py

@@ -14,16 +14,37 @@ def __call__(cls, *args, **kwargs):
 class ConnectionManager(metaclass=SingletonMeta):
     def __init__(self):
         self.active_connections: list[WebSocket] = []
+        self.nicknames: dict[WebSocket, str] = {}  # Store websocket -> nickname mapping
 
-    async def connect(self, websocket: WebSocket, client_id: str):
+    async def connect(self, websocket: WebSocket, client_id: str, nickname: str = None):
         await websocket.accept()
         self.active_connections.append(websocket)
-        await self.broadcast(f'Client {client_id} joined the chat')
+        
+        # Store nickname for this connection
+        if nickname:
+            self.nicknames[websocket] = nickname
+            await self.broadcast(f'🎉 {nickname} joined the chat')
+        else:
+            await self.broadcast(f'Client {client_id} joined the chat')
 
     async def disconnect(self, websocket: WebSocket, client_id: str):
+        nickname = self.nicknames.get(websocket, f'Client {client_id}')
         self.active_connections.remove(websocket)
-        await self.broadcast(f'Client {client_id} left the chat')
+        
+        # Remove nickname mapping
+        if websocket in self.nicknames:
+            del self.nicknames[websocket]
+        
+        await self.broadcast(f'👋 {nickname} left the chat')
 
     async def broadcast(self, message: str):
         for connection in self.active_connections:
             await connection.send_text(message)
+    
+    def is_nickname_taken(self, nickname: str) -> bool:
+        """Check if nickname is already in use"""
+        return nickname.lower() in [n.lower() for n in self.nicknames.values()]
+    
+    def get_nickname(self, websocket: WebSocket) -> str:
+        """Get nickname for a websocket connection"""
+        return self.nicknames.get(websocket, 'Anonymous')

app/internal/consumer.py

@@ -36,6 +36,8 @@ async def exec(self):
                                 case 'd':
                                     changes = data.get('payload', {}).get('before', {})
                                     message = f'SuperHero [Deleted]: {changes}'
+                                case _:
+                                    continue
                             await manager.broadcast(message)
                 except Exception as e:
                     print(e)

app/routes/websockets.py

@@ -1,5 +1,6 @@
-from fastapi import APIRouter, WebSocket
+from fastapi import APIRouter, WebSocket, Query
 from starlette.websockets import WebSocketDisconnect
+import re
 
 from app.internal.connection_manager import ConnectionManager
 
@@ -9,13 +10,49 @@
 manager = ConnectionManager()
 
 
+def validate_nickname(nickname: str) -> tuple[bool, str]:
+    """Validate nickname according to rules"""
+    if not nickname or len(nickname.strip()) == 0:
+        return False, "Nickname cannot be empty"
+    
+    nickname = nickname.strip()
+    
+    if len(nickname) > 20:
+        return False, "Nickname must be 20 characters or less"
+    
+    if len(nickname) < 2:
+        return False, "Nickname must be at least 2 characters"
+    
+    # Allow alphanumeric, spaces, underscores, and hyphens
+    if not re.match(r'^[a-zA-Z0-9_ -]+$', nickname):
+        return False, "Nickname can only contain letters, numbers, spaces, underscores, and hyphens"
+    
+    if manager.is_nickname_taken(nickname):
+        return False, "Nickname is already taken"
+    
+    return True, nickname
+
+
 @router.websocket('/{client_id}')
-async def websocket_endpoint(websocket: WebSocket, client_id: str):
-    await manager.connect(websocket, client_id)
+async def websocket_endpoint(websocket: WebSocket, client_id: str, nickname: str = Query(None)):
+    # Validate nickname if provided
+    validated_nickname = None
+    if nickname:
+        is_valid, result = validate_nickname(nickname)
+        if is_valid:
+            validated_nickname = result
+        else:
+            await websocket.close(code=1008, reason=result)
+            return
+    
+    await manager.connect(websocket, client_id, validated_nickname)
     try:
         while True:
             data = await websocket.receive_text()
-            message = f'Client {client_id}: {data}'
+            
+            # Get the sender's nickname
+            sender_name = manager.get_nickname(websocket)
+            message = f'{sender_name}: {data}'
             await manager.broadcast(message)
     except WebSocketDisconnect:
         await manager.disconnect(websocket, client_id)

app/static/script.js

@@ -3,23 +3,115 @@ let client_id = Date.now();
 let ws;
 let messageCount = 0;
 let isConnected = false;
+let currentNickname = null;
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', function() {
-    initializeWebSocket();
     setupEventListeners();
-    updateConnectionStatus('connecting', 'Connecting...');
+    showNicknameModal();
+    updateConnectionStatus('connecting', 'Waiting for nickname...');
 });
 
+// Nickname Modal Functions
+function showNicknameModal() {
+    const modal = document.getElementById('nickname-modal');
+    modal.classList.remove('hidden');
+    
+    // Focus on input
+    setTimeout(() => {
+        document.getElementById('nickname-input').focus();
+    }, 100);
+}
+
+function hideNicknameModal() {
+    const modal = document.getElementById('nickname-modal');
+    modal.classList.add('hidden');
+}
+
+function validateNickname(nickname) {
+    const trimmed = nickname.trim();
+    
+    if (trimmed.length === 0) {
+        return { valid: false, error: 'Nickname cannot be empty' };
+    }
+    
+    if (trimmed.length < 2) {
+        return { valid: false, error: 'Nickname must be at least 2 characters' };
+    }
+    
+    if (trimmed.length > 20) {
+        return { valid: false, error: 'Nickname must be 20 characters or less' };
+    }
+    
+    // Allow alphanumeric, spaces, underscores, and hyphens
+    const regex = /^[a-zA-Z0-9_ -]+$/;
+    if (!regex.test(trimmed)) {
+        return { valid: false, error: 'Only letters, numbers, spaces, _ and - allowed' };
+    }
+    
+    return { valid: true, nickname: trimmed };
+}
+
+function submitNickname(event) {
+    event.preventDefault();
+    
+    const input = document.getElementById('nickname-input');
+    const errorDiv = document.getElementById('nickname-error');
+    const nickname = input.value;
+    
+    // Validate nickname
+    const validation = validateNickname(nickname);
+    
+    if (!validation.valid) {
+        errorDiv.textContent = validation.error;
+        errorDiv.classList.add('show');
+        input.focus();
+        return;
+    }
+    
+    // Hide error if any
+    errorDiv.classList.remove('show');
+    
+    // Store nickname and connect
+    currentNickname = validation.nickname;
+    document.getElementById('nickname-display').textContent = currentNickname;
+    
+    hideNicknameModal();
+    initializeWebSocket();
+}
+
+function editNickname() {
+    // Disconnect current WebSocket
+    if (ws && isConnected) {
+        ws.close();
+    }
+    
+    // Clear current nickname
+    currentNickname = null;
+    document.getElementById('nickname-input').value = '';
+    document.getElementById('nickname-char-count').textContent = '0';
+    
+    // Show modal again
+    showNicknameModal();
+    updateConnectionStatus('connecting', 'Waiting for nickname...');
+}
+
 // WebSocket connection management
 function initializeWebSocket() {
-    document.querySelector("#ws-id").textContent = client_id;
-    ws = new WebSocket(`ws://localhost:8000/ws/${client_id}`);
+    if (!currentNickname) {
+        showNicknameModal();
+        return;
+    }
+    
+    updateConnectionStatus('connecting', 'Connecting...');
+    
+    // Include nickname as query parameter
+    ws = new WebSocket(`ws://localhost:8000/ws/${client_id}?nickname=${encodeURIComponent(currentNickname)}`);
 
     ws.onopen = function(event) {
         isConnected = true;
         updateConnectionStatus('connected', 'Connected');
-        addSystemMessage('Connected to Debezium Real-Time Chat! 🚀');
+        addSystemMessage(`Connected to Debezium Real-Time Chat! 🚀`);
     };
 
     ws.onmessage = function(event) {
@@ -29,8 +121,18 @@ function initializeWebSocket() {
     ws.onclose = function(event) {
         isConnected = false;
         updateConnectionStatus('disconnected', 'Disconnected');
-        addSystemMessage('Connection lost. Attempting to reconnect...');
-        setTimeout(initializeWebSocket, 3000);
+        
+        // Check if close was due to nickname error
+        if (event.code === 1008) {
+            addSystemMessage(`❌ ${event.reason}`);
+            showNicknameModal();
+            const errorDiv = document.getElementById('nickname-error');
+            errorDiv.textContent = event.reason;
+            errorDiv.classList.add('show');
+        } else {
+            addSystemMessage('Connection lost. Attempting to reconnect...');
+            setTimeout(initializeWebSocket, 3000);
+        }
     };
 
     ws.onerror = function(error) {
@@ -44,11 +146,22 @@ function setupEventListeners() {
     const messageInput = document.getElementById("messageText");
     const charCount = document.getElementById("char-count");
 
-    // Character counter
+    // Character counter for message input
     messageInput.addEventListener('input', function() {
         charCount.textContent = this.value.length;
     });
 
+    // Character counter for nickname input
+    const nicknameInput = document.getElementById("nickname-input");
+    const nicknameCharCount = document.getElementById("nickname-char-count");
+    
+    nicknameInput.addEventListener('input', function() {
+        nicknameCharCount.textContent = this.value.length;
+        // Clear error on input
+        const errorDiv = document.getElementById('nickname-error');
+        errorDiv.classList.remove('show');
+    });
+    
     // Auto-resize input
     messageInput.addEventListener('input', function() {
         this.style.height = 'auto';
@@ -191,7 +304,7 @@ function addUserMessage(message) {
 
     const contentDiv = document.createElement("div");
     contentDiv.className = "message-content";
-    contentDiv.textContent = `👤 You: ${message}`;
+    contentDiv.textContent = `👤 ${currentNickname || 'You'}: ${message}`;
 
     const metaDiv = document.createElement("div");
     metaDiv.className = "message-meta";
@@ -251,3 +364,5 @@ window.insertSampleData = insertSampleData;
 window.updateSampleData = updateSampleData;
 window.deleteSampleData = deleteSampleData;
 window.sendMessage = sendMessage;
+window.submitNickname = submitNickname;
+window.editNickname = editNickname;