@dbs-portal/module-identity
Version:
Identity management module for user and role management
225 lines • 12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Card, Typography, Table, Tag, Space, Button, DatePicker, Select, Input, Row, Col, Statistic, Timeline, Avatar } from 'antd';
import { SearchOutlined, FilterOutlined, ExportOutlined, UserOutlined, LockOutlined, UnlockOutlined, LoginOutlined, LogoutOutlined, EditOutlined, DeleteOutlined, SafetyOutlined, WarningOutlined } from '@ant-design/icons';
import { format } from 'date-fns';
const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
const { Option } = Select;
const MOCK_AUDIT_LOGS = [
{
id: '1',
timestamp: new Date(Date.now() - 1000 * 60 * 5),
userId: 'user-1',
userName: 'john.doe',
userEmail: 'john.doe@example.com',
action: 'LOGIN_SUCCESS',
category: 'authentication',
details: 'User successfully logged in',
ipAddress: '192.168.1.100',
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
success: true,
riskLevel: 'low'
},
{
id: '2',
timestamp: new Date(Date.now() - 1000 * 60 * 15),
userId: 'admin-1',
userName: 'admin',
userEmail: 'admin@example.com',
action: 'USER_CREATED',
category: 'user_management',
details: 'Created new user: jane.smith',
ipAddress: '192.168.1.101',
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
success: true,
riskLevel: 'medium'
},
{
id: '3',
timestamp: new Date(Date.now() - 1000 * 60 * 30),
userId: 'user-2',
userName: 'jane.smith',
userEmail: 'jane.smith@example.com',
action: 'LOGIN_FAILED',
category: 'authentication',
details: 'Failed login attempt - invalid password',
ipAddress: '192.168.1.102',
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36',
success: false,
riskLevel: 'high'
},
{
id: '4',
timestamp: new Date(Date.now() - 1000 * 60 * 45),
userId: 'admin-1',
userName: 'admin',
userEmail: 'admin@example.com',
action: 'ROLE_UPDATED',
category: 'role_management',
details: 'Updated permissions for role: Editor',
ipAddress: '192.168.1.101',
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
success: true,
riskLevel: 'medium'
},
{
id: '5',
timestamp: new Date(Date.now() - 1000 * 60 * 60),
userId: 'user-3',
userName: 'bob.wilson',
userEmail: 'bob.wilson@example.com',
action: 'PASSWORD_CHANGED',
category: 'security',
details: 'User changed their password',
ipAddress: '192.168.1.103',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_7_1 like Mac OS X) AppleWebKit/605.1.15',
success: true,
riskLevel: 'low'
}
];
export const IdentityAudit = () => {
const [filteredLogs, setFilteredLogs] = useState(MOCK_AUDIT_LOGS);
const [searchText, setSearchText] = useState('');
const [selectedCategory, setSelectedCategory] = useState('');
const [selectedRiskLevel, setSelectedRiskLevel] = useState('');
const getActionIcon = (action) => {
switch (action) {
case 'LOGIN_SUCCESS':
case 'LOGIN_FAILED':
return _jsx(LoginOutlined, {});
case 'LOGOUT':
return _jsx(LogoutOutlined, {});
case 'USER_CREATED':
case 'USER_UPDATED':
return _jsx(EditOutlined, {});
case 'USER_DELETED':
return _jsx(DeleteOutlined, {});
case 'USER_LOCKED':
return _jsx(LockOutlined, {});
case 'USER_UNLOCKED':
return _jsx(UnlockOutlined, {});
case 'PASSWORD_CHANGED':
case 'TWO_FACTOR_ENABLED':
return _jsx(SafetyOutlined, {});
default:
return _jsx(UserOutlined, {});
}
};
const getActionColor = (action, success) => {
if (!success)
return 'red';
switch (action) {
case 'LOGIN_SUCCESS':
return 'green';
case 'LOGIN_FAILED':
return 'red';
case 'USER_CREATED':
return 'blue';
case 'USER_DELETED':
return 'orange';
case 'USER_LOCKED':
return 'red';
case 'USER_UNLOCKED':
return 'green';
case 'PASSWORD_CHANGED':
return 'purple';
default:
return 'default';
}
};
const getRiskLevelColor = (level) => {
switch (level) {
case 'low':
return 'green';
case 'medium':
return 'orange';
case 'high':
return 'red';
default:
return 'default';
}
};
const handleSearch = () => {
let filtered = MOCK_AUDIT_LOGS;
if (searchText) {
filtered = filtered.filter(log => log.userName.toLowerCase().includes(searchText.toLowerCase()) ||
log.userEmail.toLowerCase().includes(searchText.toLowerCase()) ||
log.action.toLowerCase().includes(searchText.toLowerCase()) ||
log.details.toLowerCase().includes(searchText.toLowerCase()));
}
if (selectedCategory) {
filtered = filtered.filter(log => log.category === selectedCategory);
}
if (selectedRiskLevel) {
filtered = filtered.filter(log => log.riskLevel === selectedRiskLevel);
}
setFilteredLogs(filtered);
};
const handleExport = () => {
// Mock export functionality
console.log('Exporting audit logs:', filteredLogs);
};
const columns = [
{
title: 'Timestamp',
dataIndex: 'timestamp',
key: 'timestamp',
width: 180,
render: (timestamp) => format(timestamp, 'PPp'),
sorter: (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
defaultSortOrder: 'descend',
},
{
title: 'User',
key: 'user',
width: 200,
render: (_, record) => (_jsxs(Space, { children: [_jsx(Avatar, { size: "small", icon: _jsx(UserOutlined, {}) }), _jsxs("div", { children: [_jsx("div", { children: record.userName }), _jsx(Text, { type: "secondary", style: { fontSize: '12px' }, children: record.userEmail })] })] })),
},
{
title: 'Action',
dataIndex: 'action',
key: 'action',
width: 150,
render: (action, record) => (_jsx(Tag, { icon: getActionIcon(action), color: getActionColor(action, record.success), children: action.replace(/_/g, ' ') })),
},
{
title: 'Category',
dataIndex: 'category',
key: 'category',
width: 120,
render: (category) => (_jsx(Tag, { color: "blue", children: category.replace(/_/g, ' ').toUpperCase() })),
},
{
title: 'Details',
dataIndex: 'details',
key: 'details',
ellipsis: true,
},
{
title: 'Risk Level',
dataIndex: 'riskLevel',
key: 'riskLevel',
width: 100,
render: (level) => (_jsx(Tag, { color: getRiskLevelColor(level), children: level.toUpperCase() })),
},
{
title: 'IP Address',
dataIndex: 'ipAddress',
key: 'ipAddress',
width: 120,
},
];
// Calculate statistics
const totalLogs = MOCK_AUDIT_LOGS.length;
const failedActions = MOCK_AUDIT_LOGS.filter(log => !log.success).length;
const highRiskActions = MOCK_AUDIT_LOGS.filter(log => log.riskLevel === 'high').length;
const recentLogins = MOCK_AUDIT_LOGS.filter(log => log.action === 'LOGIN_SUCCESS' &&
log.timestamp > new Date(Date.now() - 24 * 60 * 60 * 1000)).length;
return (_jsxs("div", { children: [_jsx(Title, { level: 2, children: "Identity Audit Log" }), _jsx(Text, { type: "secondary", children: "Monitor and track all identity-related activities and security events in the system." }), _jsxs(Row, { gutter: 16, style: { marginTop: 24, marginBottom: 24 }, children: [_jsx(Col, { xs: 24, sm: 6, children: _jsx(Card, { children: _jsx(Statistic, { title: "Total Events", value: totalLogs, prefix: _jsx(SearchOutlined, {}) }) }) }), _jsx(Col, { xs: 24, sm: 6, children: _jsx(Card, { children: _jsx(Statistic, { title: "Failed Actions", value: failedActions, prefix: _jsx(WarningOutlined, {}), valueStyle: { color: '#ff4d4f' } }) }) }), _jsx(Col, { xs: 24, sm: 6, children: _jsx(Card, { children: _jsx(Statistic, { title: "High Risk Events", value: highRiskActions, prefix: _jsx(SafetyOutlined, {}), valueStyle: { color: '#ff4d4f' } }) }) }), _jsx(Col, { xs: 24, sm: 6, children: _jsx(Card, { children: _jsx(Statistic, { title: "Recent Logins (24h)", value: recentLogins, prefix: _jsx(LoginOutlined, {}), valueStyle: { color: '#52c41a' } }) }) })] }), _jsx(Card, { style: { marginBottom: 16 }, children: _jsxs(Row, { gutter: 16, align: "middle", children: [_jsx(Col, { xs: 24, sm: 8, children: _jsx(Input, { placeholder: "Search users, actions, or details...", prefix: _jsx(SearchOutlined, {}), value: searchText, onChange: (e) => setSearchText(e.target.value), onPressEnter: handleSearch }) }), _jsx(Col, { xs: 24, sm: 4, children: _jsxs(Select, { placeholder: "Category", style: { width: '100%' }, value: selectedCategory, onChange: setSelectedCategory, allowClear: true, children: [_jsx(Option, { value: "authentication", children: "Authentication" }), _jsx(Option, { value: "user_management", children: "User Management" }), _jsx(Option, { value: "role_management", children: "Role Management" }), _jsx(Option, { value: "security", children: "Security" }), _jsx(Option, { value: "system", children: "System" })] }) }), _jsx(Col, { xs: 24, sm: 4, children: _jsxs(Select, { placeholder: "Risk Level", style: { width: '100%' }, value: selectedRiskLevel, onChange: setSelectedRiskLevel, allowClear: true, children: [_jsx(Option, { value: "low", children: "Low" }), _jsx(Option, { value: "medium", children: "Medium" }), _jsx(Option, { value: "high", children: "High" })] }) }), _jsx(Col, { xs: 24, sm: 4, children: _jsx(RangePicker, { style: { width: '100%' } }) }), _jsx(Col, { xs: 24, sm: 4, children: _jsxs(Space, { children: [_jsx(Button, { type: "primary", icon: _jsx(FilterOutlined, {}), onClick: handleSearch, children: "Filter" }), _jsx(Button, { icon: _jsx(ExportOutlined, {}), onClick: handleExport, children: "Export" })] }) })] }) }), _jsx(Card, { children: _jsx(Table, { columns: columns, dataSource: filteredLogs, rowKey: "id", pagination: {
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} audit entries`,
}, scroll: { x: 1200 } }) }), _jsx(Card, { title: "Recent Activity Timeline", style: { marginTop: 16 }, children: _jsx(Timeline, { children: MOCK_AUDIT_LOGS.slice(0, 10).map(log => (_jsxs(Timeline.Item, { dot: getActionIcon(log.action), color: getActionColor(log.action, log.success), children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: log.action.replace(/_/g, ' ') }), _jsx(Text, { type: "secondary", style: { marginLeft: 8 }, children: format(log.timestamp, 'PPp') })] }), _jsx("div", { children: _jsx(Text, { children: log.details }) }), _jsx("div", { children: _jsxs(Text, { type: "secondary", children: ["User: ", log.userName, " | IP: ", log.ipAddress] }) })] }, log.id))) }) })] }));
};
//# sourceMappingURL=IdentityAudit.js.map