340 lines
10 KiB
TypeScript
340 lines
10 KiB
TypeScript
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, signOut } from 'aws-amplify/auth';
|
|
import { deleteAllEmails, deleteAllScannedHistories, getUserInfo } from '../api/qrCodeAPI'; // Import the API function
|
|
import { Buffer } from 'buffer';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
|
|
function SignOutButton() {
|
|
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);
|
|
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 () => {
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
fetchUserEmail();
|
|
}, []);
|
|
|
|
const handleLinkPress = (url: string) => {
|
|
Linking.openURL(url);
|
|
};
|
|
|
|
const handleDeleteAllHistories = async () => {
|
|
try {
|
|
const response = await deleteAllScannedHistories();
|
|
Alert.alert('Success', response.message);
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Failed to delete histories. Please try again.');
|
|
}
|
|
};
|
|
|
|
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 = async () => {
|
|
Alert.alert('Confirm Delete', 'Are you sure you want to delete all emails?', [
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Delete',
|
|
onPress: async () => {
|
|
try {
|
|
const response = await deleteAllEmails();
|
|
Alert.alert('Success', response.message);
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Failed to delete all emails. Please try again.');
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
};
|
|
|
|
|
|
const userName = userAttributes?.name || (userEmail ? userEmail.split('@')[0] : 'Unknown User');
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.header}>Settings</Text>
|
|
|
|
{/* Profile Section */}
|
|
<View style={styles.section}>
|
|
<View style={styles.profileContainer}>
|
|
<Ionicons name="person-circle" size={60} color="#f41c87" style={styles.profileIcon} />
|
|
<Text style={styles.userName}>Hello, {userName}</Text>
|
|
</View>
|
|
{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} />
|
|
|
|
{/* History & Bookmarks Section */}
|
|
<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>
|
|
|
|
<View style={styles.divider} />
|
|
|
|
{/* About Us Section */}
|
|
<View style={styles.section}>
|
|
<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/marketing/#/privacy-policy')}>
|
|
<Text style={styles.linkText}>Privacy Policy</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/#/terms-of-service')}>
|
|
<Text style={styles.linkText}>Terms Of Service</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<Text style={styles.versionText}>Version 1.0</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f0fc',
|
|
padding: 10,
|
|
width: '100%',
|
|
},
|
|
header: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#ff69b4',
|
|
marginBottom: 20,
|
|
textAlign: 'center',
|
|
},
|
|
section: {
|
|
marginBottom: 20,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
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,
|
|
},
|
|
loginButton: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#ff69b4',
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 20,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
alignSelf: 'flex-start',
|
|
},
|
|
loginButtonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
marginLeft: 10,
|
|
},
|
|
userEmail: {
|
|
fontSize: 16,
|
|
color: '#000',
|
|
marginBottom: 10,
|
|
},
|
|
deleteAllButton: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#f41c87',
|
|
borderRadius: 25,
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 20,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
alignSelf: 'flex-start',
|
|
marginVertical: 10,
|
|
},
|
|
deleteAllButtonText: {
|
|
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',
|
|
marginBottom: 10,
|
|
},
|
|
versionText: {
|
|
textAlign: 'center',
|
|
fontSize: 14,
|
|
color: '#aaa',
|
|
marginTop: 20,
|
|
},
|
|
});
|
|
|
|
export default SettingsScreen;
|