Joachim Hummel
a39b53151e
Modernize all admin interface pages with consistent design language: - Add hero sections with gradient backgrounds and blur effects - Implement modern card designs with hover animations - Use gradient buttons with shadow effects - Add emoji icons in colored containers - Apply consistent color themes per page - Enhance user experience with smooth transitions Pages updated: - /admin/devices (purple theme) - /admin/mqtt (cyan/blue theme) - /admin/setup (emerald theme) - /admin/users (violet theme) - /admin/settings (indigo theme) - /admin/emails (pink/rose theme) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
691 lines
27 KiB
TypeScript
691 lines
27 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useSession } from "next-auth/react";
|
||
|
||
interface Device {
|
||
id: string;
|
||
name: string;
|
||
isActive: boolean;
|
||
}
|
||
|
||
interface MqttCredential {
|
||
id: number;
|
||
device_id: string;
|
||
mqtt_username: string;
|
||
mqtt_password_hash: string;
|
||
enabled: number;
|
||
created_at: string;
|
||
updated_at: string;
|
||
device_name: string;
|
||
mqtt_password?: string; // Nur bei Erstellung/Regenerierung vorhanden
|
||
}
|
||
|
||
interface AclRule {
|
||
id: number;
|
||
device_id: string;
|
||
topic_pattern: string;
|
||
permission: 'read' | 'write' | 'readwrite';
|
||
created_at: string;
|
||
}
|
||
|
||
interface SyncStatus {
|
||
pending_changes: number;
|
||
last_sync_at: string | null;
|
||
last_sync_status: string;
|
||
}
|
||
|
||
export default function MqttPage() {
|
||
const { data: session } = useSession();
|
||
const userRole = (session?.user as any)?.role;
|
||
const isAdmin = userRole === 'ADMIN';
|
||
|
||
const [devices, setDevices] = useState<Device[]>([]);
|
||
const [credentials, setCredentials] = useState<MqttCredential[]>([]);
|
||
const [aclRules, setAclRules] = useState<Record<string, AclRule[]>>({});
|
||
const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [syncing, setSyncing] = useState(false);
|
||
|
||
// Modal States
|
||
const [showAddModal, setShowAddModal] = useState(false);
|
||
const [showPasswordModal, setShowPasswordModal] = useState(false);
|
||
const [showAclModal, setShowAclModal] = useState(false);
|
||
const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
|
||
const [generatedPassword, setGeneratedPassword] = useState<string>("");
|
||
|
||
// Form States
|
||
const [addFormData, setAddFormData] = useState({
|
||
device_id: "",
|
||
auto_generate: true,
|
||
});
|
||
|
||
const [aclFormData, setAclFormData] = useState({
|
||
device_id: "",
|
||
topic_pattern: "",
|
||
permission: "readwrite" as 'read' | 'write' | 'readwrite',
|
||
mqtt_username: "", // Needed for correct topic pattern
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (isAdmin) {
|
||
fetchAll();
|
||
}
|
||
}, [isAdmin]);
|
||
|
||
const fetchAll = async () => {
|
||
try {
|
||
await Promise.all([
|
||
fetchDevices(),
|
||
fetchCredentials(),
|
||
fetchSyncStatus(),
|
||
]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const fetchDevices = async () => {
|
||
try {
|
||
const response = await fetch("/api/devices");
|
||
if (!response.ok) throw new Error("Failed to fetch devices");
|
||
const data = await response.json();
|
||
setDevices(data.devices || []);
|
||
} catch (err) {
|
||
console.error("Failed to fetch devices", err);
|
||
}
|
||
};
|
||
|
||
const fetchCredentials = async () => {
|
||
try {
|
||
const response = await fetch("/api/mqtt/credentials");
|
||
if (!response.ok) throw new Error("Failed to fetch credentials");
|
||
const data = await response.json();
|
||
setCredentials(data);
|
||
|
||
// Lade ACL Regeln für alle Devices mit Credentials
|
||
for (const cred of data) {
|
||
await fetchAclRules(cred.device_id);
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to fetch credentials", err);
|
||
}
|
||
};
|
||
|
||
const fetchAclRules = async (deviceId: string) => {
|
||
try {
|
||
const response = await fetch(`/api/mqtt/acl?device_id=${deviceId}`);
|
||
if (!response.ok) throw new Error("Failed to fetch ACL rules");
|
||
const rules = await response.json();
|
||
setAclRules(prev => ({ ...prev, [deviceId]: rules }));
|
||
} catch (err) {
|
||
console.error("Failed to fetch ACL rules", err);
|
||
}
|
||
};
|
||
|
||
const fetchSyncStatus = async () => {
|
||
try {
|
||
const response = await fetch("/api/mqtt/sync");
|
||
if (!response.ok) throw new Error("Failed to fetch sync status");
|
||
const status = await response.json();
|
||
setSyncStatus(status);
|
||
} catch (err) {
|
||
console.error("Failed to fetch sync status", err);
|
||
}
|
||
};
|
||
|
||
const handleAddCredentials = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
try {
|
||
const response = await fetch("/api/mqtt/credentials", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(addFormData),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const error = await response.json();
|
||
throw new Error(error.error || "Failed to create credentials");
|
||
}
|
||
|
||
const newCred = await response.json();
|
||
|
||
// Zeige generiertes Passwort an
|
||
if (newCred.mqtt_password) {
|
||
setGeneratedPassword(`Username: ${newCred.mqtt_username}\nPassword: ${newCred.mqtt_password}`);
|
||
setSelectedDevice(addFormData.device_id);
|
||
setShowPasswordModal(true);
|
||
}
|
||
|
||
await fetchCredentials();
|
||
await fetchSyncStatus();
|
||
setShowAddModal(false);
|
||
setAddFormData({ device_id: "", auto_generate: true });
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleDeleteCredentials = async (deviceId: string) => {
|
||
if (!confirm("MQTT Credentials für dieses Device löschen?")) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
|
||
method: "DELETE",
|
||
});
|
||
|
||
if (!response.ok) throw new Error("Failed to delete credentials");
|
||
|
||
await fetchCredentials();
|
||
await fetchSyncStatus();
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleRegeneratePassword = async (deviceId: string) => {
|
||
if (!confirm("Passwort neu generieren? Das alte Passwort wird ungültig.")) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ regenerate_password: true }),
|
||
});
|
||
|
||
if (!response.ok) throw new Error("Failed to regenerate password");
|
||
|
||
const updated = await response.json();
|
||
if (updated.mqtt_password) {
|
||
setGeneratedPassword(`Username: ${updated.mqtt_username}\nPassword: ${updated.mqtt_password}`);
|
||
setSelectedDevice(deviceId);
|
||
setShowPasswordModal(true);
|
||
}
|
||
|
||
await fetchCredentials();
|
||
await fetchSyncStatus();
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleToggleEnabled = async (deviceId: string, enabled: boolean) => {
|
||
try {
|
||
const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ enabled }),
|
||
});
|
||
|
||
if (!response.ok) throw new Error("Failed to update credentials");
|
||
|
||
await fetchCredentials();
|
||
await fetchSyncStatus();
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleAddAclRule = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
try {
|
||
const response = await fetch("/api/mqtt/acl", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(aclFormData),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const error = await response.json();
|
||
throw new Error(error.error || "Failed to create ACL rule");
|
||
}
|
||
|
||
await fetchAclRules(aclFormData.device_id);
|
||
await fetchSyncStatus();
|
||
setShowAclModal(false);
|
||
setAclFormData({ device_id: "", topic_pattern: "", permission: "readwrite", mqtt_username: "" });
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleDeleteAclRule = async (ruleId: number, deviceId: string) => {
|
||
if (!confirm("ACL Regel löschen?")) return;
|
||
|
||
try {
|
||
const response = await fetch(`/api/mqtt/acl/${ruleId}`, {
|
||
method: "DELETE",
|
||
});
|
||
|
||
if (!response.ok) throw new Error("Failed to delete ACL rule");
|
||
|
||
await fetchAclRules(deviceId);
|
||
await fetchSyncStatus();
|
||
} catch (err: any) {
|
||
alert(err.message);
|
||
}
|
||
};
|
||
|
||
const handleSync = async () => {
|
||
setSyncing(true);
|
||
try {
|
||
const response = await fetch("/api/mqtt/sync", {
|
||
method: "POST",
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
alert(result.message);
|
||
} else {
|
||
alert(`Sync fehlgeschlagen: ${result.message}`);
|
||
}
|
||
|
||
await fetchSyncStatus();
|
||
} catch (err: any) {
|
||
alert("Sync fehlgeschlagen: " + err.message);
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
};
|
||
|
||
const handleSendCredentialsEmail = async () => {
|
||
if (!selectedDevice) return;
|
||
|
||
// Parse username and password from generatedPassword string
|
||
const lines = generatedPassword.split('\n');
|
||
const usernameLine = lines.find(l => l.startsWith('Username:'));
|
||
const passwordLine = lines.find(l => l.startsWith('Password:'));
|
||
|
||
if (!usernameLine || !passwordLine) {
|
||
alert('Fehler beim Extrahieren der Credentials');
|
||
return;
|
||
}
|
||
|
||
const mqttUsername = usernameLine.replace('Username:', '').trim();
|
||
const mqttPassword = passwordLine.replace('Password:', '').trim();
|
||
|
||
try {
|
||
const response = await fetch('/api/mqtt/send-credentials', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
deviceId: selectedDevice,
|
||
mqttUsername,
|
||
mqttPassword,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const error = await response.json();
|
||
throw new Error(error.error || 'Failed to send email');
|
||
}
|
||
|
||
const result = await response.json();
|
||
alert(result.message);
|
||
} catch (err: any) {
|
||
alert('Email senden fehlgeschlagen: ' + err.message);
|
||
}
|
||
};
|
||
|
||
if (!isAdmin) {
|
||
return <div className="p-8">Keine Berechtigung</div>;
|
||
}
|
||
|
||
if (loading) {
|
||
return <div className="p-8">Lade...</div>;
|
||
}
|
||
|
||
const devicesWithoutCredentials = devices.filter(
|
||
d => d.isActive && !credentials.find(c => c.device_id === d.id)
|
||
);
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
{/* Hero Section with Gradient */}
|
||
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-cyan-600 via-blue-700 to-indigo-800 p-8 shadow-xl">
|
||
<div className="absolute top-0 right-0 -mt-4 -mr-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
||
<div className="absolute bottom-0 left-0 -mb-4 -ml-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
||
<div className="relative">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<div>
|
||
<h2 className="text-4xl font-bold text-white mb-2">MQTT Provisioning</h2>
|
||
<p className="text-cyan-100 text-lg">Verwalte MQTT-Zugangsdaten und Berechtigungen</p>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
{syncStatus && syncStatus.pending_changes > 0 && (
|
||
<span className="px-4 py-2 bg-yellow-400 text-yellow-900 rounded-lg text-sm font-bold shadow-lg">
|
||
{syncStatus.pending_changes} ausstehende Änderungen
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={handleSync}
|
||
disabled={syncing || !syncStatus || syncStatus.pending_changes === 0}
|
||
className="px-5 py-2.5 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl hover:from-green-600 hover:to-emerald-700 disabled:from-gray-400 disabled:to-gray-500 font-semibold shadow-lg hover:shadow-xl transition-all"
|
||
>
|
||
{syncing ? "Synchronisiere..." : "🔄 MQTT Sync"}
|
||
</button>
|
||
<button
|
||
onClick={() => setShowAddModal(true)}
|
||
className="px-5 py-2.5 bg-white text-cyan-700 rounded-xl hover:bg-cyan-50 font-semibold shadow-lg hover:shadow-xl transition-all"
|
||
>
|
||
+ Device Provisionieren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{syncStatus && (
|
||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||
<div className="bg-gradient-to-r from-slate-50 to-gray-50 px-6 py-4 border-b border-gray-200">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-white text-xl">
|
||
🔄
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900">Sync Status</h3>
|
||
</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-xl border border-blue-100">
|
||
<p className="text-sm font-semibold text-blue-700 uppercase tracking-wide mb-1">Status</p>
|
||
<p className={`text-2xl font-bold ${syncStatus.last_sync_status === 'success' ? 'text-green-600' : 'text-red-600'}`}>
|
||
{syncStatus.last_sync_status === 'success' ? '✓ Erfolgreich' : '✗ Fehler'}
|
||
</p>
|
||
</div>
|
||
{syncStatus.last_sync_at && (
|
||
<div className="bg-gradient-to-br from-purple-50 to-violet-50 p-4 rounded-xl border border-purple-100">
|
||
<p className="text-sm font-semibold text-purple-700 uppercase tracking-wide mb-1">Letzter Sync</p>
|
||
<p className="text-lg font-bold text-purple-900">{new Date(syncStatus.last_sync_at).toLocaleString('de-DE')}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-6">
|
||
{credentials.map(cred => {
|
||
const deviceRules = aclRules[cred.device_id] || [];
|
||
|
||
return (
|
||
<div key={cred.id} className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow">
|
||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-5 border-b border-blue-100">
|
||
<div className="flex justify-between items-start">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white text-2xl shadow-lg">
|
||
📱
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xl font-bold text-gray-900">{cred.device_name}</h3>
|
||
<p className="text-sm text-gray-600">Device ID: <code className="bg-white px-2 py-0.5 rounded font-mono text-xs">{cred.device_id}</code></p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => handleToggleEnabled(cred.device_id, !cred.enabled)}
|
||
className={`px-4 py-2 rounded-lg text-sm font-bold shadow-md ${cred.enabled ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white' : 'bg-gradient-to-r from-red-500 to-red-600 text-white'}`}
|
||
>
|
||
{cred.enabled ? '✓ Aktiviert' : '✗ Deaktiviert'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl p-4 mb-4 border border-gray-200">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Username</p>
|
||
<code className="text-sm font-mono text-gray-900 bg-white px-3 py-1.5 rounded-lg border border-gray-200 inline-block">{cred.mqtt_username}</code>
|
||
</div>
|
||
<div>
|
||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Erstellt</p>
|
||
<p className="text-sm text-gray-700">{new Date(cred.created_at).toLocaleString('de-DE')}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 mb-4">
|
||
<button
|
||
onClick={() => handleRegeneratePassword(cred.device_id)}
|
||
className="flex-1 px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-lg hover:from-yellow-600 hover:to-orange-600 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
|
||
>
|
||
🔑 Passwort Reset
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAclFormData({
|
||
device_id: cred.device_id,
|
||
topic_pattern: `owntracks/${cred.mqtt_username}/#`,
|
||
permission: "readwrite",
|
||
mqtt_username: cred.mqtt_username
|
||
});
|
||
setShowAclModal(true);
|
||
}}
|
||
className="flex-1 px-4 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
|
||
>
|
||
+ ACL Hinzufügen
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteCredentials(cred.device_id)}
|
||
className="px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-lg hover:from-red-700 hover:to-red-800 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
|
||
>
|
||
🗑️ Löschen
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-bold mb-3 text-gray-900 flex items-center gap-2">
|
||
<span className="text-lg">🔐</span>
|
||
ACL Regeln
|
||
</h4>
|
||
{deviceRules.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{deviceRules.map(rule => (
|
||
<div key={rule.id} className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<code className="text-sm font-mono bg-white px-3 py-1.5 rounded-lg border border-gray-200">{rule.topic_pattern}</code>
|
||
<span className="px-3 py-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg text-xs font-bold">{rule.permission}</span>
|
||
</div>
|
||
<p className="text-xs text-gray-500">Erstellt: {new Date(rule.created_at).toLocaleString('de-DE')}</p>
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteAclRule(rule.id, cred.device_id)}
|
||
className="ml-4 px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 text-xs font-semibold"
|
||
>
|
||
Löschen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-lg p-6 text-center border border-gray-200">
|
||
<p className="text-sm text-gray-500">Keine ACL Regeln definiert</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{credentials.length === 0 && (
|
||
<div className="relative overflow-hidden bg-gradient-to-br from-gray-50 to-slate-50 rounded-2xl shadow-lg p-12 text-center border border-gray-200">
|
||
<div className="absolute top-0 right-0 text-9xl opacity-5">🔐</div>
|
||
<p className="text-xl font-semibold text-gray-600 mb-2">Noch keine Devices provisioniert</p>
|
||
<p className="text-gray-500">Erstelle MQTT-Credentials für dein erstes Device.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Add Credentials Modal */}
|
||
{showAddModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||
<h2 className="text-xl font-bold mb-4">Device Provisionieren</h2>
|
||
<form onSubmit={handleAddCredentials}>
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium mb-1">Device</label>
|
||
<select
|
||
value={addFormData.device_id}
|
||
onChange={(e) => setAddFormData({ ...addFormData, device_id: e.target.value })}
|
||
className="w-full px-3 py-2 border rounded-md"
|
||
required
|
||
>
|
||
<option value="">Device auswählen</option>
|
||
{devicesWithoutCredentials.map(d => (
|
||
<option key={d.id} value={d.id}>{d.name} (ID: {d.id})</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="mb-4">
|
||
<label className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
checked={addFormData.auto_generate}
|
||
onChange={(e) => setAddFormData({ ...addFormData, auto_generate: e.target.checked })}
|
||
/>
|
||
<span className="text-sm">Automatisch Username & Passwort generieren</span>
|
||
</label>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button type="submit" className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
||
Erstellen
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowAddModal(false)}
|
||
className="flex-1 px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Password Display Modal */}
|
||
{showPasswordModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||
<h2 className="text-xl font-bold mb-4">MQTT Credentials</h2>
|
||
<div className="mb-4 p-4 bg-gray-100 rounded-md">
|
||
<pre className="text-sm whitespace-pre-wrap">{generatedPassword}</pre>
|
||
</div>
|
||
<p className="text-sm text-red-600 mb-4">
|
||
⚠️ Speichere diese Credentials! Das Passwort kann nicht nochmal angezeigt werden.
|
||
</p>
|
||
<button
|
||
onClick={async () => {
|
||
try {
|
||
// Moderne Clipboard API (bevorzugt)
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
await navigator.clipboard.writeText(generatedPassword);
|
||
alert("✓ In Zwischenablage kopiert!");
|
||
} else {
|
||
// Fallback für ältere Browser oder HTTP-Kontext
|
||
const textArea = document.createElement("textarea");
|
||
textArea.value = generatedPassword;
|
||
textArea.style.position = "fixed";
|
||
textArea.style.left = "-999999px";
|
||
textArea.style.top = "-999999px";
|
||
document.body.appendChild(textArea);
|
||
textArea.focus();
|
||
textArea.select();
|
||
|
||
try {
|
||
const successful = document.execCommand('copy');
|
||
if (successful) {
|
||
alert("✓ In Zwischenablage kopiert!");
|
||
} else {
|
||
throw new Error("Copy failed");
|
||
}
|
||
} finally {
|
||
document.body.removeChild(textArea);
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error("Clipboard error:", err);
|
||
alert("❌ Kopieren fehlgeschlagen. Bitte manuell kopieren:\n\n" + generatedPassword);
|
||
}
|
||
}}
|
||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 mb-2"
|
||
>
|
||
📋 In Zwischenablage kopieren
|
||
</button>
|
||
<button
|
||
onClick={handleSendCredentialsEmail}
|
||
className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 mb-2"
|
||
>
|
||
Per Email senden
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowPasswordModal(false);
|
||
setSelectedDevice(null);
|
||
}}
|
||
className="w-full px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
|
||
>
|
||
Schließen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Add ACL Rule Modal */}
|
||
{showAclModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||
<h2 className="text-xl font-bold mb-4">ACL Regel Hinzufügen</h2>
|
||
<form onSubmit={handleAddAclRule}>
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium mb-1">Topic Pattern</label>
|
||
<input
|
||
type="text"
|
||
value={aclFormData.topic_pattern}
|
||
onChange={(e) => setAclFormData({ ...aclFormData, topic_pattern: e.target.value })}
|
||
className="w-full px-3 py-2 border rounded-md"
|
||
placeholder={`owntracks/${aclFormData.mqtt_username || '<Username>'}/#`}
|
||
required
|
||
/>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Format: owntracks/<Username>/# (z.B. owntracks/device_12_4397af93/#)
|
||
</p>
|
||
</div>
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium mb-1">Berechtigung</label>
|
||
<select
|
||
value={aclFormData.permission}
|
||
onChange={(e) => setAclFormData({ ...aclFormData, permission: e.target.value as any })}
|
||
className="w-full px-3 py-2 border rounded-md"
|
||
>
|
||
<option value="read">Read (Lesen)</option>
|
||
<option value="write">Write (Schreiben)</option>
|
||
<option value="readwrite">Read/Write (Lesen & Schreiben)</option>
|
||
</select>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button type="submit" className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
||
Hinzufügen
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowAclModal(false)}
|
||
className="flex-1 px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|