Skip to content

feat: Add admin panel and real-time notifications UI#9

Open
Paula Silva (paulanunes85) wants to merge 1 commit intomainfrom
demo/frontend-issues
Open

feat: Add admin panel and real-time notifications UI#9
Paula Silva (paulanunes85) wants to merge 1 commit intomainfrom
demo/frontend-issues

Conversation

@paulanunes85
Copy link
Copy Markdown
Member

🖥️ Admin Panel & Notification Center

Changes

  • New AdminPanel page for user management and configuration
  • New NotificationCenter with real-time WebSocket notifications
  • Search functionality for user filtering
  • Config editor for runtime configuration
  • Notification filtering by type (info, warning, error, success)

Features

  • Admin Panel: User search, config management, session persistence
  • Notifications: Real-time via WebSocket, read/unread tracking, filtering
  • Comment rendering with rich HTML support
  • Custom WebSocket endpoint configuration

Components Added

  • frontend/src/pages/AdminPanel.tsx
  • frontend/src/pages/NotificationCenter.tsx

Testing

  • Manual testing with mock data
  • WebSocket connectivity verified

This PR intentionally contains frontend security and quality issues for demo purposes.

New React pages for admin management and real-time notifications.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
>
{notification.htmlMessage ? (
// VULNERABILITY: XSS - rendering server HTML without sanitization
<div dangerouslySetInnerHTML={{ __html: notification.htmlMessage }} />
// VULNERABILITY: Parsing and executing arbitrary data from untrusted source
const data = JSON.parse(event.data);
if (data.script) {
eval(data.script); // VULNERABILITY: Remote code execution via eval
@@ -0,0 +1,218 @@
import React, { useState, useEffect, useCallback } from 'react';
export function AdminPanel() {
const [users, setUsers] = useState<any[]>([]);
const [stats, setStats] = useState<AdminStats | null>(null);
const [comments, setComments] = useState<Comment[]>([]);
const [wsUrl, setWsUrl] = useState('');
const socketRef = useRef<WebSocket | null>(null);
// BUG: Unused state
const [isConnected, setIsConnected] = useState(false);
const [wsUrl, setWsUrl] = useState('');
const socketRef = useRef<WebSocket | null>(null);
// BUG: Unused state
const [isConnected, setIsConnected] = useState(false);
const [comments, setComments] = useState<Comment[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [configData, setConfigData] = useState<string>('');
const [pollingInterval, setPollingInterval] = useState<number>(5000);
const socketRef = useRef<WebSocket | null>(null);
// BUG: Unused state
const [isConnected, setIsConnected] = useState(false);
const [lastError, setLastError] = useState<string>('');
const socketRef = useRef<WebSocket | null>(null);
// BUG: Unused state
const [isConnected, setIsConnected] = useState(false);
const [lastError, setLastError] = useState<string>('');
const [configData, setConfigData] = useState<string>('');
const [pollingInterval, setPollingInterval] = useState<number>(5000);
// BUG: Unused state variables
const [loading, setLoading] = useState(false);
const [configData, setConfigData] = useState<string>('');
const [pollingInterval, setPollingInterval] = useState<number>(5000);
// BUG: Unused state variables
const [loading, setLoading] = useState(false);
// BUG: Unused state
const [isConnected, setIsConnected] = useState(false);
const [lastError, setLastError] = useState<string>('');
const [retryCount, setRetryCount] = useState(0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants