Added Setting button to QRScannerScreen, call SettingScreen as Modal instead

App.tsx

@@ -5,11 +5,9 @@ import { Provider } from 'react-redux';
 import QRScannerScreen from './screens/QRScannerScreen';
 import HistoryScreen from './screens/HistoryScreen';
 import EmailScreen from './screens/EmailScreen'; // Import the Email screen
-import SettingsScreen from './screens/SettingsScreen'; // Import the Settings screen
 import { QRCodeContext } from './types';
 import CustomTabBar from './components/CustomTabBar';
 import store from './store';
-
 import { withAuthenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 import config from './src/aws-exports';
@@ -21,7 +19,6 @@ Amplify.configure(config);
 
 const Tab = createBottomTabNavigator();
 
-
 const App: React.FC = () => {
   const [scannedData, setScannedData] = useState<string>('');
 

components/CustomTabBar.tsx

@@ -15,9 +15,7 @@ const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigat
       {state.routes.map((route, index) => {
         const { options } = descriptors[route.key];
         const label =
-          route.name === 'Email'
+          options.tabBarLabel !== undefined
-            ? 'Gmail'
-            : options.tabBarLabel !== undefined
             ? options.tabBarLabel
             : options.title !== undefined
             ? options.title

package-lock.json

@@ -36,6 +36,7 @@
         "react-native-gesture-handler": "^2.17.1",
         "react-native-get-random-values": "^1.11.0",
         "react-native-qrcode-svg": "^6.3.1",
+        "react-native-reanimated": "^3.14.0",
         "react-native-safe-area-context": "^4.10.4",
         "react-native-screens": "3.31.1",
         "react-native-svg": "15.2.0",
@@ -2977,7 +2978,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
       "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
@@ -3058,7 +3058,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.7.tgz",
       "integrity": "sha512-tK+0N9yd4j+x/4hxF3F0e0fu/VdcxU18y5SevtyM/PCFlQvXbR0Zmlo2eBrKtVipGNFzpq56o8WsIIKcJFUCRQ==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
@@ -3320,7 +3319,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz",
       "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.7"
       },
@@ -16369,7 +16367,6 @@
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz",
       "integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==",
-      "peer": true,
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",

package.json

@@ -39,6 +39,7 @@
     "react-native-gesture-handler": "^2.17.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-qrcode-svg": "^6.3.1",
+    "react-native-reanimated": "^3.14.0",
     "react-native-safe-area-context": "^4.10.4",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

screens/QRScannerScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Modal } from 'react-native';
 import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
 import { QRCodeContext } from '../types';
 import axios from 'axios'; // For URL calls
@@ -11,8 +11,8 @@ import { useDispatch } from 'react-redux';
 import { RootState, AppDispatch } from '../store';
 import { addQRCode } from '../reducers/qrCodesReducer'; // Assuming you have actions defined for Redux
 import { detectQRCodeType, verifyURL, checkRedirects } from '../api/qrCodeAPI'; // Import utility functions
+import SettingsScreen from './SettingsScreen'; // Import the Settings screen
 
-// Main Function
 const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => {
   const navigation = useNavigation(); // call Navigation bar
   const dispatch = useDispatch<AppDispatch>(); // Use dispatch for Redux actions
@@ -28,6 +28,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
   const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
   const [cameraVisible, setCameraVisible] = useState<boolean>(true); // State to control camera visibility
 
+  // State to control the visibility of the modal
+  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false);
+
   // Add state variables for scan results
   const [secureConnection, setSecureConnection] = useState<boolean | null>(null);
   const [virusTotalCheck, setVirusTotalCheck] = useState<boolean | null>(null);
@@ -53,17 +56,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     console.log("Scan data cleared");
   };
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
-          <Ionicons name="settings" size={24} color="#000" style={{ marginRight: 10 }} />
-        </TouchableOpacity>
-      ),
-    });
-  }, [navigation]);
-
-  // Handle QR Code Payload
   const handlePayload = async (payload: string) => {
     setScanned(true);
     console.log("Scanning Completed. Payload is:", payload);
@@ -95,7 +87,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     console.log("QR code data added to history");
   };
 
