From 7cb5cbbe34b5a7b5f8b7df3e79facd8074f9cd3b Mon Sep 17 00:00:00 2001
From: Isky <iskandershah_ss43@hotmail.com>
Date: Tue, 6 Aug 2024 11:38:40 +0800
Subject: [PATCH] updated UI for relative screensize. Handle long payload by
 truncating the displayes content

---
 components/ScannedDataBox.tsx | 276 ++++++++++++++++++++--------------
 screens/EmailScreen.tsx       |   6 +-
 2 files changed, 164 insertions(+), 118 deletions(-)

diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx
index 2cd7c71..f4efce8 100644
--- a/components/ScannedDataBox.tsx
+++ b/components/ScannedDataBox.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Image, TouchableOpacity, Modal, ActivityIndicator, Alert } from 'react-native';
+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 icons
+import { Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
 import { getQRCodeDetails } from '../api/qrCodeAPI';
-import SecureWebView from '../components/SecureWebView'; // Import the SecureWebView component
+import SecureWebView from '../components/SecureWebView';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
-// Define Props for ScannedDataBox component
 interface ScannedDataBoxProps {
   qrCodeId: string;
   clearScanData: () => void;
@@ -14,6 +15,7 @@ interface ScannedDataBoxProps {
 const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isRedirectModalVisible, setIsRedirectModalVisible] = useState(false);
+  const [isContentModalVisible, setIsContentModalVisible] = useState(false);
   const [qrDetails, setQrDetails] = useState<any>(null);
   const [isWebViewVisible, setIsWebViewVisible] = useState(false);
   const [webViewUrl, setWebViewUrl] = useState('');
@@ -42,7 +44,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     );
   }
 
-  // Handle cases where data might be undefined
   const data = qrDetails.data || {};
   const details = qrDetails.details || {};
   const type = data.info?.type || 'Undefined';
@@ -52,7 +53,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   const securityHeaders = details.hstsHeader || ['No Headers'];
   const redirectChain = details.redirectChain || ['No Redirects'];
 
-  // Determine the result text based on scan result
   const getResultText = () => {
     if (!secureConnection || redirects > 0) {
       return 'DANGEROUS';
@@ -63,7 +63,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     }
   };
 
-  // Determine the result color based on result text
   const getResultColor = () => {
     const result = getResultText();
     if (result === 'DANGEROUS') {
@@ -77,97 +76,102 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     }
   };
 
-  // Determine the appropriate icon for redirects
   const getRedirectIcon = () => {
     if (redirects === 0) {
-      return <Ionicons name="shield-checkmark" size={18} color="#44c167" />;
+      return <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />;
     } else if (redirects <= 2) {
-      return <Ionicons name="shield" size={18} color="#ffa500" />;
+      return <Ionicons name="shield" size={screenWidth * 0.045} color="#ffa500" />;
     } else {
-      return <MaterialCommunityIcons name="shield-alert" size={18} color="#ff0000" />;
+      return <MaterialCommunityIcons name="shield-alert" size={screenWidth * 0.045} color="#ff0000" />;
     }
   };
 
-  // Open the WebView for the URL
   const openWebView = (url: string) => {
     setWebViewUrl(url);
     setIsWebViewVisible(true);
   };
 
+  const truncateContent = (content: string, length: number) => {
+    if (content.length > length) {
+      return `${content.substring(0, length)}...`;
+    }
+    return content;
+  };
+
   return (
     <View style={styles.dataBox}>
-      {/* Close button */}
       <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
-        <Ionicons name="close-circle-outline" size={18} color="#ff69b4" />
+        <Ionicons name="close-circle-outline" size={screenWidth * 0.05} color="#ff69b4" />
       </TouchableOpacity>
 
-      {/* Display scanned data */}
-      <View style={styles.row}>
+      <View style={[styles.row, styles.shadowBox]}>
         <Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} />
-        <Text style={styles.payload}>{contents}</Text>
-      </View>
-      <View style={styles.divider} />
-      <Text style={styles.timestampText}>{data.createdAt ? new Date(data.createdAt).toLocaleString() : 'Invalid Date'}</Text>
-      <View style={styles.qrContainer}>
-        <QRCode value={contents || 'No Data'} size={75} backgroundColor="transparent" />
-        <Text style={[styles.resultText, { color: getResultColor() }]}>
-          Result: {getResultText()}
+        <Text style={styles.payload} onPress={() => setIsContentModalVisible(true)}>
+          {truncateContent(contents, 30)} {/* Truncated content further */}
         </Text>
       </View>
