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

feat(qr-exchange): improved QR code exchange system

Browse Source 
- Updated connection flow between users via QR codes
- Added manual switching option in QR code generator
- Increased number of QR codes for better readability
This commit is contained in:
lockbitchat
2025-09-27 19:07:17 -04:00
parent 0ce05b836b
commit 7902359c48
10 changed files with 591 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/app.jsx
View File

@@ -1257,7 +1257,14 @@
answerPassword,
localVerificationConfirmed,
remoteVerificationConfirmed,
bothVerificationsConfirmed
bothVerificationsConfirmed,
// QR control props
qrFramesTotal,
qrFrameIndex,
qrManualMode,
toggleQrManualMode,
nextQrFrame,
prevQrFrame
}) => {
const [mode, setMode] = React.useState('select');
@@ -1627,11 +1634,44 @@
src: qrCodeUrl,
alt: "QR Code for secure connection",
className: "max-w-none h-auto border border-gray-600/30 rounded w-[20rem] sm:w-[24rem] md:w-[28rem] lg:w-[32rem]"
}),
(typeof qrFramesTotal !== 'undefined' && typeof qrFrameIndex !== 'undefined' && qrFramesTotal > 1) && React.createElement('div', {
key: 'qr-frame-indicator',
className: "ml-3 self-center text-xs text-gray-300"
}, `Frame ${Math.max(1, qrFrameIndex || 1)}/${qrFramesTotal}`)
})
]),
// Переключатель управления ниже QR кода
((qrFramesTotal || 0) >= 1) && React.createElement('div', {
key: 'qr-controls-below',
className: "mt-4 flex flex-col items-center gap-2"
}, [
React.createElement('div', {
key: 'frame-indicator',
className: "text-xs text-gray-300"
}, `Frame ${Math.max(1, (qrFrameIndex || 1))}/${qrFramesTotal || 1}`),
React.createElement('div', {
key: 'control-buttons',
className: "flex gap-1"
}, [
// Кнопки навигации показываем только если больше 1 части
(qrFramesTotal || 0) > 1 && React.createElement('button', {
key: 'prev-frame',
onClick: prevQrFrame,
className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
}, '◀'),
React.createElement('button', {
key: 'toggle-manual',
onClick: toggleQrManualMode,
className: `px-2 py-1 rounded text-xs font-medium ${
(qrManualMode || false)
? 'bg-blue-500 text-white'
: 'bg-gray-600 text-gray-300 hover:bg-gray-500'
}`
}, (qrManualMode || false) ? 'Manual' : 'Auto'),
// Кнопки навигации показываем только если больше 1 части
(qrFramesTotal || 0) > 1 && React.createElement('button', {
key: 'next-frame',
onClick: nextQrFrame,
className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
}, '▶')
])
]),
React.createElement('p', {
key: 'qr-description',
@@ -1958,6 +1998,68 @@
className: "w-full px-3 py-2 bg-green-500/10 hover:bg-green-500/20 text-green-400 border border-green-500/20 rounded text-sm font-medium"
}, 'Copy response code')
]),
// QR Code section for answer
qrCodeUrl && React.createElement('div', {
key: 'qr-container',
className: "mt-4 p-4 bg-gray-800/50 border border-gray-600/30 rounded-lg text-center"
}, [
React.createElement('h4', {
key: 'qr-title',
className: "text-sm font-medium text-primary mb-3"
}, 'Scan QR code to complete connection'),
React.createElement('div', {
key: 'qr-wrapper',
className: "flex justify-center"
}, [
React.createElement('img', {
key: 'qr-image',
src: qrCodeUrl,
alt: "QR Code for secure response",
className: "max-w-none h-auto border border-gray-600/30 rounded w-[20rem] sm:w-[24rem] md:w-[28rem] lg:w-[32rem]"
})
]),
// Переключатель управления ниже QR кода
((qrFramesTotal || 0) >= 1) && React.createElement('div', {
key: 'qr-controls-below',
className: "mt-4 flex flex-col items-center gap-2"
}, [
React.createElement('div', {
key: 'frame-indicator',
className: "text-xs text-gray-300"
}, `Frame ${Math.max(1, (qrFrameIndex || 1))}/${qrFramesTotal || 1}`),
React.createElement('div', {
key: 'control-buttons',
className: "flex gap-1"
}, [
// Кнопки навигации показываем только если больше 1 части
(qrFramesTotal || 0) > 1 && React.createElement('button', {
key: 'prev-frame',
onClick: prevQrFrame,
className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
}, '◀'),
React.createElement('button', {
key: 'toggle-manual',
onClick: toggleQrManualMode,
className: `px-2 py-1 rounded text-xs font-medium ${
qrManualMode
? 'bg-blue-500 text-white'
: 'bg-gray-600 text-gray-300 hover:bg-gray-500'
}`
}, qrManualMode ? 'Manual' : 'Auto'),
// Кнопки навигации показываем только если больше 1 части
(qrFramesTotal || 0) > 1 && React.createElement('button', {
key: 'next-frame',
onClick: nextQrFrame,
className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
}, '▶')
])
]),
React.createElement('p', {
key: 'qr-description',
className: "text-xs text-gray-400 mt-2"
}, 'The initiator can scan this QR code to complete the secure connection')
]),
React.createElement('div', {
key: 'info',
className: "p-3 bg-purple-500/10 border border-purple-500/20 rounded-lg"
@@ -2323,6 +2425,7 @@
// Main Enhanced Application Component
const EnhancedSecureP2PChat = () => {
console.log('🔍 EnhancedSecureP2PChat component initialized');
console.log('🎮 QR Manual Control Features Loaded!');
const [messages, setMessages] = React.useState([]);
const [connectionStatus, setConnectionStatus] = React.useState('disconnected');
@@ -2387,27 +2490,34 @@
const shouldPreserveAnswerData = () => {
const now = Date.now();
const answerAge = now - (connectionState.answerCreatedAt || 0);
const maxPreserveTime = 30000; // 30 seconds
const maxPreserveTime = 300000; // 5 minutes (увеличиваем время для QR кода)
// Дополнительная проверка на основе самих данных
const hasAnswerData = (answerData && answerData.trim().length > 0) ||
(answerInput && answerInput.trim().length > 0);
// Проверяем наличие QR кода ответа
const hasAnswerQR = qrCodeUrl && qrCodeUrl.trim().length > 0;
const shouldPreserve = (connectionState.hasActiveAnswer &&
answerAge < maxPreserveTime &&
!connectionState.isUserInitiatedDisconnect) ||
(hasAnswerData && answerAge < maxPreserveTime &&
!connectionState.isUserInitiatedDisconnect) ||
(hasAnswerQR && answerAge < maxPreserveTime &&
!connectionState.isUserInitiatedDisconnect);
console.log('🔍 shouldPreserveAnswerData check:', {
hasActiveAnswer: connectionState.hasActiveAnswer,
hasAnswerData: hasAnswerData,
hasAnswerQR: hasAnswerQR,
answerAge: answerAge,
maxPreserveTime: maxPreserveTime,
isUserInitiatedDisconnect: connectionState.isUserInitiatedDisconnect,
shouldPreserve: shouldPreserve,
answerData: answerData ? 'exists' : 'null',
answerInput: answerInput ? 'exists' : 'null'
answerInput: answerInput ? 'exists' : 'null',
qrCodeUrl: qrCodeUrl ? 'exists' : 'null'
});
return shouldPreserve;
@@ -3039,6 +3149,7 @@
const MAX_QR_LEN = 800;
const [qrFramesTotal, setQrFramesTotal] = React.useState(0);
const [qrFrameIndex, setQrFrameIndex] = React.useState(0);
const [qrManualMode, setQrManualMode] = React.useState(false);
// Animated QR state (for multi-chunk COSE)
const qrAnimationRef = React.useRef({ timer: null, chunks: [], idx: 0, active: false });
@@ -3047,6 +3158,55 @@
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
setQrFrameIndex(0);
setQrFramesTotal(0);
setQrManualMode(false);
};
// Функции для ручного управления QR анимацией
const toggleQrManualMode = () => {
const newManualMode = !qrManualMode;
setQrManualMode(newManualMode);
if (newManualMode) {
// Останавливаем автопрокрутку
if (qrAnimationRef.current.timer) {
clearInterval(qrAnimationRef.current.timer);
qrAnimationRef.current.timer = null;
}
console.log('QR Manual mode enabled - auto-scroll stopped');
} else {
// Возобновляем автопрокрутку
if (qrAnimationRef.current.chunks.length > 1 && qrAnimationRef.current.active) {
const intervalMs = 4000;
qrAnimationRef.current.timer = setInterval(renderNext, intervalMs);
}
console.log('QR Manual mode disabled - auto-scroll resumed');
}
};
const nextQrFrame = () => {
console.log('🎮 nextQrFrame called, qrFramesTotal:', qrFramesTotal, 'qrAnimationRef.current:', qrAnimationRef.current);
if (qrAnimationRef.current.chunks.length > 1) {
const nextIdx = (qrAnimationRef.current.idx + 1) % qrAnimationRef.current.chunks.length;
qrAnimationRef.current.idx = nextIdx;
setQrFrameIndex(nextIdx + 1);
console.log('🎮 Next frame index:', nextIdx + 1);
renderNext();
} else {
console.log('🎮 No multiple frames to navigate');
}
};
const prevQrFrame = () => {
console.log('🎮 prevQrFrame called, qrFramesTotal:', qrFramesTotal, 'qrAnimationRef.current:', qrAnimationRef.current);
if (qrAnimationRef.current.chunks.length > 1) {
const prevIdx = (qrAnimationRef.current.idx - 1 + qrAnimationRef.current.chunks.length) % qrAnimationRef.current.chunks.length;
qrAnimationRef.current.idx = prevIdx;
setQrFrameIndex(prevIdx + 1);
console.log('🎮 Previous frame index:', prevIdx + 1);
renderNext();
} else {
console.log('🎮 No multiple frames to navigate');
}
};
// Buffer for assembling scanned COSE chunks
@@ -3074,8 +3234,13 @@
console.log('🎞️ Using RAW animated QR frames (no compression)');
stopQrAnimation();
const id = `raw_${Date.now()}_${Math.random().toString(36).slice(2)}`;
const FRAME_MAX = Math.max(300, Math.min(750, Math.floor(MAX_QR_LEN * 0.6)));
// Принудительно разбиваем на 10 частей для лучшего сканирования
const TARGET_CHUNKS = 10;
const FRAME_MAX = Math.max(200, Math.floor(payload.length / TARGET_CHUNKS));
const total = Math.ceil(payload.length / FRAME_MAX);
console.log(`📊 Splitting ${payload.length} chars into ${total} chunks (max ${FRAME_MAX} chars per chunk)`);
const rawChunks = [];
for (let i = 0; i < total; i++) {
const seq = i + 1;
@@ -3111,10 +3276,14 @@
setQrFrameIndex(nextIdx + 1);
};
await renderNext();
const ua = (typeof navigator !== 'undefined' && navigator.userAgent) ? navigator.userAgent : '';
const isIOS = /iPhone|iPad|iPod/i.test(ua);
const intervalMs = isIOS ? 2500 : 2000; // Slower animation for better readability
qrAnimationRef.current.timer = setInterval(renderNext, intervalMs);
// Запускаем автопрокрутку только если не в ручном режиме
if (!qrManualMode) {
const ua = (typeof navigator !== 'undefined' && navigator.userAgent) ? navigator.userAgent : '';
const isIOS = /iPhone|iPad|iPod/i.test(ua);
const intervalMs = 4000; // 4 seconds per frame for better readability
qrAnimationRef.current.timer = setInterval(renderNext, intervalMs);
}
return;
} catch (error) {
console.error('QR code generation failed:', error);
@@ -3488,6 +3657,12 @@
setAnswerData(answer);
setShowAnswerStep(true);
// Generate QR code for the answer data
const answerString = typeof answer === 'object' ? JSON.stringify(answer) : answer;
console.log('Generating QR code for answer data length:', answerString.length);
console.log('First 100 chars of answer data:', answerString.substring(0, 100));
await generateQRCode(answerString);
// Mark answer as created for state management
markAnswerCreated();
@@ -3505,7 +3680,7 @@
}]);
setMessages(prev => [...prev, {
message: '📤 Send the response code to the initiator via a secure channel..',
message: '📤 Send the response code to the initiator via a secure channel or let them scan the QR code below.',
type: 'system',
id: Date.now(),
timestamp: Date.now()
@@ -3774,12 +3949,23 @@
setOfferInput('');
setAnswerInput('');
setShowOfferStep(false);
setShowAnswerStep(false);
// Сохраняем showAnswerStep если есть QR код ответа
if (!shouldPreserveAnswerData()) {
setShowAnswerStep(false);
}
setShowVerification(false);
setShowQRCode(false);
setShowQRScanner(false);
setShowQRScannerModal(false);
setQrCodeUrl('');
// Сохраняем QR код ответа, если он был создан
// (не сбрасываем qrCodeUrl если есть активный ответ)
if (!shouldPreserveAnswerData()) {
setQrCodeUrl('');
}
setVerificationCode('');
setIsVerified(false);
setKeyFingerprint('');
@@ -3988,6 +4174,13 @@
localVerificationConfirmed: localVerificationConfirmed,
remoteVerificationConfirmed: remoteVerificationConfirmed,
bothVerificationsConfirmed: bothVerificationsConfirmed,
// QR control props
qrFramesTotal: qrFramesTotal,
qrFrameIndex: qrFrameIndex,
qrManualMode: qrManualMode,
toggleQrManualMode: toggleQrManualMode,
nextQrFrame: nextQrFrame,
prevQrFrame: prevQrFrame,
// PAKE passwords removed - using SAS verification instead
})
),

