576 lines
22 KiB
JavaScript
576 lines
22 KiB
JavaScript
|
// src/components/ui/Header.jsx
|
||
|
|
var EnhancedMinimalHeader = ({
|
||
|
|
status,
|
||
|
|
fingerprint,
|
||
|
|
verificationCode,
|
||
|
|
onDisconnect,
|
||
|
|
isConnected,
|
||
|
|
securityLevel,
|
||
|
|
webrtcManager
|
||
|
|
}) => {
|
||
|
|
const [realSecurityLevel, setRealSecurityLevel] = React.useState(null);
|
||
|
|
const [lastSecurityUpdate, setLastSecurityUpdate] = React.useState(0);
|
||
|
|
React.useEffect(() => {
|
||
|
|
let isUpdating = false;
|
||
|
|
let lastUpdateAttempt = 0;
|
||
|
|
const updateRealSecurityStatus = async () => {
|
||
|
|
const now = Date.now();
|
||
|
|
if (now - lastUpdateAttempt < 1e4) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (isUpdating) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
isUpdating = true;
|
||
|
|
lastUpdateAttempt = now;
|
||
|
|
try {
|
||
|
|
if (!webrtcManager || !isConnected) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const activeWebrtcManager = webrtcManager;
|
||
|
|
let realSecurityData = null;
|
||
|
|
if (typeof activeWebrtcManager.getRealSecurityLevel === "function") {
|
||
|
|
realSecurityData = await activeWebrtcManager.getRealSecurityLevel();
|
||
|
|
} else if (typeof activeWebrtcManager.calculateAndReportSecurityLevel === "function") {
|
||
|
|
realSecurityData = await activeWebrtcManager.calculateAndReportSecurityLevel();
|
||
|
|
} else {
|
||
|
|
realSecurityData = await window.EnhancedSecureCryptoUtils.calculateSecurityLevel(activeWebrtcManager);
|
||
|
|
}
|
||
|
|
if (realSecurityData && realSecurityData.isRealData !== false) {
|
||
|
|
const currentScore = realSecurityLevel?.score || 0;
|
||
|
|
const newScore = realSecurityData.score || 0;
|
||
|
|
if (currentScore !== newScore || !realSecurityLevel) {
|
||
|
|
setRealSecurityLevel(realSecurityData);
|
||
|
|
setLastSecurityUpdate(now);
|
||
|
|
} else if (window.DEBUG_MODE) {
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.warn(" Security calculation returned invalid data");
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(" Error in real security calculation:", error);
|
||
|
|
} finally {
|
||
|
|
isUpdating = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if (isConnected) {
|
||
|
|
updateRealSecurityStatus();
|
||
|
|
if (!realSecurityLevel || realSecurityLevel.score < 50) {
|
||
|
|
const retryInterval = setInterval(() => {
|
||
|
|
if (!realSecurityLevel || realSecurityLevel.score < 50) {
|
||
|
|
updateRealSecurityStatus();
|
||
|
|
} else {
|
||
|
|
clearInterval(retryInterval);
|
||
|
|
}
|
||
|
|
}, 5e3);
|
||
|
|
setTimeout(() => clearInterval(retryInterval), 3e4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const interval = setInterval(updateRealSecurityStatus, 3e4);
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, [webrtcManager, isConnected]);
|
||
|
|
React.useEffect(() => {
|
||
|
|
const handleSecurityUpdate = (event) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
setLastSecurityUpdate(0);
|
||
|
|
}, 100);
|
||
|
|
};
|
||
|
|
const handleRealSecurityCalculated = (event) => {
|
||
|
|
if (event.detail && event.detail.securityData) {
|
||
|
|
setRealSecurityLevel(event.detail.securityData);
|
||
|
|
setLastSecurityUpdate(Date.now());
|
||
|
|
}
|
||
|
|
};
|
||
|
|
document.addEventListener("security-level-updated", handleSecurityUpdate);
|
||
|
|
document.addEventListener("real-security-calculated", handleRealSecurityCalculated);
|
||
|
|
window.forceHeaderSecurityUpdate = (webrtcManager2) => {
|
||
|
|
if (webrtcManager2 && window.EnhancedSecureCryptoUtils) {
|
||
|
|
window.EnhancedSecureCryptoUtils.calculateSecurityLevel(webrtcManager2).then((securityData) => {
|
||
|
|
if (securityData && securityData.isRealData !== false) {
|
||
|
|
setRealSecurityLevel(securityData);
|
||
|
|
setLastSecurityUpdate(Date.now());
|
||
|
|
console.log("\u2705 Header security level force-updated");
|
||
|
|
}
|
||
|
|
}).catch((error) => {
|
||
|
|
console.error("\u274C Force update failed:", error);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
setLastSecurityUpdate(0);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("security-level-updated", handleSecurityUpdate);
|
||
|
|
document.removeEventListener("real-security-calculated", handleRealSecurityCalculated);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
React.useEffect(() => {
|
||
|
|
setHasActiveSession(true);
|
||
|
|
setCurrentTimeLeft(0);
|
||
|
|
setSessionType("premium");
|
||
|
|
}, []);
|
||
|
|
React.useEffect(() => {
|
||
|
|
setHasActiveSession(true);
|
||
|
|
setCurrentTimeLeft(0);
|
||
|
|
setSessionType("premium");
|
||
|
|
}, [sessionTimeLeft]);
|
||
|
|
React.useEffect(() => {
|
||
|
|
const handleForceUpdate = (event) => {
|
||
|
|
setHasActiveSession(true);
|
||
|
|
setCurrentTimeLeft(0);
|
||
|
|
setSessionType("premium");
|
||
|
|
};
|
||
|
|
const handleConnectionCleaned = () => {
|
||
|
|
if (window.DEBUG_MODE) {
|
||
|
|
console.log("\u{1F9F9} Connection cleaned - clearing security data in header");
|
||
|
|
}
|
||
|
|
setRealSecurityLevel(null);
|
||
|
|
setLastSecurityUpdate(0);
|
||
|
|
setHasActiveSession(false);
|
||
|
|
setCurrentTimeLeft(0);
|
||
|
|
setSessionType("unknown");
|
||
|
|
};
|
||
|
|
const handlePeerDisconnect = () => {
|
||
|
|
if (window.DEBUG_MODE) {
|
||
|
|
console.log("\u{1F44B} Peer disconnect detected - clearing security data in header");
|
||
|
|
}
|
||
|
|
setRealSecurityLevel(null);
|
||
|
|
setLastSecurityUpdate(0);
|
||
|
|
};
|
||
|
|
const handleDisconnected = () => {
|
||
|
|
setRealSecurityLevel(null);
|
||
|
|
setLastSecurityUpdate(0);
|
||
|
|
setHasActiveSession(false);
|
||
|
|
setCurrentTimeLeft(0);
|
||
|
|
setSessionType("unknown");
|
||
|
|
};
|
||
|
|
document.addEventListener("force-header-update", handleForceUpdate);
|
||
|
|
document.addEventListener("peer-disconnect", handlePeerDisconnect);
|
||
|
|
document.addEventListener("connection-cleaned", handleConnectionCleaned);
|
||
|
|
document.addEventListener("disconnected", handleDisconnected);
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("force-header-update", handleForceUpdate);
|
||
|
|
document.removeEventListener("peer-disconnect", handlePeerDisconnect);
|
||
|
|
document.removeEventListener("connection-cleaned", handleConnectionCleaned);
|
||
|
|
document.removeEventListener("disconnected", handleDisconnected);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
const handleSecurityClick = async (event) => {
|
||
|
|
if (event && (event.button === 2 || event.ctrlKey || event.metaKey)) {
|
||
|
|
if (onDisconnect && typeof onDisconnect === "function") {
|
||
|
|
onDisconnect();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
let realTestResults = null;
|
||
|
|
if (webrtcManager && window.EnhancedSecureCryptoUtils) {
|
||
|
|
try {
|
||
|
|
realTestResults = await window.EnhancedSecureCryptoUtils.calculateSecurityLevel(webrtcManager);
|
||
|
|
console.log("\u2705 Real security tests completed:", realTestResults);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("\u274C Real security tests failed:", error);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log("\u26A0\uFE0F Cannot run security tests:", {
|
||
|
|
webrtcManager: !!webrtcManager,
|
||
|
|
cryptoUtils: !!window.EnhancedSecureCryptoUtils
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (!realTestResults && !realSecurityLevel) {
|
||
|
|
alert("Security verification in progress...\nPlease wait for real-time cryptographic verification to complete.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let securityData = realTestResults || realSecurityLevel;
|
||
|
|
if (!securityData) {
|
||
|
|
securityData = {
|
||
|
|
level: "UNKNOWN",
|
||
|
|
score: 0,
|
||
|
|
color: "gray",
|
||
|
|
verificationResults: {},
|
||
|
|
timestamp: Date.now(),
|
||
|
|
details: "Security verification not available",
|
||
|
|
isRealData: false,
|
||
|
|
passedChecks: 0,
|
||
|
|
totalChecks: 0
|
||
|
|
};
|
||
|
|
console.log("Using fallback security data:", securityData);
|
||
|
|
}
|
||
|
|
let message = `REAL-TIME SECURITY VERIFICATION
|
||
|
|
|
||
|
|
`;
|
||
|
|
message += `Security Level: ${securityData.level} (${securityData.score}%)
|
||
|
|
`;
|
||
|
|
message += `Verification Time: ${new Date(securityData.timestamp).toLocaleTimeString()}
|
||
|
|
`;
|
||
|
|
message += `Data Source: ${securityData.isRealData ? "Real Cryptographic Tests" : "Simulated Data"}
|
||
|
|
|
||
|
|
`;
|
||
|
|
if (securityData.verificationResults) {
|
||
|
|
message += "DETAILED CRYPTOGRAPHIC TESTS:\n";
|
||
|
|
message += "=" + "=".repeat(40) + "\n";
|
||
|
|
const passedTests = Object.entries(securityData.verificationResults).filter(([key, result]) => result.passed);
|
||
|
|
const failedTests = Object.entries(securityData.verificationResults).filter(([key, result]) => !result.passed);
|
||
|
|
if (passedTests.length > 0) {
|
||
|
|
message += "PASSED TESTS:\n";
|
||
|
|
passedTests.forEach(([key, result]) => {
|
||
|
|
const testName = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
||
|
|
message += ` ${testName}: ${result.details || "Test passed"}
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
message += "\n";
|
||
|
|
}
|
||
|
|
if (failedTests.length > 0) {
|
||
|
|
message += "FAILED/UNAVAILABLE TESTS:\n";
|
||
|
|
failedTests.forEach(([key, result]) => {
|
||
|
|
const testName = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
||
|
|
message += ` ${testName}: ${result.details || "Test failed or unavailable"}
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
message += "\n";
|
||
|
|
}
|
||
|
|
message += `SUMMARY:
|
||
|
|
`;
|
||
|
|
message += `Passed: ${securityData.passedChecks}/${securityData.totalChecks} tests
|
||
|
|
`;
|
||
|
|
message += `Score: ${securityData.score}/${securityData.maxPossibleScore || 100} points
|
||
|
|
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
message += `SECURITY FEATURES STATUS:
|
||
|
|
`;
|
||
|
|
message += "=" + "=".repeat(40) + "\n";
|
||
|
|
if (securityData.verificationResults) {
|
||
|
|
const features = {
|
||
|
|
"ECDSA Digital Signatures": securityData.verificationResults.verifyECDSASignatures?.passed || false,
|
||
|
|
"ECDH Key Exchange": securityData.verificationResults.verifyECDHKeyExchange?.passed || false,
|
||
|
|
"AES-GCM Encryption": securityData.verificationResults.verifyEncryption?.passed || false,
|
||
|
|
"Message Integrity (HMAC)": securityData.verificationResults.verifyMessageIntegrity?.passed || false,
|
||
|
|
"Perfect Forward Secrecy": securityData.verificationResults.verifyPerfectForwardSecrecy?.passed || false,
|
||
|
|
"Replay Protection": securityData.verificationResults.verifyReplayProtection?.passed || false,
|
||
|
|
"DTLS Fingerprint": securityData.verificationResults.verifyDTLSFingerprint?.passed || false,
|
||
|
|
"SAS Verification": securityData.verificationResults.verifySASVerification?.passed || false,
|
||
|
|
"Metadata Protection": securityData.verificationResults.verifyMetadataProtection?.passed || false,
|
||
|
|
"Traffic Obfuscation": securityData.verificationResults.verifyTrafficObfuscation?.passed || false
|
||
|
|
};
|
||
|
|
Object.entries(features).forEach(([feature, isEnabled]) => {
|
||
|
|
message += `${isEnabled ? "\u2705" : "\u274C"} ${feature}
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
message += `\u2705 ECDSA Digital Signatures
|
||
|
|
`;
|
||
|
|
message += `\u2705 ECDH Key Exchange
|
||
|
|
`;
|
||
|
|
message += `\u2705 AES-GCM Encryption
|
||
|
|
`;
|
||
|
|
message += `\u2705 Message Integrity (HMAC)
|
||
|
|
`;
|
||
|
|
message += `\u2705 Perfect Forward Secrecy
|
||
|
|
`;
|
||
|
|
message += `\u2705 Replay Protection
|
||
|
|
`;
|
||
|
|
message += `\u2705 DTLS Fingerprint
|
||
|
|
`;
|
||
|
|
message += `\u2705 SAS Verification
|
||
|
|
`;
|
||
|
|
message += `\u2705 Metadata Protection
|
||
|
|
`;
|
||
|
|
message += `\u2705 Traffic Obfuscation
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
message += `
|
||
|
|
${securityData.details || "Real cryptographic verification completed"}`;
|
||
|
|
if (securityData.isRealData) {
|
||
|
|
message += "\n\n\u2705 This is REAL-TIME verification using actual cryptographic functions.";
|
||
|
|
} else {
|
||
|
|
message += "\n\n\u26A0\uFE0F Warning: This data may be simulated. Connection may not be fully established.";
|
||
|
|
}
|
||
|
|
const modal = document.createElement("div");
|
||
|
|
modal.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0,0,0,0.8);
|
||
|
|
z-index: 10000;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-family: monospace;
|
||
|
|
`;
|
||
|
|
const content = document.createElement("div");
|
||
|
|
content.style.cssText = `
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
max-width: 80%;
|
||
|
|
max-height: 80%;
|
||
|
|
overflow-y: auto;
|
||
|
|
white-space: pre-line;
|
||
|
|
border: 1px solid #333;
|
||
|
|
`;
|
||
|
|
content.textContent = message;
|
||
|
|
modal.appendChild(content);
|
||
|
|
modal.addEventListener("click", (e) => {
|
||
|
|
if (e.target === modal) {
|
||
|
|
document.body.removeChild(modal);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const handleKeyDown = (e) => {
|
||
|
|
if (e.key === "Escape") {
|
||
|
|
document.body.removeChild(modal);
|
||
|
|
document.removeEventListener("keydown", handleKeyDown);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
document.addEventListener("keydown", handleKeyDown);
|
||
|
|
document.body.appendChild(modal);
|
||
|
|
};
|
||
|
|
const getStatusConfig = () => {
|
||
|
|
switch (status) {
|
||
|
|
case "connected":
|
||
|
|
return {
|
||
|
|
text: "Connected",
|
||
|
|
className: "status-connected",
|
||
|
|
badgeClass: "bg-green-500/10 text-green-400 border-green-500/20"
|
||
|
|
};
|
||
|
|
case "verifying":
|
||
|
|
return {
|
||
|
|
text: "Verifying...",
|
||
|
|
className: "status-verifying",
|
||
|
|
badgeClass: "bg-purple-500/10 text-purple-400 border-purple-500/20"
|
||
|
|
};
|
||
|
|
case "connecting":
|
||
|
|
return {
|
||
|
|
text: "Connecting...",
|
||
|
|
className: "status-connecting",
|
||
|
|
badgeClass: "bg-blue-500/10 text-blue-400 border-blue-500/20"
|
||
|
|
};
|
||
|
|
case "retrying":
|
||
|
|
return {
|
||
|
|
text: "Retrying...",
|
||
|
|
className: "status-connecting",
|
||
|
|
badgeClass: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20"
|
||
|
|
};
|
||
|
|
case "failed":
|
||
|
|
return {
|
||
|
|
text: "Error",
|
||
|
|
className: "status-failed",
|
||
|
|
badgeClass: "bg-red-500/10 text-red-400 border-red-500/20"
|
||
|
|
};
|
||
|
|
case "reconnecting":
|
||
|
|
return {
|
||
|
|
text: "Reconnecting...",
|
||
|
|
className: "status-connecting",
|
||
|
|
badgeClass: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20"
|
||
|
|
};
|
||
|
|
case "peer_disconnected":
|
||
|
|
return {
|
||
|
|
text: "Peer disconnected",
|
||
|
|
className: "status-failed",
|
||
|
|
badgeClass: "bg-orange-500/10 text-orange-400 border-orange-500/20"
|
||
|
|
};
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
text: "Not connected",
|
||
|
|
className: "status-disconnected",
|
||
|
|
badgeClass: "bg-gray-500/10 text-gray-400 border-gray-500/20"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const config = getStatusConfig();
|
||
|
|
const displaySecurityLevel = isConnected ? realSecurityLevel || securityLevel : null;
|
||
|
|
const getSecurityIndicatorDetails = () => {
|
||
|
|
if (!displaySecurityLevel) {
|
||
|
|
return {
|
||
|
|
tooltip: "Security verification in progress...",
|
||
|
|
isVerified: false,
|
||
|
|
dataSource: "loading"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
const isRealData = displaySecurityLevel.isRealData !== false;
|
||
|
|
const baseTooltip = `${displaySecurityLevel.level} (${displaySecurityLevel.score}%)`;
|
||
|
|
if (isRealData) {
|
||
|
|
return {
|
||
|
|
tooltip: `${baseTooltip} - Real-time verification \u2705
|
||
|
|
Right-click or Ctrl+click to disconnect`,
|
||
|
|
isVerified: true,
|
||
|
|
dataSource: "real"
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
return {
|
||
|
|
tooltip: `${baseTooltip} - Estimated (connection establishing...)
|
||
|
|
Right-click or Ctrl+click to disconnect`,
|
||
|
|
isVerified: false,
|
||
|
|
dataSource: "estimated"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const securityDetails = getSecurityIndicatorDetails();
|
||
|
|
React.useEffect(() => {
|
||
|
|
window.debugHeaderSecurity = () => {
|
||
|
|
console.log("\u{1F50D} Header Security Debug:", {
|
||
|
|
realSecurityLevel,
|
||
|
|
lastSecurityUpdate,
|
||
|
|
isConnected,
|
||
|
|
webrtcManagerProp: !!webrtcManager,
|
||
|
|
windowWebrtcManager: !!window.webrtcManager,
|
||
|
|
cryptoUtils: !!window.EnhancedSecureCryptoUtils,
|
||
|
|
displaySecurityLevel,
|
||
|
|
securityDetails
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return () => {
|
||
|
|
delete window.debugHeaderSecurity;
|
||
|
|
};
|
||
|
|
}, [realSecurityLevel, lastSecurityUpdate, isConnected, webrtcManager, displaySecurityLevel, securityDetails]);
|
||
|
|
return React.createElement("header", {
|
||
|
|
className: "header-minimal sticky top-0 z-50"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "container",
|
||
|
|
className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "content",
|
||
|
|
className: "flex items-center justify-between h-16"
|
||
|
|
}, [
|
||
|
|
// Logo and Title
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "logo-section",
|
||
|
|
className: "flex items-center space-x-2 sm:space-x-3"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "logo",
|
||
|
|
className: "icon-container w-8 h-8 sm:w-10 sm:h-10"
|
||
|
|
}, [
|
||
|
|
React.createElement("i", {
|
||
|
|
className: "fas fa-shield-halved accent-orange text-sm sm:text-base"
|
||
|
|
})
|
||
|
|
]),
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "title-section"
|
||
|
|
}, [
|
||
|
|
React.createElement("h1", {
|
||
|
|
key: "title",
|
||
|
|
className: "text-lg sm:text-xl font-semibold text-primary"
|
||
|
|
}, "SecureBit.chat"),
|
||
|
|
React.createElement("p", {
|
||
|
|
key: "subtitle",
|
||
|
|
className: "text-xs sm:text-sm text-muted hidden sm:block"
|
||
|
|
}, "End-to-end freedom v4.3.120")
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
// Status and Controls - Responsive
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "status-section",
|
||
|
|
className: "flex items-center space-x-2 sm:space-x-3"
|
||
|
|
}, [
|
||
|
|
displaySecurityLevel && React.createElement("div", {
|
||
|
|
key: "security-level",
|
||
|
|
className: "hidden md:flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity duration-200",
|
||
|
|
onClick: handleSecurityClick,
|
||
|
|
onContextMenu: (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (onDisconnect && typeof onDisconnect === "function") {
|
||
|
|
onDisconnect();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: securityDetails.tooltip
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "security-icon",
|
||
|
|
className: `w-6 h-6 rounded-full flex items-center justify-center relative ${displaySecurityLevel.color === "green" ? "bg-green-500/20" : displaySecurityLevel.color === "orange" ? "bg-orange-500/20" : displaySecurityLevel.color === "yellow" ? "bg-yellow-500/20" : "bg-red-500/20"} ${securityDetails.isVerified ? "" : "animate-pulse"}`
|
||
|
|
}, [
|
||
|
|
React.createElement("i", {
|
||
|
|
className: `fas fa-shield-alt text-xs ${displaySecurityLevel.color === "green" ? "text-green-400" : displaySecurityLevel.color === "orange" ? "text-orange-400" : displaySecurityLevel.color === "yellow" ? "text-yellow-400" : "text-red-400"}`
|
||
|
|
})
|
||
|
|
]),
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "security-info",
|
||
|
|
className: "flex flex-col"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "security-level-text",
|
||
|
|
className: "text-xs font-medium text-primary flex items-center space-x-1"
|
||
|
|
}, [
|
||
|
|
React.createElement("span", {}, `${displaySecurityLevel.level} (${displaySecurityLevel.score}%)`)
|
||
|
|
]),
|
||
|
|
React.createElement(
|
||
|
|
"div",
|
||
|
|
{
|
||
|
|
key: "security-details",
|
||
|
|
className: "text-xs text-muted mt-1 hidden lg:block"
|
||
|
|
},
|
||
|
|
securityDetails.dataSource === "real" ? `${displaySecurityLevel.passedChecks || 0}/${displaySecurityLevel.totalChecks || 0} tests` : displaySecurityLevel.details || `Stage ${displaySecurityLevel.stage || 1}`
|
||
|
|
),
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "security-progress",
|
||
|
|
className: "w-16 h-1 bg-gray-600 rounded-full overflow-hidden"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "progress-bar",
|
||
|
|
className: `h-full transition-all duration-500 ${displaySecurityLevel.color === "green" ? "bg-green-400" : displaySecurityLevel.color === "orange" ? "bg-orange-400" : displaySecurityLevel.color === "yellow" ? "bg-yellow-400" : "bg-red-400"}`,
|
||
|
|
style: { width: `${displaySecurityLevel.score}%` }
|
||
|
|
})
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
// Mobile Security Indicator
|
||
|
|
displaySecurityLevel && React.createElement("div", {
|
||
|
|
key: "mobile-security",
|
||
|
|
className: "md:hidden flex items-center"
|
||
|
|
}, [
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "mobile-security-icon",
|
||
|
|
className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity duration-200 relative ${displaySecurityLevel.color === "green" ? "bg-green-500/20" : displaySecurityLevel.color === "orange" ? "bg-orange-500/20" : displaySecurityLevel.color === "yellow" ? "bg-yellow-500/20" : "bg-red-500/20"} ${securityDetails.isVerified ? "" : "animate-pulse"}`,
|
||
|
|
title: securityDetails.tooltip,
|
||
|
|
onClick: handleSecurityClick,
|
||
|
|
onContextMenu: (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (onDisconnect && typeof onDisconnect === "function") {
|
||
|
|
onDisconnect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
React.createElement("i", {
|
||
|
|
className: `fas fa-shield-alt text-sm ${displaySecurityLevel.color === "green" ? "text-green-400" : displaySecurityLevel.color === "orange" ? "text-orange-400" : displaySecurityLevel.color === "yellow" ? "text-yellow-400" : "text-red-400"}`
|
||
|
|
})
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
// Status Badge
|
||
|
|
React.createElement("div", {
|
||
|
|
key: "status-badge",
|
||
|
|
className: `px-2 sm:px-3 py-1.5 rounded-lg border ${config.badgeClass} flex items-center space-x-1 sm:space-x-2`
|
||
|
|
}, [
|
||
|
|
React.createElement("span", {
|
||
|
|
key: "status-dot",
|
||
|
|
className: `status-dot ${config.className}`
|
||
|
|
}),
|
||
|
|
React.createElement("span", {
|
||
|
|
key: "status-text",
|
||
|
|
className: "text-xs sm:text-sm font-medium"
|
||
|
|
}, config.text)
|
||
|
|
]),
|
||
|
|
// Disconnect Button
|
||
|
|
isConnected && React.createElement("button", {
|
||
|
|
key: "disconnect-btn",
|
||
|
|
onClick: onDisconnect,
|
||
|
|
className: "p-1.5 sm:px-3 sm:py-1.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 rounded-lg transition-all duration-200 text-sm"
|
||
|
|
}, [
|
||
|
|
React.createElement("i", {
|
||
|
|
className: "fas fa-power-off sm:mr-2"
|
||
|
|
}),
|
||
|
|
React.createElement("span", {
|
||
|
|
className: "hidden sm:inline"
|
||
|
|
}, "Disconnect")
|
||
|
|
])
|
||
|
|
])
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
window.EnhancedMinimalHeader = EnhancedMinimalHeader;
|