From fcb710a888e2872116d9a78157d027619679229b Mon Sep 17 00:00:00 2001 From: Isky Date: Mon, 12 Aug 2024 02:08:34 +0800 Subject: [PATCH] added back icons for Scanned Data box. Pending to verify all dynamic ScannedDataBox views. (Incomplete Testing) --- components/ScannedDataBox.tsx | 232 +++++++++++++++++++--------------- screens/QRScannerScreen.tsx | 4 +- 2 files changed, 129 insertions(+), 107 deletions(-) diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx index a459239..675dbab 100644 --- a/components/ScannedDataBox.tsx +++ b/components/ScannedDataBox.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { View, Text, StyleSheet, Image, TouchableOpacity, Modal, ActivityIndicator, ScrollView, Dimensions } from 'react-native'; +import { View, Text, StyleSheet, Image, TouchableOpacity, Modal, ActivityIndicator, ScrollView, Dimensions, Linking, Clipboard } from 'react-native'; import QRCode from 'react-native-qrcode-svg'; -import { Feather, Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons'; +import { Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons'; import { getQRCodeDetails } from '../api/qrCodeAPI'; import SecureWebView from '../components/SecureWebView'; @@ -20,7 +20,6 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData const [isWebViewVisible, setIsWebViewVisible] = useState(false); const [webViewUrl, setWebViewUrl] = useState(''); - // Fetch QR code details on component mount or qrCodeId change useEffect(() => { const fetchQRDetails = async () => { try { @@ -49,17 +48,16 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData const details = qrDetails.details || {}; const type = data.info?.type || 'Undefined'; const contents = data.contents || 'Undefined'; - const secureConnection = details.hstsHeader?.some((header: string) => header.includes('HSTS Header')); - const redirects = details.redirect || 0; - const securityHeaders = details.hstsHeader && details.hstsHeader.length > 0 ? details.hstsHeader : []; - - const redirectChain = details.redirectChain || ['No Redirects']; + const result = data.result || 'Unknown'; + const ssid = details.ssid || 'Undefined'; + const encryption = details.encryption || 'NO'; + const hidden = details.hidden ? 'Hidden' : 'Visible'; // Determine the result text based on the security status const getResultText = () => { - if (!secureConnection || redirects > 0) { + if (result === 'UNSAFE') { return 'DANGEROUS'; - } else if (secureConnection && redirects === 0) { + } else if (result === 'SAFE') { return 'SAFE'; } else { return 'WARNING'; @@ -68,35 +66,18 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData // Get color corresponding to the result text const getResultColor = () => { - const result = getResultText(); - if (result === 'DANGEROUS') { + const resultText = getResultText(); + if (resultText === 'DANGEROUS') { return '#ff0000'; // Red - } else if (result === 'WARNING') { + } else if (resultText === 'WARNING') { return '#ffa500'; // Orange - } else if (result === 'SAFE') { + } else if (resultText === 'SAFE') { return '#44c167'; // Green } else { return '#000000'; // Black for unknown } }; - // Get icon based on the number of redirects - const getSheildIcon = () => { - if (redirects === 0) { - return ; - } else if (redirects <= 2) { - return ; - } else { - return ; - } - }; - - // Open URL in a WebView - const openWebView = (url: string) => { - setWebViewUrl(url); - setIsWebViewVisible(true); - }; - // Truncate content string to specified length const truncateContent = (content: string, length: number) => { if (content.length > length) { @@ -105,6 +86,28 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData return content; }; + // Function to open the Wi-Fi configuration in the OS + const handleOpenUrl = (url: string) => { + Linking.openURL(url).catch(err => console.error('Error opening URL:', err)); + }; + + // Function to copy text content to clipboard + const handleCopyToClipboard = () => { + Clipboard.setString(contents); + }; + + // Function to send SMS + const handleSendSMS = () => { + const smsUrl = `sms:${contents}`; + Linking.openURL(smsUrl).catch(err => console.error('Error sending SMS:', err)); + }; + + // Function to make a phone call + const handleMakeCall = () => { + const telUrl = `tel:${contents}`; + Linking.openURL(telUrl).catch(err => console.error('Error making call:', err)); + }; + return ( @@ -128,7 +131,6 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData {data.createdAt ? new Date(data.createdAt).toLocaleString() : 'Invalid Date'} Description: {type} - {'\n'} @@ -137,101 +139,91 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData Result: {getResultText()} - {/* Change the UI based on Type */} + {/* URL Type */} {type === 'URL' && ( <> - {secureConnection ? ( + {details.redirectChain?.length === 0 ? ( <> - Secure Connection + No Redirects ) : ( <> - Not Secure + Redirects )} {/* Security Headers Button */} - {securityHeaders.length > 0 ? ( - setIsModalVisible(true)}> - - Security Headers - - -) : ( - - - No Security Headers - -)} - + {details.securityHeaders?.length > 0 ? ( + setIsModalVisible(true)}> + + Security Headers + + + ) : ( + + + No Security Headers + + )} {/* Redirects Button */} setIsRedirectModalVisible(true)}> - {getSheildIcon()} + Redirects - {/* Security Headers Modal */} - setIsModalVisible(false)} - > - - - Security Headers - {securityHeaders.map((header, index) => ( - {header} - ))} - setIsModalVisible(false)}> - Close - - - - - - {/* Redirect Chain Modal */} - setIsRedirectModalVisible(false)} - > - - - Redirect Chain - {redirectChain.map((redirect, index) => ( - {redirect} - ))} - setIsRedirectModalVisible(false)}> - Close - - - - + {/* URL Open Button */} + + handleOpenUrl(contents)}> + + Open + + )} - {/* SMS Type */} - {type === 'SMS' && ( + {/* WIFI Type */} + {type === 'WIFI' && ( <> - Recipient Phone Number: {details.phone || 'Undefined'} - Message Content: {details.message || 'Undefined'} + SSID: {ssid} + Encryption: {encryption} + Visibility: {hidden === 'Hidden' ? '✔️' : '❌'} )} {/* TEXT Type */} {type === 'TEXT' && ( - setIsContentModalVisible(true)}> - Content: {truncateContent(contents, 30)} - - + + + + Copy + + + )} + + {/* SMS Type */} + {type === 'SMS' && ( + + + + Send SMS + + + )} + + {/* TEL Type */} + {type === 'TEL' && ( + + + + Call + + )} {/* Full Content Modal */} @@ -254,15 +246,45 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData - {/* URL Open Button */} - {type === 'URL' && ( - - openWebView(contents)}> - - Open - + {/* Security Headers Modal */} + setIsModalVisible(false)} + > + + + Security Headers + {details.securityHeaders?.map((header: string, index: number) => ( + {header} + ))} + setIsModalVisible(false)}> + Close + + - )} + + + {/* Redirect Chain Modal */} + setIsRedirectModalVisible(false)} + > + + + Redirect Chain + {details.redirectChain?.map((redirect: string, index: number) => ( + {redirect} + ))} + setIsRedirectModalVisible(false)}> + Close + + + + {/* WebView Modal */} { const { uri } = result.assets[0]; try { // If using expo-camera or similar packages: - const scannedResult = await scanQRCodeFromURL(uri); // Function to scan QR code from the selected image URL + const scannedResult = await scanQRCodeFromImage(uri); // Function to scan QR code from the selected image URL if (scannedResult) { handlePayload(scannedResult); } else { @@ -71,7 +71,7 @@ const QRScannerScreen: React.FC = () => { } }; - const scanQRCodeFromURL = async (uri: string) => { + const scanQRCodeFromImage = async (uri: string) => { // This method can vary depending on the package used for scanning // For example, using expo-camera or other available options to scan QR code from an image URL // Implement scanFromURLAsync if using expo-camera