update password working

- will edit linting errors in next commit

frontend/src/APIs/UsersAPI.ts

@@ -2,7 +2,7 @@ import FLASK_HTTPS from './FLASK_API';
 import type { User } from '../models/User';
 import firebaseService from '../utilities/firebase';
 import { type ObjectId } from 'mongodb';
-import axios, { AxiosError } from 'axios';
+import axios, { type AxiosError } from 'axios';
 
 const routeName = '/users';
 
@@ -114,7 +114,7 @@ export const UsersAPI = {
       // Make the request to update the email with the new token
       const res = await FLASK_HTTPS.patch(
         routeName + `/user/update_email/${userId.toHexString()}`,
-        { email: email },
+        { email },
         {
           headers: {
             Authorization: `Bearer ${newToken}`,

frontend/src/components/appNavigation.tsx

@@ -66,24 +66,12 @@ const AppNavigation = (): JSX.Element => {
 
         <Stack.Screen name='UpdatePassword'
           component={UpdatePasswordScreen}
-          options={{
-            title: 'Update Your Password',
-            headerStyle: {
-              backgroundColor: Colors.DARKGREEN,
-            },
-            headerTintColor: Colors.WHITE,
-          }}
+          options={{ headerShown: false }}
         />
 
         <Stack.Screen name='UpdateHomeInfo'
           component={UpdateHomeScreen}
-          options={{
-            title: 'Edit Home Info',
-            headerStyle: {
-              backgroundColor: Colors.DARKGREEN,
-            },
-            headerTintColor: Colors.WHITE,
-          }}
+          options={{ headerShown: false }}
         />
 
         <Stack.Screen

frontend/src/screens/settings/updateHomeScreen.tsx

@@ -1,22 +1,168 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  Alert,
+} from 'react-native';
 import Colors from '../../../assets/colorConstants';
+import { type RootStackParamList } from '../../components/types';
+import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useFonts } from 'expo-font';
+import firebaseService from '../../utilities/firebase';
+import { type User } from '../../models/User';
+import { UsersAPI } from '../../APIs/UsersAPI';
+import {
+  EmailAuthProvider,
+  reauthenticateWithCredential,
+  verifyBeforeUpdateEmail,
+  onAuthStateChanged,
+  getAuth,
+} from 'firebase/auth';
+export type StackNavigation = StackNavigationProp<RootStackParamList>;
 
+export default function UpdateProfileScreen(): JSX.Element {
+  const navigation = useNavigation<StackNavigation>();
+  const [loaded] = useFonts({
+    Montserrat: require('../../../assets/fonts/MontserratThinRegular.ttf'),
+    Josefin: require('../../../assets/fonts/JosefinSansThinRegular.ttf'),
+  });
+  const [userid, setUserid] = useState<string>('');
+  const [rerenderKey, setRerenderKey] = useState<number>(0);
+  const [loggedUser, setLoggedUser] = useState<User | undefined>(undefined);
 
-export default function UpdateHomeScreen(): JSX.Element {
+  const auth = getAuth();
+  onAuthStateChanged(auth, (user) => {
+    if (user === null) {
+      navigation.navigate('LogIn');
+    }
+  });
+
+  useEffect(() => {
+    const fetchUserData = async (): Promise<void> => {
+      const user = await firebaseService.getFirebaseUser();
+      setUserid(user?.uid ?? '');
+    };
+    void fetchUserData();
+  }, [rerenderKey]);
+
+  const handleUpdateHome = async (): Promise<void> => {
+    try {
+      const user = await firebaseService.getFirebaseUser();
+
+      if (user != null) {
+        console.log('update home')
+      }
+    } catch (error: any) {
+      // Log any errors
+      console.error('Error updating email in UpdateProfile: ', error);
+    }
+  };
+
+  if (!loaded) {
+    return <></>;
+  }
 
   return (
-    <View style={styles.container}>
-        <Text> Moved? No worries, update your info here. </Text>
-    </View>
+    <ScrollView style={styles.container}>
+      <View style={styles.headerBox}>
+        <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
+          <Ionicons name="arrow-back" size={30} color={Colors.WHITE} />
+          <Text style={styles.buttonText}> Settings </Text>
+        </TouchableOpacity>
+        <Text style={styles.header}> Update Home Info </Text>
+      </View>
+      <View style={styles.profileContainer}>
+        <View style={styles.textInputBox}>
+
+          <Text style={styles.label}> Henlo mate </Text>
+          <TextInput
+            placeholder="new email"
+            defaultValue={loggedUser?.email}
+            style={styles.textInput}
+          />
+        </View>
+        <TouchableOpacity style={styles.saveButton} onPress={() => handleUpdateHome}>
+          <Text style={styles.saveButtonText}> Confirm Change </Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
   );
 }
-
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
+    backgroundColor: Colors.DARKDARKGREEN,
+  },
+  profileContainer: {
+    height: 645,
+    width: '85%',
+    backgroundColor: Colors.DARKGREEN,
+    borderRadius: 20,
+    alignSelf: 'center',
+    margin: 40,
+  },
+  backButton: {
+    position: 'absolute',
+    top: 60,
+    left: 20,
+    flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: Colors.LIGHTFGREEN,
-    paddingTop: 40
+    padding: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+    color: Colors.WHITE,
+    fontWeight: '500',
+  },
+  header: {
+    fontSize: 40,
+    color: Colors.WHITE,
+    position: 'absolute',
+    top: 105,
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+  headerBox: {
+    alignItems: 'center',
+    paddingBottom: 130,
+  },
+  textInputBox: {
+    alignSelf: 'center',
+    top: '10%',
+    padding: 10,
+  },
+  label: {
+    fontSize: 16,
+    opacity: 0.5,
+    color: Colors.WHITE,
+  },
+  textInput: {
+    paddingHorizontal: 5,
+    marginBottom: 30,
+    marginTop: 10,
+    borderRadius: 10,
+    fontSize: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.WHITE,
+    color: Colors.WHITE,
+    width: 270,
+  },
+  saveButton: {
+    borderRadius: 5,
+    alignSelf: 'center',
+    top: '20%',
+  },
+  saveButtonText: {
+    color: Colors.LIGHTFGREEN,
+    fontSize: 16,
+    textDecorationLine: 'underline',
+    fontWeight: '400',
+    shadowColor: Colors.LIGHTFGREEN,
   },
-});
+});