-    
 
-      {/* Display data type */}  
-      <View style={styles.divider} />
-      <Text style={styles.typeText}>Type: {type}</Text>
-      <View style={styles.divider} />
-      <Text style={styles.blankLine}>{'\n'}</Text>
+      <View style={styles.mainContent}>
+        <View style={styles.qrSection}>
+          <QRCode value={contents || 'No Data'} size={screenWidth * 0.2} backgroundColor="transparent" />
+        </View>
+        <View style={styles.dividerVertical} />
+        <View style={styles.detailsSection}>
+          <Text style={styles.timestampText}>{data.createdAt ? new Date(data.createdAt).toLocaleString() : 'Invalid Date'}</Text>
+          <Text style={styles.typeText}>Description: {type}</Text>
+          <Text>{'\n'}</Text>
+        </View>
+      </View>
+
+     
+      <Text style={[styles.resultText, { color: getResultColor() }]}>
+        Result: {getResultText()}
+      </Text>
 
-      {/* Display scan checks */}
       {type === 'URL' && (
         <>
           <View style={styles.displayCheck}>
             {secureConnection ? (
               <>
-                <Ionicons name="shield-checkmark" size={18} color="#44c167" />
-                <Text style={styles.checksText}>Secure Connection</Text>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />
+                <Text style={styles.moreInfoButtonText}>Secure Connection</Text>
               </>
             ) : (
               <>
-                <SimpleLineIcons name="shield" size={18} color="#ff0000" />
-                <Text style={styles.checksText}>Not Secure</Text>
+                <SimpleLineIcons name="shield" size={screenWidth * 0.045} color="#ff0000" />
+                <Text style={styles.moreInfoButtonText}>Not Secure</Text>
               </>
             )}
           </View>
           <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsRedirectModalVisible(true)}>
             {getRedirectIcon()}
             <Text style={styles.moreInfoButtonText}>Redirects</Text>
-            <Ionicons name="chevron-forward" size={18} color="#ff69b4" />
+            <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
           </TouchableOpacity>
         </>
       )}
 
       {type === 'SMS' && (
         <>
-          <Text style={styles.checksText}>Recipient Phone Number: {details.phone || 'Undefined'}</Text>
-          <Text style={styles.checksText}>Message Content: {details.message || 'Undefined'}</Text>
+          <Text style={styles.moreInfoButtonText}>Recipient Phone Number: {details.phone || 'Undefined'}</Text>
+          <Text style={styles.moreInfoButtonText}>Message Content: {details.message || 'Undefined'}</Text>
         </>
       )}
 
       {type === 'TEXT' && (
-        <>
-          <Text style={styles.checksText}>Content: {contents}</Text>
-        </>
+        <TouchableOpacity style={[styles.contentBox, styles.shadowBox]} onPress={() => setIsContentModalVisible(true)}>
+          <Text style={styles.moreInfoButtonText}>
+            Content: {truncateContent(contents, 30)} {/* Truncated content further */}
+          </Text>
+        </TouchableOpacity>
       )}
 
- 
-
       <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}>
-        <Ionicons name="shield-checkmark" size={18} color="#ff69b4" />
+        <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#ff69b4" />
         <Text style={styles.moreInfoButtonText}>Security Headers</Text>
-        <Ionicons name="chevron-forward" size={18} color="#ff69b4" />
+        <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
       </TouchableOpacity>
 
-      {/* Modal for security headers */}
       <Modal
         visible={isModalVisible}
         transparent={true}
@@ -187,7 +191,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </View>
       </Modal>
 
-      {/* Modal for redirects */}
       <Modal
         visible={isRedirectModalVisible}
         transparent={true}
@@ -207,18 +210,35 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </View>
       </Modal>
 
-      {/* Action buttons */}
-      <View style={styles.divider} />
+      <Modal
+        visible={isContentModalVisible}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={() => setIsContentModalVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Full Content</Text>
+            <ScrollView style={styles.modalScrollContent}>
+              <Text style={styles.modalText}>{contents}</Text>
+            </ScrollView>
+            <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsContentModalVisible(false)}>
+              <Text style={styles.closeModalButtonText}>Close</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+    
       <View style={styles.iconContainer}>
         {type === 'URL' && (
           <TouchableOpacity style={styles.iconButton} onPress={() => openWebView(contents)}>
-            <Ionicons name="open" size={18} color="#2196F3" />
+            <Ionicons name="open" size={screenWidth * 0.045} color="#2196F3" />
             <Text style={styles.iconText}>Open</Text>
           </TouchableOpacity>
         )}
       </View>
 
