114 lines
3.7 KiB
TypeScript
114 lines
3.7 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
export default function OPCUAInterfaceSettings() {
|
|
const [isEnabled, setIsEnabled] = useState(true);
|
|
const [encryption, setEncryption] = useState("None");
|
|
const [users, setUsers] = useState([
|
|
{ id: 1, username: "admin", password: "admin123" },
|
|
{ id: 2, username: "user1", password: "user123" },
|
|
]);
|
|
const [newUser, setNewUser] = useState({ username: "", password: "" });
|
|
|
|
const toggleServer = () => setIsEnabled(!isEnabled);
|
|
const updateEncryption = (event) => setEncryption(event.target.value);
|
|
const addUser = () => {
|
|
if (newUser.username && newUser.password) {
|
|
setUsers([...users, { id: users.length + 1, ...newUser }]);
|
|
setNewUser({ username: "", password: "" });
|
|
}
|
|
};
|
|
const removeUser = (id) => setUsers(users.filter((user) => user.id !== id));
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto p-6 bg-gray-100 shadow-md rounded-lg">
|
|
<h2 className="text-xl font-semibold mb-4">OPCUA Server Einstellungen</h2>
|
|
|
|
{/* Server Aktivierung */}
|
|
<div className="mb-4">
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={isEnabled}
|
|
onChange={toggleServer}
|
|
className="hidden"
|
|
/>
|
|
<div
|
|
className={`w-12 h-6 rounded-full transition-all ${
|
|
isEnabled ? "bg-green-500" : "bg-gray-300"
|
|
}`}
|
|
></div>
|
|
<span className="ml-2 text-sm">
|
|
{isEnabled ? "Aktiviert" : "Deaktiviert"}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Verschlüsselung */}
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Verschlüsselung
|
|
</label>
|
|
<select
|
|
value={encryption}
|
|
onChange={updateEncryption}
|
|
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200"
|
|
>
|
|
<option value="None">Keine</option>
|
|
<option value="Basic256">Basic256</option>
|
|
<option value="Basic256Sha256">Basic256Sha256</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Benutzer & Passwörter */}
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-semibold mb-2">Benutzer</h3>
|
|
<ul className="space-y-2">
|
|
{users.map((user) => (
|
|
<li
|
|
key={user.id}
|
|
className="p-2 bg-white shadow-sm rounded-md flex justify-between items-center"
|
|
>
|
|
<span className="font-medium">{user.username}</span>
|
|
<span className="text-gray-600 ml-2">
|
|
(Passwort: {user.password})
|
|
</span>
|
|
<button
|
|
onClick={() => removeUser(user.id)}
|
|
className="ml-4 text-red-500"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Benutzername"
|
|
value={newUser.username}
|
|
onChange={(e) =>
|
|
setNewUser({ ...newUser, username: e.target.value })
|
|
}
|
|
className="p-2 border rounded mr-2"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Passwort"
|
|
value={newUser.password}
|
|
onChange={(e) =>
|
|
setNewUser({ ...newUser, password: e.target.value })
|
|
}
|
|
className="p-2 border rounded mr-2"
|
|
/>
|
|
<button
|
|
onClick={addUser}
|
|
className="bg-blue-500 text-white p-2 rounded"
|
|
>
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|