@dbs-portal/module-identity
Version:
Identity management module for user and role management
76 lines • 6.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* User Edit Component
*/
import React, { useEffect } from 'react';
import { Card, Form, Input, Button, Row, Col, Switch, Select, Alert, Typography, Divider, message } from 'antd';
import { UserOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { useUpdateUser, useRoles, useUserRoles } from '../hooks';
const { Title, Text } = Typography;
const { Option } = Select;
export const UserEdit = ({ user, onSubmit, loading: externalLoading, error: externalError, className }) => {
const [form] = Form.useForm();
const updateUserMutation = useUpdateUser();
const { data: rolesData } = useRoles();
const { data: userRoles } = useUserRoles(user.id);
const isLoading = externalLoading || updateUserMutation.isPending;
const error = externalError || updateUserMutation.error?.message;
// Initialize form with user data
useEffect(() => {
form.setFieldsValue({
userName: user.userName,
email: user.email,
firstName: user.firstName,
lastName: user.lastName,
phoneNumber: user.phoneNumber,
isActive: user.isActive,
roleNames: userRoles || user.roles
});
}, [form, user, userRoles]);
const handleSubmit = async (values) => {
try {
if (onSubmit) {
onSubmit(values);
}
else {
await updateUserMutation.mutateAsync({
id: user.id,
userName: values.userName,
email: values.email,
firstName: values.firstName,
lastName: values.lastName,
phoneNumber: values.phoneNumber,
isActive: values.isActive,
roleNames: values.roleNames
});
message.success('User updated successfully!');
}
}
catch (err) {
console.error('Failed to update user:', err);
}
};
return (_jsxs(Card, { className: className, children: [_jsx(Title, { level: 2, children: "Edit User" }), _jsxs(Text, { type: "secondary", children: ["Update user information and settings for ", user.displayName || user.userName, "."] }), error && (_jsx(Alert, { message: "User Update Failed", description: error, type: "error", showIcon: true, style: { marginTop: 16, marginBottom: 16 } })), _jsxs(Form, { form: form, name: "editUser", onFinish: handleSubmit, layout: "vertical", size: "large", style: { marginTop: 24 }, children: [_jsxs(Row, { gutter: 16, children: [_jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "firstName", label: "First Name", rules: [
{ required: true, message: 'Please enter the first name!' },
{ min: 2, message: 'First name must be at least 2 characters!' },
], children: _jsx(Input, { prefix: _jsx(UserOutlined, {}), placeholder: "Enter first name", autoComplete: "given-name" }) }) }), _jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "lastName", label: "Last Name", rules: [
{ required: true, message: 'Please enter the last name!' },
{ min: 2, message: 'Last name must be at least 2 characters!' },
], children: _jsx(Input, { prefix: _jsx(UserOutlined, {}), placeholder: "Enter last name", autoComplete: "family-name" }) }) })] }), _jsxs(Row, { gutter: 16, children: [_jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "userName", label: "Username", rules: [
{ required: true, message: 'Please enter the username!' },
{ min: 3, message: 'Username must be at least 3 characters!' },
{
pattern: /^[a-zA-Z0-9_-]+$/,
message: 'Username can only contain letters, numbers, underscores, and hyphens!'
},
], children: _jsx(Input, { prefix: _jsx(UserOutlined, {}), placeholder: "Enter username", autoComplete: "username" }) }) }), _jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "email", label: "Email", rules: [
{ required: true, message: 'Please enter the email!' },
{ type: 'email', message: 'Please enter a valid email!' },
], children: _jsx(Input, { prefix: _jsx(MailOutlined, {}), placeholder: "Enter email address", autoComplete: "email" }) }) })] }), _jsx(Form.Item, { name: "phoneNumber", label: "Phone Number", rules: [
{
pattern: /^\+?[1-9]\d{1,14}$/,
message: 'Please enter a valid phone number!'
},
], children: _jsx(Input, { prefix: _jsx(PhoneOutlined, {}), placeholder: "Enter phone number (optional)", autoComplete: "tel" }) }), _jsx(Divider, { children: "Roles & Permissions" }), _jsx(Form.Item, { name: "roleNames", label: "Assign Roles", children: _jsx(Select, { mode: "multiple", placeholder: "Select roles", loading: !rolesData, allowClear: true, children: rolesData?.data?.map((role) => (_jsx(Option, { value: role.name, children: role.displayName || role.name }, role.id))) }) }), _jsx(Divider, { children: "Settings" }), _jsx(Form.Item, { name: "isActive", label: "Active User", valuePropName: "checked", children: _jsx(Switch, {}) }), _jsxs(Form.Item, { style: { marginTop: 32 }, children: [_jsx(Button, { type: "primary", htmlType: "submit", loading: isLoading, size: "large", style: { marginRight: 8 }, children: "Update User" }), _jsx(Button, { size: "large", onClick: () => form.resetFields(), disabled: isLoading, children: "Reset" })] })] })] }));
};
//# sourceMappingURL=UserEdit.js.map