186
src/components/QRScanner.js
View File

@@ -5,6 +5,10 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
const [error, setError] = React.useState(null);
const [isScanning, setIsScanning] = React.useState(false);
const [progress, setProgress] = React.useState({ id: null, seq: 0, total: 0 });
const [showFocusHint, setShowFocusHint] = React.useState(false);
const [manualMode, setManualMode] = React.useState(false);
const [scannedParts, setScannedParts] = React.useState(new Set());
const [currentQRId, setCurrentQRId] = React.useState(null);
React.useEffect(() => {
if (isVisible) {
@@ -23,6 +27,15 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
const { id, seq, total } = e.detail || {};
if (!id || !total) return;
setProgress({ id, seq, total });
// Обновляем ID текущего QR кода
if (id !== currentQRId) {
setCurrentQRId(id);
setScannedParts(new Set()); // Сбрасываем сканированные части для нового ID
}
// Добавляем отсканированную часть
setScannedParts(prev => new Set([...prev, seq]));
};
const onComplete = () => {
// Close scanner once app signals completion
@@ -35,7 +48,54 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
document.removeEventListener('qr-scan-progress', onProgress, { passive: true });
document.removeEventListener('qr-scan-complete', onComplete, { passive: true });
};
}, []);
}, [currentQRId]);
// Функция для tap-to-focus
const handleTapToFocus = (event, html5Qrcode) => {
try {
// Показываем подсказку о фокусировке
setShowFocusHint(true);
setTimeout(() => setShowFocusHint(false), 2000);
// Получаем координаты клика относительно видео элемента
const rect = event.target.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Нормализуем координаты (0-1)
const normalizedX = x / rect.width;
const normalizedY = y / rect.height;
console.log('Tap to focus at:', { x, y, normalizedX, normalizedY });
// Попытка программной фокусировки (если поддерживается браузером)
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Это может не работать во всех браузерах, но попробуем
console.log('Attempting programmatic focus...');
}
} catch (error) {
console.warn('Tap to focus error:', error);
}
};
// Функции для ручного управления
const toggleManualMode = () => {
setManualMode(!manualMode);
if (!manualMode) {
// При включении ручного режима останавливаем автопрокрутку
console.log('Manual mode enabled - auto-scroll disabled');
} else {
// При выключении ручного режима возобновляем автопрокрутку
console.log('Manual mode disabled - auto-scroll enabled');
}
};
const resetProgress = () => {
setScannedParts(new Set());
setCurrentQRId(null);
setProgress({ id: null, seq: 0, total: 0 });
};
const startScanner = async () => {
try {
@@ -116,7 +176,16 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
cameraId, // Use specific camera ID
{
fps: /iPhone|iPad|iPod/i.test(navigator.userAgent) ? 2 : 3,
qrbox: { width: qrboxSize, height: qrboxSize }
qrbox: { width: qrboxSize, height: qrboxSize },
// Улучшенные настройки для мобильных устройств
aspectRatio: 1.0,
videoConstraints: {
focusMode: "continuous", // Непрерывная автофокусировка
exposureMode: "continuous", // Непрерывная экспозиция
whiteBalanceMode: "continuous", // Непрерывный баланс белого
torch: false, // Вспышка выключена по умолчанию
facingMode: "environment" // Используем заднюю камеру
}
},
(decodedText, decodedResult) => {
console.log('QR Code detected:', decodedText);
@@ -153,6 +222,13 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
qrScannerRef.current = html5Qrcode;
console.log('QR scanner started successfully');
// Добавляем обработчик tap-to-focus для мобильных устройств
if (videoRef.current) {
videoRef.current.addEventListener('click', (event) => {
handleTapToFocus(event, html5Qrcode);
});
}
} catch (err) {
console.error('Error starting QR scanner:', err);
let errorMessage = 'Failed to start camera';
@@ -232,6 +308,66 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
})
])
]),
// Индикатор прогресса сканирования
progress.total > 1 && React.createElement('div', {
key: 'progress-indicator',
className: "mb-4 p-3 bg-gray-800/50 border border-gray-600/30 rounded-lg"
}, [
React.createElement('div', {
key: 'progress-header',
className: "flex items-center justify-between mb-2"
}, [
React.createElement('span', {
key: 'progress-title',
className: "text-sm text-gray-300"
}, `QR ID: ${currentQRId ? currentQRId.substring(0, 8) + '...' : 'N/A'}`),
React.createElement('span', {
key: 'progress-count',
className: "text-sm text-blue-400"
}, `${scannedParts.size}/${progress.total} scanned`)
]),
React.createElement('div', {
key: 'progress-numbers',
className: "flex flex-wrap gap-1"
}, Array.from({ length: progress.total }, (_, i) => {
const partNumber = i + 1;
const isScanned = scannedParts.has(partNumber);
return React.createElement('div', {
key: `part-${partNumber}`,
className: `w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium transition-colors ${
isScanned
? 'bg-green-500 text-white'
: 'bg-gray-600 text-gray-300'
}`
}, partNumber);
}))
]),
// Панель управления
progress.total > 1 && React.createElement('div', {
key: 'control-panel',
className: "mb-4 flex gap-2"
}, [
React.createElement('button', {
key: 'manual-toggle',
onClick: toggleManualMode,
className: `px-3 py-1 rounded text-xs font-medium transition-colors ${
manualMode
? 'bg-blue-500 text-white'
: 'bg-gray-600 text-gray-300 hover:bg-gray-500'
}`
}, manualMode ? 'Manual Mode' : 'Auto Mode'),
React.createElement('button', {
key: 'reset-progress',
onClick: resetProgress,
className: "px-3 py-1 bg-red-500/20 text-red-400 border border-red-500/20 rounded text-xs font-medium hover:bg-red-500/30"
}, 'Reset'),
React.createElement('span', {
key: 'mode-hint',
className: "text-xs text-gray-400 self-center"
}, manualMode ? 'Tap to focus, scan manually' : 'Auto-scrolling enabled')
]),
React.createElement('div', {
key: 'scanner-content',
@@ -297,12 +433,56 @@ const QRScanner = ({ onScan, onClose, isVisible, continuous = false }) => {
React.createElement('p', {
key: 'scanning-text',
className: "text-xs"
}, progress && progress.total > 1 ? `Frames: ${Math.min(progress.seq, progress.total)}/${progress.total}` : 'Point camera at QR code')
}, progress && progress.total > 1 ? `Frames: ${Math.min(progress.seq, progress.total)}/${progress.total}` : 'Point camera at QR code'),
React.createElement('p', {
key: 'tap-hint',
className: "text-xs text-blue-300 mt-1"
}, 'Tap screen to focus')
])
]),
// Подсказка о фокусировке
showFocusHint && React.createElement('div', {
key: 'focus-hint',
className: "absolute top-4 left-1/2 transform -translate-x-1/2 bg-green-500/90 text-white px-3 py-1 rounded-full text-xs font-medium z-10"
}, 'Focusing...'),
// Bottom overlay kept simple on mobile
]),
// Дополнительные подсказки для улучшения сканирования
React.createElement('div', {
key: 'scanning-tips',
className: "mt-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg"
}, [
React.createElement('h4', {
key: 'tips-title',
className: "text-blue-400 text-sm font-medium mb-2 flex items-center"
}, [
React.createElement('i', {
key: 'tips-icon',
className: 'fas fa-lightbulb mr-2'
}),
'Tips for better scanning:'
]),
React.createElement('ul', {
key: 'tips-list',
className: "text-xs text-blue-300 space-y-1"
}, [
React.createElement('li', {
key: 'tip-1'
}, '• Ensure good lighting'),
React.createElement('li', {
key: 'tip-2'
}, '• Hold phone steady'),
React.createElement('li', {
key: 'tip-3'
}, '• Tap screen to focus'),
React.createElement('li', {
key: 'tip-4'
}, '• Keep QR code in frame')
])
])
])
]);
};

