sandrodach
fe1d574787
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m22s
1326 lines
57 KiB
TypeScript
1326 lines
57 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Shield,
|
||
Users,
|
||
Server,
|
||
Mail,
|
||
Plus,
|
||
Trash2,
|
||
KeyRound,
|
||
Copy,
|
||
Check,
|
||
ArrowLeft,
|
||
Share2,
|
||
Send,
|
||
AlertCircle,
|
||
Building2,
|
||
UserPlus,
|
||
} from 'lucide-react';
|
||
import {
|
||
Organization,
|
||
SystemSettings,
|
||
Team,
|
||
User,
|
||
UserInvite,
|
||
UserRole,
|
||
} from '../../lib/types';
|
||
import { api, triggerHaptic } from '../../lib/api';
|
||
|
||
interface AdminSettingsViewProps {
|
||
currentUser: User;
|
||
onBack: () => void;
|
||
}
|
||
|
||
type AdminSection = 'users' | 'orgs' | 'server' | 'smtp';
|
||
|
||
export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||
currentUser,
|
||
onBack,
|
||
}) => {
|
||
const isServerAdmin = currentUser.role === 'admin';
|
||
const [section, setSection] = useState<AdminSection>('users');
|
||
|
||
// --- Users & Invites State ---
|
||
const [users, setUsers] = useState<User[]>([]);
|
||
const [invites, setInvites] = useState<UserInvite[]>([]);
|
||
const [newUserName, setNewUserName] = useState('');
|
||
const [newUserEmail, setNewUserEmail] = useState('');
|
||
const [newUserPassword, setNewUserPassword] = useState('');
|
||
const [newUserRole, setNewUserRole] = useState<UserRole>('member');
|
||
|
||
const [inviteEmail, setInviteEmail] = useState('');
|
||
const [inviteRole, setInviteRole] = useState<UserRole>('member');
|
||
const [inviteTeamId, setInviteTeamId] = useState('');
|
||
const [copiedInviteId, setCopiedInviteId] = useState<string | null>(null);
|
||
|
||
const [resetPwdUserId, setResetPwdUserId] = useState<string | null>(null);
|
||
const [resetPwdVal, setResetPwdVal] = useState('');
|
||
|
||
// --- Organizations & Teams State ---
|
||
const [orgs, setOrgs] = useState<Organization[]>([]);
|
||
const [allTeams, setAllTeams] = useState<Team[]>([]);
|
||
const [newOrgName, setNewOrgName] = useState('');
|
||
const [selectedOrgId, setSelectedOrgId] = useState('');
|
||
const [newTeamName, setNewTeamName] = useState('');
|
||
const [newTeamDesc, setNewTeamDesc] = useState('');
|
||
const [memberSelectByTeam, setMemberSelectByTeam] = useState<Record<string, string>>({});
|
||
const [memberRoleByTeam, setMemberRoleByTeam] = useState<Record<string, string>>({});
|
||
|
||
// --- Server & SMTP Settings State ---
|
||
const [settings, setSettings] = useState<SystemSettings>({
|
||
sharingMode: 'teams_only',
|
||
allowRegistration: false,
|
||
instanceName: 'MindSift',
|
||
smtpHost: '',
|
||
smtpPort: 587,
|
||
smtpUser: '',
|
||
smtpPass: '',
|
||
smtpFrom: '',
|
||
smtpTls: true,
|
||
smtpConfiguredViaEnv: false,
|
||
});
|
||
const [testSmtpEmail, setTestSmtpEmail] = useState(currentUser.email || '');
|
||
const [testingSmtp, setTestingSmtp] = useState(false);
|
||
|
||
const [statusMsg, setStatusMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
|
||
|
||
const loadAll = async () => {
|
||
try {
|
||
const [uList, invList, orgList, teamList] = await Promise.all([
|
||
api.adminGetUsers(),
|
||
api.adminGetInvites(),
|
||
api.getOrganizations(),
|
||
api.getUserTeams(),
|
||
]);
|
||
setUsers(uList);
|
||
setInvites(invList);
|
||
setOrgs(orgList);
|
||
setAllTeams(teamList);
|
||
if (orgList.length > 0 && !selectedOrgId) {
|
||
setSelectedOrgId(orgList[0].id);
|
||
}
|
||
|
||
if (isServerAdmin) {
|
||
const sys = await api.adminGetSettings();
|
||
setSettings({
|
||
sharingMode: sys.sharingMode || 'teams_only',
|
||
allowRegistration: Boolean(sys.allowRegistration),
|
||
instanceName: sys.instanceName || 'MindSift',
|
||
smtpHost: sys.smtpHost || '',
|
||
smtpPort: sys.smtpPort || 587,
|
||
smtpUser: sys.smtpUser || '',
|
||
smtpPass: sys.smtpPass || '',
|
||
smtpFrom: sys.smtpFrom || '',
|
||
smtpTls: sys.smtpTls ?? true,
|
||
smtpConfiguredViaEnv: Boolean(sys.smtpConfiguredViaEnv),
|
||
});
|
||
}
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Laden der Administrationsdaten' });
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadAll();
|
||
}, []);
|
||
|
||
// ============================================================================
|
||
// HANDLERS: USERS & INVITES
|
||
// ============================================================================
|
||
const handleCreateUser = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setStatusMsg(null);
|
||
triggerHaptic(15);
|
||
try {
|
||
const created = await api.adminCreateUser({
|
||
email: newUserEmail.trim(),
|
||
password: newUserPassword,
|
||
displayName: newUserName.trim() || newUserEmail.split('@')[0],
|
||
role: newUserRole,
|
||
});
|
||
setUsers((prev) => [...prev, created]);
|
||
setNewUserName('');
|
||
setNewUserEmail('');
|
||
setNewUserPassword('');
|
||
setNewUserRole('member');
|
||
setStatusMsg({ type: 'ok', text: `Benutzer "${created.displayName}" wurde angelegt.` });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Anlegen des Benutzers' });
|
||
}
|
||
};
|
||
|
||
const handleCreateInvite = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setStatusMsg(null);
|
||
triggerHaptic(15);
|
||
try {
|
||
const inv = await api.adminCreateInvite({
|
||
email: inviteEmail.trim(),
|
||
role: inviteRole,
|
||
teamId: inviteTeamId,
|
||
});
|
||
setInvites((prev) => [inv, ...prev]);
|
||
setInviteEmail('');
|
||
setStatusMsg({
|
||
type: 'ok',
|
||
text: `Einladungscode ${inv.code} erfolgreich erstellt.`,
|
||
});
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Erstellen der Einladung' });
|
||
}
|
||
};
|
||
|
||
const handleDeleteInvite = async (id: string) => {
|
||
try {
|
||
await api.adminDeleteInvite(id);
|
||
setInvites((prev) => prev.filter((i) => i.id !== id));
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleCopyInviteCode = (inv: UserInvite) => {
|
||
navigator.clipboard.writeText(inv.code);
|
||
setCopiedInviteId(inv.id);
|
||
setTimeout(() => setCopiedInviteId(null), 2000);
|
||
};
|
||
|
||
const handleChangeUserRole = async (u: User, role: UserRole) => {
|
||
setStatusMsg(null);
|
||
try {
|
||
const updated = await api.adminUpdateUser(u.id, { role });
|
||
setUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
|
||
setStatusMsg({
|
||
type: 'ok',
|
||
text: `Rolle für ${updated.displayName} auf "${role}" aktualisiert.`,
|
||
});
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleToggleUserActive = async (u: User) => {
|
||
setStatusMsg(null);
|
||
try {
|
||
const updated = await api.adminUpdateUser(u.id, { isActive: !u.isActive });
|
||
setUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleConfirmResetPassword = async (userId: string) => {
|
||
if (!resetPwdVal.trim()) return;
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.adminResetPassword(userId, resetPwdVal.trim());
|
||
setResetPwdUserId(null);
|
||
setResetPwdVal('');
|
||
setStatusMsg({ type: 'ok', text: 'Passwort erfolgreich zurückgesetzt.' });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleDeleteUser = async (u: User) => {
|
||
if (
|
||
!window.confirm(
|
||
`Benutzer "${u.displayName}" (${u.email}) wirklich unwiderruflich löschen?`
|
||
)
|
||
)
|
||
return;
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.adminDeleteUser(u.id);
|
||
setUsers((prev) => prev.filter((item) => item.id !== u.id));
|
||
setStatusMsg({ type: 'ok', text: 'Benutzer gelöscht.' });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
// ============================================================================
|
||
// HANDLERS: ORGANIZATIONS & TEAMS
|
||
// ============================================================================
|
||
const handleCreateOrg = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!newOrgName.trim()) return;
|
||
setStatusMsg(null);
|
||
try {
|
||
const created = await api.createOrganization(newOrgName.trim());
|
||
setNewOrgName('');
|
||
setSelectedOrgId(created.id);
|
||
await loadAll();
|
||
setStatusMsg({ type: 'ok', text: `Organisation "${created.name}" angelegt.` });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleDeleteOrg = async (org: Organization) => {
|
||
if (!window.confirm(`Organisation "${org.name}" inklusive aller zugehörigen Teams löschen?`))
|
||
return;
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.deleteOrganization(org.id);
|
||
await loadAll();
|
||
setStatusMsg({ type: 'ok', text: `Organisation "${org.name}" gelöscht.` });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleCreateTeam = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!selectedOrgId || !newTeamName.trim()) return;
|
||
setStatusMsg(null);
|
||
try {
|
||
const created = await api.createOrgTeam(
|
||
selectedOrgId,
|
||
newTeamName.trim(),
|
||
newTeamDesc.trim()
|
||
);
|
||
setNewTeamName('');
|
||
setNewTeamDesc('');
|
||
await loadAll();
|
||
setStatusMsg({ type: 'ok', text: `Team "${created.name}" wurde erstellt.` });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleDeleteTeam = async (team: Team) => {
|
||
if (!window.confirm(`Team "${team.name}" wirklich löschen?`)) return;
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.deleteTeam(team.id);
|
||
await loadAll();
|
||
setStatusMsg({ type: 'ok', text: `Team "${team.name}" gelöscht.` });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleAddMemberToTeam = async (teamId: string) => {
|
||
const selectedUserId = memberSelectByTeam[teamId];
|
||
if (!selectedUserId) return;
|
||
const role = memberRoleByTeam[teamId] || 'member';
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.addTeamMember(teamId, { userId: selectedUserId, role });
|
||
await loadAll();
|
||
setStatusMsg({ type: 'ok', text: 'Teammitglied hinzugefügt.' });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
const handleRemoveMemberFromTeam = async (teamId: string, userId: string) => {
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.removeTeamMember(teamId, userId);
|
||
await loadAll();
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message });
|
||
}
|
||
};
|
||
|
||
// ============================================================================
|
||
// HANDLERS: SERVER & SMTP SETTINGS
|
||
// ============================================================================
|
||
const handleSaveSystemSettings = async (patch?: Partial<SystemSettings>) => {
|
||
setStatusMsg(null);
|
||
const next = { ...settings, ...(patch || {}) };
|
||
setSettings(next);
|
||
try {
|
||
const saved = await api.adminUpdateSettings(next);
|
||
setSettings((prev) => ({ ...prev, ...saved }));
|
||
setStatusMsg({ type: 'ok', text: 'Server-Einstellungen erfolgreich gespeichert.' });
|
||
} catch (err: any) {
|
||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Speichern' });
|
||
}
|
||
};
|
||
|
||
const handleTestSmtp = async () => {
|
||
if (!testSmtpEmail.trim()) return;
|
||
setTestingSmtp(true);
|
||
setStatusMsg(null);
|
||
try {
|
||
await api.adminUpdateSettings(settings);
|
||
await api.adminTestSMTP(testSmtpEmail.trim());
|
||
setStatusMsg({
|
||
type: 'ok',
|
||
text: `Test-E-Mail erfolgreich an ${testSmtpEmail.trim()} gesendet!`,
|
||
});
|
||
} catch (err: any) {
|
||
setStatusMsg({
|
||
type: 'err',
|
||
text: `SMTP-Test fehlgeschlagen: ${err.message}`,
|
||
});
|
||
} finally {
|
||
setTestingSmtp(false);
|
||
}
|
||
};
|
||
|
||
// Collect all teams across orgs for invite dropdown
|
||
const flattenedTeams: Team[] =
|
||
orgs.flatMap((o) => o.teams || []).length > 0
|
||
? orgs.flatMap((o) => o.teams || [])
|
||
: allTeams;
|
||
|
||
return (
|
||
<div className="w-full space-y-4">
|
||
{/* Top Page Header */}
|
||
<div className="flex items-center justify-between border-b border-border pb-3">
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={onBack}
|
||
className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5"
|
||
title="Zurück zur Übersicht"
|
||
>
|
||
<ArrowLeft className="w-3.5 h-3.5" />
|
||
<span>Zurück</span>
|
||
</button>
|
||
<div>
|
||
<h1 className="text-base font-bold text-main tracking-tight flex items-center gap-2">
|
||
<Shield className="w-4 h-4 text-accent" />
|
||
<span>Administration & Team-Steuerung</span>
|
||
</h1>
|
||
<p className="text-xs text-muted">
|
||
Benutzerverwaltung, Einladungscodes, Organisationen, Teams, Isolationsmodus & Mail-Server
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<span className="badge-accent">
|
||
{isServerAdmin ? 'Server-Administrator' : 'Team-Administrator'}
|
||
</span>
|
||
</div>
|
||
|
||
{statusMsg && (
|
||
<div
|
||
className={`p-3 text-xs flex items-center justify-between gap-2 rounded-card ${
|
||
statusMsg.type === 'ok' ? 'alert-ok' : 'alert-err'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
{statusMsg.type === 'ok' ? (
|
||
<Check className="w-4 h-4 text-accent flex-shrink-0" />
|
||
) : (
|
||
<AlertCircle className="w-4 h-4 text-status-err flex-shrink-0" />
|
||
)}
|
||
<span>{statusMsg.text}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => setStatusMsg(null)}
|
||
className="text-muted hover:text-main text-[11px]"
|
||
>
|
||
Schließen
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Main 2-Column Layout */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-start">
|
||
{/* Left Navigation Sidebar */}
|
||
<aside className="panel-surface divide-y divide-border overflow-hidden">
|
||
<button
|
||
onClick={() => setSection('users')}
|
||
className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
|
||
section === 'users'
|
||
? 'bg-panel-elevated text-main border-l-2 border-l-accent'
|
||
: 'text-muted hover:text-main hover:bg-canvas/50'
|
||
}`}
|
||
>
|
||
<Users className="w-4 h-4 text-accent flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold">Benutzer & Einladungen</p>
|
||
<p className="text-[10px] text-faint">Konten, Rollen & Invite-Codes</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setSection('orgs')}
|
||
className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
|
||
section === 'orgs'
|
||
? 'bg-panel-elevated text-main border-l-2 border-l-accent'
|
||
: 'text-muted hover:text-main hover:bg-canvas/50'
|
||
}`}
|
||
>
|
||
<Building2 className="w-4 h-4 text-accent flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold">Organisationen & Teams</p>
|
||
<p className="text-[10px] text-faint">Teams & Mitglieder zuweisen</p>
|
||
</div>
|
||
</button>
|
||
|
||
{isServerAdmin && (
|
||
<>
|
||
<button
|
||
onClick={() => setSection('server')}
|
||
className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
|
||
section === 'server'
|
||
? 'bg-panel-elevated text-main border-l-2 border-l-accent'
|
||
: 'text-muted hover:text-main hover:bg-canvas/50'
|
||
}`}
|
||
>
|
||
<Server className="w-4 h-4 text-accent flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold">Server & Isolation</p>
|
||
<p className="text-[10px] text-faint">Sichtbarkeit & Registrierung</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setSection('smtp')}
|
||
className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
|
||
section === 'smtp'
|
||
? 'bg-panel-elevated text-main border-l-2 border-l-accent'
|
||
: 'text-muted hover:text-main hover:bg-canvas/50'
|
||
}`}
|
||
>
|
||
<Mail className="w-4 h-4 text-accent flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold">E-Mail / SMTP-Server</p>
|
||
<p className="text-[10px] text-faint">Mailversand für Alarme</p>
|
||
</div>
|
||
</button>
|
||
</>
|
||
)}
|
||
</aside>
|
||
|
||
{/* Right Content Area */}
|
||
<div className="md:col-span-3 panel-surface p-5 text-xs">
|
||
{/* ================================================================= */}
|
||
{/* SECTION 1: BENUTZER, ROLLEN & EINLADUNGEN */}
|
||
{/* ================================================================= */}
|
||
{section === 'users' && (
|
||
<div className="space-y-6">
|
||
<div className="border-b border-border pb-3">
|
||
<h2 className="text-sm font-bold text-main">Benutzersteuerung, Rollen & Einladungen</h2>
|
||
<p className="text-muted mt-0.5">
|
||
Lege Benutzerkonten direkt an oder erzeuge Einladungscodes, mit denen sich eingeladene
|
||
Personen selbst registrieren können, auch wenn die öffentliche Registrierung gesperrt ist.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Direct User Creation Form */}
|
||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||
<h3 className="font-bold text-main flex items-center gap-1.5">
|
||
<UserPlus className="w-3.5 h-3.5 text-accent" />
|
||
<span>Neues Benutzerkonto direkt anlegen</span>
|
||
</h3>
|
||
|
||
<form onSubmit={handleCreateUser} className="space-y-3">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">Anzeigename</label>
|
||
<input
|
||
type="text"
|
||
value={newUserName}
|
||
onChange={(e) => setNewUserName(e.target.value)}
|
||
placeholder="z.B. Anna Beispiel"
|
||
required
|
||
className="w-full min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">E-Mail-Adresse</label>
|
||
<input
|
||
type="email"
|
||
value={newUserEmail}
|
||
onChange={(e) => setNewUserEmail(e.target.value)}
|
||
placeholder="anna@beispiel.de"
|
||
required
|
||
className="w-full min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">Initial-Passwort</label>
|
||
<input
|
||
type="password"
|
||
value={newUserPassword}
|
||
onChange={(e) => setNewUserPassword(e.target.value)}
|
||
placeholder="Mind. 4 Zeichen"
|
||
minLength={4}
|
||
required
|
||
className="w-full min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">Benutzerrolle</label>
|
||
<select
|
||
value={newUserRole}
|
||
onChange={(e) => setNewUserRole(e.target.value as UserRole)}
|
||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||
>
|
||
<option value="member">Mitglied (Standard)</option>
|
||
<option value="team_admin">Team-Admin (Darf einladen)</option>
|
||
{isServerAdmin && <option value="admin">Server-Admin (Vollzugriff)</option>}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end">
|
||
<button
|
||
type="submit"
|
||
className="btn-primary h-8 px-4 text-xs font-semibold flex items-center gap-1.5"
|
||
>
|
||
<Plus className="w-3.5 h-3.5" />
|
||
<span>Benutzer jetzt anlegen</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{/* Invite Code Generator */}
|
||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||
<h3 className="font-bold text-main flex items-center gap-1.5">
|
||
<KeyRound className="w-3.5 h-3.5 text-accent" />
|
||
<span>Einladungscode erzeugen (gültig für 7 Tage)</span>
|
||
</h3>
|
||
|
||
<form onSubmit={handleCreateInvite} className="space-y-3">
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">
|
||
Gebundene E-Mail (optional)
|
||
</label>
|
||
<input
|
||
type="email"
|
||
value={inviteEmail}
|
||
onChange={(e) => setInviteEmail(e.target.value)}
|
||
placeholder="Leer lassen für beliebige E-Mail"
|
||
className="w-full min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">Zugewiesene Rolle</label>
|
||
<select
|
||
value={inviteRole}
|
||
onChange={(e) => setInviteRole(e.target.value as UserRole)}
|
||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||
>
|
||
<option value="member">Mitglied</option>
|
||
<option value="team_admin">Team-Admin</option>
|
||
{isServerAdmin && <option value="admin">Server-Admin</option>}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="min-w-0">
|
||
<label className="block text-muted mb-1">
|
||
Automatisch Team zuweisen (optional)
|
||
</label>
|
||
<select
|
||
value={inviteTeamId}
|
||
onChange={(e) => setInviteTeamId(e.target.value)}
|
||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||
>
|
||
<option value="">Kein direktes Team</option>
|
||
{flattenedTeams.map((t) => (
|
||
<option key={t.id} value={t.id}>
|
||
{t.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end">
|
||
<button
|
||
type="submit"
|
||
className="btn-action h-8 px-4 text-xs font-semibold flex items-center gap-1.5 border-accent text-main"
|
||
>
|
||
<KeyRound className="w-3.5 h-3.5 text-accent" />
|
||
<span>Einladungscode generieren</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
{/* Active Invites List */}
|
||
{invites.length > 0 && (
|
||
<div className="pt-2 border-t border-border space-y-1.5">
|
||
<p className="text-[11px] font-semibold text-muted">
|
||
Aktive & bisherige Einladungscodes:
|
||
</p>
|
||
<div className="divide-y divide-border border border-border bg-panel rounded-card overflow-hidden">
|
||
{invites.map((inv) => (
|
||
<div
|
||
key={inv.id}
|
||
className="p-2 flex flex-wrap items-center justify-between gap-2"
|
||
>
|
||
<div className="flex items-center gap-2.5">
|
||
<code className="px-2 py-0.5 bg-canvas border border-border font-mono font-bold text-accent rounded-card">
|
||
{inv.code}
|
||
</code>
|
||
<span className="text-muted">
|
||
Rolle: <strong className="text-main">{inv.role}</strong>
|
||
{inv.email ? ` · Für: ${inv.email}` : ''}
|
||
</span>
|
||
{inv.usedBy ? (
|
||
<span className="badge-neutral text-[10px]">
|
||
Eingelöst
|
||
</span>
|
||
) : (
|
||
<span className="badge-ok text-[10px]">
|
||
Offen
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1.5">
|
||
{!inv.usedBy && (
|
||
<button
|
||
onClick={() => handleCopyInviteCode(inv)}
|
||
className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
|
||
>
|
||
<Copy className="w-3 h-3" />
|
||
<span>{copiedInviteId === inv.id ? 'Kopiert!' : 'Code kopieren'}</span>
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => handleDeleteInvite(inv.id)}
|
||
className="btn-icon btn-icon-danger"
|
||
title="Einladung löschen"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Users List */}
|
||
<div className="space-y-2">
|
||
<h3 className="font-bold text-main">
|
||
Registrierte Benutzer ({users.length})
|
||
</h3>
|
||
<div className="border border-border divide-y divide-border bg-canvas rounded-card overflow-hidden">
|
||
{users.map((u) => (
|
||
<div key={u.id} className="p-3 space-y-2">
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-bold text-main">{u.displayName}</span>
|
||
{!u.isActive && (
|
||
<span className="badge-err text-[10px]">
|
||
Gesperrt
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-muted text-[11px]">{u.email}</p>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{/* Role selector */}
|
||
<select
|
||
value={u.role}
|
||
disabled={!isServerAdmin && u.role === 'admin'}
|
||
onChange={(e) => handleChangeUserRole(u, e.target.value as UserRole)}
|
||
className="h-7 px-2 input-field text-[11px] bg-panel"
|
||
title="Benutzerrolle ändern"
|
||
>
|
||
<option value="member">Mitglied</option>
|
||
<option value="team_admin">Team-Admin</option>
|
||
{isServerAdmin && <option value="admin">Server-Admin</option>}
|
||
</select>
|
||
|
||
{isServerAdmin && (
|
||
<>
|
||
<button
|
||
onClick={() =>
|
||
setResetPwdUserId(resetPwdUserId === u.id ? null : u.id)
|
||
}
|
||
className="btn-action h-7 px-2 text-[11px]"
|
||
>
|
||
Passwort
|
||
</button>
|
||
|
||
{u.id !== currentUser.id && (
|
||
<>
|
||
<button
|
||
onClick={() => handleToggleUserActive(u)}
|
||
className="btn-action h-7 px-2 text-[11px]"
|
||
>
|
||
{u.isActive ? 'Sperren' : 'Aktivieren'}
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => handleDeleteUser(u)}
|
||
className="btn-icon btn-icon-danger"
|
||
title="Benutzer löschen"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{resetPwdUserId === u.id && (
|
||
<div className="flex items-center gap-2 pt-2 border-t border-border">
|
||
<input
|
||
type="password"
|
||
value={resetPwdVal}
|
||
onChange={(e) => setResetPwdVal(e.target.value)}
|
||
placeholder="Neues Passwort eingeben…"
|
||
className="flex-1 h-7 px-2 input-field"
|
||
/>
|
||
<button
|
||
onClick={() => handleConfirmResetPassword(u.id)}
|
||
className="btn-primary h-7 px-3 text-[11px]"
|
||
>
|
||
Speichern
|
||
</button>
|
||
<button
|
||
onClick={() => setResetPwdUserId(null)}
|
||
className="btn-action h-7 px-2 text-[11px]"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================= */}
|
||
{/* SECTION 2: ORGANISATIONEN & TEAMS */}
|
||
{/* ================================================================= */}
|
||
{section === 'orgs' && (
|
||
<div className="space-y-6">
|
||
<div className="border-b border-border pb-3">
|
||
<h2 className="text-sm font-bold text-main">Organisationen & Teams verwalten</h2>
|
||
<p className="text-muted mt-0.5">
|
||
Erstelle Organisationen und unterteile sie in Teams. Weise Benutzern Teams zu, damit
|
||
sie im Modus "Teams isoliert" gemeinsam an Listen und Aufgaben arbeiten können.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Create Organization & Team */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||
<h3 className="font-bold text-main">1. Neue Organisation gründen</h3>
|
||
<form onSubmit={handleCreateOrg} className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={newOrgName}
|
||
onChange={(e) => setNewOrgName(e.target.value)}
|
||
placeholder="z.B. Homelab, Familie, Firma…"
|
||
required
|
||
className="flex-1 min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
<button type="submit" className="btn-primary h-8 px-3 text-xs flex-shrink-0">
|
||
Anlegen
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||
<h3 className="font-bold text-main">2. Neues Team in Organisation anlegen</h3>
|
||
{orgs.length === 0 ? (
|
||
<p className="text-faint">
|
||
Bitte lege zuerst links eine Organisation an.
|
||
</p>
|
||
) : (
|
||
<form onSubmit={handleCreateTeam} className="space-y-2">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||
<select
|
||
value={selectedOrgId}
|
||
onChange={(e) => setSelectedOrgId(e.target.value)}
|
||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||
>
|
||
{orgs.map((o) => (
|
||
<option key={o.id} value={o.id}>
|
||
Org: {o.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<input
|
||
type="text"
|
||
value={newTeamName}
|
||
onChange={(e) => setNewTeamName(e.target.value)}
|
||
placeholder="Team-Name (z.B. Infrastruktur)"
|
||
required
|
||
className="w-full min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={newTeamDesc}
|
||
onChange={(e) => setNewTeamDesc(e.target.value)}
|
||
placeholder="Kurzbeschreibung (optional)…"
|
||
className="flex-1 min-w-0 h-8 px-2.5 input-field"
|
||
/>
|
||
<button type="submit" className="btn-primary h-8 px-3 text-xs flex-shrink-0">
|
||
Team erstellen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Organizations & Nested Teams Display */}
|
||
<div className="space-y-4">
|
||
{orgs.length === 0 ? (
|
||
<div className="p-6 bg-canvas border border-border rounded-card text-center text-faint">
|
||
Noch keine Organisationen vorhanden.
|
||
</div>
|
||
) : (
|
||
orgs.map((org) => {
|
||
const orgTeams = Array.isArray(org.teams) ? org.teams : [];
|
||
return (
|
||
<div key={org.id} className="bg-canvas border border-border rounded-card overflow-hidden">
|
||
<div className="p-3 bg-panel-elevated border-b border-border flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Building2 className="w-4 h-4 text-accent" />
|
||
<span className="font-bold text-sm text-main">{org.name}</span>
|
||
<span className="text-[11px] text-muted">
|
||
({orgTeams.length} {orgTeams.length === 1 ? 'Team' : 'Teams'})
|
||
</span>
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteOrg(org)}
|
||
className="btn-icon btn-icon-danger"
|
||
title="Organisation löschen"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-3 space-y-3">
|
||
{orgTeams.length === 0 ? (
|
||
<p className="text-faint text-xs">
|
||
Noch keine Teams in dieser Organisation.
|
||
</p>
|
||
) : (
|
||
orgTeams.map((team) => {
|
||
const members = Array.isArray(team.members) ? team.members : [];
|
||
return (
|
||
<div
|
||
key={team.id}
|
||
className="p-3 bg-panel border border-border rounded-card space-y-3"
|
||
>
|
||
<div className="flex items-center justify-between border-b border-border pb-2">
|
||
<div>
|
||
<span className="font-bold text-main flex items-center gap-1.5">
|
||
<Users className="w-3.5 h-3.5 text-accent" />
|
||
<span>{team.name}</span>
|
||
</span>
|
||
{team.description && (
|
||
<p className="text-[11px] text-muted mt-0.5">
|
||
{team.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteTeam(team)}
|
||
className="btn-icon btn-icon-danger"
|
||
title="Team löschen"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Team Members */}
|
||
<div className="space-y-1.5">
|
||
<p className="text-[11px] font-semibold text-muted">
|
||
Mitglieder ({members.length}):
|
||
</p>
|
||
{members.length === 0 ? (
|
||
<p className="text-[11px] text-faint">
|
||
Noch keine Mitglieder zugewiesen.
|
||
</p>
|
||
) : (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{members.map((m) => (
|
||
<div
|
||
key={m.userId}
|
||
className="px-2 py-1 bg-canvas border border-border rounded-btn flex items-center gap-2"
|
||
>
|
||
<span className="text-main font-medium">
|
||
{m.displayName}
|
||
</span>
|
||
<span className="text-[10px] text-muted">
|
||
({m.role})
|
||
</span>
|
||
<button
|
||
onClick={() =>
|
||
handleRemoveMemberFromTeam(team.id, m.userId)
|
||
}
|
||
className="text-faint hover:text-status-err"
|
||
title="Aus Team entfernen"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Add User to Team */}
|
||
<div className="pt-2 border-t border-border flex flex-wrap items-center gap-2">
|
||
<select
|
||
value={memberSelectByTeam[team.id] || ''}
|
||
onChange={(e) =>
|
||
setMemberSelectByTeam((prev) => ({
|
||
...prev,
|
||
[team.id]: e.target.value,
|
||
}))
|
||
}
|
||
className="flex-1 min-w-[160px] h-7 px-2 input-field text-[11px] bg-canvas"
|
||
>
|
||
<option value="">Benutzer auswählen…</option>
|
||
{users.map((u) => (
|
||
<option key={u.id} value={u.id}>
|
||
{u.displayName} ({u.email})
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
<select
|
||
value={memberRoleByTeam[team.id] || 'member'}
|
||
onChange={(e) =>
|
||
setMemberRoleByTeam((prev) => ({
|
||
...prev,
|
||
[team.id]: e.target.value,
|
||
}))
|
||
}
|
||
className="h-7 px-2 input-field text-[11px] bg-canvas"
|
||
>
|
||
<option value="member">Mitglied</option>
|
||
<option value="team_admin">Team-Admin</option>
|
||
</select>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => handleAddMemberToTeam(team.id)}
|
||
disabled={!memberSelectByTeam[team.id]}
|
||
className="btn-action h-7 px-2.5 text-[11px] disabled:opacity-40"
|
||
>
|
||
+ Zum Team hinzufügen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================= */}
|
||
{/* SECTION 3: SERVER & SHARING-ISOLATION (SERVER-ADMIN ONLY) */}
|
||
{/* ================================================================= */}
|
||
{section === 'server' && isServerAdmin && (
|
||
<div className="space-y-6">
|
||
<div className="border-b border-border pb-3">
|
||
<h2 className="text-sm font-bold text-main">
|
||
Server-Grundeinstellungen & Benutzer-Sichtbarkeit
|
||
</h2>
|
||
<p className="text-muted mt-0.5">
|
||
Als Server-Admin bestimmst du zentral für alle Nutzer, ob sie komplett isoliert
|
||
arbeiten, sich nur innerhalb ihrer Teams sehen oder ob alle Nutzer für alle sichtbar sind.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-muted font-semibold mb-1">
|
||
Name der MindSift-Instanz
|
||
</label>
|
||
<div className="flex gap-2 max-w-md">
|
||
<input
|
||
type="text"
|
||
value={settings.instanceName}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, instanceName: e.target.value }))
|
||
}
|
||
className="flex-1 h-9 px-3 input-field"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSaveSystemSettings()}
|
||
className="btn-primary h-9 px-4 text-xs"
|
||
>
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sharing Isolation Cards */}
|
||
<div className="space-y-2">
|
||
<label className="block text-muted font-semibold flex items-center gap-1.5">
|
||
<Share2 className="w-4 h-4 text-accent" />
|
||
<span>Globale Sharing- & Sichtbarkeits-Isolation</span>
|
||
</label>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSaveSystemSettings({ sharingMode: 'strict_private' })}
|
||
className={`p-4 text-left border rounded-card transition-colors ${
|
||
settings.sharingMode === 'strict_private'
|
||
? 'bg-canvas border-accent text-main shadow-panel'
|
||
: 'bg-canvas/50 border-border text-muted hover:text-main'
|
||
}`}
|
||
>
|
||
<p className="font-bold text-xs text-main">1. Strikt Privat (Keiner sieht andere)</p>
|
||
<p className="text-[11px] text-muted mt-1 leading-relaxed">
|
||
Jeder Benutzer arbeitet komplett für sich allein. Keine geteilten Spaces und keine
|
||
Benutzersuche möglich.
|
||
</p>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSaveSystemSettings({ sharingMode: 'teams_only' })}
|
||
className={`p-4 text-left border rounded-card transition-colors ${
|
||
settings.sharingMode === 'teams_only'
|
||
? 'bg-canvas border-accent text-main shadow-panel'
|
||
: 'bg-canvas/50 border-border text-muted hover:text-main'
|
||
}`}
|
||
>
|
||
<p className="font-bold text-xs text-main">2. Teams isoliert (Empfohlen)</p>
|
||
<p className="text-[11px] text-muted mt-1 leading-relaxed">
|
||
Benutzer sehen ausschließlich Personen, mit denen sie mindestens ein gemeinsames Team
|
||
teilen.
|
||
</p>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSaveSystemSettings({ sharingMode: 'open' })}
|
||
className={`p-4 text-left border rounded-card transition-colors ${
|
||
settings.sharingMode === 'open'
|
||
? 'bg-canvas border-accent text-main shadow-panel'
|
||
: 'bg-canvas/50 border-border text-muted hover:text-main'
|
||
}`}
|
||
>
|
||
<p className="font-bold text-xs text-main">3. Offen (Alle sehen alle)</p>
|
||
<p className="text-[11px] text-muted mt-1 leading-relaxed">
|
||
Alle registrierten Benutzer dieser Instanz können sich gegenseitig sehen und Spaces
|
||
miteinander teilen.
|
||
</p>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Public Registration Toggle Switch */}
|
||
<div className="p-4 bg-canvas border border-border rounded-card flex items-center justify-between gap-4">
|
||
<div className="pr-4">
|
||
<p className="font-bold text-main">Öffentliche Selbstregistrierung erlauben</p>
|
||
<p className="text-[11px] text-muted mt-0.5">
|
||
Wenn deaktiviert, können sich fremde Personen auf dem Login-Bildschirm nicht selbst registrieren.
|
||
Neue Konten erfordern dann zwingend einen Einladungscode oder müssen von einem Admin angelegt werden.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 flex-shrink-0">
|
||
<span className={`text-xs font-medium hidden sm:inline ${settings.allowRegistration ? 'text-accent' : 'text-muted'}`}>
|
||
{settings.allowRegistration ? 'Aktiviert (Offen)' : 'Gesperrt (Nur Einladung)'}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={settings.allowRegistration}
|
||
onClick={() =>
|
||
handleSaveSystemSettings({ allowRegistration: !settings.allowRegistration })
|
||
}
|
||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-pill border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||
settings.allowRegistration ? 'bg-accent' : 'bg-panel-elevated border border-border'
|
||
}`}
|
||
title={settings.allowRegistration ? 'Selbstregistrierung deaktivieren' : 'Selbstregistrierung aktivieren'}
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-pill bg-white shadow-md ring-0 transition duration-200 ease-in-out ${
|
||
settings.allowRegistration ? 'translate-x-5' : 'translate-x-0'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================= */}
|
||
{/* SECTION 4: E-MAIL / SMTP-SERVER (SERVER-ADMIN ONLY) */}
|
||
{/* ================================================================= */}
|
||
{section === 'smtp' && isServerAdmin && (
|
||
<div className="space-y-6">
|
||
<div className="border-b border-border pb-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||
<div>
|
||
<h2 className="text-sm font-bold text-main">
|
||
E-Mail / SMTP-Server für Aufgaben-Alarme
|
||
</h2>
|
||
<p className="text-muted mt-0.5">
|
||
Konfiguriere den Postausgangsserver per Docker-Compose Environment-Variablen oder
|
||
direkt hier über die Oberfläche (wird persistent in der SQLite-Datenbank gespeichert).
|
||
</p>
|
||
</div>
|
||
|
||
{settings.smtpConfiguredViaEnv && (
|
||
<span className="badge-ok text-[11px] flex-shrink-0">
|
||
Docker Env erkannt
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-muted font-medium mb-1">
|
||
SMTP Host (`SMTP_HOST`)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtpHost || ''}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpHost: e.target.value }))
|
||
}
|
||
placeholder="z.B. smtp.example.com oder mail.deinedomain.de"
|
||
className="w-full h-9 px-3 input-field font-mono"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-muted font-medium mb-1">
|
||
SMTP Port (`SMTP_PORT`)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={settings.smtpPort || 587}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpPort: Number(e.target.value) }))
|
||
}
|
||
placeholder="587"
|
||
className="w-full h-9 px-3 input-field font-mono"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-muted font-medium mb-1">
|
||
SMTP Benutzername (`SMTP_USER`)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtpUser || ''}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpUser: e.target.value }))
|
||
}
|
||
placeholder="alerts@deinedomain.de"
|
||
className="w-full h-9 px-3 input-field font-mono"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-muted font-medium mb-1">
|
||
SMTP Passwort (`SMTP_PASS`)
|
||
</label>
|
||
<input
|
||
type="password"
|
||
value={settings.smtpPass || ''}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpPass: e.target.value }))
|
||
}
|
||
placeholder="••••••••••••"
|
||
className="w-full h-9 px-3 input-field font-mono"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-muted font-medium mb-1">
|
||
Absender-Adresse (`SMTP_FROM`)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtpFrom || ''}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpFrom: e.target.value }))
|
||
}
|
||
placeholder="MindSift <alerts@deinedomain.de>"
|
||
className="w-full h-9 px-3 input-field"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center pt-5">
|
||
<label className="flex items-center gap-2 cursor-pointer select-none">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.smtpTls ?? true}
|
||
onChange={(e) =>
|
||
setSettings((prev) => ({ ...prev, smtpTls: e.target.checked }))
|
||
}
|
||
className="w-4 h-4 checkbox-square cursor-pointer"
|
||
/>
|
||
<span className="text-main font-medium">
|
||
STARTTLS / TLS-Verschlüsselung verwenden (`SMTP_TLS=true`)
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end pt-2 border-t border-border">
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSaveSystemSettings()}
|
||
className="btn-primary h-9 px-5 text-xs font-semibold"
|
||
>
|
||
SMTP-Konfiguration in Datenbank speichern
|
||
</button>
|
||
</div>
|
||
|
||
{/* Test SMTP Delivery */}
|
||
<div className="p-4 bg-canvas border border-border rounded-card space-y-2">
|
||
<h3 className="font-bold text-main">SMTP-Verbindung testen</h3>
|
||
<p className="text-[11px] text-muted">
|
||
Sendet sofort eine Test-E-Mail mit den oben eingetragenen Daten.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
<input
|
||
type="email"
|
||
value={testSmtpEmail}
|
||
onChange={(e) => setTestSmtpEmail(e.target.value)}
|
||
placeholder="empfaenger@beispiel.de"
|
||
className="flex-1 h-8 px-3 input-field"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleTestSmtp}
|
||
disabled={testingSmtp || !testSmtpEmail.trim()}
|
||
className="btn-action h-8 px-4 text-xs flex items-center justify-center gap-1.5 disabled:opacity-40"
|
||
>
|
||
<Send className="w-3.5 h-3.5 text-accent" />
|
||
<span>{testingSmtp ? 'Sende Test-Mail…' : 'Test-E-Mail senden'}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|