Added Setting button to QRScannerScreen, call SettingScreen as Modal instead

2024-07-28 22:21:24 +08:00
parent b2ff312537
commit 48144f88b5
6 changed files with 240 additions and 164 deletions
--- a/App.tsx
+++ b/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>('');

--- a/components/CustomTabBar.tsx
+++ b/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'
-            ? 'Gmail'
-            : options.tabBarLabel !== undefined
+          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/screens/QRScannerScreen.tsx
+++ b/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;
--- a/screens/SettingsScreen.tsx
+++ b/screens/SettingsScreen.tsx
@@ -1,142 +1,199 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
+import { useAuthenticator } from '@aws-amplify/ui-react-native';
+import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
+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 {
-  clearScanData: () => void;
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button title="Sign Out" onPress={signOut} />;
 }
-
-// Custom tab bar component with typings
-const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
-  return (
-    <View style={styles.tabBar}>
-      {state.routes.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
-
-        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 handleSignInWithRedirect = async () => {
+  try {
+    await signInWithRedirect();
+  } catch (error) {
+    console.error('Error during sign in:', error);
  }
 };

-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
+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'
          };

-        // Define the icon for each tab
-        const iconName =
-          route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
+          
+          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);
+  };

  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'} />
+    <View style={styles.container}>
+      <Text style={styles.header}>Settings</Text>
+      <View style={styles.profileSection}>
+        <Text style={styles.sectionTitle}>Profile</Text>
+        {userAttributes ? (
+          <View>
+            <Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
+            {googleAccessToken && (
+              <Text>Google Access Token: {googleAccessToken.substring(0, 10)}...</Text>
            )}
-            {/* Check if label is a string before rendering */}
-            {typeof label === 'string' && route.name !== 'Settings' ? (
-              <Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
-                {label}
-              </Text>
-            ) : null}
+            <SignOutButton />
+          </View>
+        ) : (
+          <TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
+            <Text style={styles.loginButtonText}>Log In</Text>
          </TouchableOpacity>
-        );
-      })}
-      <View style={styles.floatingButton}>
-        <TouchableOpacity
-          onPress={() => {
-            clearScanData();
-            navigation.reset({
-              index: 0,
-              routes: [{ name: 'QRScanner' }],
-            });
-          }}
-        >
-          <Ionicons name="camera" size={28} color="#fff" />
+        )}
+      </View>
+      <View style={styles.divider} />
+      <View style={styles.aboutUsSection}>
+        <Text style={styles.sectionTitle}>About Us</Text>
+        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/')}>
+          <Text style={styles.linkText}>safeqr.github.io/marketing</Text>
+        </TouchableOpacity>
+        <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')}>
+          <Text style={styles.linkText}>Terms Of Service</Text>
        </TouchableOpacity>
      </View>
+      <Text style={styles.versionText}>Version 1.2</Text>
    </View>
  );
 };

 const styles = StyleSheet.create({
-  tabBar: {
-    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: {
+  container: {
    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: '#f8f0fc',
+    padding: 10, // Reduce padding
+    width: '100%', // Increase width to fill the modal
  },
-  floatingButton: {
-    position: 'absolute',
-    bottom: 30,
-    left: '50%',
-    marginLeft: -30,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+  header: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#ff69b4',
+    marginBottom: 20,
+    textAlign: 'center', // Center the header text
+  },
+  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',
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 5,
-    elevation: 3,
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+  },
+  loginButtonText: {
+    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;