Struktur verbessert in components

components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx

@@ -0,0 +1,113 @@
+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>
+  );
+}