SecureBitChat/securebit-chat
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Enhanced demo mode security and vulnerability fixes

Browse Source 
- **Fixed demo mode timing attack vulnerability** - Added strict rate limiting and user fingerprinting
- **Eliminated replay attack vectors** - Implemented preimage tracking and expiration validation
- **Enhanced key reuse protection** - Added cryptographic validation and session isolation
- **Strengthened free tier abuse prevention** - Multi-layer cooldown system with global limits

- **Secure user fingerprinting** - Browser-based identification without privacy invasion
- **Global session limits** - Maximum 10 concurrent demo sessions across all users
- **Per-user daily limits** - 3 demo sessions per 24 hours with smart cooldown
- **Session completion tracking** - Prevents rapid reconnection abuse
- **Enhanced preimage generation** - Timestamped, versioned, and entropy-validated

- **Configurable security layers** - Individual toggle for encryption, obfuscation, and traffic features
- **Debug mode controls** - `window.DEBUG_MODE` for detailed logging and diagnostics
- **Emergency security disable** - Graceful fallback when advanced features cause issues
- **Vulnerability testing support** - Controlled security layer bypass for penetration testing

- **Cross-session compatibility** - Works seamlessly with both paid and free sessions
- **Real-time UI updates** - Synchronized timer display across all components
- **Session state management** - Automatic cleanup and notification system
- **Payment integration** - Smooth transition between demo and paid sessions

- **Layered security architecture** - 7+ configurable security features with independent controls
- **Traffic analysis protection** - Advanced obfuscation with fake traffic and packet padding
- **Connection state monitoring** - Enhanced logging for security audit and debugging
- **Fallback mechanisms** - Robust error handling with security-first degradation

- **Structured security logs** - Detailed audit trail for security events
- **Performance monitoring** - Connection state and encryption layer metrics
- **Attack detection logging** - Comprehensive tracking of security violations
- **Development diagnostics** - Enhanced debugging for faster development cycles

- Refactored `PayPerSessionManager` with enhanced security controls
- Added `generateUserFingerprint()` with privacy-preserving identification
- Implemented `checkDemoSessionLimits()` with multi-tier validation
- Enhanced `EnhancedSecureWebRTCManager` with configurable security layers
- Added emergency security disable functionality for testing environments
- Improved session timer with cross-component synchronization

**Breaking Changes:** None - All changes are backward compatible
**Security Impact:** High - Eliminates critical vulnerabilities in free tier
**Testing Impact:** Significantly improved - New debug modes and security layer controls
This commit is contained in:
lockbitchat
2025-08-14 23:34:54 -04:00
parent 19e3047282
commit 5437bef9c5
7 changed files with 2211 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

571
index.html
View File

