Fix jwt-token
This commit is contained in:
@@ -11,6 +11,7 @@ import Devices from './pages/Devices';
|
||||
import Detections from './pages/Detections';
|
||||
import Alerts from './pages/Alerts';
|
||||
import Debug from './pages/Debug';
|
||||
import Settings from './pages/Settings';
|
||||
import Login from './pages/Login';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
|
||||
@@ -70,6 +71,7 @@ function App() {
|
||||
<Route path="devices" element={<Devices />} />
|
||||
<Route path="detections" element={<Detections />} />
|
||||
<Route path="alerts" element={<Alerts />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
<Route path="debug" element={<Debug />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
@@ -14,7 +14,8 @@ import {
|
||||
XMarkIcon,
|
||||
SignalIcon,
|
||||
WifiIcon,
|
||||
BugAntIcon
|
||||
BugAntIcon,
|
||||
CogIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import classNames from 'classnames';
|
||||
|
||||
@@ -27,6 +28,7 @@ const baseNavigation = [
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{ name: 'Settings', href: '/settings', icon: CogIcon },
|
||||
{ name: 'Debug', href: '/debug', icon: BugAntIcon },
|
||||
];
|
||||
|
||||
|
||||
865
client/src/pages/Settings.jsx
Normal file
865
client/src/pages/Settings.jsx
Normal file
@@ -0,0 +1,865 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import api from '../services/api';
|
||||
import toast from 'react-hot-toast';
|
||||
import {
|
||||
CogIcon,
|
||||
ShieldCheckIcon,
|
||||
PaintBrushIcon,
|
||||
UserGroupIcon,
|
||||
GlobeAltIcon,
|
||||
KeyIcon,
|
||||
EyeIcon,
|
||||
EyeSlashIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const Settings = () => {
|
||||
const { user } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState('general');
|
||||
const [tenantConfig, setTenantConfig] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Check if user has admin role
|
||||
const isAdmin = user?.role === 'admin';
|
||||
|
||||
useEffect(() => {
|
||||
fetchTenantConfig();
|
||||
}, []);
|
||||
|
||||
const fetchTenantConfig = async () => {
|
||||
try {
|
||||
// Get current tenant configuration
|
||||
const response = await api.get('/tenant/info');
|
||||
setTenantConfig(response.data.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch tenant config:', error);
|
||||
toast.error('Failed to load tenant settings');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<ShieldCheckIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Access Denied</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
You need admin privileges to access tenant settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: 'general', name: 'General', icon: CogIcon },
|
||||
{ id: 'branding', name: 'Branding', icon: PaintBrushIcon },
|
||||
{ id: 'security', name: 'Security', icon: ShieldCheckIcon },
|
||||
{ id: 'authentication', name: 'Authentication', icon: KeyIcon },
|
||||
{ id: 'users', name: 'Users', icon: UserGroupIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div className="px-4 py-6 sm:px-0">
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="sm:flex sm:items-baseline">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Tenant Settings
|
||||
</h3>
|
||||
<div className="mt-4 sm:mt-0 sm:ml-10">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`${
|
||||
activeTab === tab.id
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm flex items-center`}
|
||||
>
|
||||
<Icon className="h-5 w-5 mr-2" />
|
||||
{tab.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
{activeTab === 'general' && <GeneralSettings tenantConfig={tenantConfig} />}
|
||||
{activeTab === 'branding' && <BrandingSettings tenantConfig={tenantConfig} onRefresh={fetchTenantConfig} />}
|
||||
{activeTab === 'security' && <SecuritySettings tenantConfig={tenantConfig} onRefresh={fetchTenantConfig} />}
|
||||
{activeTab === 'authentication' && <AuthenticationSettings tenantConfig={tenantConfig} />}
|
||||
{activeTab === 'users' && <UsersSettings tenantConfig={tenantConfig} onRefresh={fetchTenantConfig} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// General Settings Component
|
||||
const GeneralSettings = ({ tenantConfig }) => (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">General Information</h3>
|
||||
<div className="mt-5 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Tenant Name</label>
|
||||
<p className="mt-1 text-sm text-gray-900">{tenantConfig?.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Tenant ID</label>
|
||||
<p className="mt-1 text-sm text-gray-500 font-mono">{tenantConfig?.slug}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Authentication Provider</label>
|
||||
<p className="mt-1 text-sm text-gray-900 uppercase">{tenantConfig?.auth_provider}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Branding Settings Component
|
||||
const BrandingSettings = ({ tenantConfig, onRefresh }) => {
|
||||
const [branding, setBranding] = useState({
|
||||
logo_url: '',
|
||||
primary_color: '#3B82F6',
|
||||
secondary_color: '#1F2937',
|
||||
company_name: ''
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (tenantConfig?.branding) {
|
||||
setBranding(tenantConfig.branding);
|
||||
}
|
||||
}, [tenantConfig]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.put('/tenant/branding', branding);
|
||||
toast.success('Branding updated successfully');
|
||||
if (onRefresh) onRefresh();
|
||||
} catch (error) {
|
||||
toast.error('Failed to update branding');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Branding & Appearance</h3>
|
||||
<div className="mt-5 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={branding.company_name}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, company_name: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Logo URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={branding.logo_url}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, logo_url: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
placeholder="https://example.com/logo.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Primary Color</label>
|
||||
<div className="mt-1 flex">
|
||||
<input
|
||||
type="color"
|
||||
value={branding.primary_color}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, primary_color: e.target.value }))}
|
||||
className="h-10 w-20 border border-gray-300 rounded-md"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={branding.primary_color}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, primary_color: e.target.value }))}
|
||||
className="ml-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Secondary Color</label>
|
||||
<div className="mt-1 flex">
|
||||
<input
|
||||
type="color"
|
||||
value={branding.secondary_color}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, secondary_color: e.target.value }))}
|
||||
className="h-10 w-20 border border-gray-300 rounded-md"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={branding.secondary_color}
|
||||
onChange={(e) => setBranding(prev => ({ ...prev, secondary_color: e.target.value }))}
|
||||
className="ml-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Branding'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Placeholder components for other tabs
|
||||
const SecuritySettings = ({ tenantConfig, onRefresh }) => {
|
||||
const [securitySettings, setSecuritySettings] = useState({
|
||||
ip_restriction_enabled: false,
|
||||
ip_whitelist: [],
|
||||
ip_restriction_message: 'Access denied. Your IP address is not authorized to access this tenant.'
|
||||
});
|
||||
const [newIP, setNewIP] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (tenantConfig) {
|
||||
setSecuritySettings({
|
||||
ip_restriction_enabled: tenantConfig.ip_restriction_enabled || false,
|
||||
ip_whitelist: tenantConfig.ip_whitelist || [],
|
||||
ip_restriction_message: tenantConfig.ip_restriction_message || 'Access denied. Your IP address is not authorized to access this tenant.'
|
||||
});
|
||||
}
|
||||
}, [tenantConfig]);
|
||||
|
||||
const addIPToWhitelist = () => {
|
||||
if (!newIP.trim()) {
|
||||
toast.error('Please enter an IP address or CIDR block');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic validation for IP format
|
||||
const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\/(?:[0-9]|[1-2][0-9]|3[0-2]))?$|^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^\d{1,3}\.\d{1,3}\.\d{1,3}\.\*$/;
|
||||
|
||||
if (!ipPattern.test(newIP.trim())) {
|
||||
toast.error('Please enter a valid IP address, CIDR block (e.g., 192.168.1.0/24), or wildcard (e.g., 192.168.1.*)');
|
||||
return;
|
||||
}
|
||||
|
||||
const ip = newIP.trim();
|
||||
if (securitySettings.ip_whitelist.includes(ip)) {
|
||||
toast.error('This IP is already in the whitelist');
|
||||
return;
|
||||
}
|
||||
|
||||
setSecuritySettings(prev => ({
|
||||
...prev,
|
||||
ip_whitelist: [...prev.ip_whitelist, ip]
|
||||
}));
|
||||
setNewIP('');
|
||||
toast.success('IP added to whitelist');
|
||||
};
|
||||
|
||||
const removeIPFromWhitelist = (ipToRemove) => {
|
||||
setSecuritySettings(prev => ({
|
||||
...prev,
|
||||
ip_whitelist: prev.ip_whitelist.filter(ip => ip !== ipToRemove)
|
||||
}));
|
||||
toast.success('IP removed from whitelist');
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.put('/tenant/security', securitySettings);
|
||||
toast.success('Security settings updated successfully');
|
||||
if (onRefresh) onRefresh();
|
||||
} catch (error) {
|
||||
console.error('Failed to update security settings:', error);
|
||||
toast.error('Failed to update security settings');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Security Settings</h3>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* IP Restriction Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-gray-900">IP Access Control</h4>
|
||||
<p className="text-sm text-gray-500">
|
||||
Restrict access to this tenant to specific IP addresses
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ip_restriction_enabled"
|
||||
checked={securitySettings.ip_restriction_enabled}
|
||||
onChange={(e) => setSecuritySettings(prev => ({
|
||||
...prev,
|
||||
ip_restriction_enabled: e.target.checked
|
||||
}))}
|
||||
className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="ip_restriction_enabled" className="ml-2 text-sm font-medium text-gray-700">
|
||||
Enable IP Restrictions
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IP Restriction Configuration */}
|
||||
{securitySettings.ip_restriction_enabled && (
|
||||
<div className="space-y-4 p-4 bg-gray-50 rounded-lg border">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
|
||||
<div className="flex">
|
||||
<div className="ml-3">
|
||||
<h3 className="text-sm font-medium text-yellow-800">
|
||||
⚠️ Important Security Notes
|
||||
</h3>
|
||||
<div className="mt-1 text-sm text-yellow-700">
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>Make sure to include your current IP to avoid being locked out</li>
|
||||
<li>IP restrictions apply to all tenant access including login and API calls</li>
|
||||
<li>Use CIDR notation for IP ranges (e.g., 192.168.1.0/24)</li>
|
||||
<li>Use wildcards for partial matching (e.g., 192.168.1.*)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add IP Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Add IP Address or Range
|
||||
</label>
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter IP address (e.g., 192.168.1.100, 10.0.0.0/24, or 192.168.1.*)"
|
||||
value={newIP}
|
||||
onChange={(e) => setNewIP(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addIPToWhitelist();
|
||||
}
|
||||
}}
|
||||
className="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addIPToWhitelist}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
|
||||
>
|
||||
Add IP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IP Whitelist */}
|
||||
{securitySettings.ip_whitelist.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Allowed IP Addresses ({securitySettings.ip_whitelist.length})
|
||||
</label>
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto">
|
||||
{securitySettings.ip_whitelist.map((ip, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-white px-3 py-2 rounded border">
|
||||
<span className="text-sm font-mono">{ip}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeIPFromWhitelist(ip)}
|
||||
className="text-red-600 hover:text-red-800 text-sm"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Custom restriction message */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Access Denied Message
|
||||
</label>
|
||||
<textarea
|
||||
value={securitySettings.ip_restriction_message}
|
||||
onChange={(e) => setSecuritySettings(prev => ({
|
||||
...prev,
|
||||
ip_restriction_message: e.target.value
|
||||
}))}
|
||||
rows={3}
|
||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
placeholder="Message shown when access is denied due to IP restrictions"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
This message will be shown to users whose IP is not in the whitelist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AuthenticationSettings = () => (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Authentication Settings</h3>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Authentication provider configuration will be available here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const UsersSettings = ({ tenantConfig, onRefresh }) => {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCreateUser, setShowCreateUser] = useState(false);
|
||||
|
||||
const authProvider = tenantConfig?.auth_provider;
|
||||
const canManageUsers = authProvider === 'local'; // Only local auth allows user management
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const response = await api.get('/tenant/users');
|
||||
setUsers(response.data.data || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
toast.error('Failed to load users');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">User Management</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{authProvider === 'local'
|
||||
? 'Manage local users for this tenant'
|
||||
: `Users are managed through ${authProvider.toUpperCase()}. Showing read-only information.`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
{canManageUsers && (
|
||||
<button
|
||||
onClick={() => setShowCreateUser(true)}
|
||||
className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700"
|
||||
>
|
||||
Add User
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Authentication Provider Info */}
|
||||
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<div className="flex items-center">
|
||||
<KeyIcon className="h-5 w-5 text-blue-400 mr-2" />
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-blue-800">
|
||||
Authentication Provider: {authProvider?.toUpperCase()}
|
||||
</h4>
|
||||
<p className="text-sm text-blue-700">
|
||||
{authProvider === 'local' && 'Local authentication - Users are managed directly in this system.'}
|
||||
{authProvider === 'saml' && 'SAML SSO - Users authenticate through your SAML identity provider.'}
|
||||
{authProvider === 'oauth' && 'OAuth - Users authenticate through your OAuth provider.'}
|
||||
{authProvider === 'ldap' && 'LDAP/Active Directory - Users authenticate through your directory service.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users List */}
|
||||
{users.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<UserGroupIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No users found</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
{canManageUsers
|
||||
? 'Get started by creating a new user.'
|
||||
: 'Users will appear here when they log in through your authentication provider.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
User
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Role
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Last Login
|
||||
</th>
|
||||
{canManageUsers && (
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">{user.username}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
|
||||
user.role === 'admin'
|
||||
? 'bg-purple-100 text-purple-800'
|
||||
: user.role === 'operator'
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{user.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
|
||||
user.is_active
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{user.is_active ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{user.last_login
|
||||
? new Date(user.last_login).toLocaleDateString()
|
||||
: 'Never'
|
||||
}
|
||||
</td>
|
||||
{canManageUsers && (
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<button
|
||||
onClick={() => handleEditUser(user)}
|
||||
className="text-primary-600 hover:text-primary-900 mr-4"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleToggleUserStatus(user)}
|
||||
className={user.is_active
|
||||
? 'text-red-600 hover:text-red-900'
|
||||
: 'text-green-600 hover:text-green-900'
|
||||
}
|
||||
>
|
||||
{user.is_active ? 'Deactivate' : 'Activate'}
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Non-Local Auth Guidance */}
|
||||
{!canManageUsers && (
|
||||
<div className="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-md">
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">
|
||||
User Management for {authProvider?.toUpperCase()}
|
||||
</h4>
|
||||
<div className="text-sm text-gray-700 space-y-2">
|
||||
{authProvider === 'saml' && (
|
||||
<div>
|
||||
<p>• Users are managed in your SAML identity provider</p>
|
||||
<p>• Role assignments can be configured in the Authentication tab</p>
|
||||
<p>• User information is synced automatically during login</p>
|
||||
</div>
|
||||
)}
|
||||
{authProvider === 'oauth' && (
|
||||
<div>
|
||||
<p>• Users authenticate through your OAuth provider</p>
|
||||
<p>• Role mappings can be configured based on OAuth claims</p>
|
||||
<p>• User information is retrieved from the OAuth provider</p>
|
||||
</div>
|
||||
)}
|
||||
{authProvider === 'ldap' && (
|
||||
<div>
|
||||
<p>• Users are managed in your LDAP/Active Directory</p>
|
||||
<p>• Group-to-role mappings can be configured in Authentication settings</p>
|
||||
<p>• User information is synced from the directory during login</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create User Modal for Local Auth */}
|
||||
{showCreateUser && canManageUsers && (
|
||||
<CreateUserModal
|
||||
isOpen={showCreateUser}
|
||||
onClose={() => setShowCreateUser(false)}
|
||||
onUserCreated={() => {
|
||||
fetchUsers();
|
||||
setShowCreateUser(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Helper functions for local user management
|
||||
const handleEditUser = (user) => {
|
||||
// TODO: Implement edit user modal
|
||||
toast.info('Edit user functionality coming soon');
|
||||
};
|
||||
|
||||
const handleToggleUserStatus = async (user) => {
|
||||
try {
|
||||
await api.put(`/tenant/users/${user.id}/status`, {
|
||||
is_active: !user.is_active
|
||||
});
|
||||
toast.success(`User ${user.is_active ? 'deactivated' : 'activated'} successfully`);
|
||||
fetchUsers();
|
||||
} catch (error) {
|
||||
toast.error('Failed to update user status');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Create User Modal Component (for local auth only)
|
||||
const CreateUserModal = ({ isOpen, onClose, onUserCreated }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'viewer',
|
||||
is_active: true
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
await api.post('/tenant/users', formData);
|
||||
toast.success('User created successfully');
|
||||
onUserCreated();
|
||||
setFormData({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'viewer',
|
||||
is_active: true
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error('Failed to create user');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose}></div>
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="w-full">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
|
||||
Create New User
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Password</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeSlashIcon className="h-5 w-5 text-gray-400" />
|
||||
) : (
|
||||
<EyeIcon className="h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Role</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, role: e.target.value }))}
|
||||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="operator">Operator</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="is_active"
|
||||
checked={formData.is_active}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, is_active: e.target.checked }))}
|
||||
className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="is_active" className="ml-2 text-sm font-medium text-gray-700">
|
||||
Active User
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Creating...' : 'Create User'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
Reference in New Issue
Block a user