Backend login refactor

HackRPIEventApp2023/App.js

@@ -1,39 +1,62 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View, Text, Button } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Feather } from "@expo/vector-icons";
 import { StatusBar } from "expo-status-bar";
 import Calander from "./Box/Calander";
 import Food from "./information/Food";
 import HackerQue from "./HackerQue/QueEntry.js";
-// import { colors } from './colors';
 import { globalStyles } from "./styles";
+import Login from "./Login/Login";
 
 const Tab = createBottomTabNavigator();
 
 function InfoScreen() {
+  const goToLogin = () => {
+    navigation.navigate("Login");
+  };
+
   return (
     <View style={styles.container}>
       <Food />
+      <Button title="Login" onPress={goToLogin} />
+      <StatusBar style="auto" />
     </View>
   );
 }
 
-function HomeScreen() {
+function HomeScreen({ navigation }) {
+  const goToLogin = () => {
+    navigation.navigate("Login");
+  };
+
   return (
     <View style={styles.container}>
       <Calander />
-
+      <Button title="Login" onPress={goToLogin} />
       <StatusBar style="auto" />
     </View>
   );
 }
 
 function QueueScreen() {
+  const goToLogin = () => {
+    navigation.navigate("Login");
+  };
+  return (
+    <View style={styles.container}>
+      <HackerQue />
+      <Button title="Login" onPress={goToLogin} />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+function LoginScreen() {
   return (
     <View style={styles.container}>
-      <HackerQue></HackerQue>
+      <Login/>
     </View>
   );
 }
@@ -44,7 +67,6 @@ export default function App() {
       <Tab.Navigator
         screenOptions={({ route }) => ({
           tabBarIcon: ({ focused, color, size }) => {
-            //adding icons
             let iconName;
             if (route.name === "Info") {
               iconName = "info";
@@ -53,6 +75,9 @@ export default function App() {
             } else if (route.name === "Queue") {
               iconName = "user";
             }
+            else if (route.name === "Login") {
+              iconName = "log-in";
+            }
             return (
               <Feather
                 name={iconName}
@@ -65,15 +90,17 @@ export default function App() {
             fontSize: 12,
           },
           tabBarStyle: {
-            backgroundColor: globalStyles.primary, // should this be transparent?
-            borderTopWidth: 0, // Hide top border of the tab bar
+            backgroundColor: globalStyles.primary,
+            borderTopWidth: 0,
           },
           tabBarActiveTintColor: globalStyles.accent,
           tabBarInactiveTintColor: "white",
-        })}>
-        <Tab.Screen name="Info" component={InfoScreen} />
+        })}
+      >
         <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Info" component={InfoScreen} />
         <Tab.Screen name="Queue" component={QueueScreen} />
+        <Tab.Screen name="Login" component={LoginScreen} />
       </Tab.Navigator>
     </NavigationContainer>
   );
@@ -86,18 +113,4 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  text: {
-    fontSize: globalStyles.fontSize,
-    fontWeight: globalStyles.fontWeight,
-    color: globalStyles.text,
-  },
-  circleContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-  },
-  circle: {
-    borderRadius: 50,
-    overflow: "hidden",
-  },
 });

HackRPIEventApp2023/Login/Backend.js

@@ -0,0 +1,37 @@
+import { initializeApp } from "firebase/app";
+import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {getFirestore, collection, getDocs } from "firebase/firestore";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyAqGfFX7gXRGBtidctQjIJ4NC0FA6YxeOQ",
+    authDomain: "mentor-queue-c01a3.firebaseapp.com",
+    projectId: "mentor-queue-c01a3",
+    storageBucket: "mentor-queue-c01a3.appspot.com",
+    messagingSenderId: "117425105410",
+    appId: "1:117425105410:web:60fa2b3e348b489b37551b",
+    measurementId: "G-NJ5ZBXKBX3"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = initializeAuth(app, {
+  persistence: getReactNativePersistence(AsyncStorage)
+});
+const db = getFirestore(app);
+
+// Check if the user exists in the database
+const CheckUser = async (username, password) => {
+  // Get a snapshot of the users collection
+  const usersCollection = collection(db, "users");
+  const userSnapshot = await getDocs(usersCollection);
+  const matchFound = userSnapshot.docs.some(doc => {
+    const userData = doc.data();
+    const isMatch = userData.Uid === username && userData.Pass === password;
+    return isMatch;
+  });
+  return matchFound;
+}
+
+
+export { CheckUser, auth };

