kasperj/turftracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin stuff

Browse Source
This commit is contained in:
Jake Kasper
2025-08-29 08:59:10 -04:00
parent 0cc5372e3d
commit 8c728d42d4
6 changed files with 485 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/pages/Admin/AdminDashboard.js
View File

@@ -3,18 +3,25 @@ import { Link } from 'react-router-dom';
import { UsersIcon, CogIcon, BuildingOfficeIcon, ChartBarIcon } from '@heroicons/react/24/outline';
import { adminAPI } from '../../services/api';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import toast from 'react-hot-toast';
const AdminDashboard = () => {
const [stats, setStats] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [registrationEnabled, setRegistrationEnabled] = useState(true);
const [updatingRegistration, setUpdatingRegistration] = useState(false);
useEffect(() => {
const fetchDashboardData = async () => {
try {
setLoading(true);
const response = await adminAPI.getDashboard();
setStats(response.data.data);
const [dashboardResponse, settingsResponse] = await Promise.all([
adminAPI.getDashboard(),
adminAPI.getSettings()
]);
setStats(dashboardResponse.data.data);
setRegistrationEnabled(settingsResponse.data.data.registrationEnabled);
setError(null);
} catch (err) {
console.error('Failed to fetch admin dashboard:', err);
@@ -27,6 +34,20 @@ const AdminDashboard = () => {
fetchDashboardData();
}, []);
const handleRegistrationToggle = async () => {
try {
setUpdatingRegistration(true);
await adminAPI.updateSettings({ registrationEnabled: !registrationEnabled });
setRegistrationEnabled(!registrationEnabled);
toast.success(`Registration ${!registrationEnabled ? 'enabled' : 'disabled'} successfully`);
} catch (err) {
console.error('Failed to update registration setting:', err);
toast.error('Failed to update registration setting');
} finally {
setUpdatingRegistration(false);
}
};
if (loading) {
return (
<div className="p-6">
@@ -113,8 +134,8 @@ const AdminDashboard = () => {
))}
</div>
{/* Quick Actions */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Quick Actions and Settings */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="card">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
<div className="space-y-3">
@@ -139,6 +160,33 @@ const AdminDashboard = () => {
<div className="font-medium text-gray-900">Manage Equipment</div>
<div className="text-sm text-gray-500">Add and manage lawn care equipment</div>
</Link>
</div>
</div>
<div className="card">
<h3 className="text-lg font-semibold text-gray-900 mb-4">System Settings</h3>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 rounded-lg border border-gray-200">
<div>
<div className="font-medium text-gray-900">User Registration</div>
<div className="text-sm text-gray-500">
{registrationEnabled ? 'New users can register' : 'Registration is disabled'}
</div>
</div>
<button
onClick={handleRegistrationToggle}
disabled={updatingRegistration}
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
registrationEnabled ? 'bg-blue-600' : 'bg-gray-200'
} ${updatingRegistration ? 'opacity-50 cursor-not-allowed' : ''}`}
>
<span
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
registrationEnabled ? 'translate-x-5' : 'translate-x-0'
}`}
/>
</button>
</div>
<button
onClick={() => window.open(`${process.env.REACT_APP_API_URL}/admin/system/health`, '_blank')}
className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"

200
frontend/src/pages/Admin/AdminUsers.js
View File

@@ -5,6 +5,7 @@ import {
UserPlusIcon,
TrashIcon,
CogIcon,
PencilIcon,
EnvelopeIcon,
KeyIcon,
ExclamationTriangleIcon
@@ -24,6 +25,15 @@ const AdminUsers = () => {
const [showRoleModal, setShowRoleModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [showInviteModal, setShowInviteModal] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);
const [editFormData, setEditFormData] = useState({
firstName: '',
lastName: '',
email: '',
role: '',
newPassword: '',
confirmPassword: ''
});
const fetchUsers = async (page = 1) => {
try {
@@ -77,6 +87,49 @@ const AdminUsers = () => {
}
};
const handleEditUser = async (e) => {
e.preventDefault();
// Validate password match if password is being changed
if (editFormData.newPassword || editFormData.confirmPassword) {
if (editFormData.newPassword !== editFormData.confirmPassword) {
toast.error('Passwords do not match');
return;
}
if (editFormData.newPassword.length < 6) {
toast.error('Password must be at least 6 characters long');
return;
}
}
try {
const updateData = {
firstName: editFormData.firstName,
lastName: editFormData.lastName,
email: editFormData.email,
role: editFormData.role,
...(editFormData.newPassword && { password: editFormData.newPassword })
};
await adminAPI.updateUser(selectedUser.id, updateData);
toast.success('User updated successfully');
setShowEditModal(false);
setSelectedUser(null);
setEditFormData({
firstName: '',
lastName: '',
email: '',
role: '',
newPassword: '',
confirmPassword: ''
});
fetchUsers(currentPage);
} catch (error) {
console.error('Failed to update user:', error);
toast.error('Failed to update user');
}
};
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString('en-US', {
year: 'numeric',
@@ -199,6 +252,24 @@ const AdminUsers = () => {
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center space-x-2">
<button
onClick={() => {
setSelectedUser(user);
setEditFormData({
firstName: user.firstName,
lastName: user.lastName,
email: user.email,
role: user.role,
newPassword: '',
confirmPassword: ''
});
setShowEditModal(true);
}}
className="text-green-600 hover:text-green-900"
title="Edit User"
>
<PencilIcon className="h-4 w-4" />
</button>
<button
onClick={() => {
setSelectedUser(user);
@@ -330,6 +401,135 @@ const AdminUsers = () => {
</div>
)}
{/* Edit User Modal */}
{showEditModal && selectedUser && (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div className="mt-3">
<h3 className="text-lg font-medium text-gray-900 mb-4">
Edit User: {selectedUser.firstName} {selectedUser.lastName}
</h3>
<form onSubmit={handleEditUser}>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
First Name
</label>
<input
type="text"
value={editFormData.firstName}
onChange={(e) => setEditFormData({ ...editFormData, firstName: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Last Name
</label>
<input
type="text"
value={editFormData.lastName}
onChange={(e) => setEditFormData({ ...editFormData, lastName: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input
type="email"
value={editFormData.email}
onChange={(e) => setEditFormData({ ...editFormData, email: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Role
</label>
<select
value={editFormData.role}
onChange={(e) => setEditFormData({ ...editFormData, role: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<div className="border-t pt-4">
<h4 className="text-sm font-medium text-gray-900 mb-3">
Password Reset (Optional)
</h4>
<div className="space-y-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
New Password
</label>
<input
type="password"
value={editFormData.newPassword}
onChange={(e) => setEditFormData({ ...editFormData, newPassword: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Leave blank to keep current password"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Confirm New Password
</label>
<input
type="password"
value={editFormData.confirmPassword}
onChange={(e) => setEditFormData({ ...editFormData, confirmPassword: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Confirm new password"
/>
</div>
</div>
</div>
</div>
<div className="flex justify-end space-x-3 mt-6">
<button
type="button"
onClick={() => {
setShowEditModal(false);
setEditFormData({
firstName: '',
lastName: '',
email: '',
role: '',
newPassword: '',
confirmPassword: ''
});
}}
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
>
Cancel
</button>
<button
type="submit"
className="px-4 py-2 text-sm text-white bg-green-600 rounded hover:bg-green-700"
>
Update User
</button>
</div>
</form>
</div>
</div>
</div>
)}
{/* Invite User Modal */}
{showInviteModal && (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">

43
frontend/src/pages/Auth/Login.js
View File

@@ -1,12 +1,15 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
import { useAuth } from '../../hooks/useAuth';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import apiClient from '../../services/api';
const Login = () => {
const [showPassword, setShowPassword] = useState(false);
const [registrationEnabled, setRegistrationEnabled] = useState(true);
const [settingsLoading, setSettingsLoading] = useState(true);
const { login, loading } = useAuth();
const navigate = useNavigate();
const location = useLocation();
@@ -20,6 +23,24 @@ const Login = () => {
setError,
} = useForm();
// Fetch registration settings
useEffect(() => {
const fetchRegistrationSetting = async () => {
try {
const response = await apiClient.get('/auth/registration-status');
setRegistrationEnabled(response.data.data.enabled);
} catch (error) {
// If there's an error, default to allowing registration
console.error('Failed to fetch registration setting:', error);
setRegistrationEnabled(true);
} finally {
setSettingsLoading(false);
}
};
fetchRegistrationSetting();
}, []);
const onSubmit = async (data) => {
console.log('Login form submitted:', data.email);
const result = await login(data);
@@ -46,15 +67,17 @@ const Login = () => {
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-gray-900">Sign in to your account</h2>
<p className="mt-2 text-sm text-gray-600">
Or{' '}
<Link
to="/register"
className="font-medium text-primary-600 hover:text-primary-500"
>
create a new account
</Link>
</p>
{!settingsLoading && registrationEnabled && (
<p className="mt-2 text-sm text-gray-600">
Or{' '}
<Link
to="/register"
className="font-medium text-primary-600 hover:text-primary-500"
>
create a new account
</Link>
</p>
)}
</div>
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>

5
frontend/src/services/api.js
View File

@@ -204,6 +204,7 @@ export const adminAPI = {
// Users management
getUsers: (params) => apiClient.get('/admin/users', { params }),
updateUser: (id, userData) => apiClient.put(`/admin/users/${id}`, userData),
updateUserRole: (id, role) => apiClient.put(`/admin/users/${id}/role`, { role }),
deleteUser: (id) => apiClient.delete(`/admin/users/${id}`),
@@ -225,6 +226,10 @@ export const adminAPI = {
// System health
getSystemHealth: () => apiClient.get('/admin/system/health'),
// Settings management
getSettings: () => apiClient.get('/admin/settings'),
updateSettings: (settings) => apiClient.put('/admin/settings', settings),
};
// Utility functions