Se termina con Tokens y Modulo Usuarios
This commit is contained in:
@@ -337,10 +337,7 @@ function DashboardPage({ user, setUser }) {
|
||||
) : activeTab === 'api-tokens' ? (
|
||||
<APITokensTab user={user} />
|
||||
) : activeTab === 'users' ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-xl text-gray-400">👥</div>
|
||||
<div className="text-gray-500 mt-2">Módulo de Usuarios en desarrollo...</div>
|
||||
</div>
|
||||
<UsersTab user={user} />
|
||||
) : activeTab === 'reports' ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-xl text-gray-400">📊</div>
|
||||
@@ -2715,6 +2712,435 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
|
||||
)
|
||||
}
|
||||
|
||||
// Componente de Gestión de Usuarios (Admin)
|
||||
function UsersTab({ user }) {
|
||||
const [users, setUsers] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showCreateForm, setShowCreateForm] = useState(false)
|
||||
const [editingUser, setEditingUser] = useState(null)
|
||||
const [showInactive, setShowInactive] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'mechanic'
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
loadUsers()
|
||||
}, [])
|
||||
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch('/api/users', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setUsers(data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateUser = async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setShowCreateForm(false)
|
||||
setFormData({ username: '', email: '', password: '', role: 'mechanic' })
|
||||
loadUsers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al crear usuario')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating user:', error)
|
||||
alert('Error al crear usuario')
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateUser = async (userId, updates) => {
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`/api/users/${userId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(updates)
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setEditingUser(null)
|
||||
loadUsers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al actualizar usuario')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating user:', error)
|
||||
alert('Error al actualizar usuario')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeactivateUser = async (userId) => {
|
||||
if (!confirm('¿Está seguro que desea desactivar este usuario?')) return
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`/api/users/${userId}/deactivate`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
loadUsers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al desactivar usuario')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deactivating user:', error)
|
||||
alert('Error al desactivar usuario')
|
||||
}
|
||||
}
|
||||
|
||||
const handleActivateUser = async (userId) => {
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`/api/users/${userId}/activate`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
loadUsers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al activar usuario')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error activating user:', error)
|
||||
alert('Error al activar usuario')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-12">Cargando usuarios...</div>
|
||||
}
|
||||
|
||||
const filteredUsers = showInactive ? users : users.filter(u => u.is_active)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Gestión de Usuarios</h2>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowInactive(!showInactive)}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
showInactive
|
||||
? 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{showInactive ? '👁️ Ocultar Inactivos' : '👁️🗨️ Mostrar Inactivos'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition"
|
||||
>
|
||||
+ Nuevo Usuario
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de usuarios */}
|
||||
<div className="grid gap-4">
|
||||
{filteredUsers.map(u => (
|
||||
<div key={u.id} className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">
|
||||
{u.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-800">{u.username}</h3>
|
||||
<p className="text-sm text-gray-500">{u.email}</p>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<span className={`text-xs px-2 py-1 rounded ${
|
||||
u.role === 'admin'
|
||||
? 'bg-purple-100 text-purple-700'
|
||||
: 'bg-blue-100 text-blue-700'
|
||||
}`}>
|
||||
{u.role === 'admin' ? '👑 Admin' : '🔧 Mecánico'}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-1 rounded ${
|
||||
u.is_active
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{u.is_active ? 'Activo' : 'Inactivo'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user.role === 'admin' && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setEditingUser(u)}
|
||||
className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition"
|
||||
>
|
||||
✏️ Editar
|
||||
</button>
|
||||
{u.id !== user.id && (
|
||||
<>
|
||||
{u.is_active ? (
|
||||
<button
|
||||
onClick={() => handleDeactivateUser(u.id)}
|
||||
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition"
|
||||
>
|
||||
Desactivar
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleActivateUser(u.id)}
|
||||
className="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition"
|
||||
>
|
||||
Activar
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal de creación */}
|
||||
{showCreateForm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Nuevo Usuario</h3>
|
||||
<form onSubmit={handleCreateUser} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nombre de usuario
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({...formData, username: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({...formData, email: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Contraseña
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({...formData, password: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Rol
|
||||
</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData({...formData, role: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
>
|
||||
<option value="mechanic">Mecánico</option>
|
||||
<option value="admin">Administrador</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateForm(false)
|
||||
setFormData({ username: '', email: '', password: '', role: 'mechanic' })
|
||||
}}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition"
|
||||
>
|
||||
Crear Usuario
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal de edición */}
|
||||
{editingUser && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Editar Usuario</h3>
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
const updates = {
|
||||
username: editingUser.username,
|
||||
email: editingUser.email,
|
||||
role: editingUser.role
|
||||
}
|
||||
handleUpdateUser(editingUser.id, updates)
|
||||
}} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nombre de usuario
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={editingUser.username}
|
||||
onChange={(e) => setEditingUser({...editingUser, username: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={editingUser.email}
|
||||
onChange={(e) => setEditingUser({...editingUser, email: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Rol
|
||||
</label>
|
||||
<select
|
||||
value={editingUser.role}
|
||||
onChange={(e) => setEditingUser({...editingUser, role: e.target.value})}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
>
|
||||
<option value="mechanic">Mecánico</option>
|
||||
<option value="admin">Administrador</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
const newPassword = prompt('Ingrese la nueva contraseña:')
|
||||
if (newPassword && newPassword.length >= 6) {
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`/api/users/${editingUser.id}/password`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ new_password: newPassword })
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Contraseña actualizada correctamente')
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(error.detail || 'Error al actualizar contraseña')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
alert('Error al actualizar contraseña')
|
||||
}
|
||||
} else if (newPassword !== null) {
|
||||
alert('La contraseña debe tener al menos 6 caracteres')
|
||||
}
|
||||
}}
|
||||
className="w-full px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition"
|
||||
>
|
||||
🔑 Resetear Contraseña
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingUser(null)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition"
|
||||
>
|
||||
Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default App
|
||||
|
||||
|
||||
Reference in New Issue
Block a user