9
src/crypto/cose-qr.js
View File

@@ -139,8 +139,9 @@ export async function packSecurePayload(payloadObj, senderEcdsaPrivKey = null, r
console.log(`📊 Compressed size: ${encoded.length} characters (${Math.round((1 - encoded.length/payloadJson.length) * 100)}% reduction)`);
// 5. Chunking for QR codes
const QR_MAX = 900; // Conservative per chunk length
// 5. Chunking for QR codes - улучшенное разбиение для лучшего сканирования
const TARGET_CHUNKS = 10; // Целевое количество частей
const QR_MAX = Math.max(200, Math.floor(encoded.length / TARGET_CHUNKS)); // Динамический размер части
const chunks = [];
if (encoded.length <= QR_MAX) {
@@ -150,10 +151,12 @@ export async function packSecurePayload(payloadObj, senderEcdsaPrivKey = null, r
body: encoded
}));
} else {
// Multiple chunks
// Multiple chunks - разбиваем на больше частей для лучшего сканирования
const id = generateUUID();
const totalChunks = Math.ceil(encoded.length / QR_MAX);
console.log(`📊 COSE: Splitting ${encoded.length} chars into ${totalChunks} chunks (max ${QR_MAX} chars per chunk)`);
for (let i = 0, seq = 1; i < encoded.length; i += QR_MAX, seq++) {
const part = encoded.slice(i, i + QR_MAX);
chunks.push(JSON.stringify({