style: ui readability refactor v1.2.2 (removed uppercase, tracking, increased font sizes)
This commit is contained in:
Daniel Bedeleanu
682
frontend/app/admin/page.tsx
Normal file
682
frontend/app/admin/page.tsx
Normal file
@@ -0,0 +1,682 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { inventoryApi } from '@/lib/api';
|
||||
import PageShell from '@/components/PageShell';
|
||||
import {
|
||||
Shield,
|
||||
UserPlus,
|
||||
User,
|
||||
Trash2,
|
||||
Tag,
|
||||
Plus,
|
||||
AlertTriangle,
|
||||
LogOut,
|
||||
Database,
|
||||
History,
|
||||
Lock,
|
||||
Edit2,
|
||||
X,
|
||||
Server,
|
||||
Globe,
|
||||
Wifi,
|
||||
WifiOff
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function AdminPage() {
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [categories, setCategories] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// LDAP Config State
|
||||
const [ldapConfig, setLdapConfig] = useState<any>({
|
||||
ldap_enabled: false,
|
||||
server_uri: 'ldap://192.168.84.107:3890',
|
||||
base_dn: 'dc=example,dc=com',
|
||||
user_template: 'cn={username},ou=people,dc=example,dc=com',
|
||||
required_group: 'inventory',
|
||||
groups_dn: 'ou=groups',
|
||||
use_tls: false,
|
||||
role_mappings: []
|
||||
});
|
||||
const [testingLdap, setTestingLdap] = useState(false);
|
||||
|
||||
// Edit States
|
||||
const [editingUser, setEditingUser] = useState<any | null>(null);
|
||||
const [editUserForm, setEditUserForm] = useState({ username: '', password: '', role: 'user' });
|
||||
|
||||
const [editingCategory, setEditingCategory] = useState<any | null>(null);
|
||||
const [editCatForm, setEditCatForm] = useState({ name: '', description: '' });
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [u, c, l] = await Promise.all([
|
||||
inventoryApi.getUsers(),
|
||||
inventoryApi.getCategories(),
|
||||
inventoryApi.getLdapConfig()
|
||||
]);
|
||||
setUsers(u);
|
||||
setCategories(c);
|
||||
if (l && l.server_uri) setLdapConfig(l);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Failed to load admin data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddUser = async () => {
|
||||
const name = prompt("Enter new username:");
|
||||
if (!name) return;
|
||||
const pwd = prompt("Enter password for " + name + ":");
|
||||
if (!pwd) return;
|
||||
|
||||
try {
|
||||
await inventoryApi.createUser({ username: name, password: pwd, role: 'user' });
|
||||
toast.success("User created successfully");
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error("Failed to create user");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (id: number, username: string) => {
|
||||
if (username === 'Admin') return;
|
||||
if (!confirm(`Delete user ${username}?`)) return;
|
||||
|
||||
try {
|
||||
await inventoryApi.deleteUser(id);
|
||||
toast.success("User removed");
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error("Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = async () => {
|
||||
const name = prompt("New category name:");
|
||||
if (!name) return;
|
||||
const desc = prompt("Description (optional):");
|
||||
|
||||
try {
|
||||
await inventoryApi.createCategory({ name, description: desc });
|
||||
toast.success("Category added");
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error("Failed to add category");
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateCategorySubmit = async () => {
|
||||
if (!editingCategory) return;
|
||||
try {
|
||||
await inventoryApi.updateCategory(editingCategory.id, editCatForm);
|
||||
toast.success("Category updated");
|
||||
setEditingCategory(null);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error("Update failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCategory = async (id: number, name: string) => {
|
||||
if (!confirm(`Delete category ${name}?`)) return;
|
||||
|
||||
try {
|
||||
await inventoryApi.deleteCategory(id);
|
||||
toast.success("Category removed");
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error(err.response?.data?.detail || "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateUserSubmit = async () => {
|
||||
if (!editingUser) return;
|
||||
try {
|
||||
const payload: any = { username: editUserForm.username, role: editUserForm.role };
|
||||
if (editUserForm.password) payload.password = editUserForm.password;
|
||||
|
||||
await inventoryApi.updateUser(editingUser.id, payload);
|
||||
toast.success("User updated successfully");
|
||||
setEditingUser(null);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
toast.error("Update failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('inventory_user');
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
return (
|
||||
<PageShell requireAdmin={true}>
|
||||
<main className="p-4 md:p-8 max-w-6xl mx-auto space-y-16">
|
||||
<header className="flex items-center gap-6">
|
||||
<div className="p-4 bg-primary/10 rounded-3xl text-primary border border-primary/20 shadow-xl shadow-primary/5">
|
||||
<Shield size={40} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-white">System Admin</h1>
|
||||
<p className="text-xs text-slate-500 font-bold mt-1">Enterprise Control Center</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* User Management Section */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<User size={20} className="text-primary" />
|
||||
<h2 className="text-lg font-black text-white">User Accounts</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddUser}
|
||||
className="flex items-center justify-center gap-2 bg-primary/10 hover:bg-primary text-primary hover:text-white font-black text-xs px-4 py-2 rounded-xl transition-all border border-primary/20 active:scale-95"
|
||||
>
|
||||
<UserPlus size={14} /> Add Local User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{/* Local Users Group */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<h3 className="text-sm font-black text-white">Local Users (Manual)</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-900/40 border border-slate-800/50 rounded-3xl overflow-hidden shadow-xl divide-y divide-slate-800/50">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center animate-pulse text-slate-600 text-xs font-black">Loading...</div>
|
||||
) : (
|
||||
users.filter(u => (u.origin || 'local') === 'local').map(u => (
|
||||
<div key={u.id} className="flex items-center justify-between p-4 hover:bg-slate-800/30 transition-all group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn(
|
||||
"p-2.5 rounded-xl",
|
||||
u.role === 'admin' ? "bg-primary/10 text-primary border border-primary/20" : "bg-slate-800 text-slate-500 border border-slate-700"
|
||||
)}>
|
||||
{u.role === 'admin' ? <Shield size={16} /> : <User size={16} />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-bold text-white group-hover:text-primary transition-colors">{u.username}</p>
|
||||
<span className="text-[8px] font-black text-slate-500 opacity-60 bg-slate-800/50 px-1.5 py-0.5 rounded-md border border-slate-700/50 font-mono tracking-tighter">{u.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 transition-opacity pr-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingUser(u);
|
||||
setEditUserForm({ username: u.username, password: '', role: u.role });
|
||||
}}
|
||||
title="Edit User"
|
||||
className="p-2.5 bg-slate-800/50 hover:bg-slate-700 text-slate-400 hover:text-white rounded-lg transition-all border border-slate-700/50"
|
||||
>
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
{u.username !== 'Admin' && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(u.id, u.username)}
|
||||
title="Delete User"
|
||||
className="p-2.5 bg-rose-500/5 hover:bg-rose-500 text-rose-500 hover:text-white rounded-lg transition-all border border-rose-500/10"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* enterprise Users Group */}
|
||||
{users.some(u => u.origin === 'ldap') && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-indigo-500" />
|
||||
<h3 className="text-sm font-black text-white">Enterprise (LDAP) Users</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-indigo-500/5 border border-indigo-500/10 rounded-3xl overflow-hidden shadow-xl divide-y divide-indigo-500/10">
|
||||
{users.filter(u => u.origin === 'ldap').map(u => (
|
||||
<div key={u.id} className="flex items-center justify-between p-4 hover:bg-indigo-500/10 transition-all group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn(
|
||||
"p-2.5 rounded-xl",
|
||||
u.role === 'admin' ? "bg-indigo-500/20 text-indigo-400 border border-indigo-400/20" : "bg-slate-800/50 text-slate-500 border border-slate-800"
|
||||
)}>
|
||||
<Shield size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="text-sm font-bold text-white">{u.username}</p>
|
||||
<span className="text-[8px] bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-1.5 py-0.5 rounded-md font-black">Network Sync</span>
|
||||
<span className="text-[8px] font-black text-slate-500 opacity-60 bg-slate-800/50 px-1.5 py-0.5 rounded-md border border-slate-700/50 font-mono tracking-tighter">{u.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs font-black text-indigo-400/50 pr-4 truncate max-w-[150px] italic">
|
||||
Read Only Profile
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Category Management Section */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Tag size={20} className="text-primary" />
|
||||
<h2 className="text-lg font-black text-white">Category Groups</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddCategory}
|
||||
className="flex items-center justify-center gap-2 bg-primary/10 hover:bg-primary text-primary hover:text-white font-black text-xs px-4 py-2 rounded-xl transition-all border border-primary/20 active:scale-95"
|
||||
>
|
||||
<Plus size={14} /> Add New Group
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/40 border border-slate-800/50 rounded-3xl overflow-hidden shadow-xl divide-y divide-slate-800/50">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center animate-pulse text-slate-600 text-xs font-black">Loading Categories...</div>
|
||||
) : (
|
||||
categories.map(cat => (
|
||||
<div key={cat.id} className="flex items-center justify-between p-4 hover:bg-slate-800/30 transition-all group">
|
||||
<div className="flex items-center gap-4 min-w-0 flex-1">
|
||||
<div className="p-2.5 bg-slate-800 text-slate-500 rounded-xl border border-slate-700 shadow-inner group-hover:text-primary transition-all shrink-0">
|
||||
<Tag size={16} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-bold text-white group-hover:text-primary transition-colors truncate">{cat.name}</p>
|
||||
<p className="text-xs text-slate-500 font-medium truncate opacity-60">
|
||||
{cat.description || 'General Purpose Group'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 transition-opacity ml-4 pr-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingCategory(cat);
|
||||
setEditCatForm({ name: cat.name, description: cat.description || '' });
|
||||
}}
|
||||
title="Edit Category"
|
||||
className="p-2.5 bg-slate-800/50 hover:bg-slate-700 text-slate-400 hover:text-white rounded-lg transition-all border border-slate-700/50"
|
||||
>
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteCategory(cat.id, cat.name)}
|
||||
title="Delete Category"
|
||||
className="p-2.5 bg-rose-500/5 hover:bg-rose-500 text-rose-500 hover:text-white rounded-lg transition-all border border-rose-500/10"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{categories.length === 0 && !loading && (
|
||||
<div className="p-8 text-center text-slate-600 text-xs font-black italic">
|
||||
No categories defined
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* System Settings Section */}
|
||||
<div className="pt-8 border-t border-slate-900">
|
||||
<section className="p-8 bg-slate-900/50 rounded-[3rem] border border-slate-800 flex flex-col items-center text-center gap-6 shadow-inner">
|
||||
<div className="w-16 h-16 bg-primary/10 rounded-3xl flex items-center justify-center text-primary border border-primary/20 shadow-lg shadow-primary/5">
|
||||
<Database size={32} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-black text-white tracking-tight">System Integrity</h3>
|
||||
<p className="text-xs text-slate-500 mt-3 max-w-[280px] mx-auto leading-relaxed">
|
||||
Hybrid storage model active. Real-time synchronization between local memory and cloud-hosted SQLite.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-slate-950 px-6 py-2.5 rounded-full border border-slate-800 shadow-2xl">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
|
||||
<span className="text-xs font-black text-green-500">Storage Online</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Enterprise LDAP Integration */}
|
||||
<section className="space-y-8 bg-slate-900/30 border border-slate-800/40 p-8 rounded-[3rem] shadow-2xl relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<Globe size={120} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 px-2 relative z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-4 bg-indigo-500/10 rounded-2xl text-indigo-400 border border-indigo-500/20">
|
||||
<Server size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-black text-white">Enterprise Integration</h2>
|
||||
<p className="text-xs text-slate-500 font-bold mt-1">LLDAP / Active Directory Connectivity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 bg-slate-950 p-2 rounded-2xl border border-slate-800">
|
||||
<span className="text-xs font-black text-slate-400 px-3">LDAP Status</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newConfig = { ...ldapConfig, ldap_enabled: !ldapConfig.ldap_enabled };
|
||||
setLdapConfig(newConfig);
|
||||
inventoryApi.updateLdapConfig(newConfig);
|
||||
toast.success(`LDAP ${newConfig.ldap_enabled ? 'Enabled' : 'Disabled'}`);
|
||||
}}
|
||||
className={cn(
|
||||
"px-6 py-2 rounded-xl text-xs font-black transition-all",
|
||||
ldapConfig.ldap_enabled ? "bg-green-500/10 text-green-500 border border-green-500/20" : "bg-slate-800 text-slate-500"
|
||||
)}
|
||||
>
|
||||
{ldapConfig.ldap_enabled ? 'Active' : 'Offline'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8 relative z-10">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Server URI</label>
|
||||
<div className="relative group/input">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-600 group-focus-within/input:text-indigo-400 transition-colors">
|
||||
<Wifi size={16} />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={ldapConfig.server_uri || ''}
|
||||
onChange={(e) => setLdapConfig({ ...ldapConfig, server_uri: e.target.value })}
|
||||
placeholder="ldap://192.168.84.107:3890"
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-indigo-500/50 rounded-2xl py-4 pl-12 pr-5 text-white outline-none transition-all font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Base DN (Suffix)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={ldapConfig.base_dn || ''}
|
||||
onChange={(e) => setLdapConfig({ ...ldapConfig, base_dn: e.target.value })}
|
||||
placeholder="dc=example,dc=com"
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-indigo-500/50 rounded-2xl py-4 px-5 text-white outline-none transition-all font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">User DN Template</label>
|
||||
<input
|
||||
type="text"
|
||||
value={ldapConfig.user_template || ''}
|
||||
onChange={(e) => setLdapConfig({ ...ldapConfig, user_template: e.target.value })}
|
||||
placeholder="uid={username},ou=people,dc=..."
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-indigo-500/50 rounded-2xl py-4 px-5 text-white outline-none transition-all font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<label className="text-xs font-black text-slate-500">Role Mappings</label>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newMappings = [...(ldapConfig.role_mappings || []), { group: '', role: 'user' }];
|
||||
setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
|
||||
}}
|
||||
className="text-xs font-black text-indigo-400 hover:text-indigo-300 transition-colors"
|
||||
>
|
||||
+ Add Mapping
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[180px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{(ldapConfig.role_mappings || []).map((mapping: any, idx: number) => (
|
||||
<div key={idx} className="flex gap-2 items-center bg-slate-950/50 p-3 rounded-2xl border border-slate-800/50">
|
||||
<input
|
||||
type="text"
|
||||
value={mapping.group}
|
||||
onChange={(e) => {
|
||||
const newMappings = [...ldapConfig.role_mappings];
|
||||
newMappings[idx].group = e.target.value;
|
||||
setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
|
||||
}}
|
||||
placeholder="Group CN (e.g. admins)"
|
||||
className="flex-1 bg-transparent text-xs font-mono text-white outline-none"
|
||||
/>
|
||||
<select
|
||||
value={mapping.role}
|
||||
onChange={(e) => {
|
||||
const newMappings = [...ldapConfig.role_mappings];
|
||||
newMappings[idx].role = e.target.value;
|
||||
setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
|
||||
}}
|
||||
className="bg-slate-900 text-xs font-bold text-slate-400 px-2 py-1 rounded-lg border border-slate-700 outline-none"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newMappings = ldapConfig.role_mappings.filter((_: any, i: number) => i !== idx);
|
||||
setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
|
||||
}}
|
||||
className="text-slate-600 hover:text-red-400 p-1"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{(ldapConfig.role_mappings || []).length === 0 && (
|
||||
<div className="text-center py-4 border border-dashed border-slate-800 rounded-2xl text-xs text-slate-600">
|
||||
No roles mapped
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-slate-950 rounded-3xl border border-slate-800 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Lock size={16} className="text-slate-500" />
|
||||
<span className="text-sm font-bold text-slate-300">Encrypted Connection (TLS)</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setLdapConfig({ ...ldapConfig, use_tls: !ldapConfig.use_tls })}
|
||||
className={cn(
|
||||
"w-12 h-6 rounded-full relative transition-all",
|
||||
ldapConfig.use_tls ? "bg-indigo-500" : "bg-slate-800"
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
"absolute top-1 w-4 h-4 bg-white rounded-full transition-all",
|
||||
ldapConfig.use_tls ? "right-1" : "left-1"
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-900 flex gap-4">
|
||||
<button
|
||||
onClick={async () => {
|
||||
setTestingLdap(true);
|
||||
try {
|
||||
const res = await inventoryApi.testLdapConnection(ldapConfig);
|
||||
if (res.status === 'success') {
|
||||
toast.success("Connection Successful!");
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Network Error during test");
|
||||
} finally {
|
||||
setTestingLdap(false);
|
||||
}
|
||||
}}
|
||||
disabled={testingLdap}
|
||||
className="flex-1 bg-slate-900 hover:bg-slate-800 text-xs font-black py-4 rounded-xl border border-slate-800 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
{testingLdap ? <div className="w-4 h-4 border-2 border-indigo-400 border-t-transparent animate-spin rounded-full" /> : <Wifi size={14} />}
|
||||
Test Link
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={async () => {
|
||||
await inventoryApi.updateLdapConfig(ldapConfig);
|
||||
toast.success("Settings applied");
|
||||
}}
|
||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 shadow-lg shadow-indigo-900/20 text-white text-xs font-black py-4 rounded-xl transition-all"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
|
||||
<AlertTriangle size={16} className="text-indigo-400 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-indigo-300/60 leading-normal italic">
|
||||
LLDAP usually serves LDAP on port 3890. Ensure your firewall allows traffic on this port between the inventory server and 192.168.84.107.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Edit User Modal */}
|
||||
{editingUser && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-md w-full shadow-2xl space-y-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-primary/10 rounded-xl text-primary border border-primary/20">
|
||||
<User size={20} />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-white tracking-tight">Edit Profile</h3>
|
||||
</div>
|
||||
<button onClick={() => setEditingUser(null)} className="p-2 hover:bg-slate-800 rounded-lg text-slate-500 transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
disabled={editingUser.username === 'Admin'}
|
||||
value={editUserForm.username}
|
||||
onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })}
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all disabled:opacity-50"
|
||||
/>
|
||||
{editingUser.username === 'Admin' && <p className="text-xs text-amber-500/60 font-bold px-1 italic">Default Admin name is protected</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">New Password (leave empty to keep current)</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={editUserForm.password}
|
||||
onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })}
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Access Role</label>
|
||||
<select
|
||||
value={editUserForm.role}
|
||||
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all appearance-none"
|
||||
>
|
||||
<option value="user">USER (Standard)</option>
|
||||
<option value="admin">ADMIN (Root Access)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpdateUserSubmit}
|
||||
className="w-full bg-primary text-white font-black py-5 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
|
||||
>
|
||||
Save Profile Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Category Modal */}
|
||||
{editingCategory && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-md w-full shadow-2xl space-y-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-primary/10 rounded-xl text-primary border border-primary/20">
|
||||
<Tag size={20} />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-white tracking-tight">Edit Group</h3>
|
||||
</div>
|
||||
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-lg text-slate-500 transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Group Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editCatForm.name}
|
||||
onChange={(e) => setEditCatForm({ ...editCatForm, name: e.target.value })}
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black text-slate-500 px-1">Description</label>
|
||||
<textarea
|
||||
value={editCatForm.description}
|
||||
onChange={(e) => setEditCatForm({ ...editCatForm, description: e.target.value })}
|
||||
className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all h-32 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpdateCategorySubmit}
|
||||
className="w-full bg-primary text-white font-black py-5 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
|
||||
>
|
||||
Save Group Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user