-      {/* SecureWebView Modal */}
       <Modal
         visible={isWebViewVisible}
         transparent={true}
@@ -244,64 +264,77 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   scan_icon: {
-    width: 37.5,
-    height: 37.5,
-    marginRight: 6,
+    width: screenWidth * 0.09,
+    height: screenWidth * 0.09,
+    marginRight: screenWidth * 0.015,
   },
   payload: {
-    fontSize: 15,
+    fontSize: screenWidth * 0.0375,
     color: '#000',
-    flex: 1,  // Allow text to use available space
+    flex: 1,
   },
   dataBox: {
-    padding: 15,
+    padding: screenWidth * 0.0375,
     backgroundColor: '#ffe6f0',
-    borderRadius: 7.5,
+    borderRadius: screenWidth * 0.01875,
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1.5 },
+    shadowOffset: { width: 0, height: screenHeight * 0.001875 },
     shadowOpacity: 0.15,
-    shadowRadius: 3.75,
-    elevation: 2.25,
+    shadowRadius: screenWidth * 0.01875,
+    elevation: screenWidth * 0.0135,
     zIndex: 1,
   },
-  qrContainer: {
+  mainContent: {
+    flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'center',
-    marginVertical: 7.5,
+    padding: screenWidth * 0.0125,
   },
-  blankLine: {
-    height: 15,
+  qrSection: {
+    flex: 1,
+    alignItems: 'center',
   },
-  divider: {
-    height: 0.75,
+  dividerVertical: {
+    width: screenWidth * 0.001875,
+    height: '100%',
     backgroundColor: '#ddd',
-    marginVertical: 7.5,
-    alignSelf: 'stretch',
+    marginHorizontal: screenWidth * 0.025,
   },
+  detailsSection: {
+    flex: 2,
+  },
+  
+  
   timestampText: {
-    fontSize: 11,
+    fontSize: screenWidth * 0.0275,
     color: '#000',
-    marginBottom: 7.5,
+    marginBottom: screenWidth * 0.01875,
   },
   resultText: {
-    fontSize: 18,
-    marginBottom: 7.5,
+    fontSize: screenWidth * 0.045,
+    marginBottom: screenWidth * 0.01875,
     textAlign: 'center',
   },
   typeText: {
-    fontSize: 12,
+    fontSize: screenWidth * 0.03,
     color: '#000',
-    marginBottom: 7.5,
+    marginBottom: screenWidth * 0.01875,
+  },
+  moreInfoButtonText: {
+    fontSize: screenWidth * 0.03,
+    color: '#000',
+    marginLeft: screenWidth * 0.01875,
   },
   checksText: {
-    fontSize: 12,
+    fontSize: screenWidth * 0.03,
     color: '#000',
-    marginBottom: 3.75,
-    marginLeft: 7.5,  // Adjust margin for alignment
+    marginBottom: screenWidth * 0.009375,
+    marginLeft: screenWidth * 0.01875,
   },
   iconContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginTop: 7.5,
+    marginTop: screenWidth * 0.01875,
   },
   iconButton: {
     flexDirection: 'column',
@@ -310,46 +343,54 @@ const styles = StyleSheet.create({
   },
   iconText: {
     color: '#2196F3',
-    marginTop: 3.75,
+    marginTop: screenWidth * 0.009375,
     textAlign: 'center',
-    fontSize: 12,
+    fontSize: screenWidth * 0.03,
   },
   moreInfoText: {
-    fontSize: 13.5,
+    fontSize: screenWidth * 0.03375,
     fontWeight: 'bold',
     color: '#000',
-    marginVertical: 7.5,
+    marginVertical: screenWidth * 0.01875,
   },
   moreInfoButton: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 7.5,
-    paddingHorizontal: 11.25,
+    paddingVertical: screenWidth * 0.01875,
+    paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
-    borderRadius: 7.5,
-    marginTop: 7.5,
+    borderRadius: screenWidth * 0.01875,
+    marginTop: screenWidth * 0.01875,
     borderWidth: 1,
     borderColor: '#ff69b4',
   },
-  moreInfoButtonText: {
-    flex: 1,
-    fontSize: 12,
-    color: '#000',
-    marginLeft: 7.5,
-  },
   displayCheck: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 7.5,
-    paddingHorizontal: 11.25,
+    paddingVertical: screenWidth * 0.01875,
+    paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
-    borderRadius: 7.5,
-    marginTop: 7.5,
+    borderRadius: screenWidth * 0.01875,
+    marginTop: screenWidth * 0.01875,
+  },
+  contentBox: {
+    marginTop: screenWidth * 0.01875,
+    padding: screenWidth * 0.025,
+    backgroundColor: '#fff',
+    borderRadius: screenWidth * 0.01875,
+    borderWidth: 1,
+    borderColor: '#ff69b4',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: screenHeight * 0.001875 },
+    shadowOpacity: 0.15,
+    shadowRadius: screenWidth * 0.01875,
+    elevation: screenWidth * 0.0135,
   },
   closeButton: {
     position: 'absolute',
-    top: 7.5,
-    right: 7.5,
+    top: screenWidth * 0.01875,
+    right: screenWidth * 0.01875,
+    zIndex: 2,
   },
   modalContainer: {
     flex: 1,
@@ -360,30 +401,33 @@ const styles = StyleSheet.create({
   modalContent: {
     width: '80%',
     backgroundColor: 'white',
-    borderRadius: 7.5,
-    padding: 15,
+    borderRadius: screenWidth * 0.01875,
+    padding: screenWidth * 0.0375,
     alignItems: 'center',
   },
   modalTitle: {
-    fontSize: 18,
+    fontSize: screenWidth * 0.045,
     fontWeight: 'bold',
-    marginBottom: 7.5,
+    marginBottom: screenWidth * 0.01875,
   },
   modalText: {
-    fontSize: 12,
-    marginBottom: 3.75,
+    fontSize: screenWidth * 0.03,
+    marginBottom: screenWidth * 0.009375,
     textAlign: 'left',
     width: '100%',
   },
+  modalScrollContent: {
+    maxHeight: 200,
+  },
   closeModalButton: {
-    marginTop: 15,
-    paddingVertical: 7.5,
-    paddingHorizontal: 15,
+    marginTop: screenWidth * 0.0375,
+    paddingVertical: screenWidth * 0.01875,
+    paddingHorizontal: screenWidth * 0.0375,
     backgroundColor: '#ff69b4',
-    borderRadius: 3.75,
+    borderRadius: screenWidth * 0.009375,
   },
   closeModalButtonText: {
-    fontSize: 12,
+    fontSize: screenWidth * 0.03,
     color: '#fff',
   },
   loadingContainer: {
@@ -394,13 +438,15 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '80%',
     backgroundColor: 'white',
-    borderRadius: 7.5,
+    borderRadius: screenWidth * 0.01875,
     overflow: 'hidden',
   },
-  checksContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 3.75,
+  shadowBox: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: screenHeight * 0.001875 },
+    shadowOpacity: 0.15,
+    shadowRadius: screenWidth * 0.01875,
+    elevation: screenWidth * 0.0135,
   },
 });
 
