diff --git a/assets/SafeQR_Logo 1.png b/assets/SafeQR_Logo 1.png index 31c4c19..ff9a656 100644 Binary files a/assets/SafeQR_Logo 1.png and b/assets/SafeQR_Logo 1.png differ diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx index 46219e5..a459239 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 QRCode from 'react-native-qrcode-svg'; -import { Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons'; +import { Feather, Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons'; import { getQRCodeDetails } from '../api/qrCodeAPI'; import SecureWebView from '../components/SecureWebView'; @@ -20,6 +20,7 @@ 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 { @@ -50,9 +51,11 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData 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 || ['No Headers']; + const securityHeaders = details.hstsHeader && details.hstsHeader.length > 0 ? details.hstsHeader : []; + const redirectChain = details.redirectChain || ['No Redirects']; + // Determine the result text based on the security status const getResultText = () => { if (!secureConnection || redirects > 0) { return 'DANGEROUS'; @@ -63,6 +66,7 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData } }; + // Get color corresponding to the result text const getResultColor = () => { const result = getResultText(); if (result === 'DANGEROUS') { @@ -76,6 +80,7 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData } }; + // Get icon based on the number of redirects const getSheildIcon = () => { if (redirects === 0) { return ; @@ -86,11 +91,13 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData } }; + // 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) { return `${content.substring(0, length)}...`; @@ -99,10 +106,7 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData }; return ( - - - @@ -111,7 +115,7 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData setIsContentModalVisible(true)}> - {truncateContent(contents, 30)} + {truncateContent(contents, 30)} @@ -146,68 +150,75 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData <> Not Secure - - - )} + + {/* Security Headers Button */} + {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 + + + + - - setIsModalVisible(true)}> - - Security Headers - - - - setIsModalVisible(false)} - > - - - Security Headers - {securityHeaders.map((header, index) => ( - {header} - ))} - setIsModalVisible(false)}> - Close - - - - - - setIsRedirectModalVisible(false)} - > - - - Redirect Chain - {redirectChain.map((redirect, index) => ( - {redirect} - ))} - setIsRedirectModalVisible(false)}> - Close - - - - - + {/* Redirect Chain Modal */} + setIsRedirectModalVisible(false)} + > + + + Redirect Chain + {redirectChain.map((redirect, index) => ( + {redirect} + ))} + setIsRedirectModalVisible(false)}> + Close + + + + - )} + {/* SMS Type */} {type === 'SMS' && ( <> Recipient Phone Number: {details.phone || 'Undefined'} @@ -215,21 +226,15 @@ const ScannedDataBox: React.FC = ({ qrCodeId, clearScanData )} + {/* TEXT Type */} {type === 'TEXT' && ( setIsContentModalVisible(true)}> - - Content: {truncateContent(contents, 30)} {/* Truncated content further */} - + Content: {truncateContent(contents, 30)} - - - - )} - - + {/* Full Content Modal */} = ({ qrCodeId, clearScanData - - - {type === 'URL' && ( + {/* URL Open Button */} + {type === 'URL' && ( + openWebView(contents)}> Open - )} - + + )} + {/* WebView Modal */} { const [selectedMessage, setSelectedMessage] = useState(null); const [emailData, setEmailData] = useState(null); @@ -11,6 +14,7 @@ const EmailScreen: React.FC = () => { const [error, setError] = useState(null); const [userEmail, setUserEmail] = useState(''); const [bannerOpacity] = useState(new Animated.Value(0)); + useEffect(() => { startPollingForScannedEmails(); @@ -35,8 +39,8 @@ const EmailScreen: React.FC = () => { try { // Call to start email fetching process const response = await getEmails( - 'ya29.a0AcM612zTwLojArYvmKxAKiUKL1eBIs04ZBN2dp53BShPcPAhZigjmivq-mQmT6BgF5G1ernMKb2LCHmRgX3vlSaBj2hD8JDi7kvpexduM-_x8aG7QorKfyB2z6yJzFrwVes2Y9tHhb9vWUAqbPdiL4wqNqeE5HxZNhoaCgYKAS0SARISFQHGX2MikJkWByj0FaiKBj3jU7svGg0170', - '1//0g-hOrh4_72p3CgYIARAAGBASNwF-L9IrYVyuPL7WPbsm_ePtzFugduBLmdSr3UpQx7GMSt17KcS2Y_Z3v4N5wZiWua88RFjJ3Zk' + 'Google Access Token', + 'Refresh Token' ); setRescanLoading(false); } catch (error) { @@ -169,6 +173,7 @@ const styles = StyleSheet.create({ backgroundColor: '#f8f0fc', padding: 10, paddingTop: 40, // Padding from the top to align content + paddingBottom: screenHeight * 0.1, }, headerContainer: { flexDirection: 'row', @@ -265,10 +270,12 @@ const styles = StyleSheet.create({ left: 0, right: 0, backgroundColor: '#ff69b4', - padding: 10, + paddingVertical: 20, // Increase this value for more height + paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center', }, + bannerText: { color: '#fff', fontWeight: 'bold', diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index eec6d21..93a976d 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -273,7 +273,7 @@ const styles = StyleSheet.create({ }, scannedDataBoxPopup: { position: 'absolute', - top: '10%', + top: '30%', left: '5%', right: '5%', zIndex: 2, @@ -281,7 +281,8 @@ const styles = StyleSheet.create({ borderRadius: screenWidth * 0.025, padding: screenWidth * 0.025, elevation: 5, - }, +}, + settingsModal: { backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background