Merge pull request #11 from crypgo23/ME-loginregister

Me loginregister

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

Frontend/App.js

@@ -1,4 +1,3 @@
-
 import React from "react";
 import { StyleSheet } from "react-native";
 import { NavigationContainer, DarkTheme } from "@react-navigation/native";
@@ -8,36 +7,51 @@ import Test from "./components/Test";
 import Operations from "./components/Operations";
 import Register from "./components/Register";
 import Login from "./components/Login";
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator } from "@react-navigation/stack";
 import GenerateKeys from "./components/operations/generatekeys";
 import AllTransactions from "./components/operations/getalltransactions";
 import CreateTransaction from "./components/operations/settransactions";
 import UpdateTransaction from "./components/operations/updatetransaction";
 import GetTransaction from "./components/operations/gettransactions";
 import HomePageTemp from "./components/HomePageTemp";
+import { KeyProvider } from "./components/operations/keyContext";
 
 const Stack = createStackNavigator();
 export const ThemeContext = React.createContext();
 
 export default function App() {
+  const [user, setUser] = React.useState(null);
+
   return (
-    <NavigationContainer theme={DarkTheme}>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={Home} />
-        <Stack.Screen name="DashBoard" component={DashBoard} />
-        <Stack.Screen name="Operations" component={Operations} />
-        <Stack.Screen name="Test" component={Test} />   
-        <Stack.Screen name="Login" component={Login} />
-        <Stack.Screen name= "Register" component={Register} />
-        <Stack.Screen name="Generate Keys" component={GenerateKeys} />
-        <Stack.Screen name= "All Transactions" component={AllTransactions} />
-        <Stack.Screen name="Get Transaction" component={GetTransaction} />
-        <Stack.Screen name="Create Transaction" component={CreateTransaction} />
-        <Stack.Screen name="Update Transaction" component={UpdateTransaction} />
-        <Stack.Screen name= "HomePage Temp" component={HomePageTemp} />
+    <KeyProvider>
+        <NavigationContainer theme={DarkTheme}>
+          <Stack.Navigator>
+            <Stack.Screen name="Register" component={Register} />
+            <Stack.Screen name="HomePage Temp" component={HomePageTemp} />
 
-      </Stack.Navigator>
-    </NavigationContainer>
+            <Stack.Screen
+              name="Login"
+              component={Login}
+              options={{ headerShown: false }}
+            />
+
+            <Stack.Screen name="DashBoard" component={DashBoard} />
+            <Stack.Screen name="Operations" component={Operations} />
+            <Stack.Screen name="Test" component={Test} />
+            <Stack.Screen name="Generate Keys" component={GenerateKeys} />
+            <Stack.Screen name="All Transactions" component={AllTransactions} />
+            <Stack.Screen name="Get Transaction" component={GetTransaction} />
+            <Stack.Screen
+              name="Create Transaction"
+              component={CreateTransaction}
+            />
+            <Stack.Screen
+              name="Update Transaction"
+              component={UpdateTransaction}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+    </KeyProvider>
   );
 }
 
@@ -49,4 +63,3 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
 });
-

Frontend/babel.config.js

@@ -2,5 +2,12 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    "plugins": [
+      ["babel-plugin-inline-import", {
+        "extensions": [
+          ".svg"
+        ]
+      }]
+    ]
   };
 };

Frontend/components/HomePageTemp.js

