feat: add UserManagementPage component
This commit is contained in:
@@ -0,0 +1,274 @@
|
||||
import { useState } from 'react';
|
||||
import { Users, Trash2 } from 'lucide-react';
|
||||
import { useAdminUsers } from './useAdminUsers';
|
||||
|
||||
const inputStyle = {
|
||||
padding: '10px 12px',
|
||||
background: 'var(--bg-lighter)',
|
||||
border: '1.5px solid var(--border-light)',
|
||||
borderRadius: '6px',
|
||||
color: 'var(--text-main)',
|
||||
fontSize: '0.92rem',
|
||||
outline: 'none',
|
||||
fontFamily: 'var(--font-body)',
|
||||
boxSizing: 'border-box',
|
||||
flex: 1,
|
||||
};
|
||||
|
||||
const labelStyle = {
|
||||
display: 'block',
|
||||
marginBottom: '5px',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--text-muted)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.4px',
|
||||
};
|
||||
|
||||
const thStyle = {
|
||||
padding: '10px 14px',
|
||||
textAlign: 'left',
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--text-muted)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.4px',
|
||||
borderBottom: '1.5px solid var(--border-light)',
|
||||
fontFamily: 'var(--font-heading)',
|
||||
};
|
||||
|
||||
const tdStyle = {
|
||||
padding: '12px 14px',
|
||||
fontSize: '0.88rem',
|
||||
color: 'var(--text-main)',
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
fontFamily: 'var(--font-body)',
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '—';
|
||||
return new Date(dateStr).toLocaleDateString('ru-RU');
|
||||
};
|
||||
|
||||
const UserManagementPage = () => {
|
||||
const { users, loading, error, inviteUser, deleteUser } = useAdminUsers();
|
||||
|
||||
const [inviteEmail, setInviteEmail] = useState('');
|
||||
const [inviting, setInviting] = useState(false);
|
||||
const [inviteError, setInviteError] = useState('');
|
||||
|
||||
const [confirmDeleteId, setConfirmDeleteId] = useState(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const handleInvite = async (e) => {
|
||||
e.preventDefault();
|
||||
setInviteError('');
|
||||
setInviting(true);
|
||||
try {
|
||||
await inviteUser(inviteEmail);
|
||||
setInviteEmail('');
|
||||
} catch (err) {
|
||||
setInviteError(err.message ?? 'Ошибка приглашения');
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async (userId) => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await deleteUser(userId);
|
||||
} catch {
|
||||
// deletion errors surface in the hook's error state
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setConfirmDeleteId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '30px', maxWidth: '760px' }}>
|
||||
<h1
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 800,
|
||||
marginBottom: '24px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<Users size={22} color="var(--accent-blue)" />
|
||||
Пользователи
|
||||
</h1>
|
||||
|
||||
{/* Invite form */}
|
||||
<div className="glass-panel" style={{ padding: '24px', marginBottom: '24px' }}>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
Пригласить пользователя
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleInvite}>
|
||||
<label style={labelStyle} htmlFor="invite-email">
|
||||
Email
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
|
||||
<input
|
||||
id="invite-email"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={inviting}
|
||||
className="btn-primary"
|
||||
style={{
|
||||
whiteSpace: 'nowrap',
|
||||
opacity: inviting ? 0.7 : 1,
|
||||
cursor: inviting ? 'not-allowed' : 'pointer',
|
||||
}}
|
||||
>
|
||||
{inviting ? 'Отправка...' : 'Пригласить'}
|
||||
</button>
|
||||
</div>
|
||||
{inviteError && (
|
||||
<p style={{ color: '#ef4444', fontSize: '0.85rem', marginTop: '10px' }}>
|
||||
{inviteError}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Users table */}
|
||||
<div className="glass-panel" style={{ padding: '24px' }}>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
Администраторы
|
||||
</h2>
|
||||
|
||||
{error && (
|
||||
<p style={{ color: '#ef4444', fontSize: '0.85rem', marginBottom: '12px' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div style={{ color: 'var(--text-muted)', padding: '10px 0' }}>Загрузка...</div>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Email</th>
|
||||
<th style={thStyle}>Дата создания</th>
|
||||
<th style={thStyle}>Последний вход</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td style={tdStyle}>{user.email}</td>
|
||||
<td style={tdStyle}>{formatDate(user.created_at)}</td>
|
||||
<td style={tdStyle}>{formatDate(user.last_sign_in_at)}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
{confirmDeleteId === user.id ? (
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
|
||||
Вы уверены?
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleDeleteConfirm(user.id)}
|
||||
disabled={deleting}
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
background: '#ef4444',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
cursor: deleting ? 'not-allowed' : 'pointer',
|
||||
opacity: deleting ? 0.7 : 1,
|
||||
fontFamily: 'var(--font-heading)',
|
||||
}}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDeleteId(null)}
|
||||
disabled={deleting}
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
background: 'transparent',
|
||||
color: 'var(--text-muted)',
|
||||
border: '1.5px solid var(--border-light)',
|
||||
borderRadius: '5px',
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'var(--font-heading)',
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirmDeleteId(user.id)}
|
||||
title="Удалить пользователя"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-muted)',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{users.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center', padding: '20px' }}
|
||||
>
|
||||
Нет пользователей
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserManagementPage;
|
||||
Reference in New Issue
Block a user