Till Tomczak
0d5b87f163
- Added SSL configuration to the backend, including self-signed certificate generation and management. - Updated `setup_myp.sh` to create SSL certificates during installation. - Enhanced `app.py` to support SSL context for secure communication. - Introduced a new SSL management menu in the setup script for easier certificate handling. - Updated frontend API calls to use HTTPS for secure data transmission. - Implemented kiosk mode features, including automatic browser launch with SSL support. - Improved documentation in `SUMMARY.md` to reflect new features and network topology changes.
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { API_BASE_URL } from "@/utils/api-config";
|
|
|
|
/**
|
|
* SSLWarning - Zeigt eine Warnung für selbstsignierte SSL-Zertifikate an
|
|
* und bietet eine Möglichkeit, diese zu akzeptieren
|
|
*/
|
|
export function SSLWarning() {
|
|
const [showWarning, setShowWarning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Prüfe, ob die Warnung angezeigt werden soll
|
|
const hasSeenWarning = localStorage.getItem("ssl-warning-dismissed");
|
|
|
|
// Zeige die Warnung nur an, wenn der Benutzer sie noch nicht gesehen hat
|
|
if (!hasSeenWarning) {
|
|
setShowWarning(true);
|
|
}
|
|
}, []);
|
|
|
|
// Teste die Backend-Verbindung und prüfe auf Zertifikatsprobleme
|
|
useEffect(() => {
|
|
if (!showWarning) return;
|
|
|
|
const testConnection = async () => {
|
|
try {
|
|
// Teste HTTPS-Verbindung
|
|
await fetch(`${API_BASE_URL}/health`, {
|
|
method: 'GET',
|
|
mode: 'no-cors' // Verwende no-cors für SSL-Tests
|
|
});
|
|
// Bei erfolgreicher Verbindung: Blende die Warnung aus
|
|
setShowWarning(false);
|
|
} catch (error) {
|
|
console.warn("SSL-Verbindungstest fehlgeschlagen:", error);
|
|
// Bei Fehlern: Zeige die Warnung an
|
|
setShowWarning(true);
|
|
}
|
|
};
|
|
|
|
testConnection();
|
|
}, [showWarning]);
|
|
|
|
const dismissWarning = () => {
|
|
localStorage.setItem("ssl-warning-dismissed", "true");
|
|
setShowWarning(false);
|
|
};
|
|
|
|
const openBackendDirectly = () => {
|
|
// Öffne das Backend direkt in einem neuen Tab
|
|
window.open(API_BASE_URL, "_blank");
|
|
};
|
|
|
|
if (!showWarning) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 mx-8 mt-4 rounded shadow-md">
|
|
<div className="flex items-start">
|
|
<div className="flex-grow">
|
|
<p className="font-bold">SSL-Sicherheitshinweis</p>
|
|
<p className="text-sm mt-1">
|
|
Diese Anwendung verwendet ein selbstsigniertes SSL-Zertifikat für sichere Kommunikation.
|
|
Um Verbindungsprobleme zu vermeiden, öffnen Sie bitte einmalig die folgende URL und akzeptieren Sie das Zertifikat:
|
|
</p>
|
|
<button
|
|
onClick={openBackendDirectly}
|
|
className="mt-2 text-blue-600 hover:text-blue-800 underline text-sm"
|
|
>
|
|
Backend-Verbindung bestätigen
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={dismissWarning}
|
|
className="ml-4 text-gray-500 hover:text-gray-700"
|
|
aria-label="Warnung schließen"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|