Updated SettingScreen

Adjusted QRScannerscreen when calling settingscreen
2024-08-14 17:13:03 +08:00
parent 170997097f
commit 549dc1efde
2 changed files with 132 additions and 41 deletions
--- a/screens/QRScannerScreen.tsx
+++ b/screens/QRScannerScreen.tsx
@@ -158,7 +158,7 @@ const QRScannerScreen: React.FC = () => {
          <Camera
            style={StyleSheet.absoluteFill}
            device={device}
-            isActive={true}
+            isActive={!isSettingsModalVisible} // Disable the camera when settings modal is open
            torch={enableTorch ? 'on' : 'off'}
            codeScanner={codeScanner}
          />
@@ -252,17 +252,22 @@ const styles = StyleSheet.create({
  },
  welcomeText: {
    textAlign: 'center',
-    fontSize: 20,
+    fontSize: 15,
    marginVertical: 10,
    color: 'black',
  },
  cameraContainer: {
-    height: '50%',
+    width: '100%', // Adjust the width as needed
+    height: '45%', // Adjust the height as needed
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    overflow: 'hidden',
+    alignSelf: 'center', // Center the container horizontally
+    marginTop: '10%', // Adjust the top margin to position it vertically in the middle
  },
+  
+  
  settingsButton: {
    position: 'absolute',
    top: screenHeight * 0.05,
@@ -307,15 +312,15 @@ const styles = StyleSheet.create({
  settingsModalContainer: {
    flex: 1,
    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: '#f8f0fc', // Full pink background to match the app's theme
  },
+  
  settingsModalContent: {
-    width: '100%',
-    height: '80%',
-    backgroundColor: 'white',
+    flex: 1,
+    backgroundColor: '#f8f0fc', // Full pink background for the content as well
    padding: screenWidth * 0.05,
-    borderTopLeftRadius: screenWidth * 0.025,
-    borderTopRightRadius: screenWidth * 0.025,
+    borderTopLeftRadius: 0, // Remove border radius to avoid white edges
+    borderTopRightRadius: 0, // Remove border radius to avoid white edges
    alignItems: 'center',
  },
  closeButton: {
--- a/screens/SettingsScreen.tsx
+++ b/screens/SettingsScreen.tsx
@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Linking, Alert, 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 { deleteAllScannedHistories } from '../api/qrCodeAPI'; // Import the API function
+import { fetchAuthSession, getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';
+import { deleteAllScannedHistories, getUserInfo } from '../api/qrCodeAPI'; // Import the API function
 import { Buffer } from 'buffer';
+import { Ionicons } from '@expo/vector-icons';

 function SignOutButton() {
  const { signOut } = useAuthenticator();
@@ -22,6 +23,17 @@ const handleSignInWithRedirect = async () => {
 const SettingsScreen: React.FC = () => {
  const { userAttributes } = useFetchUserAttributes();
  const [googleAccessToken, setGoogleAccessToken] = useState<string | null>(null);
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  const fetchUserEmail = async () => {
+    try {
+      console.log('fetchUserEmail triggered');
+      const userInfo = await getUserInfo();
+      setUserEmail(userInfo.email); // Assuming userInfo has an email property
+    } catch (error) {
+      console.error('Error fetching user email:', error);
+    }
+  };

  useEffect(() => {
    const getGoogleAccessToken = async () => {
@@ -95,6 +107,10 @@ const SettingsScreen: React.FC = () => {
    }
  }, [userAttributes]);

+  useEffect(() => {
+    fetchUserEmail();
+  }, []);
+
  const handleLinkPress = (url: string) => {
    Linking.openURL(url);
  };
@@ -108,28 +124,56 @@ const SettingsScreen: React.FC = () => {
    }
  };

+  const handleSignOut = () => {
+    Alert.alert('Confirm Sign Out', 'Are you sure you want to sign out?', [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Sign Out', onPress: () => signOut() }
+    ]);
+  };
+
+  const handleDeleteAllEmails = () => {
+    Alert.alert('Confirm Delete', 'Are you sure you want to delete all emails?', [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Delete', onPress: () => console.log('Delete all emails') }
+    ]);
+  };
+
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Settings</Text>
  
      {/* Profile Section */}
-          <View style={styles.section}>
-      <Text style={styles.sectionTitle}>Profile</Text>
-      {userAttributes ? (
-        <View>
-          <Text style={styles.userName}>Hello, {userAttributes.name || 'Unknown User'}</Text>
-          {googleAccessToken && (
-            <Text>Google Access Token: {googleAccessToken.substring(0, 10)}...</Text>
-          )}
-          <SignOutButton />
+      <View style={styles.section}>
+        <View style={styles.profileContainer}>
+          <Ionicons name="person-circle" size={60} color="#f41c87" style={styles.profileIcon} />
+          <Text style={styles.userName}>Hello, {userAttributes?.name || 'Unknown User'}</Text>
        </View>
-      ) : (
-        <TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
-          <Text style={styles.loginButtonText}>Log In</Text>
-        </TouchableOpacity>
-      )}
+        {userAttributes ? (
+          <TouchableOpacity style={styles.logoutButton} onPress={handleSignOut}>
+            <Ionicons name="log-out-outline" size={24} color="#fff" style={styles.buttonIcon} />
+            <Text style={styles.logoutButtonText}>Log Out</Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
+            <Ionicons name="log-in-outline" size={24} color="#fff" style={styles.buttonIcon} />
+            <Text style={styles.loginButtonText}>Log In</Text>
+          </TouchableOpacity>
+        )}
      </View>
  
+      <View style={styles.divider} />
+  
+      {/* Email Section */}
+      <View style={styles.section}>
+        <View style={styles.emailRow}>
+          <Text style={styles.sectionTitle}>Email: </Text>
+          <Text style={styles.userEmail}>{userEmail || 'Loading...'}</Text>
+        </View>
+        <TouchableOpacity style={styles.deleteAllButton} onPress={handleDeleteAllEmails}>
+          <Ionicons name="trash-outline" size={24} color="#fff" style={styles.buttonIcon} />
+          <Text style={styles.deleteAllButtonText}>Delete All Email</Text>
+        </TouchableOpacity>
+      </View>
  
      <View style={styles.divider} />
  
@@ -137,6 +181,7 @@ const SettingsScreen: React.FC = () => {
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>History & Bookmarks</Text>
        <TouchableOpacity style={styles.deleteAllButton} onPress={handleDeleteAllHistories}>
+          <Ionicons name="trash-outline" size={24} color="#fff" style={styles.buttonIcon} />
          <Text style={styles.deleteAllButtonText}>Delete All History</Text>
        </TouchableOpacity>
      </View>
@@ -185,27 +230,60 @@ const styles = StyleSheet.create({
    color: '#000',
    marginBottom: 10,
  },
+  profileContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#ffe6f0',
+    padding: 15,
+    borderRadius: 15,
+  },
+  profileIcon: {
+    marginRight: 15,
+  },
  userName: {
+    fontSize: 18,
+    color: '#f41c87',
+    fontWeight: 'bold',
+  },
+  logoutButton: {
+    backgroundColor: '#ff69b4',
+    borderRadius: 25,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    marginVertical: 10,
+    flexDirection: 'row',
+  },
+  logoutButtonText: {
+    color: '#fff',
    fontSize: 16,
-    color: '#000',
-    marginBottom: 10,
  },
  loginButton: {
+    flexDirection: 'row',
    backgroundColor: '#ff69b4',
-    paddingVertical: 8,
+    paddingVertical: 10,
    paddingHorizontal: 20,
-    borderRadius: 20,
+    borderRadius: 25,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'flex-start',
  },
  loginButtonText: {
-    color: '#000',
+    color: '#fff',
    fontSize: 16,
+    marginLeft: 10,
+  },
+  userEmail: {
+    fontSize: 16,
+    color: '#000',
+    marginBottom: 10,
  },
  deleteAllButton: {
-    backgroundColor: '#ff0000', // Red color
-    borderRadius: 25, // Round button
+    flexDirection: 'row',
+    backgroundColor: '#ff0000',
+    borderRadius: 25,
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignItems: 'center',
@@ -217,12 +295,21 @@ const styles = StyleSheet.create({
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  buttonIcon: {
+    marginRight: 10,
  },
  divider: {
    height: 1,
    backgroundColor: '#ccc',
    marginVertical: 20,
  },
+  emailRow: {
+    flexDirection: 'row',
+    alignItems: 'center', // Align the text vertically in the center
+    marginBottom: 10, // Add some spacing below the row
+  },
  linkText: {
    fontSize: 16,
    color: '#0000ff',
@@ -234,7 +321,6 @@ const styles = StyleSheet.create({
    color: '#aaa',
    marginTop: 20,
  },
-  
 });

 export default SettingsScreen;