Profile Management Tab with React Native

[noel-vargas]

29

Objective The goal of this task is to implement a functional profile management tab in the React Native application. Users should be able to view and update their profile information, including uploading a profile picture, entering their first name, last name, email, password, and selecting their role.

Task Description The profile management tab should allow users to manage their personal details efficiently. This includes:

• Uploading a profile picture from their phone.
• Inputting and editing their first name, last name, email, and password.
• Selecting their role from predefined options. The layout should include a vertical container, with the profile picture at the top and form fields below. Changes should be saved and reflected on the user's profile.

Implementation

• Use existing components for input fields (name, email, password, etc.) and ensure they function correctly within the profile tab.
• Implement a feature for selecting and uploading a profile picture from the user's device (use image picker library if not already implemented).
• Ensure data is validated (e.g., email format, password strength) before allowing changes to be saved.
• Store the updated information using appropriate state management, and persist changes to local storage or a backend if integrated.
• Create a responsive and user-friendly layout with proper spacing and alignment in the vertical container.

Subtasks

• Set up a vertical container to arrange the components for the profile picture and input fields.
• Implement the feature to allow users to upload a profile picture from their phone.
• Ensure first name, last name, email, password, and role input fields are functional and styled appropriately.
• Implement form validation for email and password fields.
• Add functionality to save changes and persist the updated data.

Deadline This task should be completed by October 10, 2024, to meet the project milestone for profile management functionality.

[evnd04]

When working wi†h the password, its preferable that its not displayed outright, if possible display only dots, when pressed you confirm the password and then it displays the password without hiding. Just for security. You could connect this to the change your password feature also just in case a user doesnt remember their password.