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

Refactor QRScannerScreen and ScannedDataBox, alot of broken functions

Browse Source
This commit is contained in:
Isky
2024-06-30 01:32:39 +08:00
parent 7b396073f7
commit 0f9453ef45
3 changed files with 137 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
README.md
View File

@@ -1,21 +1,35 @@
# SafeQR Code Scanner # SafeQR Code Scanner
SafeQR is a React Native application that allows users to scan QR codes using their mobile device's camera. The app provides a user-friendly interface with a bottom navigation bar for easy access to different sections such as QR Scanner, History, Settings, and Profile. SafeQR Code Scanner is a React Native application that allows users to scan QR codes securely. The app includes features such as scanning QR codes using the camera or image gallery, checking the security of URLs via VirusTotal, bookmarking scanned QR codes, and viewing detailed scan results.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [File Structure](#file-structure)
- [Components](#components)
- [Navigation](#navigation)
- [Screens](#screens)
- [Dependencies](#dependencies)
- [Contributing](#contributing)
- [License](#license)
## Features ## Features
- **QR Code Scanning**: Scan QR codes and display the scanned data. - Scan QR codes using the device camera
- **History**: (Placeholder) View the history of scanned QR codes. - Scan QR codes from the image gallery
- **Settings**: (Placeholder) Adjust application settings. - Check the security of scanned URLs via VirusTotal
- **Profile**: (Placeholder) View and edit user profile. - Bookmark and manage scanned QR codes
- View detailed scan results and security headers
## Installation ## Installation
1. **Clone the Repository**: 1. **Clone the Repository**:
```sh ```sh
git clone https://github.com/safeqr/SafeQR_Front_End_Mobile.git git clone https://github.com/yourusername/safeqr.git
cd SafeQR_Front_End_Mobile cd safeqr
``` ```
2. **Install Dependencies**: 2. **Install Dependencies**:
@@ -24,75 +38,94 @@ SafeQR is a React Native application that allows users to scan QR codes using th
npm install npm install
``` ```
3. **Install Expo CLI** (if not already installed):
3. **Start the Application**:
```sh
npx expo start
```
3. **Install Expo CLI** (if step 3 causes expo error):
```sh ```sh
npm install -g expo-cli npm install -g expo-cli
``` ```
4. **Start the Application**:
cd to project directory **SafeQR**
```shell
npx expo start
```
5. **Run on Device**: 5. **Run on Device**:
- For iOS, use the Expo Go app. - For iOS, use the Expo Go app.
- For Android, use the Expo Go app or an emulator. - For Android, use the Expo Go app or an emulator.
- For Windows/MacOS Install Android studio and stat the [[Android Emulator]] **first**. Once Expo and Emulater has started, press a on the terminal to connect expo to emulator
## Usage ## Usage
1. Open the app on your device. 1. Open the app on your device.
2. Navigate to the **QR Scanner** tab. 2. Use the camera to scan a QR code or select an image from your gallery.
3. Point your camera at a QR code. 3. View the scan results and security details.
4. The app will scan and display the QR code data below the camera view. 4. Bookmark important QR codes for later reference.
5. Use the bottom navigation to explore other sections (History,QR Scanner, Settings).
## Project Structure ## File Structure
The project structure is organized as follows:
``` ```
.//OTHER Node_modules safeqr-code-scanner/
├── App.tsx ├── assets/
├── package.json │ └── ScanIcon3.png
├── tsconfig.json ├── components/
├── assets │ ├── ScannedDataBox.tsx
│ └── ...
├── components
│ ├── CameraView.tsx
│ └── CustomTabBar.tsx │ └── CustomTabBar.tsx
├── screens ├── navigation/
│ ├── QRScannerScreen.tsx │ ├── AppNavigator.tsx
│ └── BottomTabNavigator.tsx
├── screens/
│ ├── HistoryScreen.tsx │ ├── HistoryScreen.tsx
│ ├── QRScannerScreen.tsx
│ └── SettingsScreen.tsx │ └── SettingsScreen.tsx
├── navigation ├── types/
│ └── AppNavigator.tsx │ └── index.ts
└── types.ts ├── App.tsx
├── README.md
└── package.json
``` ```
### Components
Reusable components used throughout the application.
- `ScannedDataBox.tsx`: Displays detailed information about the scanned QR code.
- `CustomTabBar.tsx`: Custom tab bar for navigation.
### Navigation
Handles the navigation structure of the application.
- `AppNavigator.tsx`: Main navigator that includes the bottom tab navigator.
- `BottomTabNavigator.tsx`: Defines the bottom tab navigation.
### Screens
Individual screens used in the application.
- `HistoryScreen.tsx`: Displays the history of scanned QR codes and bookmarks.
- `QRScannerScreen.tsx`: Main screen for scanning QR codes using the camera.
- `SettingsScreen.tsx`: Displays app settings and additional information.
## Dependencies ## Dependencies
The following dependencies are required to run this project: The project relies on the following major dependencies:
"@expo/vector-icons": "^14.0.2", - `react-native`: For building native apps using React.
"@react-navigation/bottom-tabs": "^6.5.20", - `expo-camera`: For camera access and barcode scanning.
"@react-navigation/native": "^6.1.17", - `react-native-qrcode-svg`: For generating QR codes.
"axios": "^1.7.2", - `axios`: For making HTTP requests to the VirusTotal API.
"expo": "~51.0.11", - `@react-navigation/native`: For navigation within the app.
"expo-camera": "~15.0.10", - `@expo/vector-icons`: For using vector icons in the app.
"expo-image-picker": "~15.0.5", - `expo-image-picker`: For selecting images from the device gallery.
"expo-status-bar": "~1.12.1", - `react-native-reanimated`: For animations and gesture handling.
"react": "18.2.0",
"react-native": "0.74.2",
"react-native-safe-area-context": "^4.10.4",
"react-native-screens": "^3.31.1"
### Installation
### Installation of dependencies
To install the dependencies, run the following command(it will auto read package.json): To install the dependencies, run the following command(it will auto read package.json):
```bash ```bash
npm install npm install
``` ```

34
components/ScannedDataBox.tsx
View File

@@ -20,27 +20,12 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (data.includes('https://Safe_website.com')) { // Assuming scanResult is directly related to data
setScanResult({ setScanResult({
secureConnection: true, secureConnection: data.includes('https'), // Example logic
virusTotalCheck: true, virusTotalCheck: !data.includes('danger'), // Example logic
redirects: 0, redirects: data.includes('redirect') ? 1 : 0, // Example logic
}); });
} else if (data.includes('https://unknown_website.com')) {
setScanResult({
secureConnection: true,
virusTotalCheck: true,
redirects: 2,
});
} else if (data.includes('http://danger_website.com')) {
setScanResult({
secureConnection: false,
virusTotalCheck: false,
redirects: 3,
});
} else {
setScanResult(null);
}
}, [data]); }, [data]);
const getResultText = () => { const getResultText = () => {
@@ -69,8 +54,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
} }
}; };
const extractedData = data.split('\n')[1]?.split('Data: ')[1] || '';
return ( return (
<View style={styles.dataBox}> <View style={styles.dataBox}>
<TouchableOpacity style={styles.closeButton} onPress={clearScanData}> <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
@@ -78,12 +61,12 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
</TouchableOpacity> </TouchableOpacity>
<View style={styles.row}> <View style={styles.row}>
<Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} /> <Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} />
<Text style={styles.payload}>{extractedData}</Text> <Text style={styles.payload}>{data}</Text>
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<Text style={styles.timestampText}>{new Date().toLocaleString()}</Text> <Text style={styles.timestampText}>{new Date().toLocaleString()}</Text>
<View style={styles.qrContainer}> <View style={styles.qrContainer}>
<QRCode value={extractedData} size={75} backgroundColor="transparent" /> <QRCode value={data || 'No Data'} size={75} backgroundColor="transparent" />
<Text style={[styles.resultText, { color: getResultColor() }]}> <Text style={[styles.resultText, { color: getResultColor() }]}>
Result: {getResultText()} Result: {getResultText()}
</Text> </Text>
@@ -164,7 +147,6 @@ const styles = StyleSheet.create({
shadowRadius: 3.75, shadowRadius: 3.75,
elevation: 2.25, elevation: 2.25,
zIndex: 1, zIndex: 1,
//width: '95%', // Ensure the box uses the full width of its container
}, },
qrContainer: { qrContainer: {
alignItems: 'center', alignItems: 'center',

206
screens/QRScannerScreen.tsx
View File

@@ -1,107 +1,26 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image, BackHandler } from 'react-native'; import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
import { Camera, CameraView, scanFromURLAsync } from 'expo-camera'; import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
import { QRCodeContext } from '../types'; import { QRCodeContext } from '../types';
import axios from 'axios'; // For URL calls import axios from 'axios'; // For URL calls
import { Ionicons } from '@expo/vector-icons'; // For icons import { Ionicons } from '@expo/vector-icons'; // For icons
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker'; import * as ImagePicker from 'expo-image-picker';
import QRCode from 'react-native-qrcode-svg';
import ScannedDataBox from '../components/ScannedDataBox'; import ScannedDataBox from '../components/ScannedDataBox';
const QRScannerScreen: React.FC = () => {
//-----------------FUNCTIONS DECLARED HERE------------------//
// Function to determine the type of data
const determineDataType = (data: string): string => {
if (/^(http|https):\/\//.test(data)) {
return 'URL';
} else if (/^[0-9]+$/.test(data)) {
return 'Number';
} else if (/^mailto:/.test(data)) {
return 'Email';
} else if (/^tel:/.test(data)) {
return 'Phone Number';
} else if (/^smsto:/.test(data)) {
return 'SMS';
} else {
return 'Text';
}
};
// Function to handle VirusTotal scanning
const processWithVirusTotal = async (data: string) => {
const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
const params = {
apikey: apiKey,
url: data,
};
try {
const response = await axios.post(url, null, { params });
return response.data.scan_id;
} catch (error) {
console.error('Error scanning with VirusTotal:', error);
throw error;
}
};
// Function to get VirusTotal scan results
const getVirusTotalResults = async (scanId: string) => {
const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
const url = 'https://www.virustotal.com/vtapi/v2/url/report';
const params = {
apikey: apiKey,
resource: scanId,
};
try {
const response = await axios.get(url, { params });
return response.data.positives;
} catch (error) {
console.error('Error getting scan result:', error);
throw error;
}
};
// Define the props for QRScannerScreen
interface QRScannerScreenProps {
clearScanData: () => void;
}
//-----------------Main------------------//
const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
const navigation = useNavigation(); // call Navigation bar const navigation = useNavigation(); // call Navigation bar
const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen
// These are for ..... const qrCodeContext = useContext(QRCodeContext); // From ./types.ts
const qrCodeContext = useContext(QRCodeContext); // From ./tpes.ts
// this function stores the scanned data for the history page
const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} }; const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
// Camera permission and scan state
const [hasPermission, setHasPermission] = useState<boolean | null>(null); const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [scanned, setScanned] = useState<boolean>(false); const [scanned, setScanned] = useState<boolean>(false);
const [scannedData, setScannedData] = useState<string>(''); // State for QR scanned Data const [scannedData, setScannedData] = useState<string>(''); // State for QR scanned Data
const extractedData = scannedData.split('\n')[1]?.split('Data: ')[1] || ''; // Split
const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
const [dataType, setDataType] = useState<string>(''); // State for data type const [dataType, setDataType] = useState<string>(''); // State for data type
const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
useEffect(() => { useEffect(() => {
const initializeApp = async () => { const initializeApp = async () => {
const { status } = await Camera.requestCameraPermissionsAsync(); const { status } = await Camera.requestCameraPermissionsAsync();
@@ -112,74 +31,59 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
initializeApp(); initializeApp();
}, []); }, []);
// If loading this screen , reset the scanning data
const clearScanDataInternal = () => { const clearScanDataInternal = () => {
setScannedData(''); setScannedData('');
setScanResult(null);
setScanned(false); setScanned(false);
setDataType(''); setDataType('');
}; };
// The function takes data from Cameraview.onBarcodeScanned const handlePayload = async (payload: string) => {
const handleQRCodeScanned = async ({ data }: { type: string; data: string }) => { setScanned(true);
setScanned(true); //Flag is QR code already scanned const type = await sendToAPIServer(payload);
const dataType = determineDataType(data);
setDataType(dataType);
let newScannedData = `Type: ${dataType}\nData: ${data}`;
let scanResult = {
secureConnection: false,
virusTotalCheck: false,
redirects: 0
};
try {
const scanId = await processWithVirusTotal(data);
const positive = await getVirusTotalResults(scanId);
newScannedData += `\nScore: ${positive}`;
scanResult = {
secureConnection: true, // Assume secure connection if we get here
virusTotalCheck: positive === 0, // Safe if no positive results
redirects: 2 // Arbitrary value, replace with real data if available
};
} catch (error) {
console.error('Error handling barcode scan:', error);
}
const qrCode = { const qrCode = {
data: newScannedData, data: payload,
bookmarked: false, type,
scanResult scanResult: {
secureConnection: true, // Placeholder, replace with actual logic
virusTotalCheck: true, // Placeholder, replace with actual logic
redirects: 0 // Placeholder, replace with actual logic
}
}; };
setScannedData(newScannedData); setScannedData(payload);
setDataType(type);
setQrCodes([...qrCodes, qrCode]); setQrCodes([...qrCodes, qrCode]);
}; };
// If the focus is lost focus on this screen , when come reset the scan data const sendToAPIServer = async (data: string): Promise<string> => {
useEffect(() => { console.log('Sending QR code data to backend:', data);
const unsubscribe = navigation.addListener('focus', () => {
clearScanDataInternal(); try {
}); const response = await axios.post('http://192.168.10.247:8080/v1/api/qrcodetypes/detect', {
return unsubscribe; data,
}, [navigation]); }, {
headers: {
'Content-Type': 'application/json',
},
});
console.log('Response from backend:', response.data);
return response.data.type;
} catch (error) {
console.error('Error detecting QR code type:', error);
return 'UNKNOWN';
}
};
// This function is for toggling torch
const toggleTorch = () => { const toggleTorch = () => {
setEnableTorch((prev) => !prev); setEnableTorch((prev) => !prev);
}; };
// This is hardcoded function for testing
const handleTestScan = () => { const handleTestScan = () => {
handleQRCodeScanned({ type: 'TEST', data: 'TEST123' }); handlePayload('TEST123');
}; };
// https://medium.com/@funti009/create-a-mobile-qr-scanner-that-scans-via-camera-and-image-in-the-gallery-react-native-expo-ee7098a265d7 const readQRFromImage = async () => {
// Refactored to use Camera.scanFromURLAsync instead
// Function to handle QR code scanning from the image picker
const handleImagePicker = async () => {
clearScanDataInternal(); clearScanDataInternal();
const result = await ImagePicker.launchImageLibraryAsync({ const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images, mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -187,14 +91,11 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
quality: 1, quality: 1,
}); });
// if (result && result.assets[0].uri) { // KIV this.... if (result && result.assets && result.assets.length > 0 && result.assets[0].uri) { // Ensure the uri is not empty
if (result && result.assets && result.assets.length > 0 && result.assets[0].uri) { // this is to unsure the uri is not empty
try { try {
const scannedResult = await scanFromURLAsync(result.assets[0].uri); const scannedResult = await scanFromURLAsync(result.assets[0].uri);
if (!scannedResult.data) { // This will check if no QR was scanned if (scannedResult && scannedResult[0] && scannedResult[0].data) {
// Not sure why by passing the scannedResults.data is not working , only works when I use scannedResults[0].data..... KIV >.< handlePayload(scannedResult[0].data);
const dataNeeded = scannedResult[0].data;
handleQRCodeScanned({ type: 'QR_CODE', data: dataNeeded });
} else { } else {
setScannedData("No QR Code Found"); setScannedData("No QR Code Found");
setTimeout(() => setScannedData(""), 4000); setTimeout(() => setScannedData(""), 4000);
@@ -206,18 +107,13 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
} }
}; };
// Add back button handler to clear scanned data
useEffect(() => { useEffect(() => {
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { const unsubscribe = navigation.addListener('focus', () => {
clearScanDataInternal(); clearScanDataInternal();
return true;
}); });
return unsubscribe;
}, [navigation]);
return () => backHandler.remove();
}, []);
// For Splash, for some reason need to be near the end of the function...
// or else permission for camera is not asked
if (showSplash) { if (showSplash) {
return ( return (
<View style={styles.splashContainer}> <View style={styles.splashContainer}>
@@ -226,55 +122,43 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
); );
} }
// While asking for permission the page behind will render this only
if (hasPermission === null) { if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>; return <Text>Requesting for camera permission</Text>;
} }
// this will thrown on the screen and nothing else will load if no permission
if (hasPermission === false) { if (hasPermission === false) {
return <Text>No access to camera</Text>; return <Text>No access to camera</Text>;
} }
//---------------The UI part-----------------//
return ( return (
<View style={styles.container}> <View style={styles.container}>
{/* Banner section */}
<View style={styles.banner}> <View style={styles.banner}>
<Text style={styles.headerText}>SafeQR v0.89</Text> <Text style={styles.headerText}>SafeQR v0.89</Text>
</View> </View>
{/* Welcome Text */}
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text> <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
{/* The cutout for the camera */}
<View style={styles.cameraContainer}> <View style={styles.cameraContainer}>
<CameraView <CameraView
onBarcodeScanned={scanned ? undefined : handleQRCodeScanned} onBarcodeScanned={scanned ? undefined : ({ data }) => handlePayload(data)}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }} barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
style={styles.camera} style={styles.camera}
enableTorch={enableTorch} enableTorch={enableTorch}
/> />
{/* the torch icon floating above the CameraView */}
<TouchableOpacity onPress={toggleTorch} style={styles.flashButton}> <TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
<Ionicons name="flashlight" size={24} color="#fff" /> <Ionicons name="flashlight" size={24} color="#fff" />
{enableTorch}
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={handleTestScan} style={styles.testButton}> <TouchableOpacity onPress={handleTestScan} style={styles.testButton}>
<Ionicons name="bug" size={24} color="#fff" /> <Ionicons name="bug" size={24} color="#fff" />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={readQRFromImage} style={styles.galleryButton}>
{/* the image icon for opening album/gallery */}
<TouchableOpacity onPress={handleImagePicker} style={styles.galleryButton}>
<Ionicons name="image" size={24} color="#fff" /> <Ionicons name="image" size={24} color="#fff" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* The CONTENT , the popup for the scanned data */}
{/* This is called from ../components/ScannedDataBox*/}
{scannedData !== '' && ( {scannedData !== '' && (
<View style={styles.scannedDataBox}> <View style={styles.scannedDataBox}>
<ScannedDataBox data={scannedData} scanResult={scanResult} dataType={dataType} clearScanData={clearScanDataInternal} /> <ScannedDataBox data={scannedData} dataType={dataType} clearScanData={clearScanDataInternal} />
</View> </View>
)} )}
</View> </View>
@@ -346,10 +230,8 @@ const styles = StyleSheet.create({
scannedDataBox: { scannedDataBox: {
position: 'absolute', position: 'absolute',
top: '10%', top: '10%',
height: '100%',
left: '5%', left: '5%',
right: '5%', right: '5%',
zIndex: 2, zIndex: 2,
}, },
welcomeText: { welcomeText: {