@@ -49,6 +49,13 @@
<link rel="stylesheet" href="src/styles/animations.css"> <link rel="stylesheet" href="src/styles/animations.css">
<link rel="stylesheet" href="src/styles/components.css"> <link rel="stylesheet" href="src/styles/components.css">
<script> <script>
// Global logging and function settings
window.DEBUG_MODE = true;
// Fake function settings (for stability)
window.DISABLE_FAKE_TRAFFIC = false; // Set true to disable fake messages
window.DISABLE_DECOY_CHANNELS = false; // Set true to disable decoy channels
// Enhanced icon loading fallback // Enhanced icon loading fallback
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Check if Font Awesome loaded properly // Check if Font Awesome loaded properly
@@ -1088,243 +1095,6 @@
); );
} }
// Enhanced Header Component with verification status
const EnhancedMinimalHeader = ({ status, fingerprint, verificationCode, onDisconnect, isConnected, securityLevel, sessionManager, sessionTimeLeft }) => {
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: 'Reconnecting...',
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();
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 - Mobile Responsive
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')
])
]),
// Status and Controls - Mobile Responsive
React.createElement('div', {
key: 'status-section',
className: 'flex items-center space-x-2 sm:space-x-3'
}, [
// Session Timer — show only if there is an active session
sessionManager?.hasActiveSession() && React.createElement(SessionTimer, {
key: 'session-timer',
timeLeft: sessionTimeLeft,
sessionType: sessionManager.currentSession?.type || 'unknown'
}),
// Security Level Indicator - Hidden on mobile, shown on tablet+ (Clickable)
securityLevel && 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: () => {
if (securityLevel.verificationResults) {
console.log('Security verification results:', securityLevel.verificationResults);
alert('Security check details:\n\n' +
Object.entries(securityLevel.verificationResults)
.map(([key, result]) => `${key}: ${result.passed ? '✅' : '❌'} ${result.details}`)
.join('\n')
);
}
},
title: 'Click to view security details'
}, [
React.createElement('div', {
key: 'security-icon',
className: `w-6 h-6 rounded-full flex items-center justify-center ${
securityLevel.color === 'green' ? 'bg-green-500/20' :
securityLevel.color === 'yellow' ? 'bg-yellow-500/20' : 'bg-red-500/20'
}`
}, [
React.createElement('i', {
className: `fas fa-shield-alt text-xs ${
securityLevel.color === 'green' ? 'text-green-400' :
securityLevel.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'
}, `${securityLevel.level} (${securityLevel.score}%)`),
securityLevel.details && React.createElement('div', {
key: 'security-details',
className: 'text-xs text-muted mt-1 hidden lg:block'
}, securityLevel.details),
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 ${
securityLevel.color === 'green' ? 'bg-green-400' :
securityLevel.color === 'yellow' ? 'bg-yellow-400' : 'bg-red-400'
}`,
style: { width: `${securityLevel.score}%` }
})
])
])
]),
// Mobile Security Indicator - Only icon on mobile (Clickable)
securityLevel && 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 ${
securityLevel.color === 'green' ? 'bg-green-500/20' :
securityLevel.color === 'yellow' ? 'bg-yellow-500/20' : 'bg-red-500/20'
}`,
title: `${securityLevel.level} (${securityLevel.score}%) - Нажмите для деталей`,
onClick: () => {
if (securityLevel.verificationResults) {
console.log('Security verification results:', securityLevel.verificationResults);
alert('Детали проверки безопасности:\n\n' +
Object.entries(securityLevel.verificationResults)
.map(([key, result]) => `${key}: ${result.passed ? '✅' : '❌'} ${result.details}`)
.join('\n')
);
}
}
}, [
React.createElement('i', {
className: `fas fa-shield-alt text-sm ${
securityLevel.color === 'green' ? 'text-green-400' :
securityLevel.color === 'yellow' ? 'text-yellow-400' : 'text-red-400'
}`
})
])
]),
// Status Badge - Compact on mobile
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 - Icon only on mobile
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', {
key: 'disconnect-icon',
className: 'fas fa-power-off sm:mr-2'
}),
React.createElement('span', {
key: 'disconnect-text',
className: 'hidden sm:inline'
}, 'Disconnect')
])
])
])
]),
]);
};
// Enhanced Copy Button with better UX // Enhanced Copy Button with better UX
const EnhancedCopyButton = ({ text, className = "", children }) => { const EnhancedCopyButton = ({ text, className = "", children }) => {
@@ -2251,11 +2021,27 @@
React.createElement(SessionTypeSelector, { React.createElement(SessionTypeSelector, {
key: 'session-selector', key: 'session-selector',
onSelectType: (sessionType) => { onSelectType: (sessionType) => {
// Открываем модальное окно оплаты // Save the selected session type
setSelectedSessionType(sessionType);
console.log('🎯 Session type selected:', sessionType);
// FIX: For demo sessions, we immediately call automatic activation
if (sessionType === 'demo') {
console.log('🎮 Demo session selected, scheduling automatic activation...');
// Delay activation for 2 seconds to stabilize
setTimeout(() => {
if (sessionManager) {
console.log('🚀 Triggering demo session activation from selection...');
handleDemoVerification();
}
}, 2000);
}
// Open a modal payment window
if (typeof window.showPaymentModal === 'function') { if (typeof window.showPaymentModal === 'function') {
window.showPaymentModal(sessionType); window.showPaymentModal(sessionType);
} else { } else {
// Fallback - показываем информацию о сессии // Fallback - show session information
console.log('Selected session type:', sessionType); console.log('Selected session type:', sessionType);
} }
}, },
@@ -2704,18 +2490,44 @@
const [answerPassword, setAnswerPassword] = React.useState(''); const [answerPassword, setAnswerPassword] = React.useState('');
// Pay-per-session state // Pay-per-session state
const [sessionManager] = React.useState(() => new PayPerSessionManager()); const [sessionManager, setSessionManager] = React.useState(null);
const [showPaymentModal, setShowPaymentModal] = React.useState(false); const [showPaymentModal, setShowPaymentModal] = React.useState(false);
const [sessionTimeLeft, setSessionTimeLeft] = React.useState(0); const [sessionTimeLeft, setSessionTimeLeft] = React.useState(0);
const [pendingSession, setPendingSession] = React.useState(null); // { type, preimage } const [pendingSession, setPendingSession] = React.useState(null); // { type, preimage }
const [selectedSessionType, setSelectedSessionType] = React.useState(null); // 'demo', 'basic', 'premium'
// Глобальные функции для доступа к модальным окнам // Initialize sessionManager after loading modules
React.useEffect(() => { React.useEffect(() => {
if (window.PayPerSessionManager && !sessionManager) {
console.log('💰 Initializing PayPerSessionManager...');
const newSessionManager = new window.PayPerSessionManager();
setSessionManager(newSessionManager);
window.sessionManager = newSessionManager;
console.log('✅ PayPerSessionManager initialized successfully');
}
}, [sessionManager]);
// Additional diagnostics for debugging
React.useEffect(() => {
if (sessionManager) {
console.log('🔍 SessionManager state changed:', {
hasActiveSession: sessionManager.hasActiveSession(),
timeLeft: sessionManager.getTimeLeft(),
currentSession: sessionManager.currentSession
});
}
}, [sessionManager]);
// Global functions for accessing modal windows
React.useEffect(() => {
if (!sessionManager) return;
window.showPaymentModal = (sessionType) => { window.showPaymentModal = (sessionType) => {
setShowPaymentModal(true); setShowPaymentModal(true);
// Передаем выбранный тип сессии в модальное окно // Pass the selected session type to the modal window
if (sessionType) { if (sessionType) {
// Здесь можно добавить логику для предварительной настройки модального окна
console.log('Opening payment modal for session type:', sessionType); console.log('Opening payment modal for session type:', sessionType);
} }
}; };
@@ -2749,6 +2561,8 @@
// Session time ticker // Session time ticker
React.useEffect(() => { React.useEffect(() => {
if (!sessionManager) return;
const timer = setInterval(() => { const timer = setInterval(() => {
if (sessionManager.hasActiveSession()) { if (sessionManager.hasActiveSession()) {
setSessionTimeLeft(sessionManager.getTimeLeft()); setSessionTimeLeft(sessionManager.getTimeLeft());
@@ -2761,6 +2575,8 @@
// Session expiration handler // Session expiration handler
React.useEffect(() => { React.useEffect(() => {
if (!sessionManager) return;
sessionManager.onSessionExpired = () => { sessionManager.onSessionExpired = () => {
setMessages(prev => [...prev, { setMessages(prev => [...prev, {
message: '⏰ Session time expired. The connection will be terminated.', message: '⏰ Session time expired. The connection will be terminated.',
@@ -2771,6 +2587,105 @@
setTimeout(() => handleDisconnect(), 3000); setTimeout(() => handleDisconnect(), 3000);
}; };
}, [sessionManager]); }, [sessionManager]);
// Automatic activation of demo session after successful verification
React.useEffect(() => {
if (!sessionManager) return;
// Listen to demo session verification events
const handleDemoVerification = async () => {
try {
// Check if there is an active demo session
if (sessionManager.hasActiveSession()) {
console.log('✅ Demo session already active');
return;
}
// Diagnose sessionManager state
console.log('🔍 SessionManager state before activation:', {
hasActiveSession: sessionManager.hasActiveSession(),
timeLeft: sessionManager.getTimeLeft(),
currentSession: sessionManager.currentSession
});
console.log('⏳ Demo session verified, waiting for full connection before activation...');
window.pendingDemoActivation = true;
setTimeout(async () => {
if (window.pendingDemoActivation && sessionManager) {
console.log('🚀 Attempting to activate demo session automatically...');
let result = null;
console.log('🔄 Creating new demo session for activation...');
const demoSession = sessionManager.createDemoSessionForActivation();
console.log('🔍 Demo session creation result:', demoSession);
if (!demoSession.success) {
console.log('❌ Failed to create demo session:', demoSession.reason);
return;
}
console.log('✅ Demo session created successfully:', {
preimage: demoSession.preimage.substring(0, 16) + '...',
paymentHash: demoSession.paymentHash.substring(0, 16) + '...',
duration: demoSession.durationMinutes + ' minutes'
});
result = await sessionManager.safeActivateSession(
'demo',
demoSession.preimage,
demoSession.paymentHash
);
if (result && result.success) {
console.log('✅ Demo session activated automatically:', result);
setSessionTimeLeft(sessionManager.getTimeLeft());
setMessages(prev => [...prev, {
message: `🎮 Demo session activated for ${Math.round(result.timeLeft / 60000)} minutes`,
type: 'system',
id: Date.now(),
timestamp: Date.now()
}]);
console.log('🔍 SessionManager state after activation:', {
hasActiveSession: sessionManager.hasActiveSession(),
timeLeft: sessionManager.getTimeLeft(),
currentSession: sessionManager.currentSession
});
window.pendingDemoActivation = false;
} else {
console.log('❌ Failed to activate demo session automatically:', result?.reason || 'Unknown error');
console.log('🔍 SessionManager state after failed activation:', {
hasActiveSession: sessionManager.hasActiveSession(),
timeLeft: sessionManager.getTimeLeft(),
currentSession: sessionManager.currentSession
});
window.pendingDemoActivation = false;
}
}
}, 3000);
} catch (error) {
console.error('❌ Error activating demo session automatically:', error);
}
};
if (connectionStatus === 'connected' && isVerified) {
setTimeout(handleDemoVerification, 1000);
}
if (selectedSessionType === 'demo' && connectionStatus === 'connected' && isVerified) {
console.log('🎯 Demo session created, triggering automatic activation...');
setTimeout(handleDemoVerification, 1000);
}
}, [sessionManager, connectionStatus, isVerified, selectedSessionType]);
const chatMessagesRef = React.useRef(null); const chatMessagesRef = React.useRef(null);
// Scroll down function // Scroll down function
@@ -2828,6 +2743,8 @@
setConnectionStatus(status); setConnectionStatus(status);
if (status === 'connected') { if (status === 'connected') {
document.dispatchEvent(new CustomEvent('new-connection'));
setIsVerified(true); setIsVerified(true);
setShowVerification(false); setShowVerification(false);
updateSecurityLevel().catch(console.error); updateSecurityLevel().catch(console.error);
@@ -2837,6 +2754,16 @@
} else if (status === 'connecting') { } else if (status === 'connecting') {
updateSecurityLevel().catch(console.error); updateSecurityLevel().catch(console.error);
} else if (status === 'disconnected') { } else if (status === 'disconnected') {
console.log('🔌 Connection disconnected - stopping session timer');
document.dispatchEvent(new CustomEvent('peer-disconnect'));
if (sessionManager && sessionManager.hasActiveSession()) {
sessionManager.resetSession();
setSessionTimeLeft(0);
setHasActiveSession(false);
}
// Complete UI reset on disconnect // Complete UI reset on disconnect
setKeyFingerprint(''); setKeyFingerprint('');
setVerificationCode(''); setVerificationCode('');
@@ -2844,6 +2771,16 @@
setIsVerified(false); setIsVerified(false);
setShowVerification(false); setShowVerification(false);
} else if (status === 'peer_disconnected') { } else if (status === 'peer_disconnected') {
console.log('🔌 Peer disconnected - stopping session timer');
document.dispatchEvent(new CustomEvent('peer-disconnect'));
if (sessionManager && sessionManager.hasActiveSession()) {
sessionManager.resetSession();
setSessionTimeLeft(0);
setHasActiveSession(false);
}
// A short delay before clearing to display the status // A short delay before clearing to display the status
setTimeout(() => { setTimeout(() => {
setKeyFingerprint(''); setKeyFingerprint('');
@@ -2918,17 +2855,76 @@
handleMessage('🚀 SecureBit.chat Enhanced Edition initialized. Ready to establish a secure connection with ECDH, encrypted exchange, and verification.', 'system'); handleMessage('🚀 SecureBit.chat Enhanced Edition initialized. Ready to establish a secure connection with ECDH, encrypted exchange, and verification.', 'system');
// Cleanup on page unload const handleBeforeUnload = (event) => {
const handleBeforeUnload = () => { if (event.type === 'beforeunload' && !isTabSwitching) {
console.log('🔌 Page unloading (closing tab) - sending disconnect notification');
if (webrtcManagerRef.current && webrtcManagerRef.current.isConnected()) {
try {
webrtcManagerRef.current.sendSystemMessage({
type: 'peer_disconnect',
reason: 'user_disconnect',
timestamp: Date.now()
});
} catch (error) {
console.log('Could not send disconnect notification:', error.message);
}
setTimeout(() => {
if (webrtcManagerRef.current) { if (webrtcManagerRef.current) {
webrtcManagerRef.current.disconnect(); webrtcManagerRef.current.disconnect();
}
}, 100);
} else if (webrtcManagerRef.current) {
webrtcManagerRef.current.disconnect();
}
} else if (isTabSwitching) {
console.log('📱 Tab switching detected - NOT disconnecting');
event.preventDefault();
event.returnValue = '';
} }
}; };
window.addEventListener('beforeunload', handleBeforeUnload); window.addEventListener('beforeunload', handleBeforeUnload);
let isTabSwitching = false;
let tabSwitchTimeout = null;
const handleVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
console.log('📱 Page hidden (tab switch) - keeping connection alive');
isTabSwitching = true;
if (tabSwitchTimeout) {
clearTimeout(tabSwitchTimeout);
}
tabSwitchTimeout = setTimeout(() => {
isTabSwitching = false;
}, 5000);
} else if (document.visibilityState === 'visible') {
console.log('📱 Page visible (tab restored) - connection maintained');
isTabSwitching = false;
if (tabSwitchTimeout) {
clearTimeout(tabSwitchTimeout);
tabSwitchTimeout = null;
}
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => { return () => {
window.removeEventListener('beforeunload', handleBeforeUnload); window.removeEventListener('beforeunload', handleBeforeUnload);
document.removeEventListener('visibilitychange', handleVisibilityChange);
if (tabSwitchTimeout) {
clearTimeout(tabSwitchTimeout);
tabSwitchTimeout = null;
}
if (webrtcManagerRef.current) { if (webrtcManagerRef.current) {
console.log('🧹 Cleaning up WebRTC Manager...'); console.log('🧹 Cleaning up WebRTC Manager...');
webrtcManagerRef.current.disconnect(); webrtcManagerRef.current.disconnect();
@@ -3222,15 +3218,51 @@
}; };
const handleSendMessage = async () => { const handleSendMessage = async () => {
if (!messageInput.trim() || !webrtcManagerRef.current.isConnected()) { console.log('🔍 handleSendMessage called:', {
messageInput: messageInput,
messageInputTrimmed: messageInput.trim(),
hasMessageInput: !!messageInput.trim(),
hasWebRTCManager: !!webrtcManagerRef.current,
isConnected: webrtcManagerRef.current?.isConnected(),
connectionStatus: connectionStatus,
isVerified: isVerified
});
if (!messageInput.trim()) {
console.log('❌ No message input to send');
return;
}
if (!webrtcManagerRef.current) {
console.log('❌ WebRTC Manager not available');
return;
}
if (!webrtcManagerRef.current.isConnected()) {
console.log('❌ WebRTC Manager not connected');
return; return;
} }
try { try {
await webrtcManagerRef.current.sendSecureMessage(messageInput); console.log('📤 Attempting to send message:', messageInput.substring(0, 100));
// Add the message to local messages immediately (sent message)
const sentMessage = {
message: messageInput.trim(),
type: 'sent',
id: Date.now() + Math.random(),
timestamp: Date.now()
};
setMessages(prev => [...prev, sentMessage]);
// Use sendMessage for simple text messages instead of sendSecureMessage
await webrtcManagerRef.current.sendMessage(messageInput);
console.log('✅ Message sent successfully');
setMessageInput(''); setMessageInput('');
setTimeout(scrollToBottom, 50); setTimeout(scrollToBottom, 50);
} catch (error) { } catch (error) {
console.error('❌ Error sending message:', error);
setMessages(prev => [...prev, { setMessages(prev => [...prev, {
message: `❌ Sending error: ${error.message}`, message: `❌ Sending error: ${error.message}`,
type: 'system', type: 'system',
@@ -3501,5 +3533,50 @@ if (typeof initializeApp === 'function') {
console.error('❌ Module loading error:', error); console.error('❌ Module loading error:', error);
} }
</script> </script>
<script>
window.forceUpdateHeader = (timeLeft, sessionType) => {
if (window.DEBUG_MODE) {
console.log('🎯 forceUpdateHeader called:', { timeLeft, sessionType });
}
document.dispatchEvent(new CustomEvent('force-header-update', {
detail: { timeLeft, sessionType }
}));
if (window.sessionManager && window.sessionManager.forceUpdateTimer) {
window.sessionManager.forceUpdateTimer();
}
};
window.updateSessionTimer = (timeLeft, sessionType) => {
if (window.DEBUG_MODE) {
console.log('🎯 updateSessionTimer called:', { timeLeft, sessionType });
}
document.dispatchEvent(new CustomEvent('session-timer-update', {
detail: { timeLeft, sessionType }
}));
};
document.addEventListener('session-activated', (event) => {
if (window.DEBUG_MODE) {
console.log('🎯 Session activation event received:', event.detail);
}
if (window.updateSessionTimer) {
window.updateSessionTimer(event.detail.timeLeft, event.detail.sessionType);
}
if (window.forceUpdateHeader) {
window.forceUpdateHeader(event.detail.timeLeft, event.detail.sessionType);
}
});
if (window.DEBUG_MODE) {
console.log('✅ Global timer management functions loaded');
}
</script>
</body> </body>
</html> </html>

127
src/components/ui/Header.jsx
View File

@@ -1,5 +1,3 @@
const React = window.React;
const EnhancedMinimalHeader = ({ const EnhancedMinimalHeader = ({
status, status,
fingerprint, fingerprint,
@@ -10,14 +8,80 @@ const EnhancedMinimalHeader = ({
sessionManager, sessionManager,
sessionTimeLeft sessionTimeLeft
}) => { }) => {
const [currentTimeLeft, setCurrentTimeLeft] = React.useState(sessionTimeLeft || 0);
const [hasActiveSession, setHasActiveSession] = React.useState(false);
const [sessionType, setSessionType] = React.useState('unknown');
React.useEffect(() => {
const updateSessionInfo = () => {
if (sessionManager) {
const isActive = sessionManager.hasActiveSession();
const timeLeft = sessionManager.getTimeLeft();
const currentSession = sessionManager.currentSession;
setHasActiveSession(isActive);
setCurrentTimeLeft(timeLeft);
setSessionType(currentSession?.type || 'unknown');
}
};
updateSessionInfo();
const interval = setInterval(updateSessionInfo, 1000);
return () => clearInterval(interval);
}, [sessionManager]);
React.useEffect(() => {
if (sessionManager?.hasActiveSession()) {
setCurrentTimeLeft(sessionManager.getTimeLeft());
setHasActiveSession(true);
} else {
setHasActiveSession(false);
}
}, [sessionManager, sessionTimeLeft]);
const handleSecurityClick = () => {
if (securityLevel?.verificationResults) {
alert('Security check details:\n\n' +
Object.entries(securityLevel.verificationResults)
.map(([key, result]) => `${key}: ${result.passed ? '✅' : '❌'} ${result.details}`)
.join('\n')
);
} else if (securityLevel) {
alert(`Security Level: ${securityLevel.level}\nScore: ${securityLevel.score}%\nDetails: ${securityLevel.details || 'No additional details available'}`);
}
};
const shouldShowTimer = hasActiveSession && currentTimeLeft > 0 && window.SessionTimer;
React.useEffect(() => {
const handleForceUpdate = (event) => {
if (sessionManager) {
const isActive = sessionManager.hasActiveSession();
const timeLeft = sessionManager.getTimeLeft();
const currentSession = sessionManager.currentSession;
setHasActiveSession(isActive);
setCurrentTimeLeft(timeLeft);
setSessionType(currentSession?.type || 'unknown');
}
};
document.addEventListener('force-header-update', handleForceUpdate);
return () => document.removeEventListener('force-header-update', handleForceUpdate);
}, [sessionManager]);
const getStatusConfig = () => { const getStatusConfig = () => {
switch (status) { switch (status) {
case 'connected': case 'connected':
return { return {
text: 'Connected', text: 'Connected',
className: 'status-connected', className: 'status-connected',
badgeClass: 'bg-green-500/10 text-green-400 border-green-500/20' badgeClass: 'bg-green-500/10 text-green-400 border-green-500/20'
}; };
case 'verifying': case 'verifying':
return { return {
text: 'Verifying...', text: 'Verifying...',
@@ -60,22 +124,11 @@ const EnhancedMinimalHeader = ({
className: 'status-disconnected', className: 'status-disconnected',
badgeClass: 'bg-gray-500/10 text-gray-400 border-gray-500/20' badgeClass: 'bg-gray-500/10 text-gray-400 border-gray-500/20'
}; };
} }
}; };
const config = getStatusConfig(); const config = getStatusConfig();
const handleSecurityClick = () => {
if (securityLevel?.verificationResults) {
alert('Security check details:\n\n' +
Object.entries(securityLevel.verificationResults)
.map(([key, result]) => `${key}: ${result.passed ? '✅' : '❌'} ${result.details}`)
.join('\n')
);
}
};
return React.createElement('header', { return React.createElement('header', {
className: 'header-minimal sticky top-0 z-50' className: 'header-minimal sticky top-0 z-50'
}, [ }, [
@@ -87,6 +140,7 @@ const EnhancedMinimalHeader = ({
key: 'content', key: 'content',
className: 'flex items-center justify-between h-16' className: 'flex items-center justify-between h-16'
}, [ }, [
// Logo and Title
React.createElement('div', { React.createElement('div', {
key: 'logo-section', key: 'logo-section',
className: 'flex items-center space-x-2 sm:space-x-3' className: 'flex items-center space-x-2 sm:space-x-3'
@@ -109,32 +163,29 @@ const EnhancedMinimalHeader = ({
React.createElement('p', { React.createElement('p', {
key: 'subtitle', key: 'subtitle',
className: 'text-xs sm:text-sm text-muted hidden sm:block' className: 'text-xs sm:text-sm text-muted hidden sm:block'
}, 'End-to-end freedom. v4.0.02.12') }, 'End-to-end freedom. v4.0.02.88')
]) ])
]), ]),
// Status and Controls - Mobile Responsive // Status and Controls - Responsive
React.createElement('div', { React.createElement('div', {
key: 'status-section', key: 'status-section',
className: 'flex items-center space-x-2 sm:space-x-3' className: 'flex items-center space-x-2 sm:space-x-3'
}, [ }, [
(() => { // Session Timer
const hasActive = sessionManager?.hasActiveSession(); shouldShowTimer && React.createElement(window.SessionTimer, {
const hasTimer = !!window.SessionTimer; key: 'session-timer',
timeLeft: currentTimeLeft,
return hasActive && hasTimer && React.createElement(window.SessionTimer, { sessionType: sessionType,
key: 'session-timer', sessionManager: sessionManager
timeLeft: sessionTimeLeft, }),
sessionType: sessionManager.currentSession?.type || 'unknown'
});
})(),
// Security Level Indicator - Hidden on mobile, shown on tablet+ (Clickable) // Security Level Indicator
securityLevel && React.createElement('div', { securityLevel && React.createElement('div', {
key: 'security-level', key: 'security-level',
className: 'hidden md:flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity duration-200', className: 'hidden md:flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity duration-200',
onClick: handleSecurityClick, onClick: handleSecurityClick,
title: 'Click to view security details' title: `${securityLevel.level} (${securityLevel.score}%) - Click for details`
}, [ }, [
React.createElement('div', { React.createElement('div', {
key: 'security-icon', key: 'security-icon',
@@ -178,7 +229,7 @@ const EnhancedMinimalHeader = ({
]) ])
]), ]),
// Mobile Security Indicator - Only icon on mobile (Clickable) // Mobile Security Indicator
securityLevel && React.createElement('div', { securityLevel && React.createElement('div', {
key: 'mobile-security', key: 'mobile-security',
className: 'md:hidden flex items-center' className: 'md:hidden flex items-center'
@@ -195,13 +246,13 @@ const EnhancedMinimalHeader = ({
React.createElement('i', { React.createElement('i', {
className: `fas fa-shield-alt text-sm ${ className: `fas fa-shield-alt text-sm ${
securityLevel.color === 'green' ? 'text-green-400' : securityLevel.color === 'green' ? 'text-green-400' :
securityLevel.color === 'yellow' ? 'text-yellow-400' : 'text-red-400' securityLevel.color === 'yellow' ? 'text-yellow-400' : 'bg-red-400'
}` }`
}) })
]) ])
]), ]),
// Status Badge - Compact on mobile // Status Badge
React.createElement('div', { React.createElement('div', {
key: 'status-badge', 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` className: `px-2 sm:px-3 py-1.5 rounded-lg border ${config.badgeClass} flex items-center space-x-1 sm:space-x-2`
@@ -216,18 +267,16 @@ const EnhancedMinimalHeader = ({
}, config.text) }, config.text)
]), ]),
// Disconnect Button - Icon only on mobile // Disconnect Button
isConnected && React.createElement('button', { isConnected && React.createElement('button', {
key: 'disconnect-btn', key: 'disconnect-btn',
onClick: onDisconnect, 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' 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', { React.createElement('i', {
key: 'disconnect-icon',
className: 'fas fa-power-off sm:mr-2' className: 'fas fa-power-off sm:mr-2'
}), }),
React.createElement('span', { React.createElement('span', {
key: 'disconnect-text',
className: 'hidden sm:inline' className: 'hidden sm:inline'
}, 'Disconnect') }, 'Disconnect')
]) ])
@@ -237,4 +286,6 @@ const EnhancedMinimalHeader = ({
]); ]);
}; };
window.EnhancedMinimalHeader = EnhancedMinimalHeader; window.EnhancedMinimalHeader = EnhancedMinimalHeader;
console.log('✅ EnhancedMinimalHeader loaded with timer fixes');

