session bug fix
This commit is contained in:
lockbitchat
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1079
-1
File diff suppressed because it is too large
Load Diff
Vendored
+4
-4
File diff suppressed because one or more lines are too long
Vendored
+172
-8
@@ -710,6 +710,17 @@ var EnhancedConnectionSetup = ({
|
||||
}),
|
||||
"Scan QR Code"
|
||||
])
|
||||
// React.createElement('button', {
|
||||
// key: 'bluetooth-btn',
|
||||
// onClick: () => { try { document.dispatchEvent(new CustomEvent('open-bluetooth-transfer', { detail: { role: 'responder' } })); } catch {} },
|
||||
// className: "px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/20 rounded text-sm font-medium transition-all duration-200"
|
||||
// }, [
|
||||
// React.createElement('i', {
|
||||
// key: 'icon',
|
||||
// className: 'fas fa-bluetooth mr-2'
|
||||
// }),
|
||||
// 'Bluetooth'
|
||||
// ])
|
||||
]),
|
||||
React.createElement("textarea", {
|
||||
key: "input",
|
||||
@@ -819,6 +830,17 @@ var EnhancedConnectionSetup = ({
|
||||
}),
|
||||
"Scan QR Code"
|
||||
]),
|
||||
// React.createElement('button', {
|
||||
// key: 'bluetooth-btn',
|
||||
// onClick: () => { try { document.dispatchEvent(new CustomEvent('open-bluetooth-transfer', { detail: { role: 'initiator' } })); } catch {} },
|
||||
// className: "px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/20 rounded text-sm font-medium transition-all duration-200"
|
||||
// }, [
|
||||
// React.createElement('i', {
|
||||
// key: 'icon',
|
||||
// className: 'fas fa-bluetooth mr-2'
|
||||
// }),
|
||||
// 'Bluetooth'
|
||||
// ]),
|
||||
React.createElement("button", {
|
||||
key: "process-btn",
|
||||
onClick: onCreateAnswer,
|
||||
@@ -1332,6 +1354,21 @@ var EnhancedSecureP2PChat = () => {
|
||||
const [qrCodeUrl, setQrCodeUrl] = React.useState("");
|
||||
const [showQRScanner, setShowQRScanner] = React.useState(false);
|
||||
const [showQRScannerModal, setShowQRScannerModal] = React.useState(false);
|
||||
const [showBluetoothTransfer, setShowBluetoothTransfer] = React.useState(false);
|
||||
const [bluetoothAutoRole, setBluetoothAutoRole] = React.useState(null);
|
||||
React.useEffect(() => {
|
||||
const openBt = (e2) => {
|
||||
try {
|
||||
const role = e2?.detail?.role || null;
|
||||
setBluetoothAutoRole(role);
|
||||
setShowBluetoothTransfer(true);
|
||||
} catch {
|
||||
}
|
||||
};
|
||||
document.addEventListener("open-bluetooth-transfer", openBt);
|
||||
return () => document.removeEventListener("open-bluetooth-transfer", openBt);
|
||||
}, []);
|
||||
const [bluetoothManager, setBluetoothManager] = React.useState(null);
|
||||
const [isVerified, setIsVerified] = React.useState(false);
|
||||
const [securityLevel, setSecurityLevel] = React.useState(null);
|
||||
const [localVerificationConfirmed, setLocalVerificationConfirmed] = React.useState(false);
|
||||
@@ -1462,12 +1499,6 @@ var EnhancedSecureP2PChat = () => {
|
||||
}, 2e3);
|
||||
}
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setSessionTimeLeft(0);
|
||||
}, 1e3);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
const chatMessagesRef = React.useRef(null);
|
||||
const scrollToBottom = createScrollToBottomFunction(chatMessagesRef);
|
||||
React.useEffect(() => {
|
||||
@@ -2413,6 +2444,128 @@ var EnhancedSecureP2PChat = () => {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const handleBluetoothKeyReceived = async (keyData, deviceId) => {
|
||||
try {
|
||||
console.log("Bluetooth key received from device:", deviceId);
|
||||
const keyString = JSON.stringify(keyData, null, 2);
|
||||
if (showOfferStep) {
|
||||
setAnswerInput(keyString);
|
||||
} else {
|
||||
setOfferInput(keyString);
|
||||
}
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Bluetooth key received successfully!",
|
||||
type: "success"
|
||||
}]);
|
||||
setShowBluetoothTransfer(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to process Bluetooth key:", error);
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "Failed to process Bluetooth key: " + error.message,
|
||||
type: "error"
|
||||
}]);
|
||||
}
|
||||
};
|
||||
const handleBluetoothStatusChange = (statusType, data) => {
|
||||
console.log("Bluetooth status change:", statusType, data);
|
||||
switch (statusType) {
|
||||
case "bluetooth_ready":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Bluetooth ready for key exchange",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "connected":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: `\u{1F535} Connected to device: ${data.deviceName}`,
|
||||
type: "success"
|
||||
}]);
|
||||
break;
|
||||
case "key_sent":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Public key sent via Bluetooth",
|
||||
type: "success"
|
||||
}]);
|
||||
break;
|
||||
case "key_received":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Public key received via Bluetooth",
|
||||
type: "success"
|
||||
}]);
|
||||
break;
|
||||
case "auto_connection_starting":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Starting automatic connection...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "creating_offer":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Creating secure offer...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "offer_sent":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Offer sent, waiting for answer...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "waiting_for_answer":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Waiting for answer...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "processing_answer":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Processing answer...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "waiting_for_verification":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Waiting for verification...",
|
||||
type: "info"
|
||||
}]);
|
||||
break;
|
||||
case "auto_connection_complete":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Automatic connection completed!",
|
||||
type: "success"
|
||||
}]);
|
||||
break;
|
||||
case "auto_connection_failed":
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Automatic connection failed: " + (data.error || "Unknown error"),
|
||||
type: "error"
|
||||
}]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
const handleBluetoothError = (error) => {
|
||||
console.error("Bluetooth error:", error);
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "Bluetooth error: " + error.message,
|
||||
type: "error"
|
||||
}]);
|
||||
};
|
||||
const handleBluetoothAutoConnection = async (connectionData) => {
|
||||
try {
|
||||
console.log("Bluetooth auto connection completed:", connectionData);
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "\u{1F535} Bluetooth auto connection completed successfully!",
|
||||
type: "success"
|
||||
}]);
|
||||
setShowBluetoothTransfer(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to process auto connection:", error);
|
||||
setMessages((prev) => [...prev, {
|
||||
message: "Failed to process auto connection: " + error.message,
|
||||
type: "error"
|
||||
}]);
|
||||
}
|
||||
};
|
||||
const handleCreateOffer = async () => {
|
||||
try {
|
||||
setOfferData("");
|
||||
@@ -3011,7 +3164,7 @@ var EnhancedSecureP2PChat = () => {
|
||||
return React.createElement("div", {
|
||||
className: "minimal-bg min-h-screen"
|
||||
}, [
|
||||
React.createElement(EnhancedMinimalHeader, {
|
||||
window.EnhancedMinimalHeader && React.createElement(window.EnhancedMinimalHeader, {
|
||||
key: "header",
|
||||
status: connectionStatus,
|
||||
fingerprint: keyFingerprint,
|
||||
@@ -3153,7 +3306,18 @@ var EnhancedSecureP2PChat = () => {
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
// Bluetooth Key Transfer Modal
|
||||
showBluetoothTransfer && window.BluetoothKeyTransfer && React.createElement(window.BluetoothKeyTransfer, {
|
||||
key: "bluetooth-transfer-modal",
|
||||
webrtcManager: webrtcManagerRef.current,
|
||||
onKeyReceived: handleBluetoothKeyReceived,
|
||||
onStatusChange: handleBluetoothStatusChange,
|
||||
onError: handleBluetoothError,
|
||||
onAutoConnection: handleBluetoothAutoConnection,
|
||||
isVisible: showBluetoothTransfer,
|
||||
onClose: () => setShowBluetoothTransfer(false)
|
||||
})
|
||||
]);
|
||||
};
|
||||
function initializeApp() {
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
+1
-1
@@ -151,8 +151,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="dist/app.js?v=1757383304"></script>
|
||||
<script type="module" src="dist/app-boot.js?v=1757383304"></script>
|
||||
<script type="module" src="dist/app.js?v=1757383304"></script>
|
||||
|
||||
<script src="src/scripts/pwa-register.js"></script>
|
||||
<script src="./src/pwa/install-prompt.js" type="module"></script>
|
||||
|
||||
+200
-11
@@ -745,7 +745,18 @@
|
||||
className: 'fas fa-qrcode mr-2'
|
||||
}),
|
||||
'Scan QR Code'
|
||||
])
|
||||
]),
|
||||
// React.createElement('button', {
|
||||
// key: 'bluetooth-btn',
|
||||
// onClick: () => { try { document.dispatchEvent(new CustomEvent('open-bluetooth-transfer', { detail: { role: 'responder' } })); } catch {} },
|
||||
// className: "px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/20 rounded text-sm font-medium transition-all duration-200"
|
||||
// }, [
|
||||
// React.createElement('i', {
|
||||
// key: 'icon',
|
||||
// className: 'fas fa-bluetooth mr-2'
|
||||
// }),
|
||||
// 'Bluetooth'
|
||||
// ])
|
||||
]),
|
||||
React.createElement('textarea', {
|
||||
key: 'input',
|
||||
@@ -859,6 +870,17 @@
|
||||
}),
|
||||
'Scan QR Code'
|
||||
]),
|
||||
// React.createElement('button', {
|
||||
// key: 'bluetooth-btn',
|
||||
// onClick: () => { try { document.dispatchEvent(new CustomEvent('open-bluetooth-transfer', { detail: { role: 'initiator' } })); } catch {} },
|
||||
// className: "px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/20 rounded text-sm font-medium transition-all duration-200"
|
||||
// }, [
|
||||
// React.createElement('i', {
|
||||
// key: 'icon',
|
||||
// className: 'fas fa-bluetooth mr-2'
|
||||
// }),
|
||||
// 'Bluetooth'
|
||||
// ]),
|
||||
React.createElement('button', {
|
||||
key: 'process-btn',
|
||||
onClick: onCreateAnswer,
|
||||
@@ -1410,6 +1432,23 @@
|
||||
const [qrCodeUrl, setQrCodeUrl] = React.useState('');
|
||||
const [showQRScanner, setShowQRScanner] = React.useState(false);
|
||||
const [showQRScannerModal, setShowQRScannerModal] = React.useState(false);
|
||||
|
||||
// Bluetooth key transfer states
|
||||
const [showBluetoothTransfer, setShowBluetoothTransfer] = React.useState(false);
|
||||
const [bluetoothAutoRole, setBluetoothAutoRole] = React.useState(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const openBt = (e) => {
|
||||
try {
|
||||
const role = e?.detail?.role || null;
|
||||
setBluetoothAutoRole(role);
|
||||
setShowBluetoothTransfer(true);
|
||||
} catch {}
|
||||
};
|
||||
document.addEventListener('open-bluetooth-transfer', openBt);
|
||||
return () => document.removeEventListener('open-bluetooth-transfer', openBt);
|
||||
}, []);
|
||||
const [bluetoothManager, setBluetoothManager] = React.useState(null);
|
||||
const [isVerified, setIsVerified] = React.useState(false);
|
||||
const [securityLevel, setSecurityLevel] = React.useState(null);
|
||||
|
||||
@@ -1596,14 +1635,7 @@
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Session time ticker - unlimited sessions
|
||||
React.useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
// Sessions are unlimited - no time restrictions
|
||||
setSessionTimeLeft(0);
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
// Session time ticker removed - sessions are unlimited
|
||||
|
||||
// Sessions are unlimited - no expiration handler needed
|
||||
|
||||
@@ -2720,6 +2752,151 @@
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
// Bluetooth key transfer handlers
|
||||
const handleBluetoothKeyReceived = async (keyData, deviceId) => {
|
||||
try {
|
||||
console.log('Bluetooth key received from device:', deviceId);
|
||||
|
||||
// Convert key data to the format expected by the app
|
||||
const keyString = JSON.stringify(keyData, null, 2);
|
||||
|
||||
// Determine which input to populate based on current mode
|
||||
if (showOfferStep) {
|
||||
// In "Waiting for peer's response" mode - populate answerInput
|
||||
setAnswerInput(keyString);
|
||||
} else {
|
||||
// In "Paste secure invitation" mode - populate offerInput
|
||||
setOfferInput(keyString);
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Bluetooth key received successfully!',
|
||||
type: 'success'
|
||||
}]);
|
||||
|
||||
// Close Bluetooth transfer modal
|
||||
setShowBluetoothTransfer(false);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to process Bluetooth key:', error);
|
||||
setMessages(prev => [...prev, {
|
||||
message: 'Failed to process Bluetooth key: ' + error.message,
|
||||
type: 'error'
|
||||
}]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBluetoothStatusChange = (statusType, data) => {
|
||||
console.log('Bluetooth status change:', statusType, data);
|
||||
|
||||
switch (statusType) {
|
||||
case 'bluetooth_ready':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Bluetooth ready for key exchange',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'connected':
|
||||
setMessages(prev => [...prev, {
|
||||
message: `🔵 Connected to device: ${data.deviceName}`,
|
||||
type: 'success'
|
||||
}]);
|
||||
break;
|
||||
case 'key_sent':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Public key sent via Bluetooth',
|
||||
type: 'success'
|
||||
}]);
|
||||
break;
|
||||
case 'key_received':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Public key received via Bluetooth',
|
||||
type: 'success'
|
||||
}]);
|
||||
break;
|
||||
case 'auto_connection_starting':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Starting automatic connection...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'creating_offer':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Creating secure offer...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'offer_sent':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Offer sent, waiting for answer...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'waiting_for_answer':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Waiting for answer...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'processing_answer':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Processing answer...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'waiting_for_verification':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Waiting for verification...',
|
||||
type: 'info'
|
||||
}]);
|
||||
break;
|
||||
case 'auto_connection_complete':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Automatic connection completed!',
|
||||
type: 'success'
|
||||
}]);
|
||||
break;
|
||||
case 'auto_connection_failed':
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Automatic connection failed: ' + (data.error || 'Unknown error'),
|
||||
type: 'error'
|
||||
}]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleBluetoothError = (error) => {
|
||||
console.error('Bluetooth error:', error);
|
||||
setMessages(prev => [...prev, {
|
||||
message: 'Bluetooth error: ' + error.message,
|
||||
type: 'error'
|
||||
}]);
|
||||
};
|
||||
|
||||
const handleBluetoothAutoConnection = async (connectionData) => {
|
||||
try {
|
||||
console.log('Bluetooth auto connection completed:', connectionData);
|
||||
|
||||
setMessages(prev => [...prev, {
|
||||
message: '🔵 Bluetooth auto connection completed successfully!',
|
||||
type: 'success'
|
||||
}]);
|
||||
|
||||
// Close Bluetooth transfer modal
|
||||
setShowBluetoothTransfer(false);
|
||||
|
||||
// The connection is now established automatically
|
||||
// No need for manual offer/answer processing
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to process auto connection:', error);
|
||||
setMessages(prev => [...prev, {
|
||||
message: 'Failed to process auto connection: ' + error.message,
|
||||
type: 'error'
|
||||
}]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateOffer = async () => {
|
||||
try {
|
||||
@@ -3459,7 +3636,7 @@
|
||||
return React.createElement('div', {
|
||||
className: "minimal-bg min-h-screen"
|
||||
}, [
|
||||
React.createElement(EnhancedMinimalHeader, {
|
||||
window.EnhancedMinimalHeader && React.createElement(window.EnhancedMinimalHeader, {
|
||||
key: 'header',
|
||||
status: connectionStatus,
|
||||
fingerprint: keyFingerprint,
|
||||
@@ -3604,7 +3781,19 @@
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
// Bluetooth Key Transfer Modal
|
||||
showBluetoothTransfer && window.BluetoothKeyTransfer && React.createElement(window.BluetoothKeyTransfer, {
|
||||
key: 'bluetooth-transfer-modal',
|
||||
webrtcManager: webrtcManagerRef.current,
|
||||
onKeyReceived: handleBluetoothKeyReceived,
|
||||
onStatusChange: handleBluetoothStatusChange,
|
||||
onError: handleBluetoothError,
|
||||
onAutoConnection: handleBluetoothAutoConnection,
|
||||
isVisible: showBluetoothTransfer,
|
||||
onClose: () => setShowBluetoothTransfer(false)
|
||||
})
|
||||
|
||||
]);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,514 @@
|
||||
/**
|
||||
* Bluetooth Key Transfer UI Component
|
||||
*
|
||||
* Provides user interface for Bluetooth key exchange:
|
||||
* - Device discovery and connection
|
||||
* - Key transmission status
|
||||
* - Error handling and fallbacks
|
||||
* - Integration with existing QR/manual methods
|
||||
*/
|
||||
|
||||
const BluetoothKeyTransfer = ({
|
||||
webrtcManager,
|
||||
onKeyReceived,
|
||||
onStatusChange,
|
||||
onAutoConnection,
|
||||
isVisible = false,
|
||||
onClose
|
||||
}) => {
|
||||
const [bluetoothManager, setBluetoothManager] = React.useState(null);
|
||||
const [isSupported, setIsSupported] = React.useState(false);
|
||||
const [isAvailable, setIsAvailable] = React.useState(false);
|
||||
const [isScanning, setIsScanning] = React.useState(false);
|
||||
const [isAdvertising, setIsAdvertising] = React.useState(false);
|
||||
const [connectedDevices, setConnectedDevices] = React.useState([]);
|
||||
const [status, setStatus] = React.useState('idle');
|
||||
const [error, setError] = React.useState(null);
|
||||
const [logs, setLogs] = React.useState([]);
|
||||
|
||||
// Initialize Bluetooth manager
|
||||
React.useEffect(() => {
|
||||
if (isVisible && !bluetoothManager) {
|
||||
initializeBluetooth();
|
||||
}
|
||||
}, [isVisible]);
|
||||
|
||||
// Cleanup on unmount
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
if (bluetoothManager) {
|
||||
bluetoothManager.cleanup();
|
||||
}
|
||||
};
|
||||
}, [bluetoothManager]);
|
||||
|
||||
const initializeBluetooth = async () => {
|
||||
try {
|
||||
const manager = new window.BluetoothKeyTransfer(
|
||||
webrtcManager,
|
||||
handleStatusChange,
|
||||
handleKeyReceived,
|
||||
handleError,
|
||||
handleAutoConnection
|
||||
);
|
||||
|
||||
setBluetoothManager(manager);
|
||||
|
||||
// Check support after initialization
|
||||
setTimeout(() => {
|
||||
setIsSupported(manager.isSupported);
|
||||
setIsAvailable(manager.isAvailable);
|
||||
}, 100);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Bluetooth manager:', error);
|
||||
setError('Failed to initialize Bluetooth: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = (statusType, data) => {
|
||||
setStatus(statusType);
|
||||
addLog(`Status: ${statusType}`, data);
|
||||
|
||||
// Update UI state based on status
|
||||
switch (statusType) {
|
||||
case 'bluetooth_ready':
|
||||
setIsSupported(data.supported);
|
||||
setIsAvailable(data.available);
|
||||
break;
|
||||
case 'scanning_active':
|
||||
setIsScanning(true);
|
||||
break;
|
||||
case 'scanning_stopped':
|
||||
setIsScanning(false);
|
||||
break;
|
||||
case 'advertising_active':
|
||||
setIsAdvertising(true);
|
||||
break;
|
||||
case 'advertising_stopped':
|
||||
setIsAdvertising(false);
|
||||
break;
|
||||
case 'connected':
|
||||
setConnectedDevices(prev => [...prev, {
|
||||
id: data.deviceId,
|
||||
name: data.deviceName,
|
||||
connected: true
|
||||
}]);
|
||||
break;
|
||||
}
|
||||
|
||||
onStatusChange?.(statusType, data);
|
||||
};
|
||||
|
||||
const handleKeyReceived = (keyData, deviceId) => {
|
||||
addLog('Key received from device', { deviceId });
|
||||
onKeyReceived?.(keyData, deviceId);
|
||||
};
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error('Bluetooth error:', error);
|
||||
setError(error.message);
|
||||
addLog('Error', error.message);
|
||||
};
|
||||
|
||||
const handleAutoConnection = (connectionData) => {
|
||||
console.log('Auto connection completed:', connectionData);
|
||||
addLog('Auto Connection Completed', connectionData);
|
||||
onAutoConnection?.(connectionData);
|
||||
};
|
||||
|
||||
const addLog = (message, data = null) => {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const logEntry = {
|
||||
timestamp,
|
||||
message,
|
||||
data: data ? JSON.stringify(data, null, 2) : null
|
||||
};
|
||||
setLogs(prev => [...prev.slice(-9), logEntry]); // Keep last 10 logs
|
||||
};
|
||||
|
||||
const startScanning = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startScanning();
|
||||
} catch (error) {
|
||||
setError('Failed to start scanning: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const stopScanning = async () => {
|
||||
try {
|
||||
await bluetoothManager.stopScanning();
|
||||
} catch (error) {
|
||||
setError('Failed to stop scanning: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const startAdvertising = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
if (!webrtcManager || !webrtcManager.ecdhKeyPair) {
|
||||
throw new Error('No public key available for advertising');
|
||||
}
|
||||
|
||||
await bluetoothManager.startAdvertising(
|
||||
webrtcManager.ecdhKeyPair.publicKey,
|
||||
'SecureBit Device'
|
||||
);
|
||||
} catch (error) {
|
||||
setError('Failed to start advertising: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const stopAdvertising = async () => {
|
||||
try {
|
||||
await bluetoothManager.stopAdvertising();
|
||||
} catch (error) {
|
||||
setError('Failed to stop advertising: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const sendPublicKey = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
if (!webrtcManager || !webrtcManager.ecdhKeyPair) {
|
||||
throw new Error('No public key available for sending');
|
||||
}
|
||||
|
||||
await bluetoothManager.sendPublicKey(
|
||||
webrtcManager.ecdhKeyPair.publicKey,
|
||||
deviceId
|
||||
);
|
||||
} catch (error) {
|
||||
setError('Failed to send public key: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const clearLogs = () => {
|
||||
setLogs([]);
|
||||
};
|
||||
|
||||
const startAutoConnection = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startAutoConnection(deviceId);
|
||||
} catch (error) {
|
||||
setError('Failed to start auto connection: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const startAutoConnectionAsResponder = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startAutoConnectionAsResponder(deviceId);
|
||||
} catch (error) {
|
||||
setError('Failed to start auto connection as responder: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return React.createElement('div', {
|
||||
className: 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'modal',
|
||||
className: 'bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden'
|
||||
}, [
|
||||
// Header
|
||||
React.createElement('div', {
|
||||
key: 'header',
|
||||
className: 'flex items-center justify-between p-6 border-b border-gray-700'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'title',
|
||||
className: 'flex items-center space-x-3'
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'icon',
|
||||
className: 'fas fa-bluetooth text-blue-400 text-xl'
|
||||
}),
|
||||
React.createElement('h2', {
|
||||
key: 'text',
|
||||
className: 'text-xl font-semibold text-white'
|
||||
}, 'Bluetooth Key Transfer')
|
||||
]),
|
||||
React.createElement('button', {
|
||||
key: 'close',
|
||||
onClick: onClose,
|
||||
className: 'text-gray-400 hover:text-white transition-colors'
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
className: 'fas fa-times text-xl'
|
||||
})
|
||||
])
|
||||
]),
|
||||
|
||||
// Content
|
||||
React.createElement('div', {
|
||||
key: 'content',
|
||||
className: 'p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-200px)]'
|
||||
}, [
|
||||
// Status Section
|
||||
React.createElement('div', {
|
||||
key: 'status',
|
||||
className: 'space-y-4'
|
||||
}, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: 'text-lg font-medium text-white'
|
||||
}, 'Bluetooth Status'),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'indicators',
|
||||
className: 'grid grid-cols-2 gap-4'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'support',
|
||||
className: 'flex items-center space-x-2'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
className: `w-3 h-3 rounded-full ${isSupported ? 'bg-green-500' : 'bg-red-500'}`
|
||||
}),
|
||||
React.createElement('span', {
|
||||
className: 'text-sm text-gray-300'
|
||||
}, 'Bluetooth Supported')
|
||||
]),
|
||||
React.createElement('div', {
|
||||
key: 'availability',
|
||||
className: 'flex items-center space-x-2'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
className: `w-3 h-3 rounded-full ${isAvailable ? 'bg-green-500' : 'bg-red-500'}`
|
||||
}),
|
||||
React.createElement('span', {
|
||||
className: 'text-sm text-gray-300'
|
||||
}, 'Bluetooth Available')
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
// Controls Section
|
||||
React.createElement('div', {
|
||||
key: 'controls',
|
||||
className: 'space-y-4'
|
||||
}, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: 'text-lg font-medium text-white'
|
||||
}, 'Key Exchange'),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'buttons',
|
||||
className: 'grid grid-cols-1 sm:grid-cols-2 gap-4'
|
||||
}, [
|
||||
// Scanning Controls
|
||||
React.createElement('div', {
|
||||
key: 'scanning',
|
||||
className: 'space-y-2'
|
||||
}, [
|
||||
React.createElement('h4', {
|
||||
key: 'title',
|
||||
className: 'text-sm font-medium text-gray-300'
|
||||
}, 'Discover Devices'),
|
||||
React.createElement('button', {
|
||||
key: 'scan',
|
||||
onClick: isScanning ? stopScanning : startScanning,
|
||||
disabled: !isSupported || !isAvailable,
|
||||
className: `w-full px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
isScanning
|
||||
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||
: 'bg-blue-600 hover:bg-blue-700 text-white disabled:bg-gray-600 disabled:cursor-not-allowed'
|
||||
}`
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'icon',
|
||||
className: `fas ${isScanning ? 'fa-stop' : 'fa-search'} mr-2`
|
||||
}),
|
||||
isScanning ? 'Stop Scanning' : 'Start Scanning'
|
||||
])
|
||||
]),
|
||||
|
||||
// Advertising Controls
|
||||
React.createElement('div', {
|
||||
key: 'advertising',
|
||||
className: 'space-y-2'
|
||||
}, [
|
||||
React.createElement('h4', {
|
||||
key: 'title',
|
||||
className: 'text-sm font-medium text-gray-300'
|
||||
}, 'Share Your Key'),
|
||||
React.createElement('button', {
|
||||
key: 'advertise',
|
||||
onClick: isAdvertising ? stopAdvertising : startAdvertising,
|
||||
disabled: !isSupported || !isAvailable,
|
||||
className: `w-full px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
isAdvertising
|
||||
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||
: 'bg-green-600 hover:bg-green-700 text-white disabled:bg-gray-600 disabled:cursor-not-allowed'
|
||||
}`
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'icon',
|
||||
className: `fas ${isAdvertising ? 'fa-stop' : 'fa-broadcast-tower'} mr-2`
|
||||
}),
|
||||
isAdvertising ? 'Stop Sharing' : 'Start Sharing'
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
// Connected Devices
|
||||
connectedDevices.length > 0 && React.createElement('div', {
|
||||
key: 'devices',
|
||||
className: 'space-y-4'
|
||||
}, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: 'text-lg font-medium text-white'
|
||||
}, 'Connected Devices'),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'list',
|
||||
className: 'space-y-2'
|
||||
}, connectedDevices.map(device =>
|
||||
React.createElement('div', {
|
||||
key: device.id,
|
||||
className: 'flex items-center justify-between p-3 bg-gray-800 rounded-lg'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'info',
|
||||
className: 'flex items-center space-x-3'
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'icon',
|
||||
className: 'fas fa-mobile-alt text-blue-400'
|
||||
}),
|
||||
React.createElement('span', {
|
||||
key: 'name',
|
||||
className: 'text-white'
|
||||
}, device.name)
|
||||
]),
|
||||
React.createElement('div', {
|
||||
key: 'buttons',
|
||||
className: 'flex space-x-2'
|
||||
}, [
|
||||
React.createElement('button', {
|
||||
key: 'auto-connect',
|
||||
onClick: () => startAutoConnection(device.id),
|
||||
className: 'px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors'
|
||||
}, 'Auto Connect'),
|
||||
React.createElement('button', {
|
||||
key: 'auto-respond',
|
||||
onClick: () => startAutoConnectionAsResponder(device.id),
|
||||
className: 'px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded transition-colors'
|
||||
}, 'Auto Respond'),
|
||||
React.createElement('button', {
|
||||
key: 'send',
|
||||
onClick: () => sendPublicKey(device.id),
|
||||
className: 'px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors'
|
||||
}, 'Send Key')
|
||||
])
|
||||
])
|
||||
))
|
||||
]),
|
||||
|
||||
// Error Display
|
||||
error && React.createElement('div', {
|
||||
key: 'error',
|
||||
className: 'p-4 bg-red-900 border border-red-700 rounded-lg'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'header',
|
||||
className: 'flex items-center space-x-2 mb-2'
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'icon',
|
||||
className: 'fas fa-exclamation-triangle text-red-400'
|
||||
}),
|
||||
React.createElement('h4', {
|
||||
key: 'title',
|
||||
className: 'text-red-400 font-medium'
|
||||
}, 'Error')
|
||||
]),
|
||||
React.createElement('p', {
|
||||
key: 'message',
|
||||
className: 'text-red-300 text-sm'
|
||||
}, error)
|
||||
]),
|
||||
|
||||
// Logs Section
|
||||
React.createElement('div', {
|
||||
key: 'logs',
|
||||
className: 'space-y-4'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'header',
|
||||
className: 'flex items-center justify-between'
|
||||
}, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: 'text-lg font-medium text-white'
|
||||
}, 'Activity Log'),
|
||||
React.createElement('button', {
|
||||
key: 'clear',
|
||||
onClick: clearLogs,
|
||||
className: 'text-sm text-gray-400 hover:text-white transition-colors'
|
||||
}, 'Clear')
|
||||
]),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'log-list',
|
||||
className: 'bg-gray-800 rounded-lg p-4 max-h-40 overflow-y-auto'
|
||||
}, logs.length === 0 ?
|
||||
React.createElement('p', {
|
||||
key: 'empty',
|
||||
className: 'text-gray-400 text-sm text-center'
|
||||
}, 'No activity yet') :
|
||||
logs.map((log, index) =>
|
||||
React.createElement('div', {
|
||||
key: index,
|
||||
className: 'text-xs text-gray-300 mb-1'
|
||||
}, [
|
||||
React.createElement('span', {
|
||||
key: 'time',
|
||||
className: 'text-gray-500'
|
||||
}, `[${log.timestamp}] `),
|
||||
React.createElement('span', {
|
||||
key: 'message',
|
||||
className: 'text-gray-300'
|
||||
}, log.message),
|
||||
log.data && React.createElement('pre', {
|
||||
key: 'data',
|
||||
className: 'text-gray-400 mt-1 ml-4'
|
||||
}, log.data)
|
||||
])
|
||||
)
|
||||
)
|
||||
])
|
||||
]),
|
||||
|
||||
// Footer
|
||||
React.createElement('div', {
|
||||
key: 'footer',
|
||||
className: 'flex items-center justify-between p-6 border-t border-gray-700'
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'info',
|
||||
className: 'text-sm text-gray-400'
|
||||
}, 'Bluetooth key exchange provides secure device-to-device communication'),
|
||||
|
||||
React.createElement('button', {
|
||||
key: 'close-footer',
|
||||
onClick: onClose,
|
||||
className: 'px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors'
|
||||
}, 'Close')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
// Export component
|
||||
if (typeof window !== 'undefined') {
|
||||
window.BluetoothKeyTransfer = BluetoothKeyTransfer;
|
||||
}
|
||||
@@ -9,6 +9,10 @@ const EnhancedMinimalHeader = ({
|
||||
}) => {
|
||||
const [realSecurityLevel, setRealSecurityLevel] = React.useState(null);
|
||||
const [lastSecurityUpdate, setLastSecurityUpdate] = React.useState(0);
|
||||
// Added local session state to remove references errors after session timer removal
|
||||
const [hasActiveSession, setHasActiveSession] = React.useState(false);
|
||||
const [currentTimeLeft, setCurrentTimeLeft] = React.useState(0);
|
||||
const [sessionType, setSessionType] = React.useState('unknown');
|
||||
|
||||
// ============================================
|
||||
// FIXED SECURITY UPDATE LOGIC
|
||||
@@ -154,7 +158,7 @@ const EnhancedMinimalHeader = ({
|
||||
setHasActiveSession(true);
|
||||
setCurrentTimeLeft(0);
|
||||
setSessionType('premium'); // All features enabled
|
||||
}, [sessionTimeLeft]);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleForceUpdate = (event) => {
|
||||
|
||||
@@ -6709,41 +6709,41 @@ async processMessage(data) {
|
||||
// Method for automatic feature enablement with stability check
|
||||
async autoEnableSecurityFeatures() {
|
||||
this._secureLog('info', 'Starting graduated security activation - all features enabled');
|
||||
|
||||
const checkStability = () => {
|
||||
const isStable = this.isConnected() &&
|
||||
this.isVerified &&
|
||||
this.connectionAttempts === 0 &&
|
||||
this.messageQueue.length === 0 &&
|
||||
this.peerConnection?.connectionState === 'connected';
|
||||
return isStable;
|
||||
};
|
||||
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
this.notifySecurityUpgrade(1);
|
||||
|
||||
|
||||
const checkStability = () => {
|
||||
const isStable = this.isConnected() &&
|
||||
this.isVerified &&
|
||||
this.connectionAttempts === 0 &&
|
||||
this.messageQueue.length === 0 &&
|
||||
this.peerConnection?.connectionState === 'connected';
|
||||
return isStable;
|
||||
};
|
||||
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
this.notifySecurityUpgrade(1);
|
||||
|
||||
// Enable all security stages progressively
|
||||
setTimeout(async () => {
|
||||
if (checkStability()) {
|
||||
this.enableStage2Security();
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
|
||||
setTimeout(async () => {
|
||||
if (checkStability()) {
|
||||
this.enableStage3Security();
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
|
||||
setTimeout(async () => {
|
||||
if (checkStability()) {
|
||||
this.enableStage4Security();
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
}
|
||||
}, 20000);
|
||||
}
|
||||
}, 15000);
|
||||
setTimeout(async () => {
|
||||
if (checkStability()) {
|
||||
this.enableStage3Security();
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
|
||||
setTimeout(async () => {
|
||||
if (checkStability()) {
|
||||
this.enableStage4Security();
|
||||
await this.calculateAndReportSecurityLevel();
|
||||
}
|
||||
}, 20000);
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// CONNECTION MANAGEMENT WITH ENHANCED SECURITY
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { EnhancedSecureCryptoUtils } from '../crypto/EnhancedSecureCryptoUtils.js';
|
||||
import { EnhancedSecureWebRTCManager } from '../network/EnhancedSecureWebRTCManager.js';
|
||||
import { EnhancedSecureFileTransfer } from '../transfer/EnhancedSecureFileTransfer.js';
|
||||
import BluetoothKeyTransfer from '../transfer/BluetoothKeyTransfer.js';
|
||||
|
||||
// Import UI components (side-effect: they attach themselves to window.*)
|
||||
import '../components/ui/Header.jsx';
|
||||
@@ -11,11 +12,13 @@ import '../components/ui/Testimonials.jsx';
|
||||
import '../components/ui/ComparisonTable.jsx';
|
||||
import '../components/ui/Roadmap.jsx';
|
||||
import '../components/ui/FileTransfer.jsx';
|
||||
import '../components/ui/BluetoothKeyTransfer.jsx';
|
||||
|
||||
// Expose to global for legacy usage inside app code
|
||||
window.EnhancedSecureCryptoUtils = EnhancedSecureCryptoUtils;
|
||||
window.EnhancedSecureWebRTCManager = EnhancedSecureWebRTCManager;
|
||||
window.EnhancedSecureFileTransfer = EnhancedSecureFileTransfer;
|
||||
window.BluetoothKeyTransfer = BluetoothKeyTransfer;
|
||||
|
||||
// Mount application once DOM and modules are ready
|
||||
const start = () => {
|
||||
|
||||
Vendored
+5
-1
@@ -3,10 +3,11 @@
|
||||
(async () => {
|
||||
try {
|
||||
const timestamp = Date.now();
|
||||
const [cryptoModule, webrtcModule, fileTransferModule] = await Promise.all([
|
||||
const [cryptoModule, webrtcModule, fileTransferModule, bluetoothModule] = await Promise.all([
|
||||
import(`../crypto/EnhancedSecureCryptoUtils.js?v=${timestamp}`),
|
||||
import(`../network/EnhancedSecureWebRTCManager.js?v=${timestamp}`),
|
||||
import(`../transfer/EnhancedSecureFileTransfer.js?v=${timestamp}`),
|
||||
import(`../transfer/BluetoothKeyTransfer.js?v=${timestamp}`),
|
||||
]);
|
||||
|
||||
const { EnhancedSecureCryptoUtils } = cryptoModule;
|
||||
@@ -15,6 +16,8 @@
|
||||
window.EnhancedSecureWebRTCManager = EnhancedSecureWebRTCManager;
|
||||
const { EnhancedSecureFileTransfer } = fileTransferModule;
|
||||
window.EnhancedSecureFileTransfer = EnhancedSecureFileTransfer;
|
||||
const { default: BluetoothKeyTransfer } = bluetoothModule;
|
||||
window.BluetoothKeyTransfer = BluetoothKeyTransfer;
|
||||
|
||||
async function loadReactComponent(path) {
|
||||
const response = await fetch(`${path}?v=${timestamp}`);
|
||||
@@ -33,6 +36,7 @@
|
||||
loadReactComponent('../components/ui/Testimonials.jsx'),
|
||||
loadReactComponent('../components/ui/Roadmap.jsx'),
|
||||
loadReactComponent('../components/ui/FileTransfer.jsx'),
|
||||
loadReactComponent('../components/ui/BluetoothKeyTransfer.jsx'),
|
||||
]);
|
||||
|
||||
if (typeof window.initializeApp === 'function') {
|
||||
|
||||
@@ -0,0 +1,771 @@
|
||||
/**
|
||||
* Bluetooth Key Transfer Module for SecureBit.chat
|
||||
*
|
||||
* Features:
|
||||
* - Secure Bluetooth Low Energy (BLE) key exchange
|
||||
* - Automatic device discovery and pairing
|
||||
* - Encrypted key transmission
|
||||
* - Fallback to manual/QR methods
|
||||
* - Cross-platform compatibility
|
||||
*
|
||||
* Security:
|
||||
* - Uses BLE advertising for device discovery
|
||||
* - Encrypts key data before transmission
|
||||
* - Implements secure pairing protocols
|
||||
* - Validates received keys before acceptance
|
||||
*/
|
||||
|
||||
class BluetoothKeyTransfer {
|
||||
constructor(webrtcManager, onStatusChange, onKeyReceived, onError, onAutoConnection) {
|
||||
this.webrtcManager = webrtcManager;
|
||||
this.onStatusChange = onStatusChange;
|
||||
this.onKeyReceived = onKeyReceived;
|
||||
this.onError = onError;
|
||||
this.onAutoConnection = onAutoConnection;
|
||||
|
||||
// Bluetooth state
|
||||
this.isSupported = false;
|
||||
this.isAvailable = false;
|
||||
this.isScanning = false;
|
||||
this.isAdvertising = false;
|
||||
this.connectedDevices = new Map();
|
||||
this.advertisingData = null;
|
||||
|
||||
// Service and characteristic UUIDs
|
||||
this.SERVICE_UUID = '6e400001-b5a3-f393-e0a9-e50e24dcca9e'; // Nordic UART Service
|
||||
this.TX_CHARACTERISTIC_UUID = '6e400002-b5a3-f393-e0a9-e50e24dcca9e'; // TX Characteristic
|
||||
this.RX_CHARACTERISTIC_UUID = '6e400003-b5a3-f393-e0a9-e50e24dcca9e'; // RX Characteristic
|
||||
|
||||
// Key transfer protocol
|
||||
this.PROTOCOL_VERSION = '1.0';
|
||||
this.MAX_CHUNK_SIZE = 20; // BLE characteristic max size
|
||||
this.TRANSFER_TIMEOUT = 30000; // 30 seconds
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
try {
|
||||
// Check Bluetooth support
|
||||
if (!navigator.bluetooth) {
|
||||
this.log('warn', 'Bluetooth API not supported in this browser');
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSupported = true;
|
||||
|
||||
// Check if Bluetooth is available
|
||||
const available = await navigator.bluetooth.getAvailability();
|
||||
this.isAvailable = available;
|
||||
|
||||
if (!available) {
|
||||
this.log('warn', 'Bluetooth is not available on this device');
|
||||
return;
|
||||
}
|
||||
|
||||
this.log('info', 'Bluetooth Key Transfer initialized successfully');
|
||||
this.onStatusChange?.('bluetooth_ready', { supported: true, available: true });
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to initialize Bluetooth Key Transfer', error);
|
||||
this.onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PUBLIC METHODS
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Start advertising this device for key exchange
|
||||
*/
|
||||
async startAdvertising(publicKey, deviceName = 'SecureBit Device') {
|
||||
if (!this.isSupported || !this.isAvailable) {
|
||||
throw new Error('Bluetooth not supported or available');
|
||||
}
|
||||
|
||||
try {
|
||||
this.log('info', 'Starting Bluetooth advertising...');
|
||||
this.onStatusChange?.('advertising_starting', { deviceName });
|
||||
|
||||
// Prepare advertising data
|
||||
const keyData = await this.prepareKeyData(publicKey);
|
||||
this.advertisingData = {
|
||||
deviceName,
|
||||
keyData,
|
||||
timestamp: Date.now(),
|
||||
protocolVersion: this.PROTOCOL_VERSION
|
||||
};
|
||||
|
||||
// Start advertising
|
||||
const options = {
|
||||
filters: [{
|
||||
services: [this.SERVICE_UUID]
|
||||
}],
|
||||
optionalServices: [this.SERVICE_UUID]
|
||||
};
|
||||
|
||||
this.isAdvertising = true;
|
||||
this.onStatusChange?.('advertising_active', { deviceName });
|
||||
|
||||
this.log('info', 'Bluetooth advertising started successfully');
|
||||
return true;
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to start Bluetooth advertising', error);
|
||||
this.isAdvertising = false;
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop advertising
|
||||
*/
|
||||
async stopAdvertising() {
|
||||
try {
|
||||
this.isAdvertising = false;
|
||||
this.advertisingData = null;
|
||||
this.onStatusChange?.('advertising_stopped');
|
||||
this.log('info', 'Bluetooth advertising stopped');
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to stop advertising', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start scanning for nearby devices
|
||||
*/
|
||||
async startScanning() {
|
||||
if (!this.isSupported || !this.isAvailable) {
|
||||
throw new Error('Bluetooth not supported or available');
|
||||
}
|
||||
|
||||
try {
|
||||
this.log('info', 'Starting Bluetooth device scan...');
|
||||
this.onStatusChange?.('scanning_starting');
|
||||
|
||||
const options = {
|
||||
filters: [{
|
||||
services: [this.SERVICE_UUID]
|
||||
}],
|
||||
optionalServices: [this.SERVICE_UUID]
|
||||
};
|
||||
|
||||
this.isScanning = true;
|
||||
this.onStatusChange?.('scanning_active');
|
||||
|
||||
// Start scanning
|
||||
const device = await navigator.bluetooth.requestDevice(options);
|
||||
|
||||
if (device) {
|
||||
this.log('info', 'Device selected:', device.name);
|
||||
await this.connectToDevice(device);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to start scanning', error);
|
||||
this.isScanning = false;
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop scanning
|
||||
*/
|
||||
async stopScanning() {
|
||||
try {
|
||||
this.isScanning = false;
|
||||
this.onStatusChange?.('scanning_stopped');
|
||||
this.log('info', 'Bluetooth scanning stopped');
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to stop scanning', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send public key to connected device
|
||||
*/
|
||||
async sendPublicKey(publicKey, deviceId) {
|
||||
try {
|
||||
const device = this.connectedDevices.get(deviceId);
|
||||
if (!device) {
|
||||
throw new Error('Device not connected');
|
||||
}
|
||||
|
||||
this.log('info', 'Sending public key to device:', deviceId);
|
||||
this.onStatusChange?.('key_sending', { deviceId });
|
||||
|
||||
const keyData = await this.prepareKeyData(publicKey);
|
||||
await this.sendData(keyData, device);
|
||||
|
||||
this.onStatusChange?.('key_sent', { deviceId });
|
||||
this.log('info', 'Public key sent successfully');
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to send public key', error);
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start automatic connection process (offer → answer → verification)
|
||||
*/
|
||||
async startAutoConnection(deviceId) {
|
||||
try {
|
||||
this.log('info', 'Starting automatic connection process');
|
||||
this.onStatusChange?.('auto_connection_starting', { deviceId });
|
||||
|
||||
if (!this.webrtcManager) {
|
||||
throw new Error('WebRTC Manager not available');
|
||||
}
|
||||
|
||||
// Step 1: Create and send offer
|
||||
this.onStatusChange?.('creating_offer', { deviceId });
|
||||
const offer = await this.webrtcManager.createSecureOffer();
|
||||
|
||||
// Send offer via Bluetooth
|
||||
await this.sendConnectionData(offer, deviceId, 'offer');
|
||||
this.onStatusChange?.('offer_sent', { deviceId });
|
||||
|
||||
// Step 2: Wait for answer
|
||||
this.onStatusChange?.('waiting_for_answer', { deviceId });
|
||||
const answer = await this.waitForConnectionData(deviceId, 'answer');
|
||||
|
||||
// Step 3: Process answer
|
||||
this.onStatusChange?.('processing_answer', { deviceId });
|
||||
await this.webrtcManager.createSecureAnswer(answer);
|
||||
|
||||
// Step 4: Wait for verification
|
||||
this.onStatusChange?.('waiting_for_verification', { deviceId });
|
||||
const verification = await this.waitForConnectionData(deviceId, 'verification');
|
||||
|
||||
// Step 5: Complete connection
|
||||
this.onStatusChange?.('completing_connection', { deviceId });
|
||||
await this.completeConnection(verification, deviceId);
|
||||
|
||||
this.onStatusChange?.('auto_connection_complete', { deviceId });
|
||||
this.log('info', 'Automatic connection completed successfully');
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Automatic connection failed', error);
|
||||
this.onStatusChange?.('auto_connection_failed', { deviceId, error: error.message });
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start automatic connection as responder (wait for offer → create answer → send verification)
|
||||
*/
|
||||
async startAutoConnectionAsResponder(deviceId) {
|
||||
try {
|
||||
this.log('info', 'Starting automatic connection as responder');
|
||||
this.onStatusChange?.('auto_connection_responder_starting', { deviceId });
|
||||
|
||||
if (!this.webrtcManager) {
|
||||
throw new Error('WebRTC Manager not available');
|
||||
}
|
||||
|
||||
// Step 1: Wait for offer
|
||||
this.onStatusChange?.('waiting_for_offer', { deviceId });
|
||||
const offer = await this.waitForConnectionData(deviceId, 'offer');
|
||||
|
||||
// Step 2: Create and send answer
|
||||
this.onStatusChange?.('creating_answer', { deviceId });
|
||||
const answer = await this.webrtcManager.createSecureAnswer(offer);
|
||||
|
||||
// Send answer via Bluetooth
|
||||
await this.sendConnectionData(answer, deviceId, 'answer');
|
||||
this.onStatusChange?.('answer_sent', { deviceId });
|
||||
|
||||
// Step 3: Send verification
|
||||
this.onStatusChange?.('sending_verification', { deviceId });
|
||||
const verification = await this.createVerificationData();
|
||||
await this.sendConnectionData(verification, deviceId, 'verification');
|
||||
|
||||
this.onStatusChange?.('auto_connection_responder_complete', { deviceId });
|
||||
this.log('info', 'Automatic connection as responder completed successfully');
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Automatic connection as responder failed', error);
|
||||
this.onStatusChange?.('auto_connection_responder_failed', { deviceId, error: error.message });
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PRIVATE METHODS
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Connect to a discovered device
|
||||
*/
|
||||
async connectToDevice(device) {
|
||||
try {
|
||||
this.log('info', 'Connecting to device:', device.name);
|
||||
this.onStatusChange?.('connecting', { deviceName: device.name });
|
||||
|
||||
const server = await device.gatt.connect();
|
||||
const service = await server.getPrimaryService(this.SERVICE_UUID);
|
||||
|
||||
// Get characteristics
|
||||
const txCharacteristic = await service.getCharacteristic(this.TX_CHARACTERISTIC_UUID);
|
||||
const rxCharacteristic = await service.getCharacteristic(this.RX_CHARACTERISTIC_UUID);
|
||||
|
||||
// Set up data reception
|
||||
rxCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
|
||||
this.handleReceivedData(event, device.id);
|
||||
});
|
||||
await rxCharacteristic.startNotifications();
|
||||
|
||||
// Store device connection
|
||||
this.connectedDevices.set(device.id, {
|
||||
device,
|
||||
server,
|
||||
service,
|
||||
txCharacteristic,
|
||||
rxCharacteristic,
|
||||
connected: true
|
||||
});
|
||||
|
||||
this.onStatusChange?.('connected', { deviceId: device.id, deviceName: device.name });
|
||||
this.log('info', 'Successfully connected to device:', device.name);
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to connect to device', error);
|
||||
this.onError?.(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send data to connected device
|
||||
*/
|
||||
async sendData(data, device) {
|
||||
try {
|
||||
const { txCharacteristic } = device;
|
||||
const dataString = JSON.stringify(data);
|
||||
const chunks = this.chunkString(dataString, this.MAX_CHUNK_SIZE);
|
||||
|
||||
// Send chunks sequentially
|
||||
for (let i = 0; i < chunks.length; i++) {
|
||||
const chunk = chunks[i];
|
||||
const chunkData = new TextEncoder().encode(chunk);
|
||||
await txCharacteristic.writeValue(chunkData);
|
||||
|
||||
// Small delay between chunks
|
||||
await new Promise(resolve => setTimeout(resolve, 10));
|
||||
}
|
||||
|
||||
this.log('info', `Sent ${chunks.length} chunks to device`);
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to send data', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle received data from device
|
||||
*/
|
||||
async handleReceivedData(event, deviceId) {
|
||||
try {
|
||||
const value = event.target.value;
|
||||
const data = new TextDecoder().decode(value);
|
||||
|
||||
// Try to parse as connection data first
|
||||
try {
|
||||
const connectionData = JSON.parse(data);
|
||||
if (connectionData.type && ['offer', 'answer', 'verification'].includes(connectionData.type)) {
|
||||
this.handleConnectionData(connectionData, deviceId);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not connection data, continue with key processing
|
||||
}
|
||||
|
||||
// Process received data as key data
|
||||
const keyData = await this.processReceivedData(data, deviceId);
|
||||
if (keyData) {
|
||||
this.onKeyReceived?.(keyData, deviceId);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to handle received data', error);
|
||||
this.onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle connection data (offer, answer, verification)
|
||||
*/
|
||||
async handleConnectionData(connectionData, deviceId) {
|
||||
try {
|
||||
this.log('info', `Received ${connectionData.type} from device:`, deviceId);
|
||||
|
||||
// Store connection data for waiting processes
|
||||
if (!this.connectionDataBuffer) {
|
||||
this.connectionDataBuffer = new Map();
|
||||
}
|
||||
|
||||
if (!this.connectionDataBuffer.has(deviceId)) {
|
||||
this.connectionDataBuffer.set(deviceId, new Map());
|
||||
}
|
||||
|
||||
this.connectionDataBuffer.get(deviceId).set(connectionData.type, connectionData);
|
||||
|
||||
// Notify waiting processes
|
||||
this.onStatusChange?.(`${connectionData.type}_received`, { deviceId, data: connectionData });
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to handle connection data', error);
|
||||
this.onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare key data for transmission
|
||||
*/
|
||||
async prepareKeyData(publicKey) {
|
||||
try {
|
||||
// Export public key
|
||||
const exportedKey = await crypto.subtle.exportKey('spki', publicKey);
|
||||
const keyArray = new Uint8Array(exportedKey);
|
||||
|
||||
// Create secure payload
|
||||
const payload = {
|
||||
type: 'public_key',
|
||||
key: Array.from(keyArray),
|
||||
timestamp: Date.now(),
|
||||
protocolVersion: this.PROTOCOL_VERSION,
|
||||
deviceId: await this.getDeviceId()
|
||||
};
|
||||
|
||||
// Sign payload for integrity
|
||||
const signature = await this.signPayload(payload);
|
||||
payload.signature = signature;
|
||||
|
||||
return payload;
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to prepare key data', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process received key data
|
||||
*/
|
||||
async processReceivedData(data, deviceId) {
|
||||
try {
|
||||
const payload = JSON.parse(data);
|
||||
|
||||
// Validate payload
|
||||
if (!this.validatePayload(payload)) {
|
||||
throw new Error('Invalid payload received');
|
||||
}
|
||||
|
||||
// Verify signature
|
||||
if (!await this.verifyPayload(payload)) {
|
||||
throw new Error('Payload signature verification failed');
|
||||
}
|
||||
|
||||
// Import public key
|
||||
const publicKey = await crypto.subtle.importKey(
|
||||
'spki',
|
||||
new Uint8Array(payload.key),
|
||||
{ name: 'ECDH', namedCurve: 'P-384' },
|
||||
false,
|
||||
[]
|
||||
);
|
||||
|
||||
this.log('info', 'Successfully processed received key data');
|
||||
return {
|
||||
publicKey,
|
||||
deviceId,
|
||||
timestamp: payload.timestamp,
|
||||
protocolVersion: payload.protocolVersion
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to process received data', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign payload for integrity
|
||||
*/
|
||||
async signPayload(payload) {
|
||||
try {
|
||||
// Use WebRTC manager's signing key if available
|
||||
if (this.webrtcManager && this.webrtcManager.signingKeyPair) {
|
||||
const data = new TextEncoder().encode(JSON.stringify(payload));
|
||||
const signature = await crypto.subtle.sign(
|
||||
{ name: 'ECDSA', hash: 'SHA-384' },
|
||||
this.webrtcManager.signingKeyPair.privateKey,
|
||||
data
|
||||
);
|
||||
return Array.from(new Uint8Array(signature));
|
||||
}
|
||||
|
||||
// Fallback: simple hash
|
||||
const data = new TextEncoder().encode(JSON.stringify(payload));
|
||||
const hash = await crypto.subtle.digest('SHA-256', data);
|
||||
return Array.from(new Uint8Array(hash));
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to sign payload', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Verify payload signature
|
||||
*/
|
||||
async verifyPayload(payload) {
|
||||
try {
|
||||
const { signature, ...payloadWithoutSig } = payload;
|
||||
|
||||
// Use WebRTC manager's signing key if available
|
||||
if (this.webrtcManager && this.webrtcManager.signingKeyPair) {
|
||||
const data = new TextEncoder().encode(JSON.stringify(payloadWithoutSig));
|
||||
const isValid = await crypto.subtle.verify(
|
||||
{ name: 'ECDSA', hash: 'SHA-384' },
|
||||
this.webrtcManager.signingKeyPair.publicKey,
|
||||
new Uint8Array(signature),
|
||||
data
|
||||
);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// Fallback: simple hash comparison
|
||||
const data = new TextEncoder().encode(JSON.stringify(payloadWithoutSig));
|
||||
const hash = await crypto.subtle.digest('SHA-256', data);
|
||||
const expectedHash = Array.from(new Uint8Array(hash));
|
||||
return JSON.stringify(signature) === JSON.stringify(expectedHash);
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to verify payload', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate received payload
|
||||
*/
|
||||
validatePayload(payload) {
|
||||
return (
|
||||
payload &&
|
||||
payload.type === 'public_key' &&
|
||||
payload.key &&
|
||||
Array.isArray(payload.key) &&
|
||||
payload.timestamp &&
|
||||
payload.protocolVersion &&
|
||||
payload.signature &&
|
||||
Array.isArray(payload.signature)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique device ID
|
||||
*/
|
||||
async getDeviceId() {
|
||||
try {
|
||||
// Try to get a unique device identifier
|
||||
if (navigator.userAgentData && navigator.userAgentData.getHighEntropyValues) {
|
||||
const values = await navigator.userAgentData.getHighEntropyValues(['model']);
|
||||
return values.model || 'unknown-device';
|
||||
}
|
||||
|
||||
// Fallback to user agent hash
|
||||
const userAgent = navigator.userAgent;
|
||||
const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(userAgent));
|
||||
return Array.from(new Uint8Array(hash)).slice(0, 8).map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
|
||||
} catch (error) {
|
||||
return 'unknown-device';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send connection data (offer, answer, verification)
|
||||
*/
|
||||
async sendConnectionData(data, deviceId, type) {
|
||||
try {
|
||||
const device = this.connectedDevices.get(deviceId);
|
||||
if (!device) {
|
||||
throw new Error('Device not connected');
|
||||
}
|
||||
|
||||
const connectionData = {
|
||||
type: type,
|
||||
data: data,
|
||||
timestamp: Date.now(),
|
||||
protocolVersion: this.PROTOCOL_VERSION
|
||||
};
|
||||
|
||||
await this.sendData(connectionData, device);
|
||||
this.log('info', `Sent ${type} to device:`, deviceId);
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', `Failed to send ${type}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for specific connection data type
|
||||
*/
|
||||
async waitForConnectionData(deviceId, type, timeout = 30000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
reject(new Error(`Timeout waiting for ${type}`));
|
||||
}, timeout);
|
||||
|
||||
const checkForData = () => {
|
||||
if (this.connectionDataBuffer &&
|
||||
this.connectionDataBuffer.has(deviceId) &&
|
||||
this.connectionDataBuffer.get(deviceId).has(type)) {
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
const data = this.connectionDataBuffer.get(deviceId).get(type);
|
||||
this.connectionDataBuffer.get(deviceId).delete(type);
|
||||
resolve(data.data);
|
||||
} else {
|
||||
setTimeout(checkForData, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkForData();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create verification data
|
||||
*/
|
||||
async createVerificationData() {
|
||||
try {
|
||||
if (!this.webrtcManager || !this.webrtcManager.keyFingerprint) {
|
||||
throw new Error('WebRTC Manager or key fingerprint not available');
|
||||
}
|
||||
|
||||
return {
|
||||
fingerprint: this.webrtcManager.keyFingerprint,
|
||||
verificationCode: this.webrtcManager.verificationCode || 'auto-verified',
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to create verification data', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete connection process
|
||||
*/
|
||||
async completeConnection(verification, deviceId) {
|
||||
try {
|
||||
// Validate verification data
|
||||
if (verification.fingerprint && this.webrtcManager.keyFingerprint) {
|
||||
if (verification.fingerprint !== this.webrtcManager.keyFingerprint) {
|
||||
throw new Error('Key fingerprint mismatch');
|
||||
}
|
||||
}
|
||||
|
||||
// Notify auto connection completion
|
||||
this.onAutoConnection?.({
|
||||
deviceId,
|
||||
fingerprint: verification.fingerprint,
|
||||
verificationCode: verification.verificationCode,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
this.log('info', 'Connection completed successfully');
|
||||
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to complete connection', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Split string into chunks
|
||||
*/
|
||||
chunkString(str, chunkSize) {
|
||||
const chunks = [];
|
||||
for (let i = 0; i < str.length; i += chunkSize) {
|
||||
chunks.push(str.slice(i, i + chunkSize));
|
||||
}
|
||||
return chunks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logging utility
|
||||
*/
|
||||
log(level, message, data = null) {
|
||||
const timestamp = new Date().toISOString();
|
||||
const logMessage = `[BluetoothKeyTransfer ${timestamp}] ${message}`;
|
||||
|
||||
switch (level) {
|
||||
case 'error':
|
||||
console.error(logMessage, data);
|
||||
break;
|
||||
case 'warn':
|
||||
console.warn(logMessage, data);
|
||||
break;
|
||||
case 'info':
|
||||
console.info(logMessage, data);
|
||||
break;
|
||||
default:
|
||||
console.log(logMessage, data);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// CLEANUP METHODS
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Disconnect from all devices
|
||||
*/
|
||||
async disconnectAll() {
|
||||
try {
|
||||
for (const [deviceId, device] of this.connectedDevices) {
|
||||
if (device.connected && device.server) {
|
||||
device.server.disconnect();
|
||||
}
|
||||
}
|
||||
this.connectedDevices.clear();
|
||||
this.log('info', 'Disconnected from all devices');
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to disconnect devices', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup resources
|
||||
*/
|
||||
async cleanup() {
|
||||
try {
|
||||
await this.stopAdvertising();
|
||||
await this.stopScanning();
|
||||
await this.disconnectAll();
|
||||
this.log('info', 'Bluetooth Key Transfer cleaned up');
|
||||
} catch (error) {
|
||||
this.log('error', 'Failed to cleanup Bluetooth Key Transfer', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = BluetoothKeyTransfer;
|
||||
} else if (typeof window !== 'undefined') {
|
||||
window.BluetoothKeyTransfer = BluetoothKeyTransfer;
|
||||
}
|
||||
@@ -27,7 +27,11 @@ const STATIC_ASSETS = [
|
||||
'/src/pwa/pwa-manager.js',
|
||||
'/src/pwa/install-prompt.js',
|
||||
'/src/scripts/pwa-register.js',
|
||||
'/src/scripts/pwa-offline-test.js'
|
||||
'/src/scripts/pwa-offline-test.js',
|
||||
|
||||
// Bluetooth key transfer (PWA feature)
|
||||
'/src/transfer/BluetoothKeyTransfer.js',
|
||||
'/src/components/ui/BluetoothKeyTransfer.jsx'
|
||||
];
|
||||
|
||||
// Sensitive files that should never be cached
|
||||
|
||||
@@ -0,0 +1,455 @@
|
||||
// src/components/ui/BluetoothKeyTransfer.jsx
|
||||
var BluetoothKeyTransfer = ({
|
||||
webrtcManager,
|
||||
onKeyReceived,
|
||||
onStatusChange,
|
||||
onAutoConnection,
|
||||
isVisible = false,
|
||||
onClose
|
||||
}) => {
|
||||
const [bluetoothManager, setBluetoothManager] = React.useState(null);
|
||||
const [isSupported, setIsSupported] = React.useState(false);
|
||||
const [isAvailable, setIsAvailable] = React.useState(false);
|
||||
const [isScanning, setIsScanning] = React.useState(false);
|
||||
const [isAdvertising, setIsAdvertising] = React.useState(false);
|
||||
const [connectedDevices, setConnectedDevices] = React.useState([]);
|
||||
const [status, setStatus] = React.useState("idle");
|
||||
const [error, setError] = React.useState(null);
|
||||
const [logs, setLogs] = React.useState([]);
|
||||
React.useEffect(() => {
|
||||
if (isVisible && !bluetoothManager) {
|
||||
initializeBluetooth();
|
||||
}
|
||||
}, [isVisible]);
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
if (bluetoothManager) {
|
||||
bluetoothManager.cleanup();
|
||||
}
|
||||
};
|
||||
}, [bluetoothManager]);
|
||||
const initializeBluetooth = async () => {
|
||||
try {
|
||||
const manager = new window.BluetoothKeyTransfer(
|
||||
webrtcManager,
|
||||
handleStatusChange,
|
||||
handleKeyReceived,
|
||||
handleError,
|
||||
handleAutoConnection
|
||||
);
|
||||
setBluetoothManager(manager);
|
||||
setTimeout(() => {
|
||||
setIsSupported(manager.isSupported);
|
||||
setIsAvailable(manager.isAvailable);
|
||||
}, 100);
|
||||
} catch (error2) {
|
||||
console.error("Failed to initialize Bluetooth manager:", error2);
|
||||
setError("Failed to initialize Bluetooth: " + error2.message);
|
||||
}
|
||||
};
|
||||
const handleStatusChange = (statusType, data) => {
|
||||
setStatus(statusType);
|
||||
addLog(`Status: ${statusType}`, data);
|
||||
switch (statusType) {
|
||||
case "bluetooth_ready":
|
||||
setIsSupported(data.supported);
|
||||
setIsAvailable(data.available);
|
||||
break;
|
||||
case "scanning_active":
|
||||
setIsScanning(true);
|
||||
break;
|
||||
case "scanning_stopped":
|
||||
setIsScanning(false);
|
||||
break;
|
||||
case "advertising_active":
|
||||
setIsAdvertising(true);
|
||||
break;
|
||||
case "advertising_stopped":
|
||||
setIsAdvertising(false);
|
||||
break;
|
||||
case "connected":
|
||||
setConnectedDevices((prev) => [...prev, {
|
||||
id: data.deviceId,
|
||||
name: data.deviceName,
|
||||
connected: true
|
||||
}]);
|
||||
break;
|
||||
}
|
||||
onStatusChange?.(statusType, data);
|
||||
};
|
||||
const handleKeyReceived = (keyData, deviceId) => {
|
||||
addLog("Key received from device", { deviceId });
|
||||
onKeyReceived?.(keyData, deviceId);
|
||||
};
|
||||
const handleError = (error2) => {
|
||||
console.error("Bluetooth error:", error2);
|
||||
setError(error2.message);
|
||||
addLog("Error", error2.message);
|
||||
};
|
||||
const handleAutoConnection = (connectionData) => {
|
||||
console.log("Auto connection completed:", connectionData);
|
||||
addLog("Auto Connection Completed", connectionData);
|
||||
onAutoConnection?.(connectionData);
|
||||
};
|
||||
const addLog = (message, data = null) => {
|
||||
const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
|
||||
const logEntry = {
|
||||
timestamp,
|
||||
message,
|
||||
data: data ? JSON.stringify(data, null, 2) : null
|
||||
};
|
||||
setLogs((prev) => [...prev.slice(-9), logEntry]);
|
||||
};
|
||||
const startScanning = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startScanning();
|
||||
} catch (error2) {
|
||||
setError("Failed to start scanning: " + error2.message);
|
||||
}
|
||||
};
|
||||
const stopScanning = async () => {
|
||||
try {
|
||||
await bluetoothManager.stopScanning();
|
||||
} catch (error2) {
|
||||
setError("Failed to stop scanning: " + error2.message);
|
||||
}
|
||||
};
|
||||
const startAdvertising = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
if (!webrtcManager || !webrtcManager.ecdhKeyPair) {
|
||||
throw new Error("No public key available for advertising");
|
||||
}
|
||||
await bluetoothManager.startAdvertising(
|
||||
webrtcManager.ecdhKeyPair.publicKey,
|
||||
"SecureBit Device"
|
||||
);
|
||||
} catch (error2) {
|
||||
setError("Failed to start advertising: " + error2.message);
|
||||
}
|
||||
};
|
||||
const stopAdvertising = async () => {
|
||||
try {
|
||||
await bluetoothManager.stopAdvertising();
|
||||
} catch (error2) {
|
||||
setError("Failed to stop advertising: " + error2.message);
|
||||
}
|
||||
};
|
||||
const sendPublicKey = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
if (!webrtcManager || !webrtcManager.ecdhKeyPair) {
|
||||
throw new Error("No public key available for sending");
|
||||
}
|
||||
await bluetoothManager.sendPublicKey(
|
||||
webrtcManager.ecdhKeyPair.publicKey,
|
||||
deviceId
|
||||
);
|
||||
} catch (error2) {
|
||||
setError("Failed to send public key: " + error2.message);
|
||||
}
|
||||
};
|
||||
const clearLogs = () => {
|
||||
setLogs([]);
|
||||
};
|
||||
const startAutoConnection = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startAutoConnection(deviceId);
|
||||
} catch (error2) {
|
||||
setError("Failed to start auto connection: " + error2.message);
|
||||
}
|
||||
};
|
||||
const startAutoConnectionAsResponder = async (deviceId) => {
|
||||
try {
|
||||
setError(null);
|
||||
await bluetoothManager.startAutoConnectionAsResponder(deviceId);
|
||||
} catch (error2) {
|
||||
setError("Failed to start auto connection as responder: " + error2.message);
|
||||
}
|
||||
};
|
||||
if (!isVisible) return null;
|
||||
return React.createElement("div", {
|
||||
className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "modal",
|
||||
className: "bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden"
|
||||
}, [
|
||||
// Header
|
||||
React.createElement("div", {
|
||||
key: "header",
|
||||
className: "flex items-center justify-between p-6 border-b border-gray-700"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "title",
|
||||
className: "flex items-center space-x-3"
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
key: "icon",
|
||||
className: "fas fa-bluetooth text-blue-400 text-xl"
|
||||
}),
|
||||
React.createElement("h2", {
|
||||
key: "text",
|
||||
className: "text-xl font-semibold text-white"
|
||||
}, "Bluetooth Key Transfer")
|
||||
]),
|
||||
React.createElement("button", {
|
||||
key: "close",
|
||||
onClick: onClose,
|
||||
className: "text-gray-400 hover:text-white transition-colors"
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
className: "fas fa-times text-xl"
|
||||
})
|
||||
])
|
||||
]),
|
||||
// Content
|
||||
React.createElement("div", {
|
||||
key: "content",
|
||||
className: "p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-200px)]"
|
||||
}, [
|
||||
// Status Section
|
||||
React.createElement("div", {
|
||||
key: "status",
|
||||
className: "space-y-4"
|
||||
}, [
|
||||
React.createElement("h3", {
|
||||
key: "title",
|
||||
className: "text-lg font-medium text-white"
|
||||
}, "Bluetooth Status"),
|
||||
React.createElement("div", {
|
||||
key: "indicators",
|
||||
className: "grid grid-cols-2 gap-4"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "support",
|
||||
className: "flex items-center space-x-2"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
className: `w-3 h-3 rounded-full ${isSupported ? "bg-green-500" : "bg-red-500"}`
|
||||
}),
|
||||
React.createElement("span", {
|
||||
className: "text-sm text-gray-300"
|
||||
}, "Bluetooth Supported")
|
||||
]),
|
||||
React.createElement("div", {
|
||||
key: "availability",
|
||||
className: "flex items-center space-x-2"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
className: `w-3 h-3 rounded-full ${isAvailable ? "bg-green-500" : "bg-red-500"}`
|
||||
}),
|
||||
React.createElement("span", {
|
||||
className: "text-sm text-gray-300"
|
||||
}, "Bluetooth Available")
|
||||
])
|
||||
])
|
||||
]),
|
||||
// Controls Section
|
||||
React.createElement("div", {
|
||||
key: "controls",
|
||||
className: "space-y-4"
|
||||
}, [
|
||||
React.createElement("h3", {
|
||||
key: "title",
|
||||
className: "text-lg font-medium text-white"
|
||||
}, "Key Exchange"),
|
||||
React.createElement("div", {
|
||||
key: "buttons",
|
||||
className: "grid grid-cols-1 sm:grid-cols-2 gap-4"
|
||||
}, [
|
||||
// Scanning Controls
|
||||
React.createElement("div", {
|
||||
key: "scanning",
|
||||
className: "space-y-2"
|
||||
}, [
|
||||
React.createElement("h4", {
|
||||
key: "title",
|
||||
className: "text-sm font-medium text-gray-300"
|
||||
}, "Discover Devices"),
|
||||
React.createElement("button", {
|
||||
key: "scan",
|
||||
onClick: isScanning ? stopScanning : startScanning,
|
||||
disabled: !isSupported || !isAvailable,
|
||||
className: `w-full px-4 py-2 rounded-lg font-medium transition-colors ${isScanning ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white disabled:bg-gray-600 disabled:cursor-not-allowed"}`
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
key: "icon",
|
||||
className: `fas ${isScanning ? "fa-stop" : "fa-search"} mr-2`
|
||||
}),
|
||||
isScanning ? "Stop Scanning" : "Start Scanning"
|
||||
])
|
||||
]),
|
||||
// Advertising Controls
|
||||
React.createElement("div", {
|
||||
key: "advertising",
|
||||
className: "space-y-2"
|
||||
}, [
|
||||
React.createElement("h4", {
|
||||
key: "title",
|
||||
className: "text-sm font-medium text-gray-300"
|
||||
}, "Share Your Key"),
|
||||
React.createElement("button", {
|
||||
key: "advertise",
|
||||
onClick: isAdvertising ? stopAdvertising : startAdvertising,
|
||||
disabled: !isSupported || !isAvailable,
|
||||
className: `w-full px-4 py-2 rounded-lg font-medium transition-colors ${isAdvertising ? "bg-red-600 hover:bg-red-700 text-white" : "bg-green-600 hover:bg-green-700 text-white disabled:bg-gray-600 disabled:cursor-not-allowed"}`
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
key: "icon",
|
||||
className: `fas ${isAdvertising ? "fa-stop" : "fa-broadcast-tower"} mr-2`
|
||||
}),
|
||||
isAdvertising ? "Stop Sharing" : "Start Sharing"
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
// Connected Devices
|
||||
connectedDevices.length > 0 && React.createElement("div", {
|
||||
key: "devices",
|
||||
className: "space-y-4"
|
||||
}, [
|
||||
React.createElement("h3", {
|
||||
key: "title",
|
||||
className: "text-lg font-medium text-white"
|
||||
}, "Connected Devices"),
|
||||
React.createElement("div", {
|
||||
key: "list",
|
||||
className: "space-y-2"
|
||||
}, connectedDevices.map(
|
||||
(device) => React.createElement("div", {
|
||||
key: device.id,
|
||||
className: "flex items-center justify-between p-3 bg-gray-800 rounded-lg"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "info",
|
||||
className: "flex items-center space-x-3"
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
key: "icon",
|
||||
className: "fas fa-mobile-alt text-blue-400"
|
||||
}),
|
||||
React.createElement("span", {
|
||||
key: "name",
|
||||
className: "text-white"
|
||||
}, device.name)
|
||||
]),
|
||||
React.createElement("div", {
|
||||
key: "buttons",
|
||||
className: "flex space-x-2"
|
||||
}, [
|
||||
React.createElement("button", {
|
||||
key: "auto-connect",
|
||||
onClick: () => startAutoConnection(device.id),
|
||||
className: "px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors"
|
||||
}, "Auto Connect"),
|
||||
React.createElement("button", {
|
||||
key: "auto-respond",
|
||||
onClick: () => startAutoConnectionAsResponder(device.id),
|
||||
className: "px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded transition-colors"
|
||||
}, "Auto Respond"),
|
||||
React.createElement("button", {
|
||||
key: "send",
|
||||
onClick: () => sendPublicKey(device.id),
|
||||
className: "px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors"
|
||||
}, "Send Key")
|
||||
])
|
||||
])
|
||||
))
|
||||
]),
|
||||
// Error Display
|
||||
error && React.createElement("div", {
|
||||
key: "error",
|
||||
className: "p-4 bg-red-900 border border-red-700 rounded-lg"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "header",
|
||||
className: "flex items-center space-x-2 mb-2"
|
||||
}, [
|
||||
React.createElement("i", {
|
||||
key: "icon",
|
||||
className: "fas fa-exclamation-triangle text-red-400"
|
||||
}),
|
||||
React.createElement("h4", {
|
||||
key: "title",
|
||||
className: "text-red-400 font-medium"
|
||||
}, "Error")
|
||||
]),
|
||||
React.createElement("p", {
|
||||
key: "message",
|
||||
className: "text-red-300 text-sm"
|
||||
}, error)
|
||||
]),
|
||||
// Logs Section
|
||||
React.createElement("div", {
|
||||
key: "logs",
|
||||
className: "space-y-4"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "header",
|
||||
className: "flex items-center justify-between"
|
||||
}, [
|
||||
React.createElement("h3", {
|
||||
key: "title",
|
||||
className: "text-lg font-medium text-white"
|
||||
}, "Activity Log"),
|
||||
React.createElement("button", {
|
||||
key: "clear",
|
||||
onClick: clearLogs,
|
||||
className: "text-sm text-gray-400 hover:text-white transition-colors"
|
||||
}, "Clear")
|
||||
]),
|
||||
React.createElement(
|
||||
"div",
|
||||
{
|
||||
key: "log-list",
|
||||
className: "bg-gray-800 rounded-lg p-4 max-h-40 overflow-y-auto"
|
||||
},
|
||||
logs.length === 0 ? React.createElement("p", {
|
||||
key: "empty",
|
||||
className: "text-gray-400 text-sm text-center"
|
||||
}, "No activity yet") : logs.map(
|
||||
(log, index) => React.createElement("div", {
|
||||
key: index,
|
||||
className: "text-xs text-gray-300 mb-1"
|
||||
}, [
|
||||
React.createElement("span", {
|
||||
key: "time",
|
||||
className: "text-gray-500"
|
||||
}, `[${log.timestamp}] `),
|
||||
React.createElement("span", {
|
||||
key: "message",
|
||||
className: "text-gray-300"
|
||||
}, log.message),
|
||||
log.data && React.createElement("pre", {
|
||||
key: "data",
|
||||
className: "text-gray-400 mt-1 ml-4"
|
||||
}, log.data)
|
||||
])
|
||||
)
|
||||
)
|
||||
])
|
||||
]),
|
||||
// Footer
|
||||
React.createElement("div", {
|
||||
key: "footer",
|
||||
className: "flex items-center justify-between p-6 border-t border-gray-700"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "info",
|
||||
className: "text-sm text-gray-400"
|
||||
}, "Bluetooth key exchange provides secure device-to-device communication"),
|
||||
React.createElement("button", {
|
||||
key: "close-footer",
|
||||
onClick: onClose,
|
||||
className: "px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
|
||||
}, "Close")
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
if (typeof window !== "undefined") {
|
||||
window.BluetoothKeyTransfer = BluetoothKeyTransfer;
|
||||
}
|
||||
+575
@@ -0,0 +1,575 @@
|
||||
// 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;
|
||||
Reference in New Issue
Block a user