HackRPIEventApp2023/Login/Login.js

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, Image, Alert, ScrollView } from 'react-native';
+import {CheckUser} from './Backend';
+
+// Login component
+const Login = () => {
+  // State variables
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [generatedCode, setGeneratedCode] = useState('');
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  // Function to generate a random 6-character code
+  const generateRandomCode = () => {
+    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    let code = '';
+    for (let i = 0; i < 6; i++) {
+      code += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    setGeneratedCode(code);
+  };
+
+  // Function to handle the login process
+  const handleLogin = () => {
+    if (verificationCode != generatedCode) {
+      Alert.alert('Invalid verification code');
+      setVerificationCode('');
+      generateRandomCode();
+    } 
+    else {
+      const validateUser = async () => {
+        const validUser = await CheckUser(username, password);
+        if (validUser) {
+          setLoggedIn(true);
+        }
+        else {
+          Alert.alert('Invalid username or password');
+          setPassword('');
+          setVerificationCode('');
+          generateRandomCode();
+        }
+      };
+
+      validateUser();
+    }
+  };
+
+  // Function to reload the verification code
+  const handleReloadVerificationCode = () => {
+    generateRandomCode();
+    setVerificationCode('');
+  };
+
+  // Function to handle the logout process
+  const handleLogout = () => {
+    Alert.alert(
+      'Confirm Logout',
+      'Are you sure you want to log out?',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: () => {setLoggedIn(false);
+          setUsername('');
+          setPassword('');
+          setVerificationCode('');
+          generateRandomCode()}
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
+  // Initial generation of the verification code
+  useState(() => {
+    generateRandomCode();
+  }, []);
+
+  // Render the login form
+  return (
+    <ScrollView style={{ flex: 1}}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20,
+      marginTop: 100 }}>
+        {loggedIn ? (
+          <View>
+            <Text style={{color: 'white'}}>Welcome, mentor!</Text>
+            <TouchableOpacity
+              style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5, marginLeft: 10 }}
+              onPress={handleLogout}
+            >
+              <Text style={{ color: 'white', textAlign: 'center' }}>Logout</Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <View>
+            <Text style={{ fontSize: 20 , color: 'white'}}>Login</Text>
+            <Text style={{ fontSize: 5 }}> </Text>
+            <Text style={{ fontSize: 15, color: 'white' }}> Username</Text>
+            <TextInput
+              style={{ height: 40, 
+              borderColor: 'white', 
+              borderWidth: 1, 
+              marginBottom: 10, 
+              paddingHorizontal: 10, 
+              color: 'white'}}
+              placeholder="Username"
+              value={username}
+              onChangeText={(text) => setUsername(text)}
+            />
+            <Text style={{ fontSize: 15, color: 'white' }}> Password </Text>
+            <TextInput
+              style={{ height: 40, 
+              borderColor: 'white', 
+              borderWidth: 1, marginBottom: 10, 
+              paddingHorizontal: 10,
+              color: 'white',}}
+              placeholder="Password"
+              secureTextEntry={true}
+              value={password}
+              onChangeText={(text) => setPassword(text)}
+            />
+            <Text style={{ fontSize: 15, color: 'white' }}> Verification Code </Text>
+            <TextInput
+              style={{ height: 40, 
+              borderColor: 'white', borderWidth: 1, 
+              marginBottom: 10, 
+              paddingHorizontal: 10,
+              color: 'white',}}
+              placeholder="Verification Code"
+              value={verificationCode}
+              onChangeText={(text) => setVerificationCode(text)}
+            />
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Image
+                style={{ width: 200, height: 50, marginBottom: 10 }}
+                source={{ uri: `https://via.placeholder.com/200x50?text=${generatedCode}` }} // Placeholder URL with generated code
+              />
+              <TouchableOpacity
+                style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5, marginLeft: 10 }}
+                onPress={handleReloadVerificationCode}
+              >
+                <Text style={{ color: 'white', textAlign: 'center' }}>Reload Verification Code</Text>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity
+              style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5 }}
+              onPress={handleLogin}
+            >
+              <Text style={{ color: 'white', textAlign: 'center' }}>Login</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default Login;

HackRPIEventApp2023/Login/LoginButton.js

@@ -0,0 +1,29 @@
+// ParentComponent.js
+import React from 'react';
+import { View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack'; // Import createStackNavigator from React Navigation
+import Login from './Login';
+
+// Create a stack navigator
+const Stack = createStackNavigator();
+
+// Parent component
+const ParentComponent = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Login" component={Login} />
+      <Stack.Screen name="Home" component={HomeScreen} />
+    </Stack.Navigator>
+  );
+};
+
+// Home screen component
+const HomeScreen = ({ navigation }) => {
+  return (
+    <View style={{ flex: 20, justifyContent: 'center', alignItems: 'center' }}>
+      <LoginButton navigation={navigation} />
+    </View>
+  );
+};
+
+export default ParentComponent;