239
src/components/ui/SessionTimer.jsx
View File

@@ -1,13 +1,170 @@
const React = window.React; const SessionTimer = ({ timeLeft, sessionType, sessionManager }) => {
const [currentTime, setCurrentTime] = React.useState(timeLeft || 0);
const [showExpiredMessage, setShowExpiredMessage] = React.useState(false);
const [initialized, setInitialized] = React.useState(false);
const [connectionBroken, setConnectionBroken] = React.useState(false);
const SessionTimer = ({ timeLeft, sessionType }) => {
if (!timeLeft || timeLeft <= 0) { React.useEffect(() => {
if (connectionBroken) {
console.log('⏱️ SessionTimer initialization skipped - connection broken');
return;
}
let initialTime = 0;
if (sessionManager?.hasActiveSession()) {
initialTime = sessionManager.getTimeLeft();
console.log('⏱️ SessionTimer initialized from sessionManager:', Math.floor(initialTime / 1000) + 's');
} else if (timeLeft && timeLeft > 0) {
initialTime = timeLeft;
console.log('⏱️ SessionTimer initialized from props:', Math.floor(initialTime / 1000) + 's');
}
setCurrentTime(initialTime);
setInitialized(true);
}, [sessionManager, connectionBroken]);
React.useEffect(() => {
if (connectionBroken) {
console.log('⏱️ SessionTimer props update skipped - connection broken');
return;
}
if (timeLeft && timeLeft > 0) {
setCurrentTime(timeLeft);
}
}, [timeLeft, connectionBroken]);
React.useEffect(() => {
if (!initialized) {
return;
}
if (connectionBroken) {
console.log('⏱️ Timer interval skipped - connection broken');
return;
}
if (!currentTime || currentTime <= 0 || !sessionManager) {
return;
}
const interval = setInterval(() => {
if (connectionBroken) {
console.log('⏱️ Timer interval stopped - connection broken');
setCurrentTime(0);
clearInterval(interval);
return;
}
if (sessionManager?.hasActiveSession()) {
const newTime = sessionManager.getTimeLeft();
setCurrentTime(newTime);
if (window.DEBUG_MODE && Math.floor(Date.now() / 30000) !== Math.floor((Date.now() - 1000) / 30000)) {
console.log('⏱️ Timer tick:', Math.floor(newTime / 1000) + 's');
}
if (newTime <= 0) {
console.log('⏱️ Session expired!');
setShowExpiredMessage(true);
setTimeout(() => setShowExpiredMessage(false), 5000);
clearInterval(interval);
}
} else {
console.log('⏱️ Session inactive, stopping timer');
setCurrentTime(0);
clearInterval(interval);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [initialized, currentTime, sessionManager, connectionBroken]);
React.useEffect(() => {
const handleSessionTimerUpdate = (event) => {
if (event.detail.timeLeft && event.detail.timeLeft > 0) {
setCurrentTime(event.detail.timeLeft);
}
};
const handleForceHeaderUpdate = (event) => {
if (sessionManager && sessionManager.hasActiveSession()) {
const newTime = sessionManager.getTimeLeft();
setCurrentTime(newTime);
}
};
const handlePeerDisconnect = (event) => {
console.log('🔌 Peer disconnect detected in SessionTimer - stopping timer permanently');
setConnectionBroken(true);
setCurrentTime(0);
setShowExpiredMessage(false);
};
const handleNewConnection = (event) => {
console.log('🔌 New connection detected in SessionTimer - resetting connection state');
setConnectionBroken(false);
};
document.addEventListener('session-timer-update', handleSessionTimerUpdate);
document.addEventListener('force-header-update', handleForceHeaderUpdate);
document.addEventListener('peer-disconnect', handlePeerDisconnect);
document.addEventListener('new-connection', handleNewConnection);
return () => {
document.removeEventListener('session-timer-update', handleSessionTimerUpdate);
document.removeEventListener('force-header-update', handleForceHeaderUpdate);
document.removeEventListener('peer-disconnect', handlePeerDisconnect);
document.removeEventListener('new-connection', handleNewConnection);
};
}, [sessionManager]);
if (showExpiredMessage) {
return React.createElement('div', {
className: 'session-timer expired flex items-center space-x-2 px-3 py-1.5 rounded-lg animate-pulse',
style: { background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%)' }
}, [
React.createElement('i', {
key: 'icon',
className: 'fas fa-exclamation-triangle text-red-400'
}),
React.createElement('span', {
key: 'message',
className: 'text-red-400 text-sm font-medium'
}, 'Session Expired!')
]);
}
if (!sessionManager) {
console.log('⏱️ SessionTimer hidden - no sessionManager');
return null; return null;
} }
const totalMinutes = Math.floor(timeLeft / (60 * 1000)); if (connectionBroken) {
const isWarning = totalMinutes <= 10; console.log('⏱️ SessionTimer hidden - connection broken');
const isCritical = totalMinutes <= 5; return null;
}
if (!currentTime || currentTime <= 0) {
console.log('⏱️ SessionTimer hidden - no time left');
return null;
}
const totalMinutes = Math.floor(currentTime / (60 * 1000));
const totalSeconds = Math.floor(currentTime / 1000);
const isDemo = sessionType === 'demo';
const isWarning = isDemo ? totalMinutes <= 2 : totalMinutes <= 10;
const isCritical = isDemo ? totalSeconds <= 60 : totalMinutes <= 5;
const formatTime = (ms) => { const formatTime = (ms) => {
const hours = Math.floor(ms / (60 * 60 * 1000)); const hours = Math.floor(ms / (60 * 60 * 1000));
@@ -21,21 +178,73 @@ const SessionTimer = ({ timeLeft, sessionType }) => {
} }
}; };
const getTimerStyle = () => {
const totalDuration = sessionType === 'demo' ? 6 * 60 * 1000 : 60 * 60 * 1000;
const timeProgress = (totalDuration - currentTime) / totalDuration;
let backgroundColor, textColor, iconColor, iconClass, shouldPulse;
if (timeProgress <= 0.33) {
backgroundColor = 'linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%)';
textColor = 'text-green-400';
iconColor = 'text-green-400';
iconClass = 'fas fa-clock';
shouldPulse = false;
} else if (timeProgress <= 0.66) {
backgroundColor = 'linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.15) 100%)';
textColor = 'text-yellow-400';
iconColor = 'text-yellow-400';
iconClass = 'fas fa-clock';
shouldPulse = false;
} else {
backgroundColor = 'linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%)';
textColor = 'text-red-400';
iconColor = 'text-red-400';
iconClass = 'fas fa-exclamation-triangle';
shouldPulse = true;
}
return { backgroundColor, textColor, iconColor, iconClass, shouldPulse };
};
const timerStyle = getTimerStyle();
return React.createElement('div', { return React.createElement('div', {
className: `session-timer ${isCritical ? 'critical' : isWarning ? 'warning' : ''}` className: `session-timer flex items-center space-x-2 px-3 py-1.5 rounded-lg transition-all duration-500 ${
isDemo ? 'demo-session' : ''
} ${timerStyle.shouldPulse ? 'animate-pulse' : ''}`,
style: { background: timerStyle.backgroundColor }
}, [ }, [
React.createElement('i', { React.createElement('i', {
key: 'icon', key: 'icon',
className: 'fas fa-clock' className: `${timerStyle.iconClass} ${timerStyle.iconColor}`
}), }),
React.createElement('span', { React.createElement('span', {
key: 'time' key: 'time',
}, formatTime(timeLeft)), className: `text-sm font-mono font-semibold ${timerStyle.textColor}`
React.createElement('span', { }, formatTime(currentTime)),
key: 'type', React.createElement('div', {
className: 'text-xs opacity-80' key: 'progress',
}, sessionType?.toUpperCase() || '') className: 'ml-2 w-16 h-1 bg-gray-700 rounded-full overflow-hidden'
}, [
React.createElement('div', {
key: 'progress-bar',
className: `${timerStyle.textColor.replace('text-', 'bg-')} h-full rounded-full transition-all duration-500`,
style: {
width: `${Math.max(0, Math.min(100, (currentTime / (sessionType === 'demo' ? 6 * 60 * 1000 : 60 * 60 * 1000)) * 100))}%`
}
})
])
]); ]);
}; };
window.SessionTimer = SessionTimer; window.SessionTimer = SessionTimer;
window.updateSessionTimer = (newTimeLeft, newSessionType) => {
console.log('⏱️ Global timer update:', { newTimeLeft, newSessionType });
document.dispatchEvent(new CustomEvent('session-timer-update', {
detail: { timeLeft: newTimeLeft, sessionType: newSessionType }
}));
};
console.log('✅ SessionTimer loaded with fixes and improvements');

248
src/components/ui/SessionTypeSelector.jsx
View File

@@ -1,17 +1,46 @@
const React = window.React;
const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => { const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => {
const [selectedType, setSelectedType] = React.useState(null); const [selectedType, setSelectedType] = React.useState(null);
const [demoInfo, setDemoInfo] = React.useState(null); const [demoInfo, setDemoInfo] = React.useState(null);
const [refreshTimer, setRefreshTimer] = React.useState(null);
const [lastRefresh, setLastRefresh] = React.useState(Date.now());
// Получаем информацию о demo лимитах при загрузке // We receive up-to-date information about demo limits
React.useEffect(() => { const updateDemoInfo = React.useCallback(() => {
if (sessionManager && sessionManager.getDemoSessionInfo) { if (sessionManager && sessionManager.getDemoSessionInfo) {
const info = sessionManager.getDemoSessionInfo(); try {
setDemoInfo(info); const info = sessionManager.getDemoSessionInfo();
if (window.DEBUG_MODE) {
console.log('🔄 Demo info updated:', info);
}
setDemoInfo(info);
setLastRefresh(Date.now());
} catch (error) {
console.error('Failed to get demo info:', error);
}
} }
}, [sessionManager]); }, [sessionManager]);
// Update information on load and every 10 seconds
React.useEffect(() => {
updateDemoInfo();
const interval = setInterval(updateDemoInfo, 10000);
setRefreshTimer(interval);
return () => {
if (interval) clearInterval(interval);
};
}, [updateDemoInfo]);
// Clear timer on unmount
React.useEffect(() => {
return () => {
if (refreshTimer) {
clearInterval(refreshTimer);
}
};
}, [refreshTimer]);
const sessionTypes = [ const sessionTypes = [
{ {
id: 'demo', id: 'demo',
@@ -19,16 +48,17 @@ const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => {
duration: '6 minutes', duration: '6 minutes',
price: '0 sat', price: '0 sat',
usd: '$0.00', usd: '$0.00',
popular: true, popular: false,
description: 'Limited testing session', description: 'Limited testing session',
warning: demoInfo ? `Available: ${demoInfo.available}/${demoInfo.total}` : 'Loading...' features: ['End-to-end encryption', 'Basic features', 'No payment required']
}, },
{ {
id: 'basic', id: 'basic',
name: 'Basic', name: 'Basic',
duration: '1 hour', duration: '1 hour',
price: '500 sat', price: '500 sat',
usd: '$0.20' usd: '$0.20',
features: ['End-to-end encryption', 'Full features', '1 hour duration']
}, },
{ {
id: 'premium', id: 'premium',
@@ -36,81 +66,149 @@ const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => {
duration: '4 hours', duration: '4 hours',
price: '1000 sat', price: '1000 sat',
usd: '$0.40', usd: '$0.40',
popular: true popular: true,
features: ['End-to-end encryption', 'Full features', '4 hours duration', 'Priority support']
}, },
{ {
id: 'extended', id: 'extended',
name: 'Extended', name: 'Extended',
duration: '24 hours', duration: '24 hours',
price: '2000 sat', price: '2000 sat',
usd: '$0.80' usd: '$0.80',
features: ['End-to-end encryption', 'Full features', '24 hours duration', 'Priority support']
} }
]; ];
const handleTypeSelect = (typeId) => { const handleTypeSelect = (typeId) => {
console.log(`🎯 Selecting session type: ${typeId}`);
if (typeId === 'demo') { if (typeId === 'demo') {
// Проверяем доступность demo сессии
if (demoInfo && !demoInfo.canUseNow) { if (demoInfo && !demoInfo.canUseNow) {
alert(`Demo session not available now. ${demoInfo.nextAvailable}`); let message = `Demo session not available.\n\n`;
if (demoInfo.blockingReason === 'global_limit') {
message += `Reason: Too many global demo sessions active (${demoInfo.globalActive}/${demoInfo.globalLimit})\n`;
message += `Please try again in a few minutes.`;
} else if (demoInfo.blockingReason === 'daily_limit') {
message += `Reason: Daily limit reached (${demoInfo.used}/${demoInfo.total})\n`;
message += `Next available: ${demoInfo.nextAvailable}`;
} else if (demoInfo.blockingReason === 'session_cooldown') {
message += `Reason: Cooldown between sessions\n`;
message += `Next available: ${demoInfo.nextAvailable}`;
} else if (demoInfo.blockingReason === 'completion_cooldown') {
message += `Reason: Wait period after last session\n`;
message += `Next available: ${demoInfo.nextAvailable}`;
} else {
message += `Next available: ${demoInfo.nextAvailable}`;
}
alert(message);
return; return;
} }
} }
setSelectedType(typeId); setSelectedType(typeId);
}; };
const formatCooldownTime = (minutes) => {
if (minutes >= 60) {
const hours = Math.floor(minutes / 60);
const remainingMinutes = minutes % 60;
return `${hours}h ${remainingMinutes}m`;
}
return `${minutes}m`;
};
return React.createElement('div', { className: 'space-y-6' }, [ return React.createElement('div', { className: 'space-y-6' }, [
React.createElement('div', { key: 'header', className: 'text-center' }, [ React.createElement('div', { key: 'header', className: 'text-center' }, [
React.createElement('h3', { React.createElement('h3', {
key: 'title', key: 'title',
className: 'text-xl font-semibold text-white mb-2' className: 'text-xl font-semibold text-white mb-2'
}, 'Choose a plan'), }, 'Choose Your Session'),
React.createElement('p', { React.createElement('p', {
key: 'subtitle', key: 'subtitle',
className: 'text-gray-300 text-sm' className: 'text-gray-300 text-sm'
}, 'Pay via Lightning Network or use limited demo session') }, 'Pay via Lightning Network or try our demo session')
]), ]),
React.createElement('div', { key: 'types', className: 'space-y-3' }, React.createElement('div', { key: 'types', className: 'space-y-3' },
sessionTypes.map(type => sessionTypes.map(type => {
React.createElement('div', { const isDemo = type.id === 'demo';
const isDisabled = isDemo && demoInfo && !demoInfo.canUseNow;
return React.createElement('div', {
key: type.id, key: type.id,
onClick: () => handleTypeSelect(type.id), onClick: () => !isDisabled && handleTypeSelect(type.id),
className: `card-minimal rounded-lg p-4 cursor-pointer border-2 transition-all ${ className: `card-minimal rounded-lg p-4 border-2 transition-all ${
selectedType === type.id ? 'border-orange-500 bg-orange-500/10' : 'border-gray-600 hover:border-orange-400' selectedType === type.id ? 'border-orange-500 bg-orange-500/10' : 'border-gray-600 hover:border-orange-400'
} ${type.popular ? 'relative' : ''} ${ } ${type.popular ? 'relative' : ''} ${
type.id === 'demo' && demoInfo && !demoInfo.canUseNow ? 'opacity-50 cursor-not-allowed' : '' isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
}` }`
}, [ }, [
type.popular && React.createElement('div', { type.popular && React.createElement('div', {
key: 'badge', key: 'badge',
className: 'absolute -top-2 right-3 bg-orange-500 text-white text-xs px-2 py-1 rounded-full' className: 'absolute -top-2 right-3 bg-orange-500 text-white text-xs px-2 py-1 rounded-full'
}, type.id === 'demo' ? 'Demo' : 'Popular'), }, 'Popular'),
React.createElement('div', { key: 'content', className: 'flex items-center justify-between' }, [ React.createElement('div', { key: 'content', className: 'flex items-start justify-between' }, [
React.createElement('div', { key: 'info' }, [ React.createElement('div', { key: 'info', className: 'flex-1' }, [
React.createElement('h4', { React.createElement('div', { key: 'header', className: 'flex items-center gap-2 mb-2' }, [
key: 'name', React.createElement('h4', {
className: 'text-lg font-semibold text-white' key: 'name',
}, type.name), className: 'text-lg font-semibold text-white'
}, type.name),
isDemo && React.createElement('span', {
key: 'demo-badge',
className: 'text-xs bg-blue-500/20 text-blue-300 px-2 py-1 rounded-full'
}, 'FREE')
]),
React.createElement('p', { React.createElement('p', {
key: 'duration', key: 'duration',
className: 'text-gray-300 text-sm' className: 'text-gray-300 text-sm mb-1'
}, type.duration), }, `Duration: ${type.duration}`),
type.description && React.createElement('p', { type.description && React.createElement('p', {
key: 'description', key: 'description',
className: 'text-xs text-gray-400 mt-1' className: 'text-xs text-gray-400 mb-2'
}, type.description), }, type.description),
type.id === 'demo' && React.createElement('p', {
key: 'warning', isDemo && demoInfo && React.createElement('div', {
className: `text-xs mt-1 ${ key: 'demo-status',
demoInfo && demoInfo.canUseNow ? 'text-green-400' : 'text-yellow-400' className: 'text-xs mb-2'
}` }, [
}, type.warning) React.createElement('div', {
key: 'availability',
className: demoInfo.canUseNow ? 'text-green-400' : 'text-yellow-400'
}, demoInfo.canUseNow ?
`✅ Available (${demoInfo.available}/${demoInfo.total} today)` :
`⏰ Next: ${demoInfo.nextAvailable}`
),
demoInfo.globalActive > 0 && React.createElement('div', {
key: 'global-status',
className: 'text-blue-300 mt-1'
}, `🌐 Global: ${demoInfo.globalActive}/${demoInfo.globalLimit} active`)
]),
type.features && React.createElement('div', {
key: 'features',
className: 'text-xs text-gray-400 space-y-1'
}, type.features.map((feature, index) =>
React.createElement('div', {
key: index,
className: 'flex items-center gap-1'
}, [
React.createElement('i', {
key: 'check',
className: 'fas fa-check text-green-400 w-3'
}),
React.createElement('span', {
key: 'text'
}, feature)
])
))
]), ]),
React.createElement('div', { key: 'pricing', className: 'text-right' }, [ React.createElement('div', { key: 'pricing', className: 'text-right' }, [
React.createElement('div', { React.createElement('div', {
key: 'sats', key: 'sats',
className: 'text-lg font-bold text-orange-400' className: `text-lg font-bold ${isDemo ? 'text-green-400' : 'text-orange-400'}`
}, type.price), }, type.price),
React.createElement('div', { React.createElement('div', {
key: 'usd', key: 'usd',
@@ -119,49 +217,81 @@ const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => {
]) ])
]) ])
]) ])
) })
), ),
// Информация о demo лимитах
demoInfo && React.createElement('div', { demoInfo && React.createElement('div', {
key: 'demo-info', key: 'demo-info',
className: 'bg-blue-900/20 border border-blue-700 rounded-lg p-3' className: 'bg-gradient-to-r from-blue-900/20 to-purple-900/20 border border-blue-700/50 rounded-lg p-4'
}, [ }, [
React.createElement('div', { React.createElement('div', {
key: 'demo-header', key: 'demo-header',
className: 'text-blue-300 text-sm font-medium mb-2' className: 'flex items-center gap-2 text-blue-300 text-sm font-medium mb-3'
}, '📱 Demo Session Limits'), }, [
React.createElement('i', {
key: 'icon',
className: 'fas fa-info-circle'
}),
React.createElement('span', {
key: 'title'
}, 'Demo Session Information')
]),
React.createElement('div', { React.createElement('div', {
key: 'demo-details', key: 'demo-details',
className: 'text-blue-200 text-xs space-y-1' className: 'grid grid-cols-1 md:grid-cols-2 gap-3 text-blue-200 text-xs'
}, [ }, [
React.createElement('div', { key: 'limit' }, React.createElement('div', { key: 'limits', className: 'space-y-1' }, [
`• Maximum ${demoInfo.total} demo sessions per day`), React.createElement('div', { key: 'daily' }, `📅 Daily limit: ${demoInfo.total} sessions`),
React.createElement('div', { key: 'cooldown' }, React.createElement('div', { key: 'duration' }, `⏱️ Duration: ${demoInfo.durationMinutes} minutes each`),
`• 5 minutes between sessions, 1 hour between series`), React.createElement('div', { key: 'cooldown' }, `⏰ Cooldown: ${demoInfo.sessionCooldownMinutes} min between sessions`)
React.createElement('div', { key: 'duration' }, ]),
`• Each session limited to ${demoInfo.durationMinutes} minutes`), React.createElement('div', { key: 'status', className: 'space-y-1' }, [
React.createElement('div', { key: 'status' }, React.createElement('div', { key: 'used' }, `📊 Used today: ${demoInfo.used}/${demoInfo.total}`),
`• Status: ${demoInfo.canUseNow ? 'Available now' : `Next available: ${demoInfo.nextAvailable}`}`) React.createElement('div', { key: 'global' }, `🌐 Global active: ${demoInfo.globalActive}/${demoInfo.globalLimit}`),
]) React.createElement('div', {
key: 'next',
className: demoInfo.canUseNow ? 'text-green-300' : 'text-yellow-300'
}, `🎯 Status: ${demoInfo.canUseNow ? 'Available now' : demoInfo.nextAvailable}`)
])
]),
React.createElement('div', {
key: 'last-updated',
className: 'text-xs text-gray-400 mt-3 text-center'
}, `Last updated: ${new Date(lastRefresh).toLocaleTimeString()}`)
]), ]),
React.createElement('div', { key: 'buttons', className: 'flex space-x-3' }, [ React.createElement('div', { key: 'buttons', className: 'flex space-x-3' }, [
React.createElement('button', { React.createElement('button', {
key: 'continue', key: 'continue',
onClick: () => selectedType && onSelectType(selectedType), onClick: () => {
if (selectedType) {
console.log(`🚀 Proceeding with session type: ${selectedType}`);
onSelectType(selectedType);
}
},
disabled: !selectedType || (selectedType === 'demo' && demoInfo && !demoInfo.canUseNow), disabled: !selectedType || (selectedType === 'demo' && demoInfo && !demoInfo.canUseNow),
className: 'flex-1 lightning-button text-white py-3 px-4 rounded-lg font-medium disabled:opacity-50' className: 'flex-1 lightning-button text-white py-3 px-4 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-all'
}, [ }, [
React.createElement('i', { className: 'fas fa-bolt mr-2' }), React.createElement('i', {
selectedType === 'demo' ? 'Start Demo Session' : 'Continue to payment' key: 'icon',
className: selectedType === 'demo' ? 'fas fa-play mr-2' : 'fas fa-bolt mr-2'
}),
selectedType === 'demo' ? 'Start Demo Session' : 'Continue to Payment'
]), ]),
React.createElement('button', { React.createElement('button', {
key: 'cancel', key: 'cancel',
onClick: onCancel, onClick: onCancel,
className: 'px-6 py-3 bg-gray-600 hover:bg-gray-500 text-white rounded-lg' className: 'px-6 py-3 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-all'
}, 'Cancel') }, 'Cancel'),
]) React.createElement('button', {
key: 'refresh',
onClick: updateDemoInfo,
className: 'px-3 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all',
title: 'Refresh demo status'
}, React.createElement('i', { className: 'fas fa-sync-alt' }))
]),
]); ]);
}; };

922
src/network/EnhancedSecureWebRTCManager.js
View File

File diff suppressed because it is too large Load Diff

980
src/session/PayPerSessionManager.js
View File

File diff suppressed because it is too large Load Diff

25
src/styles/components.css
View File

@@ -219,11 +219,8 @@ button i {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
/* Pay-per-session UI */ /* Pay-per-session UI - Обновленный трехцветный таймер */
.session-timer { .session-timer {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
border: 1px solid rgba(249, 115, 22, 0.3);
color: white;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
@@ -231,16 +228,24 @@ button i {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.5s ease;
} }
.session-timer.warning { .session-timer:hover {
background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); transform: translateY(-1px);
animation: pulse 2s ease-in-out infinite; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} }
.session-timer.critical { /* Анимация пульсации для красной зоны */
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); @keyframes timer-pulse {
animation: pulse 1s ease-in-out infinite; 0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.session-timer.animate-pulse {
animation: timer-pulse 2s ease-in-out infinite;
} }
/* Lightning button */ /* Lightning button */