Fixing Circular Dependancy With Logging

Making it possible to click "Enter" to submit on login page
Handle different users + account setting page #33

app/index.tsx

@@ -1,19 +1,22 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { IPAddr } from '@/constants/constants';
 import { RootStackParamList, UserInfo } from '@/components/Types';
 import axios from 'axios';
 import { styles } from '@/assets/styles/styles';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import { cLog } from './log'
+import { cLog } from './log';
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { StackNavigationProp } from '@react-navigation/stack';
-import { Button, TextInput, View, Text } from 'react-native';
+import { TextInput, View, Text, TouchableOpacity } from 'react-native';
 
 export default function TaskScreen() {
     type Prop = StackNavigationProp<RootStackParamList, keyof RootStackParamList>;
     const navigation = useNavigation<Prop>();
     const [credentials, setCredentials] = useState({ userName: '', password: '' });
 
+    // Create a reference for the password input field
+    const passwordInputRef = useRef<TextInput>(null);
+
     const updateAsyncStorage = async (userInfo: UserInfo) => {
         try {
             await AsyncStorage.multiSet([
@@ -74,21 +77,29 @@ export default function TaskScreen() {
     return (
         <View style={styles.loginPage}>
             <Text style={styles.headerText}>Login</Text>
+            <View style={{height:"2%"}}></View>
             <Text style={styles.loginPageNonheaderText}>Username</Text>
             <TextInput
                 style={styles.loginPageInput}
                 placeholder="Enter Username"
                 autoCapitalize="none"
                 onChangeText={(text) => setCredentials({ ...credentials, userName: text })}
+                returnKeyType="next" // Move to the next input field
+                onSubmitEditing={() => passwordInputRef.current && passwordInputRef.current.focus()} // Focus on the password input when the user presses Enter
             />
             <Text style={styles.loginPageNonheaderText}>Password</Text>
             <TextInput
+                ref={passwordInputRef} // Use the ref for the password input
                 style={styles.loginPageInput}
                 placeholder="Password"
                 secureTextEntry
                 onChangeText={(text) => setCredentials({ ...credentials, password: text })}
+                returnKeyType="done" // Show "Done" on the keyboard
+                onSubmitEditing={handleLogin} // Trigger the login action when the user presses Enter
             />
-            <Button title="Login" onPress={handleLogin} />
+            <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
+                <Text style={styles.loginButtonText}>Login</Text>
+            </TouchableOpacity>
         </View>
     );
 }

app/log.tsx

@@ -1,4 +1,4 @@
-import { logging } from '@/constants/constants';
+const logging = true;
 
 interface LogFunction {
     (...messages: any[]): void;

assets/styles/styles.tsx

@@ -28,7 +28,7 @@ export const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     paddingHorizontal: 20,
-},
+  },
   addContainer: {
     flex: 1,
     paddingHorizontal: 25,
@@ -49,16 +49,16 @@ export const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'center',
-},
-textInput: {
-  height: 450,
-  width: '100%',
-  borderColor: '#ccc',
-  borderWidth: 1,
-  borderRadius: 8,
-  padding: 10,
-  textAlignVertical: 'top',
-},
+  },
+  textInput: {
+    height: 450,
+    width: '100%',
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 10,
+    textAlignVertical: 'top',
+  },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -69,7 +69,7 @@ textInput: {
   footer: {
     alignItems: 'flex-end',
     marginTop: 20,
-},
+  },
   headerText: {
     textAlign: "center",
     fontSize: 37,
@@ -78,7 +78,7 @@ textInput: {
   },
   noteHeader: {
     alignItems: 'center',
-},
+  },
   calendarHeader: {
     textAlign: "center",
     fontSize: 24,
@@ -277,7 +277,7 @@ textInput: {
     paddingVertical: 15,
     paddingHorizontal: 50,
     justifyContent: 'center',
-},
+  },
   saveButton: {
     flexDirection: "row",
     alignItems: "center",
@@ -322,11 +322,12 @@ textInput: {
     flex: 1,
     flexDirection: "column",
     justifyContent: "center",
-    paddingHorizontal: 550,
+    alignItems: 'center',
     backgroundColor: "#ffffff",
   },
   loginPageInput: {
     height: 40,
+    width: '80%',
     marginHorizontal: 10,
     borderWidth: 1,
     borderColor: "#ccc",
@@ -335,6 +336,20 @@ textInput: {
     backgroundColor: "#fff",
     marginBottom: 20,
   },
+  loginButton: {
+    backgroundColor: "#4285F4",
+    paddingVertical: 12,
+    paddingHorizontal: 25,
+    width: '50%',
+    marginTop: 0,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  loginButtonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "bold"
+  },
   loginPageNonheaderText: {
     marginBottom: 10,
   },

constants/constants.tsx

@@ -6,8 +6,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { Field } from "@/components/Types";
 
 // export const IPAddr = "http://34.204.83.156:8080" // For AWS
-export const IPAddr = "http://137.112.196.132:8080" // For local testing on laptop
-export const logging = true;
+export const IPAddr = "http://137.112.196.132:8080" // For local testing on lapto
 
 export const repeatingData = [
   { label: 'Daily', value: 1 },

tsconfig.json

@@ -15,5 +15,5 @@
     ".expo/types/**/*.ts",
     "expo-env.d.ts",
     "constants/constants.tsx"
-  ]
+, "app/log.js"  ]
 }