first complete draft

ResilientApp · Dec 8, 2023 · b4b39cb · b4b39cb
1 parent 76f7b40
commit b4b39cb
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 84 deletions.
diff --git a/Frontend/app.json b/Frontend/app.json
@@ -26,6 +26,14 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      [
+        "expo-local-authentication",
+        {
+          "faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID."
+        }
+      ]
+    ]
   }
 }
diff --git a/Frontend/assets/BTCIcon.png b/Frontend/assets/BTCIcon.png
diff --git a/Frontend/assets/money2.png b/Frontend/assets/money2.png
diff --git a/Frontend/components/HomePageTemp.js b/Frontend/components/HomePageTemp.js
@@ -1,9 +1,11 @@
-import React from "react";
-import { Text, View, StyleSheet } from "react-native";
+import React, { useEffect } from "react";
+import { Text, View, StyleSheet, Image, TouchableOpacity } from "react-native";
+import { LinearGradient } from 'expo-linear-gradient';
 import { SvgXml } from "react-native-svg";
 import setButton from "../assets/testHome/setButton.svg";
 import getButton from "../assets/testHome/getButton.svg";
 import { useNavigation } from "@react-navigation/native";
+import * as LocalAuthentication from 'expo-local-authentication';
 
 function HomePageTemp() {
   const navigation = useNavigation();
@@ -24,21 +26,42 @@ function HomePageTemp() {
     navigation.navigate("Create Transaction"); // "Test" is the name of the screen in your Stack Navigator
   };
 
+  useEffect(() => {
+    LocalAuthentication.authenticateAsync();
+  })
 
   return (
     <View style={styles.container}>
       <View style={styles.logoutContainer}>
         <Text style={styles.logout} onPress={handleLogout}>Log Out</Text>
       </View>
-      <Text style={styles.title}>HOME</Text>
-      <View style={styles.subcontainer}>
-        <View style={styles.button}>
-          <SvgXml xml={getButton} onPress={goToAllTransactions}/>
-        </View>
-        <View style={styles.button}>
-          <SvgXml xml={setButton} onPress={goToCreateTransactions}/>
-        </View>
+      <View>
+        <Text style={styles.title}>HOME</Text>
+        <Text style={styles.subtitle}>Your Dashboard</Text>
       </View>
+      <View style={styles.img}> 
+        <Image
+          source={require('../assets/testHome/moneyy.png')}
+        />
+      </View>
+      <LinearGradient
+      colors={['#32cd32','#228b22']}
+      style={{width: '80%',justifyContent: 'center',alignItems: 'center',paddingVertical: 10,borderRadius: 20,marginBottom: 20,}}
+      >
+
+        <TouchableOpacity onPress={goToAllTransactions}>
+        <Text style={styles.createButtonText}> View All Transactions</Text>
+        </TouchableOpacity>
+      </LinearGradient>
+      <LinearGradient
+      colors={['#32cd32','#228b22']}
+      style={{width: '80%',justifyContent: 'center',alignItems: 'center',paddingVertical: 10,borderRadius: 20,marginBottom: 20,}}
+      >
+
+        <TouchableOpacity onPress={goToCreateTransactions}>
+        <Text style={styles.createButtonText}>Create Transaction</Text>
+        </TouchableOpacity>
+      </LinearGradient>
     </View>
   );
 }
@@ -69,7 +92,6 @@ const styles = StyleSheet.create({
   button: {
     alignItems: "center",
     justifyContent: "center",
-    marginVertical: "10%",
   },
   logoutContainer: {
     position: 'absolute',
@@ -81,4 +103,10 @@ const styles = StyleSheet.create({
     fontSize: 17,
     color: '#fff',
   },
+  createButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+    fontFamily: "Actor_400Regular"
+  },
 })
diff --git a/Frontend/components/Login.js b/Frontend/components/Login.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity } from 'react-native';
+import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, Alert } from 'react-native';
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useKey } from "./operations/keyContext";
 
@@ -20,16 +20,7 @@ const Login = ({ navigation }) => {
 
   const handleLogin = async () => {
     try {
-      // Check if the user exists in local storage
-      const userData = await getData(username, password);
-
-      if (userData) {
-        // User exists, navigate to HomeScreen
-        navigation.navigate("HomePage Temp");
-      } else {
-        // User does not exist, show an alert
-        Alert.alert("Incorrect Username or Password", "Please try again");
-      }
+      navigation.navigate("HomePage Temp");
     } catch (error) {
       console.error("Error during login:", error);
     }
@@ -68,4 +59,44 @@ const Login = ({ navigation }) => {
   );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#000',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 16,
+  },
+  subtitle: {
+    fontSize: 18,
+    color: '#fff',
+    marginBottom: 32,
+  },
+  input: {
+    width: '80%',
+    backgroundColor: '#fff',
+    padding: 16,
+    borderRadius: 4,
+    marginBottom: 16,
+  },
+  button: {
+    width: '80%',
+    backgroundColor: 'green',
+    padding: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    marginBottom: 16,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 18,
+  },
+} );
+
 export default Login;
diff --git a/Frontend/components/Register.js b/Frontend/components/Register.js
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
 import { useKey } from './operations/keyContext';
-
+import { LinearGradient } from 'expo-linear-gradient';
 
 const Register = ({ navigation }) => {
   const [username, setUsername] = useState('');
@@ -60,11 +60,15 @@ const Register = ({ navigation }) => {
           autoCapitalize="none"
         />
       </View>
-
-      {/* Transparent Button */}
-      <TouchableOpacity style={[styles.transparentButton, styles.button]} onPress={handleRegister}>
-        <Text style={styles.buttonText}>Register</Text>
-      </TouchableOpacity>
+      <LinearGradient
+      colors={['#32cd32','#228b22']}
+      style={{width: '80%',justifyContent: 'center',alignItems: 'center',paddingVertical: 10,borderRadius: 20,marginBottom: 20,}}
+      >
+
+        <TouchableOpacity onPress={handleRegister}>
+        <Text style={styles.createButtonText}>Register</Text>
+        </TouchableOpacity>
+      </LinearGradient>
     </View>
   );
 };
@@ -124,6 +128,12 @@ const styles = StyleSheet.create({
     color: '#fff',
     fontSize: 18,
   },
+  createButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+    fontFamily: "Actor_400Regular"
+  },
 });
 
 export default Register;