@@ -1,13 +1,84 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
+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";
+
+function HomePageTemp() {
+  const navigation = useNavigation();
+
+  // Function to navigate to the "Test" screen
+  const goToAllTransactions = () => {
+    navigation.navigate("All Transactions"); // "Test" is the name of the screen in your Stack Navigator
+  };
+
+  // Function to handle logout
+  const handleLogout = () => {
+    navigation.navigate("Login")
+    // You may also want to navigate to the login screen or perform any other actions after signing out
+  };
+
+  // Function to navigate to the "Test" screen
+  const goToCreateTransactions = () => {
+    navigation.navigate("Create Transaction"); // "Test" is the name of the screen in your Stack Navigator
+  };
+
 
-function Login() {
   return (
-    <View>
-      <Text>Login Screen</Text>
-      {/* Your content goes here */}
+    <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>
     </View>
   );
 }
 
-export default Login;
+export default HomePageTemp;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    position: 'relative',
+  },
+  title: {
+    fontSize: 40,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 16,
+    marginTop: '30%',
+    textAlign: 'center',
+  },
+  subcontainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: "10%",
+  },
+  logoutContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 16,
+  },
+  logout: {
+    fontSize: 17,
+    color: '#fff',
+  },
+})

Frontend/components/Login.js

@@ -1,38 +1,54 @@
-import React, { useState } from 'react';
-import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity } from 'react-native';
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Button,
+  TouchableOpacity,
+} from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useKey } from "./operations/keyContext";
+
+const getData = async (username, password) => {
+  try {
+    const jsonValue = await AsyncStorage.getItem(username + password);
+    console.log(jsonValue);
+    return jsonValue != null ? JSON.parse(jsonValue) : null;
+  } catch (e) {
+    console.log("couldn't get data");
+  }
+};
+
+
 
 const LoginScreen = ({ navigation }) => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const { publicKey, privateKey } = useKey();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      // Check if the user exists in local storage
+      const userData = await getData(username, password);
 
-  const handleLogin = () => {
-    // Here you would usually send a request to your Node.js server
-    // For the purpose of this example, we'll just log the credentials
-    console.log('Login with:', username, password);
-      // Regular expression to validate the email format
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-      // Validate if the username is in the correct email format
-      if (emailRegex.test(username)) {
-        // If the email is valid, proceed with the login
-        // TODO: Send a request to your Node.js server to validate the credentials
-
-        // Navigate to the HomeScreen if the login is successful
-        navigation.navigate('Home');
+      if (userData) {
+        // User exists, navigate to HomeScreen
+        navigation.navigate("HomePage Temp");
       } else {
-        // If the email is not valid, alert the user
-        alert('Please enter a valid email address.');
+        // User does not exist, show an alert
+        Alert.alert("Incorrect Username or Password", "Please try again");
       }
-    // TODO: Implement login logic
-    navigation.navigate('Home');
-  };
+    } catch (error) {
+      console.error("Error during login:", error);
+    }
+  }
 
   const handleForgotPassword = () => {
     // Here you would handle the forgot password logic or navigation
-    console.log('Forgot password');
+    navigation.navigate("Register");
     // TODO: Implement forgot password logic
   };
-
 
   return (
     <View style={styles.container}>
@@ -56,49 +72,49 @@ const LoginScreen = ({ navigation }) => {
       <TouchableOpacity style={styles.button} onPress={handleLogin}>
         <Text style={styles.buttonText}>Login</Text>
       </TouchableOpacity>
-      <Button title="Forgot Password?" onPress={handleForgotPassword} />
+      <Button title="Register" onPress={handleForgotPassword} />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#000',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#000",
   },
   title: {
     fontSize: 24,
-    fontWeight: 'bold',
-    color: '#fff',
+    fontWeight: "bold",
+    color: "#fff",
     marginBottom: 16,
   },
   subtitle: {
     fontSize: 18,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 32,
   },
   input: {
-    width: '80%',
-    backgroundColor: '#fff',
+    width: "80%",
+    backgroundColor: "#fff",
     padding: 16,
     borderRadius: 4,
     marginBottom: 16,
   },
   button: {
-    width: '80%',
-    backgroundColor: 'green',
+    width: "80%",
+    backgroundColor: "green",
     padding: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 4,
     marginBottom: 16,
   },
   buttonText: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 18,
   },
-} );
+});
 
 export default LoginScreen;