Update Logo and Scanned DataBox Logic

2024-08-10 22:04:05 +08:00
parent ca4a92f5f0
commit b21e270f56
4 changed files with 89 additions and 102 deletions
--- a/assets/SafeQR_Logo
+++ b/assets/SafeQR_Logo
--- 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<ScannedDataBoxProps> = ({ 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<ScannedDataBoxProps> = ({ 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<ScannedDataBoxProps> = ({ 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<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
    }
  };

+  // Get icon based on the number of redirects
  const getSheildIcon = () => {
    if (redirects === 0) {
      return <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />;
@@ -86,11 +91,13 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ 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<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
  };

  return (
-
-    
    <View style={styles.dataBox}>
-      
      <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
        <Ionicons name="close-circle-outline" size={screenWidth * 0.05} color="#ff69b4" />
      </TouchableOpacity>
@@ -146,26 +150,33 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
              <>
                <SimpleLineIcons name="shield" size={screenWidth * 0.045} color="#ff0000" />
                <Text style={styles.moreInfoButtonText}>Not Secure</Text>
-
-
-                
              </>
            )}
          </View>
+
+          {/* Security Headers Button */}
+          {securityHeaders.length > 0 ? (
+  <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}>
+    <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />
+    <Text style={styles.moreInfoButtonText}>Security Headers</Text>
+    <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
+  </TouchableOpacity>
+) : (
+  <View style={styles.displayCheck}>
+    <MaterialCommunityIcons name="shield-off" size={screenWidth * 0.045} color="#ffa500" />
+    <Text style={styles.moreInfoButtonText}>No Security Headers</Text>
+  </View>
+)}
+
+
+          {/* Redirects Button */}
          <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsRedirectModalVisible(true)}>
            {getSheildIcon()}
            <Text style={styles.moreInfoButtonText}>Redirects</Text>
            <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
          </TouchableOpacity>

-
-
-          <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}>
-        <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#ff69b4" />
-        <Text style={styles.moreInfoButtonText}>Security Headers</Text>
-        <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
-      </TouchableOpacity>
-
+          {/* Security Headers Modal */}
          <Modal
            visible={isModalVisible}
            transparent={true}
@@ -185,6 +196,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
            </View>
          </Modal>

+          {/* Redirect Chain Modal */}
          <Modal
            visible={isRedirectModalVisible}
            transparent={true}
@@ -203,11 +215,10 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
              </View>
            </View>
          </Modal>
-
        </>
-        
      )}

+      {/* SMS Type */}
      {type === 'SMS' && (
        <>
          <Text style={styles.moreInfoButton}>Recipient Phone Number: {details.phone || 'Undefined'}</Text>
@@ -215,21 +226,15 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
        </>
      )}

+      {/* TEXT Type */}
      {type === 'TEXT' && (
        <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsContentModalVisible(true)}>
-          <Text >
-            Content: {truncateContent(contents, 30)} {/* Truncated content further */}
-          </Text>
+          <Text>Content: {truncateContent(contents, 30)}</Text>
          <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" />
-
-
-
-          
        </TouchableOpacity>
      )}

-
-      
+      {/* Full Content Modal */}
      <Modal
        visible={isContentModalVisible}
        transparent={true}
@@ -249,16 +254,17 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
        </View>
      </Modal>

-    
-      <View style={styles.iconContainer}>
+      {/* URL Open Button */}
      {type === 'URL' && (
+        <View style={styles.iconContainer}>
          <TouchableOpacity style={styles.iconButton} onPress={() => openWebView(contents)}>
            <Ionicons name="open" size={screenWidth * 0.045} color="#2196F3" />
            <Text style={styles.iconText}>Open</Text>
          </TouchableOpacity>
-        )}
        </View>
+      )}

+      {/* WebView Modal */}
      <Modal
        visible={isWebViewVisible}
        transparent={true}
@@ -323,8 +329,6 @@ const styles = StyleSheet.create({
  detailsSection: {
    flex: 2,
  },
-  
-  
  timestampText: {
    fontSize: screenWidth * 0.03,
    color: '#000',
@@ -345,12 +349,6 @@ const styles = StyleSheet.create({
    color: '#000',
    marginLeft: screenWidth * 0.01875,
  },
-  checksText: {
-    fontSize: screenWidth * 0.03,
-    color: '#000',
-    marginBottom: screenWidth * 0.009375,
-    marginLeft: screenWidth * 0.01875,
-  },
  iconContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
@@ -367,12 +365,6 @@ const styles = StyleSheet.create({
    textAlign: 'center',
    fontSize: screenWidth * 0.03,
  },
-  moreInfoText: {
-    fontSize: screenWidth * 0.03375,
-    fontWeight: 'bold',
-    color: '#000',
-    marginVertical: screenWidth * 0.01875,
-  },
  moreInfoButton: {
    flexDirection: 'row',
    alignItems: 'center',
@@ -393,19 +385,6 @@ const styles = StyleSheet.create({
    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: screenWidth * 0.01875,
--- a/screens/EmailScreen.tsx
+++ b/screens/EmailScreen.tsx
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert, Animated } from 'react-native';
+import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert, Animated, Dimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { getEmails, getScannedEmails, getUserInfo } from '../api/qrCodeAPI';

+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
 const EmailScreen: React.FC = () => {
  const [selectedMessage, setSelectedMessage] = useState(null);
  const [emailData, setEmailData] = useState(null);
@@ -12,6 +15,7 @@ const EmailScreen: React.FC = () => {
  const [userEmail, setUserEmail] = useState('');
  const [bannerOpacity] = useState(new Animated.Value(0));
  
+
  useEffect(() => {
    startPollingForScannedEmails();
    fetchUserEmail();
@@ -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',
--- 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,
@@ -283,6 +283,7 @@ const styles = StyleSheet.create({
    elevation: 5,
 },

+
  settingsModal: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
  },