@dbs-portal/module-identity
Version:
Identity management module for user and role management
120 lines • 5.56 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* User Details Page
*
* Complete page component for viewing user details with data fetching,
* actions, and navigation. This is a self-contained page that can be
* directly used in any application that imports the identity module.
*/
import React from 'react';
import { Button, Space, Typography, message, Modal, Spin, Alert } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
// Import from same module
import { UserDetails } from '../components/UserDetails';
import { useUser, useDeleteUser, useLockUser, useUnlockUser } from '../hooks';
const { Title } = Typography;
export const UserDetailsPage = ({ userId, onNavigate, onBack, onEdit, onUserDeleted, className }) => {
// Hooks from identity module
const { data: user, isLoading, error } = useUser(userId);
const deleteUserMutation = useDeleteUser();
const lockUserMutation = useLockUser();
const unlockUserMutation = useUnlockUser();
const handleBack = () => {
if (onBack) {
onBack();
}
else if (onNavigate) {
onNavigate('/identity/users');
}
};
const handleEdit = () => {
if (onEdit) {
onEdit(userId);
}
else if (onNavigate) {
onNavigate(`/identity/users/${userId}/edit`);
}
};
const handleDelete = () => {
if (!user)
return;
Modal.confirm({
title: 'Delete User',
content: `Are you sure you want to delete user "${user.displayName || user.userName}"? This action cannot be undone.`,
okText: 'Delete',
okType: 'danger',
cancelText: 'Cancel',
onOk: async () => {
try {
await deleteUserMutation.mutateAsync(user.id);
message.success('User deleted successfully');
if (onUserDeleted) {
onUserDeleted();
}
else if (onNavigate) {
onNavigate('/identity/users');
}
}
catch (error) {
message.error('Failed to delete user');
console.error('Delete user error:', error);
}
}
});
};
const handleLock = () => {
if (!user)
return;
Modal.confirm({
title: 'Lock User Account',
content: `Are you sure you want to lock the account for "${user.displayName || user.userName}"?`,
okText: 'Lock Account',
okType: 'danger',
cancelText: 'Cancel',
onOk: async () => {
try {
await lockUserMutation.mutateAsync({
userId: user.id,
lockoutEnd: new Date(Date.now() + 24 * 60 * 60 * 1000) // Lock for 24 hours
});
message.success('User account locked successfully');
}
catch (error) {
message.error('Failed to lock user account');
console.error('Lock user error:', error);
}
}
});
};
const handleUnlock = () => {
if (!user)
return;
Modal.confirm({
title: 'Unlock User Account',
content: `Are you sure you want to unlock the account for "${user.displayName || user.userName}"?`,
okText: 'Unlock Account',
cancelText: 'Cancel',
onOk: async () => {
try {
await unlockUserMutation.mutateAsync(user.id);
message.success('User account unlocked successfully');
}
catch (error) {
message.error('Failed to unlock user account');
console.error('Unlock user error:', error);
}
}
});
};
if (isLoading) {
return (_jsxs("div", { className: className, style: { textAlign: 'center', padding: '50px' }, children: [_jsx(Spin, { size: "large" }), _jsx("div", { style: { marginTop: 16 }, children: "Loading user details..." })] }));
}
if (error) {
return (_jsxs("div", { className: className, children: [_jsx("div", { style: { marginBottom: 24 }, children: _jsx(Button, { icon: _jsx(ArrowLeftOutlined, {}), onClick: handleBack, children: "Back to Users" }) }), _jsx(Alert, { message: "Error Loading User", description: `Failed to load user details: ${error.message}`, type: "error", showIcon: true })] }));
}
if (!user) {
return (_jsxs("div", { className: className, children: [_jsx("div", { style: { marginBottom: 24 }, children: _jsx(Button, { icon: _jsx(ArrowLeftOutlined, {}), onClick: handleBack, children: "Back to Users" }) }), _jsx(Alert, { message: "User Not Found", description: "The requested user could not be found.", type: "warning", showIcon: true })] }));
}
return (_jsxs("div", { className: className, children: [_jsx("div", { style: { marginBottom: 24 }, children: _jsxs(Space, { children: [_jsx(Button, { icon: _jsx(ArrowLeftOutlined, {}), onClick: handleBack, children: "Back to Users" }), _jsx(Title, { level: 2, style: { margin: 0 }, children: "User Details" })] }) }), _jsx(UserDetails, { user: user, onEdit: handleEdit, onDelete: handleDelete, onLock: handleLock, onUnlock: handleUnlock })] }));
};
//# sourceMappingURL=UserDetailsPage.js.map