Craete UserManagement page
This commit is contained in:
Mathias Wagner
386
webui/src/pages/UserManagement/UserManagement.jsx
Normal file
386
webui/src/pages/UserManagement/UserManagement.jsx
Normal file
@@ -0,0 +1,386 @@
|
||||
import React, {useState, useEffect, useContext} from 'react';
|
||||
import {UserContext} from '@/common/contexts/UserContext.jsx';
|
||||
import {useToast} from '@/common/contexts/ToastContext.jsx';
|
||||
import {getRequest, postRequest, putRequest, deleteRequest} from '@/common/utils/RequestUtil.js';
|
||||
import Button from '@/common/components/Button';
|
||||
import Input from '@/common/components/Input';
|
||||
import Select from '@/common/components/Select';
|
||||
import Modal, {ModalActions} from '@/common/components/Modal';
|
||||
import Card, {CardHeader, CardBody} from '@/common/components/Card';
|
||||
import Badge from '@/common/components/Badge';
|
||||
import Grid from '@/common/components/Grid';
|
||||
import LoadingSpinner from '@/common/components/LoadingSpinner';
|
||||
import EmptyState from '@/common/components/EmptyState';
|
||||
import PageHeader from '@/common/components/PageHeader';
|
||||
import Avatar from '@/common/components/Avatar';
|
||||
import DetailItem, {DetailList} from '@/common/components/DetailItem';
|
||||
import FormError from '@/common/components/FormError';
|
||||
import {
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
UserIcon,
|
||||
ShieldCheckIcon,
|
||||
CalendarIcon,
|
||||
HardDriveIcon
|
||||
} from '@phosphor-icons/react';
|
||||
import './styles.sass';
|
||||
|
||||
const UserManagement = () => {
|
||||
const {user: currentUser} = useContext(UserContext);
|
||||
const toast = useToast();
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState(null);
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
role: 'user',
|
||||
storage_limit_gb: 10
|
||||
});
|
||||
const [formErrors, setFormErrors] = useState({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getRequest('admin/users');
|
||||
setUsers(response);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
toast.error('Failed to load users. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
setEditingUser(null);
|
||||
setFormData({
|
||||
username: '',
|
||||
password: '',
|
||||
role: 'user',
|
||||
storage_limit_gb: 10
|
||||
});
|
||||
setFormErrors({});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEditModal = (user) => {
|
||||
setEditingUser(user);
|
||||
setFormData({
|
||||
username: user.username,
|
||||
password: '',
|
||||
role: user.role,
|
||||
storage_limit_gb: user.storage_limit_gb
|
||||
});
|
||||
setFormErrors({});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingUser(null);
|
||||
setFormData({
|
||||
username: '',
|
||||
password: '',
|
||||
role: 'user',
|
||||
storage_limit_gb: 10
|
||||
});
|
||||
setFormErrors({});
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
|
||||
if (!formData.username.trim()) {
|
||||
errors.username = 'Username is required';
|
||||
} else if (formData.username.length < 3) {
|
||||
errors.username = 'Username must be at least 3 characters';
|
||||
}
|
||||
|
||||
if (!editingUser && !formData.password) {
|
||||
errors.password = 'Password is required';
|
||||
} else if (formData.password && formData.password.length < 6) {
|
||||
errors.password = 'Password must be at least 6 characters';
|
||||
}
|
||||
|
||||
if (formData.storage_limit_gb < 0) {
|
||||
errors.storage_limit_gb = 'Storage limit cannot be negative';
|
||||
}
|
||||
|
||||
setFormErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
if (editingUser) {
|
||||
const updateData = {
|
||||
username: formData.username,
|
||||
role: formData.role,
|
||||
storage_limit_gb: parseInt(formData.storage_limit_gb)
|
||||
};
|
||||
|
||||
if (formData.password) {
|
||||
updateData.password = formData.password;
|
||||
}
|
||||
|
||||
await putRequest(`admin/users/${editingUser.id}`, updateData);
|
||||
toast.success(`User "${formData.username}" updated successfully`);
|
||||
} else {
|
||||
await postRequest('admin/users', {
|
||||
username: formData.username,
|
||||
password: formData.password,
|
||||
role: formData.role,
|
||||
storage_limit_gb: parseInt(formData.storage_limit_gb)
|
||||
});
|
||||
toast.success(`User "${formData.username}" created successfully`);
|
||||
}
|
||||
|
||||
closeModal();
|
||||
fetchUsers();
|
||||
} catch (error) {
|
||||
console.error('Failed to save user:', error);
|
||||
const errorMessage = error.error || 'Failed to save user. Please try again.';
|
||||
toast.error(errorMessage);
|
||||
if (error.error) {
|
||||
setFormErrors({general: error.error});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (userId, username) => {
|
||||
if (userId === currentUser.id) {
|
||||
toast.warning('You cannot delete your own account');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!window.confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteRequest(`admin/users/${userId}`);
|
||||
toast.success(`User "${username}" deleted successfully`);
|
||||
fetchUsers();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete user:', error);
|
||||
toast.error('Failed to delete user. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const {name, value} = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
|
||||
if (formErrors[name]) {
|
||||
setFormErrors(prev => ({
|
||||
...prev,
|
||||
[name]: ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="content">
|
||||
<LoadingSpinner centered text="Loading users..."/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<PageHeader
|
||||
title="User Management"
|
||||
subtitle="Manage system users and their permissions"
|
||||
actions={
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<PlusIcon size={16}/>}
|
||||
onClick={openCreateModal}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Grid minWidth="400px">
|
||||
{users.map(user => (
|
||||
<Card key={user.id} hover>
|
||||
<CardHeader>
|
||||
<div className="user-card-header">
|
||||
<Avatar>
|
||||
<UserIcon size={24} weight="duotone"/>
|
||||
</Avatar>
|
||||
<div className="user-info">
|
||||
<h3 className="user-name">{user.username}</h3>
|
||||
<div className="user-role">
|
||||
<ShieldCheckIcon size={14}/>
|
||||
<Badge variant={user.role}>
|
||||
{user.role}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-actions">
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
icon={<PencilIcon size={14}/>}
|
||||
onClick={() => openEditModal(user)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
{user.id !== currentUser.id && (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
icon={<TrashIcon size={14}/>}
|
||||
onClick={() => handleDelete(user.id, user.username)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardBody>
|
||||
<DetailList>
|
||||
<DetailItem icon={<HardDriveIcon size={16}/>}>
|
||||
Storage Limit: {user.storage_limit_gb}GB
|
||||
</DetailItem>
|
||||
<DetailItem icon={<CalendarIcon size={16}/>}>
|
||||
Created: {formatDate(user.created_at)}
|
||||
</DetailItem>
|
||||
</DetailList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{users.length === 0 && (
|
||||
<EmptyState
|
||||
icon={<UserIcon size={48} weight="duotone"/>}
|
||||
title="No users found"
|
||||
description="Get started by creating your first user"
|
||||
action={
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<PlusIcon size={16}/>}
|
||||
onClick={openCreateModal}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
isOpen={showModal}
|
||||
onClose={closeModal}
|
||||
title={editingUser ? 'Edit User' : 'Create New User'}
|
||||
size="md"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="modal-form">
|
||||
<FormError>{formErrors.general}</FormError>
|
||||
|
||||
<Input
|
||||
label="Username"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleInputChange}
|
||||
error={formErrors.username}
|
||||
placeholder="Enter username"
|
||||
disabled={submitting}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={editingUser ? "New Password (leave empty to keep current)" : "Password"}
|
||||
name="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
error={formErrors.password}
|
||||
placeholder={editingUser ? "Leave empty to keep current password" : "Enter password"}
|
||||
disabled={submitting}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Role"
|
||||
name="role"
|
||||
value={formData.role}
|
||||
onChange={handleInputChange}
|
||||
options={[
|
||||
{value: 'user', label: 'User'},
|
||||
{value: 'admin', label: 'Admin'}
|
||||
]}
|
||||
disabled={submitting}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Storage Limit (GB)"
|
||||
name="storage_limit_gb"
|
||||
type="number"
|
||||
value={formData.storage_limit_gb}
|
||||
onChange={handleInputChange}
|
||||
error={formErrors.storage_limit_gb}
|
||||
placeholder="10"
|
||||
min="0"
|
||||
disabled={submitting}
|
||||
/>
|
||||
|
||||
<ModalActions>
|
||||
<Button
|
||||
type="button"
|
||||
variant="subtle"
|
||||
onClick={closeModal}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
loading={submitting}
|
||||
disabled={submitting}
|
||||
>
|
||||
{editingUser ? 'Update User' : 'Create User'}
|
||||
</Button>
|
||||
</ModalActions>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserManagement;
|
||||
1
webui/src/pages/UserManagement/index.js
Normal file
1
webui/src/pages/UserManagement/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './UserManagement.jsx';
|
||||
39
webui/src/pages/UserManagement/styles.sass
Normal file
39
webui/src/pages/UserManagement/styles.sass
Normal file
@@ -0,0 +1,39 @@
|
||||
.user-card-header
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
gap: 1rem
|
||||
|
||||
.user-info
|
||||
flex: 1
|
||||
min-width: 0
|
||||
|
||||
.user-name
|
||||
font-size: 1.1rem
|
||||
font-weight: 600
|
||||
color: var(--text)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.user-role
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
color: var(--text-dim)
|
||||
font-size: 0.85rem
|
||||
|
||||
.user-actions
|
||||
display: flex
|
||||
gap: 0.5rem
|
||||
flex-shrink: 0
|
||||
|
||||
.modal-form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 1.25rem
|
||||
|
||||
@media (max-width: 768px)
|
||||
.user-card-header
|
||||
flex-direction: column
|
||||
text-align: center
|
||||
|
||||
.user-actions
|
||||
justify-content: center
|
||||
Reference in New Issue
Block a user