isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Recommit, without build falire (native_modules.gradle' line: 401, finished with non-zero exit value 1)

Browse Source
This commit is contained in:
Isky
2024-08-03 23:07:41 +08:00
parent 804eb6f024
commit 7f7f686ef8
6 changed files with 404 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
screens/HistoryScreen.tsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback, useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, BackHandler, Modal } from 'react-native';
import React, { useCallback, useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Modal, ActivityIndicator } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import ScannedDataBox from '../components/ScannedDataBox';
import { Ionicons } from '@expo/vector-icons';
@@ -20,6 +20,9 @@ const HistoryScreen: React.FC = () => {
const [historiesLoading, setHistoriesLoading] = useState(false);
const [historiesError, setHistoriesError] = useState<string | null>(null);
const [selectedQrCodeId, setSelectedQrCodeId] = useState<string | null>(null);
const fetchHistories = useCallback(async () => {
if (!userAttributes?.sub) return;
@@ -27,8 +30,6 @@ const HistoryScreen: React.FC = () => {
setHistoriesLoading(true);
const historiesData = await getScannedHistories();
dispatch(setScannedHistories(historiesData));
setHistoriesLoading(false);
} catch (error: any) {
setHistoriesError(error.message);
} finally {
@@ -50,43 +51,17 @@ const HistoryScreen: React.FC = () => {
}, [dispatch, userAttributes]);
const [selectedData, setSelectedData] = useState<string | null>(null);
const [selectedScanResult, setSelectedScanResult] = useState<any | null>(null);
const [selectedType, setSelectedType] = useState<string | null>(null);
useEffect(() => {
const backAction = () => {
if (selectedData) {
setSelectedData(null);
setSelectedScanResult(null);
setSelectedType(null);
return true;
}
return false;
};
const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
return () => backHandler.remove();
}, [selectedData]);
const filteredQrCodes = showBookmarks ? histories.filter(qr => qr.bookmarked) : histories;
const handleItemPress = (item: QRCodeType) => {
// setSelectedData(item.data);
// setSelectedScanResult(item.scanResult);
// setSelectedType(item.type);
//setSelectedData(item.contents);
setSelectedType(item.data.type);
console.log('Selected QR code data:', item);
// console.log('Selected QR code type:', item.type);
setSelectedQrCodeId(item.data.id || null);
};
const clearSelectedData = () => {
setSelectedData(null);
setSelectedScanResult(null);
setSelectedType(null);
setSelectedQrCodeId(null);
};
return (
<View style={styles.container}>
@@ -99,51 +74,57 @@ const HistoryScreen: React.FC = () => {
<Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
</TouchableOpacity>
</View>
{/* Display scanned data details */}
{selectedData && (
<View style={styles.scannedDataBoxContainer}>
<ScannedDataBox data={selectedData} scanResult={selectedScanResult} dataType={selectedType} clearScanData={clearSelectedData} />
</View>
{/* Loading Indicator */}
{historiesLoading && <ActivityIndicator size="large" color="#ff69b4" />}
{/* Display message when there are no histories or bookmarks */}
{!historiesLoading && filteredQrCodes.length === 0 && (
<Text style={styles.emptyMessage}>
{showBookmarks ? 'No bookmarks available' : 'No history available'}
</Text>
)}
{/* Display scanned data details */}
{selectedQrCodeId && (
<View style={styles.scannedDataBoxContainer}>
<ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedData} />
</View>
)}
{/* List of QR codes */}
<FlatList
data={filteredQrCodes}
renderItem={({ item }) => {
// console.log('Rendering QR code item:', item);
return (
<View style={styles.itemContainer}>
<View style={styles.itemLeft}>
<TouchableOpacity onPress={() => handleItemPress(item)} style={styles.itemContent}>
<Image source={require('../assets/ScanIcon3.png')} style={styles.scanIcon} />
<View style={styles.textContainer}>
<Text style={styles.dataText} numberOfLines={1} ellipsizeMode="tail">{item.data.contents}</Text>
</View>
</TouchableOpacity>
<Text style={styles.dateText}>{new Date(item.data.createdAt).toLocaleDateString('en-GB', {
day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'})}
</Text>
</View>
<View style={styles.itemRight}>
<TouchableOpacity onPress={() => dispatch(toggleBookmark({ userId: userAttributes.sub, qrCode: item}))}>
<Ionicons name={item.bookmarked ? "bookmark" : "bookmark-outline"} size={24} color={item.bookmarked ? "#2196F3" : "#ff69b4"} />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setQrCodeToDelete(item.data.id);
setIsModalVisible(true);
}}>
<Ionicons name="close-circle-outline" size={24} color="#ff69b4" />
</TouchableOpacity>
</View>
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<View style={styles.itemLeft}>
<TouchableOpacity onPress={() => handleItemPress(item)} style={styles.itemContent}>
<Image source={require('../assets/ScanIcon3.png')} style={styles.scanIcon} />
<View style={styles.textContainer}>
<Text style={styles.dataText} numberOfLines={1} ellipsizeMode="tail">{item.data.contents}</Text>
</View>
</TouchableOpacity>
<Text style={styles.dateText}>{new Date(item.data.createdAt).toLocaleDateString('en-GB', {
day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'})}
</Text>
</View>
);
}}
keyExtractor={(item, index) => {
//console.log(item, index);
return index.toString();
}}
<View style={styles.itemRight}>
<TouchableOpacity onPress={() => dispatch(toggleBookmark({ userId: userAttributes.sub, qrCode: item}))}>
<Ionicons name={item.bookmarked ? "bookmark" : "bookmark-outline"} size={24} color={item.bookmarked ? "#2196F3" : "#ff69b4"} />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setQrCodeToDelete(item.data.id);
setIsModalVisible(true);
}}>
<Ionicons name="close-circle-outline" size={24} color="#ff69b4" />
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={styles.flatListContent}
/>
{/* Modal for delete confirmation */}
<Modal
transparent={true}
@@ -234,6 +215,15 @@ const styles = StyleSheet.create({
flatListContent: {
paddingBottom: 100,
},
emptyMessage: {
textAlign: 'center',
fontSize: 16,
color: '#ff69b4',
marginVertical: 20,
},
scannedDataBoxContainer: {
marginBottom: 20,
},
modalContainer: {
flex: 1,
justifyContent: 'center',
@@ -271,9 +261,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: '#000',
},
scannedDataBoxContainer: {
marginBottom: 20,
},
});
export default HistoryScreen;
export default HistoryScreen;

211
screens/QRScannerScreen.tsx
View File

@@ -1,40 +1,29 @@
import React, { useState, useEffect, useContext, useCallback } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Modal } from 'react-native';
import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Modal, TouchableWithoutFeedback } from 'react-native';
import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
import { QRCodeContext } from '../types';
import axios from 'axios'; // For URL calls
import { Ionicons } from '@expo/vector-icons'; // For icons
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import ScannedDataBox from '../components/ScannedDataBox';
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
import { AppDispatch } from '../store';
import { addQRCode } from '../reducers/qrCodesReducer';
import { scanQRCode, getUserInfo } from '../api/qrCodeAPI';
import SettingsScreen from './SettingsScreen';
const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => {
const navigation = useNavigation(); // call Navigation bar
const navigation = useNavigation(); // Navigation hook
const dispatch = useDispatch<AppDispatch>(); // Use dispatch for Redux actions
const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen
const qrCodeContext = useContext(QRCodeContext); // From ./types.ts
const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
// State variables
const [showSplash, setShowSplash] = useState<boolean>(true); // State for splash screen visibility
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [scanned, setScanned] = useState<boolean>(false);
const [scannedData, setScannedData] = useState<string>(''); // State for QR scanned Data
const [dataType, setDataType] = useState<string>(''); // State for data type
const [qrCodeId, setQRCodeId] = useState<string | null>(null); // State for QR code ID
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);
const [redirects, setRedirects] = useState<number | null>(null);
const [isScannedDataBoxVisible, setIsScannedDataBoxVisible] = useState<boolean>(false); // State for ScannedDataBox modal visibility
const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false); // State for modal visibility
// Request Camera Permission and initialize the app
useEffect(() => {
@@ -43,79 +32,71 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
setHasPermission(status === 'granted');
setShowSplash(false);
console.log("Camera permissions initialized");
// Fetch and log user information
fetchUserInformation();
};
initializeApp();
}, []);
// Focus effect to enable camera and clear data on focus
useFocusEffect(
useCallback(() => {
setCameraVisible(true);
clearScanDataInternal();
console.log("Screen focused, scan data cleared and camera enabled");
return () => {
setCameraVisible(false);
console.log("Screen unfocused, camera disabled");
};
}, [navigation])
);
// Clear Scan Data
const clearScanDataInternal = () => {
setScannedData('');
setScanned(false);
setDataType('');
setQRCodeId(null);
console.log("Scan data cleared");
};
// Handle scanning of payload (QR code data) and get the QR-ID
const handlePayload = async (payload: string) => {
setScanned(true);
console.log("Scanning Completed. Payload is:", payload);
const type = await detectQRCodeType(payload);
const secureConnectionResult = await verifyURL(payload);
const redirectResult = await checkRedirects(payload);
setSecureConnection(secureConnectionResult.isSecure);
setVirusTotalCheck(!secureConnectionResult.isMalicious); // Assuming you have virusTotalCheck logic integrated here
setRedirects(redirectResult.redirects);
const qrCode = {
data: payload,
type,
scanResult: {
secureConnection: secureConnectionResult.isSecure,
virusTotalCheck: !secureConnectionResult.isMalicious,
redirects: redirectResult.redirects
},
bookmarked: false // by default
};
setScannedData(payload);
console.log("Payload received:", payload);
console.log("Type received from server:", type);
setDataType(type);
dispatch(addQRCode(qrCode)); // Dispatch action to save QR code data
console.log("QR code data added to history");
};
const sendToAPIServer = async (payload: string): Promise<string> => {
console.log('Sending QR code data to backend:', payload);
console.info("Decoded QR Code, Payload is: ", payload);
try {
const response = await axios.post('http://192.168.1.30:8080/v1/qrcodetypes/scan', {
data: payload,
}, {
headers: {
'Content-Type': 'application/json',
},
});
console.log('Response from backend:', response.data);
return response.data;
const response = await scanQRCode(payload);
const qrCodeId = response.qrcode.data.id;
// Store the QR code ID for later use
setQRCodeId(qrCodeId);
setIsScannedDataBoxVisible(true); // Show ScannedDataBox modal
// Optionally, show a message or perform another action
console.log("QR code scanned successfully, ID:", qrCodeId);
} catch (error) {
console.error('Error detecting QR code type:', error);
return 'UNKNOWN';
console.error("Error scanning QR code:", error);
}
};
// Fetch and log user information
const fetchUserInformation = async () => {
try {
const userInfo = await getUserInfo();
console.log('User Info:', userInfo);
} catch (error) {
console.error('Error fetching user information:', error);
}
};
// Toggle torch (flashlight) on/off
const toggleTorch = () => {
setEnableTorch((prev) => !prev);
console.log("Torch toggled:", enableTorch ? "off" : "on");
};
const handleTestScan = () => {
handlePayload('TEST123');
console.log("Test scan executed");
};
// Read QR from image
const readQRFromImage = async () => {
clearScanDataInternal();
console.log("Reading QR code from image");
@@ -133,30 +114,15 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
handlePayload(scannedResult[0].data);
console.log('QR code data from image:', scannedResult[0].data);
} else {
setScannedData("No QR Code Found");
console.log("No QR code found in the selected image");
Alert.alert('No QR code found in the selected image.');
}
} catch (error) {
console.error('Error scanning QR code from image:', error);
Alert.alert('Failed to scan QR code from image.');
}
}
};
useFocusEffect(
useCallback(() => {
setCameraVisible(true);
clearScanDataInternal();
console.log("Screen focused, scan data cleared and camera enabled");
return () => {
setCameraVisible(false);
console.log("Screen unfocused, camera disabled");
};
}, [navigation])
);
// Conditional rendering based on state
if (showSplash) {
return (
<View style={styles.splashContainer}>
@@ -175,7 +141,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
return (
<View style={styles.container}>
<Text style={styles.headerText}>SafeQR v0.89</Text>
<Text style={styles.headerText}>SafeQR</Text>
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
<View style={styles.cameraContainer}>
@@ -196,20 +162,16 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
</TouchableOpacity>
</View>
{scannedData !== '' && (
<View style={styles.scannedDataBox}>
<ScannedDataBox
data={scannedData}
dataType={dataType}
clearScanData={clearScanDataInternal}
scanResult={{
secureConnection,
virusTotalCheck,
redirects
}}
/>
</View>
)}
{/* Scanned Data Box */}
{isScannedDataBoxVisible && (
<View style={styles.scannedDataBoxPopup}>
<ScannedDataBox
qrCodeId={qrCodeId}
clearScanData={() => setIsScannedDataBoxVisible(false)}
/>
</View>
)}
{/* Settings Icon */}
<TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>
@@ -222,9 +184,10 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
transparent={true}
visible={isSettingsModalVisible}
onRequestClose={() => setIsSettingsModalVisible(false)}
style={styles.settingsModal}
>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<View style={styles.settingsModalContainer}>
<View style={styles.settingsModalContent}>
<SettingsScreen />
<TouchableOpacity onPress={() => setIsSettingsModalVisible(false)} style={styles.closeButton}>
<Text style={styles.closeButtonText}>Close</Text>
@@ -290,13 +253,18 @@ const styles = StyleSheet.create({
backgroundColor: '#000',
borderRadius: 25,
},
scannedDataBox: {
scannedDataBoxPopup: {
position: 'absolute',
top: '10%',
left: '5%',
right: '5%',
zIndex: 2,
backgroundColor: 'white', // Optional: Set a background color if needed
borderRadius: 10, // Optional: Add rounded corners
padding: 10, // Optional: Add padding around the content
elevation: 5, // Optional: Add elevation for shadow effect
},
welcomeText: {
textAlign: 'center',
fontSize: 20,
@@ -309,21 +277,23 @@ const styles = StyleSheet.create({
right: 20,
zIndex: 2,
},
modalContainer: {
flex: 1,
justifyContent: 'center',
height: '90%',
alignItems: 'center',
settingsModal: {
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
},
settingsModalContainer: {
flex: 2,
justifyContent: 'center', // Center the modal vertically
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
settingsModalContent: {
width: '100%',
height: '80%', // Increase the height to make the modal taller
backgroundColor: 'white',
padding: 20, // Reduce the padding
borderRadius: 10,
padding: 20,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
alignItems: 'center',
},
},
closeButton: {
marginTop: 10,
padding: 10,
@@ -333,6 +303,7 @@ const styles = StyleSheet.create({
closeButtonText: {
color: 'white',
fontWeight: 'bold',
},
}
});
export default QRScannerScreen;
export default QRScannerScreen;

106
screens/SettingsScreen.tsx
View File

@@ -1,16 +1,16 @@
import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
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 { useEffect, useState } from 'react';
import { deleteAllScannedHistories } from '../api/qrCodeAPI'; // Import the API function
import { Buffer } from 'buffer';
import { createDrawerNavigator } from '@react-navigation/drawer';
function SignOutButton() {
const { signOut } = useAuthenticator();
return <Button title="Sign Out" onPress={signOut} />;
}
const handleSignInWithRedirect = async () => {
try {
await signInWithRedirect();
@@ -42,7 +42,6 @@ const SettingsScreen: React.FC = () => {
const parts = idToken.split('.');
if (parts.length !== 3) {
throw new Error('ID token is not a valid JWT');
}
const payload = parts[1];
@@ -70,7 +69,6 @@ const SettingsScreen: React.FC = () => {
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"]);
@@ -84,7 +82,6 @@ const SettingsScreen: React.FC = () => {
} else {
console.error('No Google access token found in the payload');
}
} else {
console.error('No ID token found in the session');
}
@@ -97,32 +94,57 @@ const SettingsScreen: React.FC = () => {
getGoogleAccessToken();
}
}, [userAttributes]);
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.');
}
};
return (
<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>
)}
<SignOutButton />
</View>
) : (
<TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
<Text style={styles.loginButtonText}>Log In</Text>
</TouchableOpacity>
)}
{/* 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>
) : (
<TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
<Text style={styles.loginButtonText}>Log In</Text>
</TouchableOpacity>
)}
</View>
<View style={styles.divider} />
<View style={styles.aboutUsSection}>
{/* History & Bookmarks Section */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>History & Bookmarks</Text>
<TouchableOpacity style={styles.deleteAllButton} onPress={handleDeleteAllHistories}>
<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>
@@ -134,6 +156,7 @@ const SettingsScreen: React.FC = () => {
<Text style={styles.linkText}>Terms Of Service</Text>
</TouchableOpacity>
</View>
<Text style={styles.versionText}>Version 1.2</Text>
</View>
);
@@ -143,17 +166,17 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 10, // Reduce padding
width: '100%', // Increase width to fill the modal
padding: 10,
width: '100%',
},
header: {
fontSize: 24,
fontWeight: 'bold',
color: '#ff69b4',
marginBottom: 20,
textAlign: 'center', // Center the header text
textAlign: 'center',
},
profileSection: {
section: {
marginBottom: 20,
},
sectionTitle: {
@@ -162,6 +185,11 @@ const styles = StyleSheet.create({
color: '#000',
marginBottom: 10,
},
userName: {
fontSize: 16,
color: '#000',
marginBottom: 10,
},
loginButton: {
backgroundColor: '#ff69b4',
paddingVertical: 8,
@@ -175,14 +203,26 @@ const styles = StyleSheet.create({
color: '#000',
fontSize: 16,
},
deleteAllButton: {
backgroundColor: '#ff0000', // Red color
borderRadius: 25, // Round button
paddingVertical: 10,
paddingHorizontal: 20,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'flex-start',
marginVertical: 10,
},
deleteAllButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
divider: {
height: 1,
backgroundColor: '#ccc',
marginVertical: 20,
},
aboutUsSection: {
marginBottom: 20,
},
linkText: {
fontSize: 16,
color: '#0000ff',
@@ -194,7 +234,7 @@ const styles = StyleSheet.create({
color: '#aaa',
marginTop: 20,
},
});
export default SettingsScreen;
export default SettingsScreen;