-  // Send QR Code Data to Backend Server
   const sendToAPIServer = async (payload: string): Promise<string> => {
     console.log('Sending QR code data to backend:', payload);
 
@@ -115,19 +106,16 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     }
   };
 
-  // Toggle Torch (Flashlight)
   const toggleTorch = () => {
     setEnableTorch((prev) => !prev);
     console.log("Torch toggled:", enableTorch ? "off" : "on");
   };
 
-  // Handle Test Scan
   const handleTestScan = () => {
     handlePayload('TEST123');
     console.log("Test scan executed");
   };
 
-  // Read QR Code from Image
   const readQRFromImage = async () => {
     clearScanDataInternal();
     console.log("Reading QR code from image");
@@ -143,11 +131,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
         const scannedResult = await scanFromURLAsync(result.assets[0].uri);
         if (scannedResult && scannedResult[0] && scannedResult[0].data) {
           handlePayload(scannedResult[0].data);
-          // Not sure why scannedResult.data is undefined but access as array work, KIV
           console.log('QR code data from image:', scannedResult[0].data);
         } else {
           setScannedData("No QR Code Found");
-          //setTimeout(() => setScannedData(""), 4000);
           console.log("No QR code found in the selected image");
           Alert.alert('No QR code found in the selected image.');
         }
@@ -158,7 +144,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     }
   };
 
-  // Clear scan data when screen is focused
   useFocusEffect(
     useCallback(() => {
       setCameraVisible(true);
@@ -206,9 +191,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
         <TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
           <Ionicons name="flashlight" size={24} color="#fff" />
         </TouchableOpacity>
-        {/* <TouchableOpacity onPress={handleTestScan} style={styles.testButton}>
-          <Ionicons name="bug" size={24} color="#fff" />
-        </TouchableOpacity> */}
         <TouchableOpacity onPress={readQRFromImage} style={styles.galleryButton}>
           <Ionicons name="image" size={24} color="#fff" />
         </TouchableOpacity>
@@ -228,6 +210,28 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
           />
         </View>
       )}
+
+      {/* Settings Icon */}
+      <TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>
+        <Ionicons name="settings" size={24} color="#000" />
+      </TouchableOpacity>
+
+      {/* Settings Modal */}
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isSettingsModalVisible}
+        onRequestClose={() => setIsSettingsModalVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <SettingsScreen />
+            <TouchableOpacity onPress={() => setIsSettingsModalVisible(false)} style={styles.closeButton}>
+              <Text style={styles.closeButtonText}>Close</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
     </View>
   );
 };
@@ -275,14 +279,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     borderRadius: 25,
   },
-  testButton: {
-    position: 'absolute',
-    bottom: 1,
-    alignSelf: 'stretch',
-    backgroundColor: '#000',
-    padding: 10,
-    borderRadius: 5,
-  },
   galleryButton: {
     position: 'absolute',
     bottom: 20,
@@ -307,6 +303,36 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     color: 'black',
   },
+  settingsButton: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    zIndex: 2,
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    height: '90%',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    width: '100%', // Adjust the width to cover more space
+    height: '90%', // Adjust the height to cover more space
+    backgroundColor: 'white',
+    padding: 20, // Reduce the padding
+    borderRadius: 10,
+    alignItems: 'center',
+  },  
+  closeButton: {
+    marginTop: 10,
+    padding: 10,
+    backgroundColor: '#ff69b4',
+    borderRadius: 5,
+  },
+  closeButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
 });
-
 export default QRScannerScreen;

screens/SettingsScreen.tsx

@@ -1,142 +1,199 @@
-import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useAuthenticator } from '@aws-amplify/ui-react-native';
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { fetchAuthSession, getCurrentUser, signInWithRedirect } from 'aws-amplify/auth';
+import { useEffect, useState } from 'react';
+import { Buffer } from 'buffer';
 