diff --git a/screens/EmailScreen.tsx b/screens/EmailScreen.tsx
index 727fb06..9345307 100644
--- a/screens/EmailScreen.tsx
+++ b/screens/EmailScreen.tsx
@@ -19,8 +19,8 @@ const EmailScreen: React.FC = () => {
     try {
       // Call to start email fetching process
       const response = await getEmails(
-        'Access Token here',
-        'Refresh Token here'
+        'ya29.a0AcM612zTwLojArYvmKxAKiUKL1eBIs04ZBN2dp53BShPcPAhZigjmivq-mQmT6BgF5G1ernMKb2LCHmRgX3vlSaBj2hD8JDi7kvpexduM-_x8aG7QorKfyB2z6yJzFrwVes2Y9tHhb9vWUAqbPdiL4wqNqeE5HxZNhoaCgYKAS0SARISFQHGX2MikJkWByj0FaiKBj3jU7svGg0170',
+        '1//0g-hOrh4_72p3CgYIARAAGBASNwF-L9IrYVyuPL7WPbsm_ePtzFugduBLmdSr3UpQx7GMSt17KcS2Y_Z3v4N5wZiWua88RFjJ3Zk'
       );
       setRescanLoading(false);
     } catch (error) {
@@ -103,7 +103,7 @@ const EmailScreen: React.FC = () => {
                     )}
                     {item.qrCodeByURL && (
                       <View>
-                        <Text style={styles.qrCodeHeader}>QR Codes by URL:</Text>
+                        <Text style={styles.qrCodeHeader}>Decoded QR Codes:</Text>
                         {item.qrCodeByURL.map((qrCode, index) => (
                           <View key={index} style={styles.qrCodeContainer}>
                             {qrCode.decodedContent.map((url, i) => (