b85c8c67e2
- Neuen Redux Slice `systemSettingsSlice` erstellt, um Systemdaten zentral zu verwalten. - Header-Icon für Systemeinstellungen holt jetzt Daten aus `systemSettingsSlice` statt `variablesSlice`. - Die Einstellungen-Seite (`Allgemeine Einstellungen`) wurde umgestellt und liest nun ebenfalls aus `systemSettingsSlice`. - UI-Optimierungen für die Einstellungen-Seite, um alle Eingabefelder kompakter darzustellen.
493 lines
16 KiB
TypeScript
493 lines
16 KiB
TypeScript
"use client"; // components/header/settingsModal/SettingsModal.tsx
|
|
import React, { useState, useEffect } from "react";
|
|
import ReactModal from "react-modal";
|
|
import "bootstrap-icons/font/bootstrap-icons.css";
|
|
import { RootState } from "../../../redux/store";
|
|
import { useSelector } from "react-redux";
|
|
import handleClearDatabase from "./handlers/handleClearDatabase";
|
|
import handleReboot from "./handlers/handleReboot";
|
|
import handleSetDateTime from "./handlers/handleSetDateTime";
|
|
import handleSubmit from "./handlers/handleSubmit";
|
|
import bcrypt from "bcryptjs";
|
|
import CryptoJS from "crypto-js";
|
|
|
|
ReactModal.setAppElement("#__next");
|
|
|
|
const USERS = {
|
|
Admin: {
|
|
username: "admin",
|
|
// Gehashte Version von "admin" mit bcrypt
|
|
password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G",
|
|
role: "Admin",
|
|
},
|
|
};
|
|
|
|
// Funktion zur Generierung eines AES-Schlüssels und IVs
|
|
function generateKeyAndIV() {
|
|
const encryptionKey = process.env.NEXT_PUBLIC_ENCRYPTION_KEY;
|
|
const encryptionIV = process.env.NEXT_PUBLIC_ENCRYPTION_IV;
|
|
|
|
if (!encryptionKey || !encryptionIV) {
|
|
throw new Error("Encryption key or IV is not defined.");
|
|
}
|
|
|
|
const key = CryptoJS.enc.Utf8.parse(encryptionKey);
|
|
const iv = CryptoJS.enc.Utf8.parse(encryptionIV);
|
|
return { key, iv };
|
|
}
|
|
|
|
// Funktion zur Generierung eines Tokens
|
|
function generateToken(user) {
|
|
const payload = {
|
|
username: user.username,
|
|
role: user.role,
|
|
exp: Date.now() + 5 * 60 * 1000, // Ablaufzeit: 5 Minuten
|
|
};
|
|
const token = JSON.stringify(payload);
|
|
const { key, iv } = generateKeyAndIV();
|
|
const encryptedToken = CryptoJS.AES.encrypt(token, key, { iv }).toString();
|
|
return encryptedToken;
|
|
}
|
|
|
|
// Funktion zur Entschlüsselung des Tokens
|
|
function decryptToken(encryptedToken) {
|
|
const { key, iv } = generateKeyAndIV();
|
|
const bytes = CryptoJS.AES.decrypt(encryptedToken, key, { iv });
|
|
const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
|
|
return JSON.parse(decryptedToken);
|
|
}
|
|
|
|
function SettingModal({ showModal, onClose }) {
|
|
const [isAdminLoggedIn, setAdminLoggedIn] = useState(false);
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [showLoginForm, setShowLoginForm] = useState(false);
|
|
|
|
function handleAdminLogin(e) {
|
|
e.preventDefault();
|
|
const user = USERS.Admin;
|
|
bcrypt.compare(password, user.password, (err, isMatch) => {
|
|
if (isMatch) {
|
|
const token = generateToken(user);
|
|
sessionStorage.setItem("token", token);
|
|
localStorage.setItem("isAdminLoggedIn", "true");
|
|
setShowLoginForm(false);
|
|
onClose();
|
|
} else {
|
|
setError(
|
|
"Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (showModal) {
|
|
const token = sessionStorage.getItem("token");
|
|
if (token) {
|
|
try {
|
|
const { exp } = decryptToken(token);
|
|
if (Date.now() < exp) {
|
|
setAdminLoggedIn(true);
|
|
} else {
|
|
sessionStorage.removeItem("token");
|
|
localStorage.setItem("isAdminLoggedIn", "false");
|
|
}
|
|
} catch (error) {
|
|
console.error("Token-Entschlüsselung fehlgeschlagen:", error);
|
|
}
|
|
}
|
|
}
|
|
}, [showModal]);
|
|
const deviceName_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.deviceName
|
|
);
|
|
const mac1_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.mac1
|
|
);
|
|
const ip_Redux = useSelector((state: RootState) => state.systemSettings.ip);
|
|
const subnet_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.subnet
|
|
);
|
|
const gateway_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.gateway
|
|
);
|
|
const datetime_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.cplInternalTimestamp
|
|
);
|
|
const ntp1_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.ntp1
|
|
);
|
|
const ntp2_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.ntp2
|
|
);
|
|
const ntp3_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.ntp3
|
|
);
|
|
const ntpTimezone_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.ntpTimezone
|
|
);
|
|
const active_Redux = useSelector(
|
|
(state: RootState) => state.systemSettings.ntpActive
|
|
);
|
|
|
|
const [name, setName] = useState(deviceName_Redux || "");
|
|
const [mac1, setMac1] = useState(mac1_Redux || "");
|
|
const [ip, setIp] = useState(ip_Redux || "");
|
|
const [subnet, setSubnet] = useState(subnet_Redux || "");
|
|
const [gateway, setGateway] = useState(gateway_Redux || "");
|
|
const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
|
|
const [ntp1, setNtp1] = useState(ntp1_Redux || "");
|
|
const [ntp2, setNtp2] = useState(ntp2_Redux || "");
|
|
const [ntp3, setNtp3] = useState(ntp3_Redux || "");
|
|
const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
|
|
const [active, setActive] = useState(active_Redux || "");
|
|
|
|
const [originalValues, setOriginalValues] = useState({});
|
|
const currentValues = {
|
|
name,
|
|
ip,
|
|
subnet,
|
|
gateway,
|
|
ntp1,
|
|
ntp2,
|
|
ntp3,
|
|
ntpTimezone,
|
|
active,
|
|
};
|
|
const handleAdminLogout = () => {
|
|
sessionStorage.removeItem("token"); // Token aus sessionStorage entfernen
|
|
localStorage.setItem("isAdminLoggedIn", "false"); // Admin-Status im localStorage setzen
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (showModal) {
|
|
setName(deviceName_Redux || "");
|
|
setMac1(mac1_Redux || "");
|
|
setIp(ip_Redux || "");
|
|
setSubnet(subnet_Redux || "");
|
|
setGateway(gateway_Redux || "");
|
|
setSystemUhr(datetime_Redux || "");
|
|
setNtp1(ntp1_Redux || "");
|
|
setNtp2(ntp2_Redux || "");
|
|
setNtp3(ntp3_Redux || "");
|
|
setNtpTimezone(ntpTimezone_Redux || "");
|
|
setActive(active_Redux || "");
|
|
}
|
|
}, [showModal]);
|
|
|
|
useEffect(() => {
|
|
setOriginalValues({
|
|
name: deviceName_Redux,
|
|
ip: ip_Redux,
|
|
subnet: subnet_Redux,
|
|
gateway: gateway_Redux,
|
|
ntp1: ntp1_Redux,
|
|
ntp2: ntp2_Redux,
|
|
ntp3: ntp3_Redux,
|
|
ntpTimezone: ntpTimezone_Redux,
|
|
active: active_Redux,
|
|
});
|
|
}, [
|
|
deviceName_Redux,
|
|
ip_Redux,
|
|
subnet_Redux,
|
|
gateway_Redux,
|
|
ntp1_Redux,
|
|
ntp2_Redux,
|
|
ntp3_Redux,
|
|
ntpTimezone_Redux,
|
|
active_Redux,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
// Überprüfen, ob ein Token im SessionStorage vorhanden ist
|
|
const token = sessionStorage.getItem("token");
|
|
if (token) {
|
|
try {
|
|
// Token mit CryptoJS entschlüsseln
|
|
const bytes = CryptoJS.AES.decrypt(
|
|
token,
|
|
process.env.NEXT_PUBLIC_ENCRYPTION_KEY
|
|
);
|
|
const decryptedToken = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
|
|
|
|
// Ablaufzeit überprüfen
|
|
if (Date.now() < decryptedToken.exp) {
|
|
setAdminLoggedIn(true);
|
|
} else {
|
|
// Token ist abgelaufen
|
|
sessionStorage.removeItem("token");
|
|
setAdminLoggedIn(false);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Entschlüsseln des Tokens:", error);
|
|
setAdminLoggedIn(false);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<ReactModal
|
|
isOpen={showModal}
|
|
onRequestClose={onClose}
|
|
shouldCloseOnOverlayClick={false}
|
|
style={{
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 100 },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "80%",
|
|
maxWidth: "800px",
|
|
padding: "20px",
|
|
borderRadius: "8px",
|
|
border: "none",
|
|
position: "relative",
|
|
},
|
|
}}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
position: "absolute",
|
|
top: "10px",
|
|
right: "10px",
|
|
background: "transparent",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
fontSize: "24px",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
|
|
{/* Hauptinhalt oder Login-Formular */}
|
|
{showLoginForm ? (
|
|
<div className="text-black">
|
|
<h2 className="text-lg font-bold mb-4">Admin Login</h2>
|
|
<form onSubmit={(e) => e.preventDefault()}>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium">
|
|
Benutzername:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium">Passwort:</label>
|
|
<input
|
|
type="password"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
{error && <p className="text-red-500">{error}</p>}
|
|
<button
|
|
onClick={handleAdminLogin}
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded w-full"
|
|
>
|
|
Anmelden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
) : (
|
|
<div className="text-black">
|
|
<h2 className="text-lg font-bold mb-4">System:</h2>
|
|
<form>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium">Name:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
MAC Adresse 1:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={mac1}
|
|
onChange={(e) => setMac1(e.target.value)}
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">IP:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ip}
|
|
onChange={(e) => setIp(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Subnet:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={subnet}
|
|
onChange={(e) => setSubnet(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">Gateway:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={gateway}
|
|
onChange={(e) => setGateway(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
Systemuhr:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={systemUhr}
|
|
disabled
|
|
/>
|
|
{/* Button für Systemzeit übernehmen */}
|
|
|
|
<div className="flex w-full mt-1 justify-end">
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => {
|
|
if (
|
|
window.confirm(
|
|
"Möchten Sie wirklich die Systemzeit übernehmen?"
|
|
)
|
|
) {
|
|
handleSetDateTime();
|
|
}
|
|
}}
|
|
>
|
|
Systemzeit übernehmen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SNTP Client */}
|
|
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 1:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp1}
|
|
onChange={(e) => setNtp1(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 2:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp2}
|
|
onChange={(e) => setNtp2(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 3:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp3}
|
|
onChange={(e) => setNtp3(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Zeitzone:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntpTimezone}
|
|
onChange={(e) => setNtpTimezone(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
NTP Active:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={active}
|
|
onChange={(e) => setActive(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Footer */}
|
|
<div className="flex justify-between mt-4">
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => handleReboot()}
|
|
>
|
|
Neustart CPL
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
isAdminLoggedIn
|
|
? handleAdminLogout()
|
|
: setShowLoginForm(true);
|
|
}}
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
>
|
|
{isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
|
|
</button>
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => handleClearDatabase()}
|
|
>
|
|
Datenbank leeren
|
|
</button>
|
|
<button
|
|
onClick={() => handleSubmit(originalValues, currentValues)}
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
>
|
|
Übernehmen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</ReactModal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SettingModal;
|