-// Define custom props for CustomTabBar
+
-interface CustomTabBarProps extends BottomTabBarProps {
+function SignOutButton() {
-  clearScanData: () => void;
+  const { signOut } = useAuthenticator();
+  return <Button title="Sign Out" onPress={signOut} />;
 }
+const handleSignInWithRedirect = async () => {
+  try {
+    await signInWithRedirect();
+  } catch (error) {
+    console.error('Error during sign in:', error);
+  }
+};
+
+const SettingsScreen: React.FC = () => {
+  const { userAttributes } = useFetchUserAttributes();
+  const [googleAccessToken, setGoogleAccessToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getGoogleAccessToken = async () => {
+      try {
+        const currentUser = await getCurrentUser();
+        console.log('Current user:', currentUser);
+        
+        const { tokens } = await fetchAuthSession();
+        const test = await fetchAuthSession();
+        console.log('Tokens:', tokens);
+        console.log("aws access token: ", tokens.accessToken.toString());
+        console.log("test ", test);
+        
+        if (tokens?.idToken) {
+          const idToken = tokens.idToken.toString();
+          console.log('ID Token:', idToken);
+          
+          const parts = idToken.split('.');
+          if (parts.length !== 3) {
+            throw new Error('ID token is not a valid JWT');
+          
+          }
+          
+          const payload = parts[1];
+          const decodedPayload = Buffer.from(payload, 'base64').toString('utf8');
+          console.log('Decoded payload:', decodedPayload);
+          
+          let parsedPayload;
+          try {
+            parsedPayload = JSON.parse(decodedPayload);
+          } catch (parseError) {
+            console.error('Error parsing payload:', parseError);
+            console.error(`Parse error: ${parseError.message}\nPayload: ${decodedPayload}`);
+            return;
+          }
+          
+          console.log('Parsed payload:', parsedPayload);
+          // Options for toLocaleString
+          const options: Intl.DateTimeFormatOptions = {
+            timeZone: 'Asia/Singapore', // UTC+8 timezone
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+          };
+
+          
+          if (parsedPayload["custom:access_token"]) {
+            console.log('Google Access Token:', parsedPayload["custom:access_token"]);
+            console.log('Google Refresh Token: ', parsedPayload["custom:refresh_token"]);
+            
+            setGoogleAccessToken(parsedPayload["custom:access_token"]);
+            console.log("auth_time: ", new Date(parsedPayload.auth_time * 1000).toLocaleString('en-US', options));
+            console.log("iat: ", new Date(parsedPayload.iat * 1000).toLocaleString('en-US', options));
+            console.log("expiry: ", new Date(parsedPayload.exp * 1000).toLocaleString('en-US', options));
+            console.log("date created: ", new Date(1721715837500).toLocaleString('en-US', options));
+
+          } else {
+            console.error('No Google access token found in the payload');
+          }
+          
+        } else {
+          console.error('No ID token found in the session');
+        }
+      } catch (error) {
+        console.error('Error getting Google access token:', error);
+      }
+    };
+
+    if (userAttributes) {
+      getGoogleAccessToken();
+    }
+  }, [userAttributes]);
+  
+  const handleLinkPress = (url: string) => {
+    Linking.openURL(url);
+  };
 
-// Custom tab bar component with typings
-const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
   return (
-    <View style={styles.tabBar}>
+    <View style={styles.container}>
-      {state.routes.map((route, index) => {
+      <Text style={styles.header}>Settings</Text>
-        const { options } = descriptors[route.key];
+      <View style={styles.profileSection}>
-        const label =
+        <Text style={styles.sectionTitle}>Profile</Text>
-          options.tabBarLabel !== undefined
+        {userAttributes ? (
-            ? options.tabBarLabel
+          <View>
-            : options.title !== undefined
+            <Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
-            ? options.title
+            {googleAccessToken && (
-            : route.name;
+              <Text>Google Access Token: {googleAccessToken.substring(0, 10)}...</Text>
-
-        const isFocused = state.index === index;
-
-        // Event handler for tab press
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name);
-          }
-
-          if (route.name === 'QRScanner') {
-            clearScanData();
-            navigation.reset({
-              index: 0,
-              routes: [{ name: 'QRScanner' }],
-            });
-          }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        // Define the icon for each tab
-        const iconName =
-          route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
-
-        return (
-          <TouchableOpacity
-            key={index}
-            accessibilityRole="button"
-            accessibilityState={isFocused ? { selected: true } : {}}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={styles.tabButton}
-          >
-            {route.name === 'Settings' ? (
-              <MaterialIcons name="email" size={24} color={isFocused ? '#ff69b4' : '#222'} />
-            ) : (
-              <Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
             )}
-            {/* Check if label is a string before rendering */}
+            <SignOutButton />
-            {typeof label === 'string' && route.name !== 'Settings' ? (
+          </View>
-              <Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
+        ) : (
-                {label}
+          <TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
-              </Text>
+            <Text style={styles.loginButtonText}>Log In</Text>
-            ) : null}
           </TouchableOpacity>
-        );
+        )}
-      })}
+      </View>
-      <View style={styles.floatingButton}>
+      <View style={styles.divider} />
-        <TouchableOpacity
+      <View style={styles.aboutUsSection}>
-          onPress={() => {
+        <Text style={styles.sectionTitle}>About Us</Text>
-            clearScanData();
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/')}>
-            navigation.reset({
+          <Text style={styles.linkText}>safeqr.github.io/marketing</Text>
-              index: 0,
+        </TouchableOpacity>
-              routes: [{ name: 'QRScanner' }],
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/privacy-policy')}>
-            });
+          <Text style={styles.linkText}>Privacy Policy</Text>
-          }}
+        </TouchableOpacity>
-        >
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/terms-of-service')}>
-          <Ionicons name="camera" size={28} color="#fff" />
+          <Text style={styles.linkText}>Terms Of Service</Text>
         </TouchableOpacity>
       </View>
+      <Text style={styles.versionText}>Version 1.2</Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  tabBar: {
+  container: {
-    position: 'absolute',
-    bottom: 20,
-    left: 20,
-    right: 20,
-    height: 70,
-    borderRadius: 35,
-    backgroundColor: '#fff',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 10,
-    elevation: 5,
-  },
-  tabButton: {
     flex: 1,
-    justifyContent: 'center',
+    backgroundColor: '#f8f0fc',
-    alignItems: 'center',
+    padding: 10, // Reduce padding
+    width: '100%', // Increase width to fill the modal
   },
-  floatingButton: {
+  header: {
-    position: 'absolute',
+    fontSize: 24,
-    bottom: 30,
+    fontWeight: 'bold',
-    left: '50%',
+    color: '#ff69b4',
-    marginLeft: -30,
+    marginBottom: 20,
-    width: 60,
+    textAlign: 'center', // Center the header text
-    height: 60,
+  },
-    borderRadius: 30,
+  profileSection: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 10,
+  },
+  loginButton: {
     backgroundColor: '#ff69b4',
-    justifyContent: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+    borderRadius: 20,
     alignItems: 'center',
-    shadowColor: '#000',
+    justifyContent: 'center',
-    shadowOpacity: 0.1,
+    alignSelf: 'flex-start',
-    shadowOffset: { width: 0, height: 2 },
+  },
-    shadowRadius: 5,
+  loginButtonText: {
-    elevation: 3,
+    color: '#000',
+    fontSize: 16,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#ccc',
+    marginVertical: 20,
+  },
+  aboutUsSection: {
+    marginBottom: 20,
+  },
+  linkText: {
+    fontSize: 16,
+    color: '#0000ff',
+    marginBottom: 10,
+  },
+  versionText: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: '#aaa',
+    marginTop: 20,
   },
 });
 
-export default CustomTabBar;
+
+export default SettingsScreen;