This commit introduces a new "Account" page to the application.

- An "Account" tab has been added to the main navigation.
- The new screen displays user information and a list of options.
- You can now edit your profile information (name).
- The logout functionality is accessible from this page.
- Placeholders are included for future features like email settings and feedback.

Author: google-labs-jules[bot]

frontend/api/auth.js

@@ -16,3 +16,11 @@ export const login = (email, password) => {
 export const signup = (name, email, password) => {
   return apiClient.post('/auth/signup/email', { name, email, password });
 };
+
+export const updateUser = (token, userData) => {
+    return apiClient.patch('/user/', userData, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+};

frontend/context/AuthContext.js

@@ -42,8 +42,12 @@ export const AuthProvider = ({ children }) => {
     setUser(null);
   };
 
+  const updateUserInContext = (updatedUser) => {
+    setUser(updatedUser);
+  };
+
   return (
-    <AuthContext.Provider value={{ user, token, isLoading, login, signup, logout }}>
+    <AuthContext.Provider value={{ user, token, isLoading, login, signup, logout, updateUserInContext }}>
       {children}
     </AuthContext.Provider>
   );

frontend/navigation/AccountStackNavigator.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import AccountScreen from '../screens/AccountScreen';
+import EditProfileScreen from '../screens/EditProfileScreen';
+
+const Stack = createNativeStackNavigator();
+
+const AccountStackNavigator = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="AccountRoot" component={AccountScreen} options={{ headerShown: false }}/>
+      <Stack.Screen name="EditProfile" component={EditProfileScreen} options={{ headerShown: false }} />
+    </Stack.Navigator>
+  );
+};
+
+export default AccountStackNavigator;

frontend/navigation/MainNavigator.js

@@ -3,6 +3,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import GroupsStackNavigator from './GroupsStackNavigator';
 import FriendsScreen from '../screens/FriendsScreen';
+import AccountStackNavigator from './AccountStackNavigator';
 
 const Tab = createBottomTabNavigator();
 
@@ -27,6 +28,15 @@ const MainNavigator = () => {
           ),
         }}
       />
+      <Tab.Screen
+        name="Account"
+        component={AccountStackNavigator}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="account-cog" color={color} size={size} />
+          ),
+        }}
+      />
     </Tab.Navigator>
   );
 };

frontend/screens/AccountScreen.js

@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import { View, StyleSheet, Alert } from 'react-native';
+import { Text, Appbar, Avatar, List, Divider } from 'react-native-paper';
+import { AuthContext } from '../context/AuthContext';
+
+const AccountScreen = ({ navigation }) => {
+    const { user, logout } = useContext(AuthContext);
+
+    const handleLogout = () => {
+        logout();
+    };
+
+    const handleComingSoon = () => {
+        Alert.alert('Coming Soon', 'This feature is not yet implemented.');
+    };
+
+  return (
+    <View style={styles.container}>
+      <Appbar.Header>
+        <Appbar.Content title="Account" />
+      </Appbar.Header>
+      <View style={styles.content}>
+        <View style={styles.profileSection}>
+            <Avatar.Text size={80} label={user?.name?.charAt(0) || 'A'} />
+            <Text variant="headlineSmall" style={styles.name}>{user?.name}</Text>
+            <Text variant="bodyLarge" style={styles.email}>{user?.email}</Text>
+        </View>
+
+        <List.Section>
+            <List.Item
+                title="Edit Profile"
+                left={() => <List.Icon icon="account-edit" />}
+                onPress={() => navigation.navigate('EditProfile')}
+            />
+            <Divider />
+            <List.Item
+                title="Email Settings"
+                left={() => <List.Icon icon="email-settings" />}
+                onPress={handleComingSoon}
+            />
+            <Divider />
+            <List.Item
+                title="Send Feedback"
+                left={() => <List.Icon icon="feedback" />}
+                onPress={handleComingSoon}
+            />
+             <Divider />
+            <List.Item
+                title="Logout"
+                left={() => <List.Icon icon="logout" />}
+                onPress={handleLogout}
+            />
+        </List.Section>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 16,
+  },
+  profileSection: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  name: {
+      marginTop: 16,
+  },
+    email: {
+        marginTop: 4,
+        color: 'gray',
+    }
+});
+
+export default AccountScreen;

frontend/screens/EditProfileScreen.js

@@ -0,0 +1,74 @@
+import React, { useState, useContext } from 'react';
+import { View, StyleSheet, Alert } from 'react-native';
+import { Button, TextInput, Appbar, Title } from 'react-native-paper';
+import { AuthContext } from '../context/AuthContext';
+import { updateUser } from '../api/auth';
+
+const EditProfileScreen = ({ navigation }) => {
+  const { user, token, updateUserInContext } = useContext(AuthContext);
+  const [name, setName] = useState(user?.name || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleUpdateProfile = async () => {
+    if (!name) {
+      Alert.alert('Error', 'Name cannot be empty.');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const response = await updateUser(token, { name });
+      updateUserInContext(response.data);
+      Alert.alert('Success', 'Profile updated successfully.');
+      navigation.goBack();
+    } catch (error) {
+      console.error('Failed to update profile:', error);
+      Alert.alert('Error', 'Failed to update profile.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title="Edit Profile" />
+      </Appbar.Header>
+      <View style={styles.content}>
+        <Title>Edit Your Details</Title>
+        <TextInput
+          label="Name"
+          value={name}
+          onChangeText={setName}
+          style={styles.input}
+        />
+        <Button
+          mode="contained"
+          onPress={handleUpdateProfile}
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          style={styles.button}
+        >
+          Save Changes
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 16,
+  },
+  input: {
+    marginBottom: 16,
+  },
+  button: {
+    marginTop: 8,
+  },
+});
+
+export default EditProfileScreen;