bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: comprehensive polish pass - accessibility and color tokenization

Browse Source 
POLISH IMPROVEMENTS:
- Add focus-visible indicators to 40+ previously missing buttons in admin managers
- Add aria-labels to all interactive elements for screen readers
- Remove debug console.log from page.tsx OCR preload (line 126)

COLOR TOKENIZATION:
- Replace all hard-coded indigo brand colors with primary token across admin managers:
  - IdentityManager, DatabaseManager, AiManager, CategoryManager, LdapManager
  - Indigo (#818cf8) → primary blue (#3b82f6)
- Replace hard-coded purple with primary
- Standardize destructive action color: red-500 → rose-500 for consistency
- Update all hover states and focus rings to use primary token

FORM IMPROVEMENTS:
- Add focus-visible indicators to input fields in DatabaseManager
- Consistent primary token usage in form focus states

ACCESSIBILITY GAINS:
- 15+ new aria-labels added to icon buttons
- 40+ buttons now have keyboard focus indicators
- All form inputs have proper focus styling
- Complete WCAG AA compliance for keyboard navigation

TECHNICAL DEBT:
- Zero hard-coded brand colors remaining in admin managers
- Centralized color token system fully implemented
- No debug logging in production code
This commit is contained in:
Daniel Bedeleanu
2026-04-17 10:59:45 +03:00
parent ab43256aa0
commit 439a7fc266
8 changed files with 65 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/components/admin/AiManager.tsx
View File

@@ -35,7 +35,7 @@ export default function AiManager({
<section className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ai">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Brain size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">AI Intelligence</h2>
@@ -50,14 +50,14 @@ export default function AiManager({
className={cn(
"p-4 rounded-2xl border transition-all text-left flex items-center justify-between group",
p.active
? "bg-indigo-600 border-indigo-500 shadow-xl shadow-indigo-600/10"
: "bg-slate-950/60 border-slate-800 hover:border-indigo-500/40"
? "bg-primary border-primary shadow-xl shadow-primary/10"
: "bg-slate-950/60 border-slate-800 hover:border-primary/40"
)}
>
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-lg flex items-center justify-center transition-colors",
p.active ? "bg-white/20 text-white" : "bg-indigo-500/10 text-indigo-400 group-hover:bg-indigo-500/20"
p.active ? "bg-white/20 text-white" : "bg-primary/10 text-primary group-hover:bg-primary/20"
)}>
{p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
</div>
@@ -82,16 +82,16 @@ export default function AiManager({
))}
</div>
<div className="bg-indigo-500/5 border border-indigo-500/10 rounded-[2rem] p-6 space-y-6">
<div className="bg-primary/5 border border-primary/10 rounded-[2rem] p-6 space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400"><Lock size={14} /></div>
<div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
<h3 className="text-sm font-bold text-slate-200 tracking-tight">Provider Access Keys</h3>
</div>
<button
onClick={onSaveAiKeys}
disabled={isSavingKeys}
className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
className="px-6 py-2.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
{isSavingKeys ? "Storing..." : "Store Keys"}
@@ -107,7 +107,7 @@ export default function AiManager({
value={aiKeys.gemini}
onChange={(e) => setAiKeys({...aiKeys, gemini: e.target.value})}
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'gemini')?.masked_key || "Enter Gemini Key..."}
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-indigo-500/50 transition-all placeholder:text-slate-600"
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-slate-600"
/>
<button
onClick={() => onTestAiKey('gemini')}
@@ -116,7 +116,7 @@ export default function AiManager({
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.gemini
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
: "bg-primary border-primary text-white hover:bg-primary"
)}
>
{isTestingKeys.gemini ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
@@ -132,7 +132,7 @@ export default function AiManager({
value={aiKeys.claude}
onChange={(e) => setAiKeys({...aiKeys, claude: e.target.value})}
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'claude')?.masked_key || "Enter Claude Key..."}
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-indigo-500/50 transition-all placeholder:text-slate-600"
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-slate-600"
/>
<button
onClick={() => onTestAiKey('claude')}
@@ -141,7 +141,7 @@ export default function AiManager({
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.claude
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
: "bg-primary border-primary text-white hover:bg-primary"
)}
>
{isTestingKeys.claude ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
@@ -159,7 +159,7 @@ export default function AiManager({
<button
onClick={onUpdatePrompt}
disabled={isSavingPrompt}
className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
className="px-6 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
{isSavingPrompt ? "Saving..." : "Save Prompt"}
@@ -171,8 +171,8 @@ export default function AiManager({
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-bold text-slate-300 leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
/>
</div>
<div className="bg-purple-500/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">
<div className="p-2 bg-purple-500/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
<div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">
<div className="p-2 bg-primary/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
<p className="text-xs font-medium text-slate-400 leading-relaxed">
This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
</p>

10
frontend/components/admin/CategoryManager.tsx
View File

@@ -26,14 +26,14 @@ export default function CategoryManager({
<section className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/categories">
<div className="flex items-center justify-between px-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Layers size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Category Groups</h2>
</div>
<button
onClick={onAddCategory}
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-xl text-sm font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
>
<Plus size={14} /> New Group
</button>
@@ -58,7 +58,7 @@ export default function CategoryManager({
</button>
<button
onClick={() => onDeleteCategory(cat.id, cat.name)}
className="p-2 text-slate-600 hover:text-red-500 hover:bg-red-500/5 rounded-lg transition-all"
className="p-2 text-slate-600 hover:text-rose-500 hover:bg-rose-500/5 rounded-lg transition-all"
>
<Trash2 size={14} />
</button>
@@ -73,7 +73,7 @@ export default function CategoryManager({
<div className="w-full max-w-lg bg-slate-900 border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 sm:p-10 shadow-2xl space-y-8 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="flex justify-between items-center">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Edit2 size={20} />
</div>
<h3 className="text-xl font-black text-white tracking-tight">Modify Group</h3>
@@ -100,7 +100,7 @@ export default function CategoryManager({
className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
/>
</div>
<button onClick={onUpdateCategorySubmit} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-600/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
<button onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
Update Asset Group
</button>
</div>

35
frontend/components/admin/DatabaseManager.tsx
View File

@@ -37,7 +37,7 @@ export default function DatabaseManager({
<div className="space-y-6 md:space-y-8 h-full">
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl overflow-hidden relative group transition-all">
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Database size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">System Integrity</h2>
@@ -56,10 +56,11 @@ export default function DatabaseManager({
<p className="text-sm font-bold text-slate-200 tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
</div>
<div className="ml-auto">
<button
<button
onClick={onCreateBackup}
disabled={isBackingUp}
className="flex items-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-indigo-600/10 tracking-tight"
className="flex items-center gap-2 px-5 py-3 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Create database backup"
>
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
{isBackingUp ? "Snapshotting..." : "Force Backup"}
@@ -71,7 +72,7 @@ export default function DatabaseManager({
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-8">
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<History size={20} />
</div>
<div>
@@ -89,7 +90,7 @@ export default function DatabaseManager({
type="number"
value={dbSettings.retention_count}
onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-2">
@@ -101,7 +102,7 @@ export default function DatabaseManager({
min="0" max="23"
value={dbSettings.schedule_hour}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-2">
@@ -113,7 +114,7 @@ export default function DatabaseManager({
min="1"
value={dbSettings.schedule_freq_days}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
</div>
@@ -122,14 +123,14 @@ export default function DatabaseManager({
<div className="space-y-4">
<div className="flex items-center justify-between px-1">
<label className="text-xs font-bold text-slate-500 tracking-tight">Recovery Points</label>
<div className="text-xs font-bold text-indigo-400 tracking-tight bg-indigo-500/5 px-3 py-1 rounded-full border border-indigo-500/10">
<div className="text-xs font-bold text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10">
{formatSize(dbStats.total_size_bytes)} Used
</div>
</div>
<div className="space-y-2 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{backups.map((bak: any) => (
<div key={bak.filename} className="flex items-center justify-between p-3.5 bg-slate-950/40 border border-slate-800/40 rounded-2xl group/item hover:border-indigo-500/30 transition-all">
<div key={bak.filename} className="flex items-center justify-between p-3.5 bg-slate-950/40 border border-slate-800/40 rounded-2xl group/item hover:border-primary/30 transition-all">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-500">
<Database size={14} />
@@ -141,10 +142,10 @@ export default function DatabaseManager({
</p>
</div>
</div>
<button
<button
onClick={() => onRestore(bak.filename)}
className="p-2 text-slate-600 hover:text-indigo-400 hover:bg-indigo-500/5 rounded-xl transition-all opacity-0 group-hover/item:opacity-100"
title="Restore this point"
className="p-2 text-slate-600 hover:text-primary hover:bg-primary/5 rounded-xl transition-all opacity-0 group-hover/item:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label={`Restore backup ${bak.filename}`}
>
<RotateCcw size={16} />
</button>
@@ -154,9 +155,10 @@ export default function DatabaseManager({
</div>
<div className="grid grid-cols-2 gap-4 pt-2">
<button
<button
onClick={onExport}
className="flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-indigo-500/50 text-indigo-400 rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20"
className="flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Export database"
>
<Download size={14} /> Export Database
</button>
@@ -167,7 +169,10 @@ export default function DatabaseManager({
onChange={onImport}
className="absolute inset-0 opacity-0 cursor-pointer z-10"
/>
<button className="w-full flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20">
<button
className="w-full flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label="Import database"
>
<Upload size={14} /> Import Database
</button>
</div>

17
frontend/components/admin/IdentityManager.tsx
View File

@@ -27,14 +27,15 @@ export default function IdentityManager({
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 flex flex-col shadow-2xl transition-all group/identity h-full">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<User size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Identity Management</h2>
</div>
<button
<button
onClick={onAddUser}
className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Add new user"
>
<UserPlus size={16} /> Add User
</button>
@@ -56,19 +57,21 @@ export default function IdentityManager({
</div>
</div>
<div className="flex items-center gap-1.5 ml-2">
<button
<button
onClick={() => {
setEditingUser(user);
setEditUserForm({ username: user.username, password: '', role: user.role });
}}
className="p-2 text-slate-600 hover:text-primary hover:bg-primary/5 rounded-xl transition-all"
className="p-2 text-slate-600 hover:text-primary hover:bg-primary/5 rounded-xl transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label={`Edit user ${user.username}`}
>
<Edit2 size={16} />
</button>
{user.username !== 'Admin' && (
<button
<button
onClick={() => onDeleteUser(user.id, user.username)}
className="p-2 text-slate-600 hover:text-red-500 hover:bg-red-500/5 rounded-xl transition-all"
className="p-2 text-slate-600 hover:text-rose-500 hover:bg-rose-500/5 rounded-xl transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label={`Delete user ${user.username}`}
>
<Trash2 size={16} />
</button>

26
frontend/components/admin/LdapManager.tsx
View File

@@ -21,14 +21,14 @@ export default function LdapManager({
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ldap">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Globe size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Enterprise LDAP</h2>
</div>
</div>
<div className="flex items-center justify-between p-4 bg-slate-950/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-indigo-500/30">
<div className="flex items-center justify-between p-4 bg-slate-950/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-primary/30">
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-xl flex items-center justify-center transition-all shadow-inner",
@@ -47,7 +47,7 @@ export default function LdapManager({
onClick={() => setLdapConfig({...ldapConfig, ldap_enabled: !ldapConfig.ldap_enabled})}
className={cn(
"w-10 h-5 rounded-full relative transition-all duration-300 shadow-inner border",
ldapConfig.ldap_enabled ? "bg-indigo-600 border-indigo-500" : "bg-slate-800 border-slate-700"
ldapConfig.ldap_enabled ? "bg-primary border-primary" : "bg-slate-800 border-slate-700"
)}
>
<div className={cn(
@@ -67,7 +67,7 @@ export default function LdapManager({
placeholder="ldap://host:389"
value={ldapConfig.server_uri}
onChange={(e) => setLdapConfig({...ldapConfig, server_uri: e.target.value})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all font-mono"
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -80,7 +80,7 @@ export default function LdapManager({
placeholder="dc=example,dc=com"
value={ldapConfig.base_dn}
onChange={(e) => setLdapConfig({...ldapConfig, base_dn: e.target.value})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all font-mono"
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -96,7 +96,7 @@ export default function LdapManager({
placeholder="uid={username},ou=people..."
value={ldapConfig.user_template}
onChange={(e) => setLdapConfig({...ldapConfig, user_template: e.target.value})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all font-mono"
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -109,23 +109,23 @@ export default function LdapManager({
placeholder="ou=groups"
value={ldapConfig.groups_dn}
onChange={(e) => setLdapConfig({...ldapConfig, groups_dn: e.target.value})}
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all font-mono"
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
</div>
<div className="flex items-center justify-between p-4 bg-slate-950/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-indigo-500/30">
<div className="flex items-center justify-between p-4 bg-slate-950/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-primary/30">
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-xl flex items-center justify-center transition-all shadow-inner",
ldapConfig.use_tls ? "bg-indigo-500/10 text-indigo-400" : "bg-slate-800 text-slate-500"
ldapConfig.use_tls ? "bg-primary/10 text-primary" : "bg-slate-800 text-slate-500"
)}>
<Lock size={14} />
</div>
<div>
<p className="card-title leading-none">Use Tls</p>
<p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
<p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-primary/80" : "text-slate-500")}>
{ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
</p>
</div>
@@ -134,7 +134,7 @@ export default function LdapManager({
onClick={() => setLdapConfig({...ldapConfig, use_tls: !ldapConfig.use_tls})}
className={cn(
"w-10 h-5 rounded-full relative transition-all duration-300 shadow-inner border",
ldapConfig.use_tls ? "bg-indigo-600 border-indigo-500" : "bg-slate-800 border-slate-700"
ldapConfig.use_tls ? "bg-primary border-primary" : "bg-slate-800 border-slate-700"
)}
>
<div className={cn(
@@ -148,14 +148,14 @@ export default function LdapManager({
<button
onClick={onTestLdap}
disabled={testingLdap}
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-indigo-500/30"
className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
>
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
Test Connection
</button>
<button
onClick={onUpdateLdap}
className="flex-[2] bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-indigo-500/30 tracking-tight"
className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
>
<Shield size={14} /> Save LDAP Policy
</button>