schalli
f66546df7e
- SyncResult interface grows additively: groupMembershipsAdded/Removed (D-21 backend gap, existed since Phase 15 but never wired into the frontend) plus groupsAdopted/Renamed/Deleted and defaultMarkerMoved (Plan 16-03). - New syncRequestError state: a failed sync request (network error or !res.ok) now renders a visible text-sm text-destructive line instead of silently reporting a three-zero result as a successful no-op. - Sync report container gains three new lines: group-membership counts, AD-group counts (always visible, even at zero), and a conditional amber "default marker reassigned" line shown only when defaultMarkerMoved > 0. - Four new i18n keys under admin.ldap.sync in de.json/en.json.
1358 lines
50 KiB
TypeScript
1358 lines
50 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useAuthStore } from '@/lib/stores/auth-store';
|
|
|
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
|
|
|
interface FieldMapping {
|
|
id: string;
|
|
ldapField: string;
|
|
tesseraField: string;
|
|
isDefault: boolean;
|
|
}
|
|
|
|
interface LdapConfig {
|
|
id: string;
|
|
tenantId: string;
|
|
serverUrl: string;
|
|
baseDn: string;
|
|
bindDn: string;
|
|
bindPassword: string;
|
|
searchFilter: string;
|
|
syncIntervalMin: number;
|
|
isActive: boolean;
|
|
tlsRejectUnauthorized: boolean;
|
|
groupFilterDns: string[];
|
|
userExcludeList: string[];
|
|
lastSyncAt: string | null;
|
|
fieldMappings: FieldMapping[];
|
|
}
|
|
|
|
interface LdapDirectoryEntry {
|
|
dn: string;
|
|
name: string;
|
|
type: 'group' | 'ou';
|
|
alreadyImported?: boolean;
|
|
}
|
|
|
|
interface LdapUserSearchResult {
|
|
dn: string;
|
|
username: string;
|
|
displayName: string;
|
|
email: string;
|
|
alreadyImported: boolean;
|
|
}
|
|
|
|
interface UserImportResult {
|
|
created: number;
|
|
updated: number;
|
|
skipped: number;
|
|
errors: string[];
|
|
}
|
|
|
|
interface GroupImportResult {
|
|
imported: number;
|
|
skipped: number;
|
|
nameCollisions: string[];
|
|
errors: string[];
|
|
}
|
|
|
|
interface SyncResult {
|
|
created: number;
|
|
updated: number;
|
|
deactivated: number;
|
|
// D-21: group-membership reconciliation counters — existed on the backend
|
|
// since Plan 15/D-21 but were never wired into this interface until now.
|
|
groupMembershipsAdded: number;
|
|
groupMembershipsRemoved: number;
|
|
// Plan 16-03/16-05: group reconciliation counters (SC-3/SC-4/D-05/D-06).
|
|
groupsAdopted: number;
|
|
groupsRenamed: number;
|
|
groupsDeleted: number;
|
|
defaultMarkerMoved: number;
|
|
errors: string[];
|
|
}
|
|
|
|
/**
|
|
* LDAP Configuration admin page (D-14, D-16, D-17, D-18).
|
|
* Only visible to ADMIN and SUPER_ADMIN roles.
|
|
*/
|
|
export default function AdminLdapPage() {
|
|
const t = useTranslations('admin.ldap');
|
|
const tCommon = useTranslations('common');
|
|
const currentUser = useAuthStore((s) => s.user);
|
|
|
|
const [config, setConfig] = useState<LdapConfig | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [testResult, setTestResult] = useState<{
|
|
success: boolean;
|
|
error?: string;
|
|
} | null>(null);
|
|
const [syncResult, setSyncResult] = useState<SyncResult | null>(null);
|
|
const [syncing, setSyncing] = useState(false);
|
|
const [syncRequestError, setSyncRequestError] = useState<string | null>(null);
|
|
|
|
// Form state for connection settings.
|
|
const [formData, setFormData] = useState({
|
|
serverUrl: '',
|
|
baseDn: '',
|
|
bindDn: '',
|
|
bindPassword: '',
|
|
searchFilter: '(objectClass=person)',
|
|
syncIntervalMin: 0,
|
|
isActive: true,
|
|
tlsRejectUnauthorized: true,
|
|
});
|
|
|
|
// New mapping form
|
|
const [newMapping, setNewMapping] = useState({ ldapField: '', tesseraField: '' });
|
|
const [showMappingForm, setShowMappingForm] = useState(false);
|
|
|
|
// Group/OU import filter (selective sync)
|
|
const [groupFilterDns, setGroupFilterDns] = useState<string[]>([]);
|
|
const [discovered, setDiscovered] = useState<LdapDirectoryEntry[] | null>(null);
|
|
const [discovering, setDiscovering] = useState(false);
|
|
const [manualDn, setManualDn] = useState('');
|
|
const [savingFilter, setSavingFilter] = useState(false);
|
|
const [discoverSearch, setDiscoverSearch] = useState('');
|
|
|
|
// Per-user exclude/denylist (individual usernames never imported)
|
|
const [userExcludeList, setUserExcludeList] = useState<string[]>([]);
|
|
const [newExcludeUser, setNewExcludeUser] = useState('');
|
|
const [savingExclude, setSavingExclude] = useState(false);
|
|
|
|
// Individual user search & import
|
|
const [userSearchQuery, setUserSearchQuery] = useState('');
|
|
const [userSearchResults, setUserSearchResults] = useState<
|
|
LdapUserSearchResult[] | null
|
|
>(null);
|
|
const [userSearching, setUserSearching] = useState(false);
|
|
const [selectedUserDns, setSelectedUserDns] = useState<string[]>([]);
|
|
const [importingUsers, setImportingUsers] = useState(false);
|
|
const [userImportResult, setUserImportResult] =
|
|
useState<UserImportResult | null>(null);
|
|
|
|
// AD group import (SC-1/SC-2, D-01/D-02) — own state, own discovery call,
|
|
// independent of Section 2.5's groupFilterDns picker (different purpose).
|
|
const [groupImportCandidates, setGroupImportCandidates] = useState<
|
|
LdapDirectoryEntry[] | null
|
|
>(null);
|
|
const [groupImportSearch, setGroupImportSearch] = useState('');
|
|
const [discoveringGroupImport, setDiscoveringGroupImport] = useState(false);
|
|
const [selectedImportDns, setSelectedImportDns] = useState<string[]>([]);
|
|
const [importingGroups, setImportingGroups] = useState(false);
|
|
const [groupImportResult, setGroupImportResult] =
|
|
useState<GroupImportResult | null>(null);
|
|
const [groupImportError, setGroupImportError] = useState<string | null>(
|
|
null,
|
|
);
|
|
|
|
const filteredGroupImportCandidates = groupImportCandidates?.filter(
|
|
(entry) => {
|
|
const q = groupImportSearch.trim().toLowerCase();
|
|
if (!q) return true;
|
|
return (
|
|
entry.name.toLowerCase().includes(q) ||
|
|
entry.dn.toLowerCase().includes(q)
|
|
);
|
|
},
|
|
);
|
|
|
|
const filteredDiscovered = discovered?.filter((entry) => {
|
|
const q = discoverSearch.trim().toLowerCase();
|
|
if (!q) return true;
|
|
return (
|
|
entry.name.toLowerCase().includes(q) || entry.dn.toLowerCase().includes(q)
|
|
);
|
|
});
|
|
|
|
const hasAccess =
|
|
currentUser?.role === 'ADMIN' || currentUser?.role === 'SUPER_ADMIN';
|
|
|
|
const fetchConfig = useCallback(async () => {
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/config`, {
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
if (data) {
|
|
setConfig(data);
|
|
setFormData({
|
|
serverUrl: data.serverUrl || '',
|
|
baseDn: data.baseDn || '',
|
|
bindDn: data.bindDn || '',
|
|
bindPassword: '',
|
|
searchFilter: data.searchFilter || '(objectClass=person)',
|
|
syncIntervalMin: data.syncIntervalMin ?? 60,
|
|
isActive: data.isActive ?? true,
|
|
tlsRejectUnauthorized: data.tlsRejectUnauthorized ?? true,
|
|
});
|
|
setGroupFilterDns(data.groupFilterDns ?? []);
|
|
setUserExcludeList(data.userExcludeList ?? []);
|
|
}
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (hasAccess) {
|
|
fetchConfig();
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, [hasAccess, fetchConfig]);
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setTestResult(null);
|
|
|
|
try {
|
|
const method = config ? 'PATCH' : 'POST';
|
|
const body: Record<string, unknown> = { ...formData };
|
|
|
|
// Don't send empty password on update (keeps existing)
|
|
if (config && !formData.bindPassword) {
|
|
delete body.bindPassword;
|
|
}
|
|
|
|
const res = await fetch(`${API_URL}/ldap/config`, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(body),
|
|
});
|
|
|
|
if (res.ok) {
|
|
await fetchConfig();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleTestConnection = async () => {
|
|
setTestResult(null);
|
|
try {
|
|
// Send the currently entered values so a connection can be validated
|
|
// before ever saving a config. bindPassword is omitted when blank so
|
|
// the backend falls back to the saved config's password (masked
|
|
// fields never get re-sent once a config already exists).
|
|
const body: Record<string, unknown> = {};
|
|
if (formData.serverUrl) body.serverUrl = formData.serverUrl;
|
|
if (formData.bindDn) body.bindDn = formData.bindDn;
|
|
if (formData.bindPassword) body.bindPassword = formData.bindPassword;
|
|
// Always send the current TLS-verification choice so the test reflects it.
|
|
body.tlsRejectUnauthorized = formData.tlsRejectUnauthorized;
|
|
|
|
const res = await fetch(`${API_URL}/ldap/test-connection`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(body),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setTestResult(data);
|
|
} else {
|
|
setTestResult({ success: false, error: data.message || 'Test failed' });
|
|
}
|
|
} catch {
|
|
setTestResult({ success: false, error: 'Network error' });
|
|
}
|
|
};
|
|
|
|
const handleSync = async () => {
|
|
setSyncing(true);
|
|
setSyncResult(null);
|
|
setSyncRequestError(null);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/sync`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setSyncResult(data);
|
|
await fetchConfig();
|
|
} else {
|
|
setSyncResult(null);
|
|
setSyncRequestError(t('sync.requestError'));
|
|
}
|
|
} catch {
|
|
setSyncResult(null);
|
|
setSyncRequestError(t('sync.requestError'));
|
|
} finally {
|
|
setSyncing(false);
|
|
}
|
|
};
|
|
|
|
const handleAddMapping = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newMapping.ldapField || !newMapping.tesseraField) return;
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/config/mappings`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(newMapping),
|
|
});
|
|
if (res.ok) {
|
|
setNewMapping({ ldapField: '', tesseraField: '' });
|
|
setShowMappingForm(false);
|
|
await fetchConfig();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
}
|
|
};
|
|
|
|
const handleRemoveMapping = async (mappingId: string) => {
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/config/mappings/${mappingId}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
await fetchConfig();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
}
|
|
};
|
|
|
|
const handleDiscoverGroups = async () => {
|
|
setDiscovering(true);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/groups`, {
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setDiscovered(data);
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setDiscovering(false);
|
|
}
|
|
};
|
|
|
|
const toggleGroupFilterDn = (dn: string) => {
|
|
setGroupFilterDns((prev) =>
|
|
prev.includes(dn) ? prev.filter((d) => d !== dn) : [...prev, dn],
|
|
);
|
|
};
|
|
|
|
const handleAddManualDn = () => {
|
|
const dn = manualDn.trim();
|
|
if (!dn || groupFilterDns.includes(dn)) return;
|
|
setGroupFilterDns((prev) => [...prev, dn]);
|
|
setManualDn('');
|
|
};
|
|
|
|
const handleRemoveGroupFilterDn = (dn: string) => {
|
|
setGroupFilterDns((prev) => prev.filter((d) => d !== dn));
|
|
};
|
|
|
|
const handleSaveGroupFilter = async () => {
|
|
setSavingFilter(true);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/config`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ groupFilterDns }),
|
|
});
|
|
if (res.ok) {
|
|
await fetchConfig();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setSavingFilter(false);
|
|
}
|
|
};
|
|
|
|
const handleAddExcludeUser = () => {
|
|
const name = newExcludeUser.trim().toLowerCase();
|
|
if (!name || userExcludeList.includes(name)) return;
|
|
setUserExcludeList((prev) => [...prev, name]);
|
|
setNewExcludeUser('');
|
|
};
|
|
|
|
const handleRemoveExcludeUser = (name: string) => {
|
|
setUserExcludeList((prev) => prev.filter((u) => u !== name));
|
|
};
|
|
|
|
const handleSearchUsers = async () => {
|
|
const q = userSearchQuery.trim();
|
|
if (!q) return;
|
|
setUserSearching(true);
|
|
setUserImportResult(null);
|
|
try {
|
|
const res = await fetch(
|
|
`${API_URL}/ldap/users/search?q=${encodeURIComponent(q)}`,
|
|
{ credentials: 'include' },
|
|
);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setUserSearchResults(data);
|
|
setSelectedUserDns([]);
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setUserSearching(false);
|
|
}
|
|
};
|
|
|
|
const toggleUserDn = (dn: string) => {
|
|
setSelectedUserDns((prev) =>
|
|
prev.includes(dn) ? prev.filter((d) => d !== dn) : [...prev, dn],
|
|
);
|
|
};
|
|
|
|
const handleImportUsers = async (dns: string[]) => {
|
|
if (dns.length === 0) return;
|
|
setImportingUsers(true);
|
|
setUserImportResult(null);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/users/import`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ dns }),
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setUserImportResult(data);
|
|
setSelectedUserDns([]);
|
|
// Re-run the search so alreadyImported flags refresh.
|
|
await handleSearchUsers();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setImportingUsers(false);
|
|
}
|
|
};
|
|
|
|
const handleDiscoverGroupsToImport = async () => {
|
|
setDiscoveringGroupImport(true);
|
|
setGroupImportError(null);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/groups`, {
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
const data: LdapDirectoryEntry[] = await res.json();
|
|
// Only AD groups are importable — OUs are not selectable here.
|
|
setGroupImportCandidates(data.filter((entry) => entry.type === 'group'));
|
|
} else {
|
|
setGroupImportError(t('groupImport.discoverError'));
|
|
}
|
|
} catch {
|
|
setGroupImportError(t('groupImport.discoverError'));
|
|
} finally {
|
|
setDiscoveringGroupImport(false);
|
|
}
|
|
};
|
|
|
|
const toggleImportDn = (dn: string) => {
|
|
setSelectedImportDns((prev) =>
|
|
prev.includes(dn) ? prev.filter((d) => d !== dn) : [...prev, dn],
|
|
);
|
|
};
|
|
|
|
const handleImportGroups = async () => {
|
|
if (selectedImportDns.length === 0) return;
|
|
setImportingGroups(true);
|
|
setGroupImportError(null);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/groups/import`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ dns: selectedImportDns }),
|
|
});
|
|
if (res.ok) {
|
|
const data: GroupImportResult = await res.json();
|
|
setGroupImportResult(data);
|
|
setSelectedImportDns([]);
|
|
// Re-run discovery so alreadyImported flags refresh immediately.
|
|
await handleDiscoverGroupsToImport();
|
|
} else {
|
|
setGroupImportError(t('groupImport.importError'));
|
|
}
|
|
} catch {
|
|
setGroupImportError(t('groupImport.importError'));
|
|
} finally {
|
|
setImportingGroups(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveExcludeList = async () => {
|
|
setSavingExclude(true);
|
|
try {
|
|
const res = await fetch(`${API_URL}/ldap/config`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ userExcludeList }),
|
|
});
|
|
if (res.ok) {
|
|
await fetchConfig();
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setSavingExclude(false);
|
|
}
|
|
};
|
|
|
|
if (!hasAccess) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<p className="text-lg text-muted-foreground">{tCommon('accessDenied')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<p className="text-muted-foreground">{tCommon('loading')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<h1 className="text-2xl font-bold text-foreground">{t('title')}</h1>
|
|
|
|
{/* Section 1: Connection Settings */}
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-4">
|
|
{t('connectionTitle')}
|
|
</h2>
|
|
<form onSubmit={handleSave} className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('serverUrl')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.serverUrl}
|
|
onChange={(e) => setFormData({ ...formData, serverUrl: e.target.value })}
|
|
placeholder="ldap://ldap.example.com"
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('baseDn')}
|
|
</label>
|
|
<textarea
|
|
value={formData.baseDn}
|
|
onChange={(e) => setFormData({ ...formData, baseDn: e.target.value })}
|
|
placeholder={'dc=example,dc=com\nou=extern,dc=example,dc=com'}
|
|
rows={3}
|
|
className="flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
required
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t('baseDnHint')}</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('bindDn')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.bindDn}
|
|
onChange={(e) => setFormData({ ...formData, bindDn: e.target.value })}
|
|
placeholder="cn=admin,dc=example,dc=com (leer = anonymous bind)"
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('bindPassword')}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.bindPassword}
|
|
onChange={(e) => setFormData({ ...formData, bindPassword: e.target.value })}
|
|
placeholder={config?.bindPassword ? '********' : ''}
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('searchFilter')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.searchFilter}
|
|
onChange={(e) => setFormData({ ...formData, searchFilter: e.target.value })}
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="flex items-center gap-2 text-sm text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
checked={!formData.tlsRejectUnauthorized}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
tlsRejectUnauthorized: !e.target.checked,
|
|
})
|
|
}
|
|
/>
|
|
{t('tlsSkip.label')}
|
|
</label>
|
|
<p className="text-xs text-muted-foreground">{t('tlsSkip.hint')}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 pt-2">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{saving ? tCommon('loading') : t('save')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleTestConnection}
|
|
disabled={!config && !formData.serverUrl}
|
|
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
{t('testConnection')}
|
|
</button>
|
|
</div>
|
|
|
|
{testResult && (
|
|
<div
|
|
className={`mt-2 rounded-md px-4 py-2 text-sm ${
|
|
testResult.success
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
|
}`}
|
|
>
|
|
{testResult.success ? t('testSuccess') : `${t('testFailed')}: ${testResult.error}`}
|
|
</div>
|
|
)}
|
|
</form>
|
|
</section>
|
|
|
|
{/* Section 2: Field Mapping (D-16, D-17) */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-foreground">
|
|
{t('fieldMapping.title')}
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowMappingForm(true)}
|
|
className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
|
|
>
|
|
{t('fieldMapping.add')}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto rounded-md border border-border">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
|
{t('fieldMapping.ldapField')}
|
|
</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
|
{t('fieldMapping.tesseraField')}
|
|
</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
|
{t('fieldMapping.default')}
|
|
</th>
|
|
<th className="px-4 py-3 text-right font-medium text-muted-foreground">
|
|
{tCommon('actions')}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{config.fieldMappings.map((mapping) => (
|
|
<tr key={mapping.id} className="hover:bg-muted/30 transition-colors">
|
|
<td className="px-4 py-3 font-mono text-foreground">
|
|
{mapping.ldapField}
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-foreground">
|
|
{mapping.tesseraField}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{mapping.isDefault && (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-muted-foreground"
|
|
>
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
</svg>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
{!mapping.isDefault && (
|
|
<button
|
|
onClick={() => handleRemoveMapping(mapping.id)}
|
|
className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
|
|
>
|
|
{t('fieldMapping.remove')}
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Add mapping form */}
|
|
{showMappingForm && (
|
|
<form onSubmit={handleAddMapping} className="mt-4 flex items-end gap-3">
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
{t('fieldMapping.ldapField')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newMapping.ldapField}
|
|
onChange={(e) => setNewMapping({ ...newMapping, ldapField: e.target.value })}
|
|
className="flex h-9 w-40 rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
{t('fieldMapping.tesseraField')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newMapping.tesseraField}
|
|
onChange={(e) => setNewMapping({ ...newMapping, tesseraField: e.target.value })}
|
|
className="flex h-9 w-40 rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="h-9 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
|
|
>
|
|
{tCommon('save')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowMappingForm(false)}
|
|
className="h-9 rounded-md border border-border px-3 text-xs text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
{tCommon('cancel')}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{/* Section 2.5: Group/OU import filter (selective sync) */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-2">
|
|
{t('groupFilter.title')}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{t('groupFilter.description')}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleDiscoverGroups}
|
|
disabled={discovering}
|
|
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
{discovering ? tCommon('loading') : t('groupFilter.discover')}
|
|
</button>
|
|
</div>
|
|
|
|
{discovered && discovered.length > 0 && (
|
|
<div className="mb-4 space-y-2">
|
|
<input
|
|
type="text"
|
|
value={discoverSearch}
|
|
onChange={(e) => setDiscoverSearch(e.target.value)}
|
|
placeholder={t('groupFilter.searchPlaceholder')}
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
/>
|
|
<div className="max-h-64 overflow-y-auto rounded-md border border-border divide-y divide-border">
|
|
{filteredDiscovered && filteredDiscovered.length > 0 ? (
|
|
filteredDiscovered.map((entry) => (
|
|
<label
|
|
key={entry.dn}
|
|
className="flex items-center gap-3 px-4 py-2 text-sm hover:bg-muted/30 cursor-pointer"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={groupFilterDns.includes(entry.dn)}
|
|
onChange={() => toggleGroupFilterDn(entry.dn)}
|
|
/>
|
|
<span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
|
|
{entry.type === 'ou' ? t('groupFilter.typeOu') : t('groupFilter.typeGroup')}
|
|
</span>
|
|
<span className="font-medium text-foreground">{entry.name}</span>
|
|
<span className="font-mono text-xs text-muted-foreground truncate">
|
|
{entry.dn}
|
|
</span>
|
|
</label>
|
|
))
|
|
) : (
|
|
<p className="px-4 py-3 text-sm text-muted-foreground">
|
|
{t('groupFilter.noMatches')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{discovered && discovered.length === 0 && (
|
|
<p className="mb-4 text-sm text-muted-foreground">{t('groupFilter.noneFound')}</p>
|
|
)}
|
|
|
|
<div className="flex items-end gap-3 mb-4">
|
|
<div className="flex-1 space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
{t('groupFilter.manualDn')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={manualDn}
|
|
onChange={(e) => setManualDn(e.target.value)}
|
|
placeholder="CN=Beispiel,OU=Gruppen,DC=ctl,DC=local"
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm font-mono"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddManualDn}
|
|
className="h-9 rounded-md border border-border px-3 text-xs font-medium text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
{t('groupFilter.addDn')}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-xs font-medium text-muted-foreground mb-2">
|
|
{t('groupFilter.selected')}
|
|
</p>
|
|
{groupFilterDns.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t('groupFilter.emptyMeansAll')}</p>
|
|
) : (
|
|
<ul className="space-y-1">
|
|
{groupFilterDns.map((dn) => (
|
|
<li
|
|
key={dn}
|
|
className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-1.5 text-sm"
|
|
>
|
|
<span className="font-mono text-xs text-foreground truncate">{dn}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveGroupFilterDn(dn)}
|
|
className="shrink-0 rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
|
|
>
|
|
{t('fieldMapping.remove')}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleSaveGroupFilter}
|
|
disabled={savingFilter}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{savingFilter ? tCommon('loading') : t('groupFilter.save')}
|
|
</button>
|
|
</section>
|
|
)}
|
|
|
|
{/* Section 2.52: AD group import (SC-1/SC-2, D-01/D-02) */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-2">
|
|
{t('groupImport.title')}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{t('groupImport.description')}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleDiscoverGroupsToImport}
|
|
disabled={discoveringGroupImport}
|
|
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
{discoveringGroupImport
|
|
? tCommon('loading')
|
|
: t('groupImport.discover')}
|
|
</button>
|
|
</div>
|
|
|
|
{groupImportError && (
|
|
<div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
|
{groupImportError}
|
|
</div>
|
|
)}
|
|
|
|
{groupImportCandidates && groupImportCandidates.length > 0 && (
|
|
<div className="mb-4 space-y-2">
|
|
<input
|
|
type="text"
|
|
value={groupImportSearch}
|
|
onChange={(e) => setGroupImportSearch(e.target.value)}
|
|
placeholder={t('groupImport.searchPlaceholder')}
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
/>
|
|
<div className="max-h-64 overflow-y-auto rounded-md border border-border divide-y divide-border">
|
|
{filteredGroupImportCandidates &&
|
|
filteredGroupImportCandidates.length > 0 ? (
|
|
filteredGroupImportCandidates.map((entry) => (
|
|
<label
|
|
key={entry.dn}
|
|
className={`flex items-center gap-3 px-4 py-2 text-sm ${
|
|
entry.alreadyImported
|
|
? 'opacity-60'
|
|
: 'hover:bg-muted/30 cursor-pointer'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
disabled={entry.alreadyImported}
|
|
checked={selectedImportDns.includes(entry.dn)}
|
|
onChange={() => toggleImportDn(entry.dn)}
|
|
/>
|
|
<span className="font-medium text-foreground">
|
|
{entry.name}
|
|
</span>
|
|
<span className="font-mono text-xs text-muted-foreground truncate">
|
|
{entry.dn}
|
|
</span>
|
|
{entry.alreadyImported && (
|
|
<span className="ml-auto shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
|
|
{t('groupImport.alreadyImported')}
|
|
</span>
|
|
)}
|
|
</label>
|
|
))
|
|
) : (
|
|
<p className="px-4 py-3 text-sm text-muted-foreground">
|
|
{t('groupImport.noMatches')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{groupImportCandidates && groupImportCandidates.length === 0 && (
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{t('groupImport.noneFound')}
|
|
</p>
|
|
)}
|
|
|
|
{groupImportCandidates && groupImportCandidates.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={handleImportGroups}
|
|
disabled={importingGroups || selectedImportDns.length === 0}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{importingGroups
|
|
? tCommon('loading')
|
|
: `${t('groupImport.importSelected')} (${selectedImportDns.length})`}
|
|
</button>
|
|
)}
|
|
|
|
{groupImportResult && (
|
|
<div className="mt-3">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('groupImport.resultSummary', {
|
|
imported: groupImportResult.imported,
|
|
skipped: groupImportResult.skipped,
|
|
errors:
|
|
groupImportResult.errors.length +
|
|
groupImportResult.nameCollisions.length,
|
|
})}
|
|
</p>
|
|
{groupImportResult.nameCollisions.length > 0 && (
|
|
<div className="mt-2 space-y-1">
|
|
{groupImportResult.nameCollisions.map((name, i) => (
|
|
<p key={`collision-${i}`} className="text-xs text-destructive">
|
|
{t('groupImport.nameCollisionError', { name })}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
{groupImportResult.errors.length > 0 && (
|
|
<div className="mt-2 space-y-1">
|
|
{groupImportResult.errors.map((err, i) => (
|
|
<p key={`error-${i}`} className="text-xs text-destructive">
|
|
{err}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{t('groupImport.membershipHint')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{/* Section 2.55: Individual user search & import */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-2">
|
|
{t('userSearch.title')}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{t('userSearch.description')}
|
|
</p>
|
|
|
|
<div className="flex items-end gap-3 mb-4">
|
|
<div className="flex-1 space-y-1">
|
|
<input
|
|
type="text"
|
|
value={userSearchQuery}
|
|
onChange={(e) => setUserSearchQuery(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') handleSearchUsers();
|
|
}}
|
|
placeholder={t('userSearch.placeholder')}
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleSearchUsers}
|
|
disabled={userSearching || !userSearchQuery.trim()}
|
|
className="h-9 rounded-md border border-border px-4 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
{userSearching ? tCommon('loading') : t('userSearch.search')}
|
|
</button>
|
|
</div>
|
|
|
|
{userSearchResults && userSearchResults.length > 0 && (
|
|
<div className="mb-4 max-h-64 overflow-y-auto rounded-md border border-border divide-y divide-border">
|
|
{userSearchResults.map((u) => (
|
|
<label
|
|
key={u.dn}
|
|
className={`flex items-center gap-3 px-4 py-2 text-sm ${
|
|
u.alreadyImported
|
|
? 'opacity-60'
|
|
: 'hover:bg-muted/30 cursor-pointer'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
disabled={u.alreadyImported}
|
|
checked={selectedUserDns.includes(u.dn)}
|
|
onChange={() => toggleUserDn(u.dn)}
|
|
/>
|
|
<span className="font-medium text-foreground">
|
|
{u.displayName || u.username}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{u.username}
|
|
</span>
|
|
{u.email && (
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
{u.email}
|
|
</span>
|
|
)}
|
|
{u.alreadyImported && (
|
|
<span className="ml-auto shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
|
|
{t('userSearch.alreadyImported')}
|
|
</span>
|
|
)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{userSearchResults && userSearchResults.length === 0 && (
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{t('userSearch.noResults')}
|
|
</p>
|
|
)}
|
|
|
|
{userSearchResults && userSearchResults.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleImportUsers(selectedUserDns)}
|
|
disabled={importingUsers || selectedUserDns.length === 0}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{importingUsers
|
|
? tCommon('loading')
|
|
: `${t('userSearch.importSelected')} (${selectedUserDns.length})`}
|
|
</button>
|
|
)}
|
|
|
|
{userImportResult && (
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
{userImportResult.created} {t('userSearch.created')},{' '}
|
|
{userImportResult.skipped} {t('userSearch.skipped')}
|
|
{userImportResult.errors.length > 0 && (
|
|
<>
|
|
, {userImportResult.errors.length} {t('userSearch.errors')}
|
|
</>
|
|
)}
|
|
</p>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{/* Section 2.6: Per-user exclude/denylist */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-2">
|
|
{t('userExclude.title')}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{t('userExclude.description')}
|
|
</p>
|
|
|
|
<div className="flex items-end gap-3 mb-4">
|
|
<div className="flex-1 space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
{t('userExclude.username')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newExcludeUser}
|
|
onChange={(e) => setNewExcludeUser(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleAddExcludeUser();
|
|
}
|
|
}}
|
|
placeholder="administrator, krbtgt, guest, ldap$ ..."
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm font-mono"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddExcludeUser}
|
|
className="h-9 rounded-md border border-border px-3 text-xs font-medium text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
{t('userExclude.add')}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-xs font-medium text-muted-foreground mb-2">
|
|
{t('userExclude.excluded')}
|
|
</p>
|
|
{userExcludeList.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t('userExclude.empty')}</p>
|
|
) : (
|
|
<ul className="flex flex-wrap gap-2">
|
|
{userExcludeList.map((name) => (
|
|
<li
|
|
key={name}
|
|
className="flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm"
|
|
>
|
|
<span className="font-mono text-xs text-foreground">{name}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveExcludeUser(name)}
|
|
className="shrink-0 rounded px-1.5 py-0.5 text-xs text-destructive hover:bg-destructive/10 transition-colors"
|
|
>
|
|
{t('fieldMapping.remove')}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleSaveExcludeList}
|
|
disabled={savingExclude}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{savingExclude ? tCommon('loading') : t('userExclude.save')}
|
|
</button>
|
|
</section>
|
|
)}
|
|
|
|
{/* Section 3: Sync Settings (D-14) */}
|
|
{config && (
|
|
<section className="rounded-lg border border-border p-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-4">
|
|
{t('sync.title')}
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Sync interval */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{t('sync.interval')}
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={formData.syncIntervalMin}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, syncIntervalMin: parseInt(e.target.value, 10) || 0 })
|
|
}
|
|
className="flex h-10 w-24 rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">min</span>
|
|
{formData.syncIntervalMin === 0 && (
|
|
<span className="text-xs text-muted-foreground">
|
|
({t('sync.intervalDisabled')})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enable/Disable toggle */}
|
|
<div className="flex items-center gap-3">
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.isActive}
|
|
onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary" />
|
|
</label>
|
|
<span className="text-sm font-medium text-foreground">
|
|
{formData.isActive ? t('enable') : t('disable')}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Save interval changes */}
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{t('save')}
|
|
</button>
|
|
|
|
{/* Last sync info */}
|
|
<div className="border-t border-border pt-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('sync.lastSync')}:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{config.lastSyncAt
|
|
? new Date(config.lastSyncAt).toLocaleString()
|
|
: t('sync.neverSynced')}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Manual sync button (D-14) */}
|
|
<button
|
|
onClick={handleSync}
|
|
disabled={syncing}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{syncing ? t('sync.syncing') : t('sync.trigger')}
|
|
</button>
|
|
|
|
{/* Sync request failure (Owner-Entscheidung 2026-08-06): a failed
|
|
sync request must never render as a report full of zeros. */}
|
|
{syncRequestError && (
|
|
<p className="text-sm text-destructive">{syncRequestError}</p>
|
|
)}
|
|
|
|
{/* Sync result display */}
|
|
{syncResult && (
|
|
<div className="rounded-md border border-border bg-muted/30 p-4">
|
|
<p className="text-sm font-medium text-foreground mb-2">
|
|
{t('sync.result', {
|
|
created: syncResult.created,
|
|
updated: syncResult.updated,
|
|
deactivated: syncResult.deactivated,
|
|
})}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('sync.resultGroupMemberships', {
|
|
groupMembershipsAdded: syncResult.groupMembershipsAdded,
|
|
groupMembershipsRemoved: syncResult.groupMembershipsRemoved,
|
|
})}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('sync.resultGroups', {
|
|
groupsAdopted: syncResult.groupsAdopted,
|
|
groupsRenamed: syncResult.groupsRenamed,
|
|
groupsDeleted: syncResult.groupsDeleted,
|
|
})}
|
|
</p>
|
|
{syncResult.defaultMarkerMoved > 0 && (
|
|
<p className="text-sm font-medium text-amber-700 dark:text-amber-400">
|
|
{t('sync.defaultMarkerMoved', {
|
|
defaultMarkerMoved: syncResult.defaultMarkerMoved,
|
|
})}
|
|
</p>
|
|
)}
|
|
{syncResult.errors.length > 0 && (
|
|
<div className="mt-2 space-y-1">
|
|
{syncResult.errors.map((err, i) => (
|
|
<p key={i} className="text-xs text-destructive">
|
|
{err}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|