Profile Modal for Notesphere #14
Description
Description
Develop a Profile feature for users, presented as a modal centered on the screen. This modal should seamlessly integrate with the existing design and aesthetics of Notesphere, ensuring a consistent user experience. The profile modal will retrieve and display the following user information from the database:
- Name (pre-populated from the database)
- Email (pre-populated and non-editable)
Features to Include:
-
Profile Photo Upload and Management:
- Allow users to upload a profile photo.
- Implement a size restriction for the image upload (e.g., limit to 2MB). If the image exceeds this limit, display a clear, user-friendly warning message.
- Ensure the image is validated for proper formats (e.g., PNG, JPG).
- Provide users with the ability to update or delete their profile photo. If the user opts to delete their photo, display a default avatar in its place.
-
Editable Fields:
- Allow users to change their name.
- Provide additional fields for users to input or update:
- Date of Birth (DOB)
- Registration Number
- Any other relevant optional details.
-
Restrictions:
- Users should not be able to modify their email address, as it serves as a primary identifier.
-
Update Functionality:
- Provide users the option to save and update their details.
- Ensure that any changes made (name, DOB, registration number, etc.) are reflected in the database upon submission.
-
Profile Deletion:
- Include a "Delete Profile" button, allowing users to permanently delete their profile.
- Upon deletion, all user-related data (profile photo, name, DOB, registration number, etc.) should be removed from the database.
- Before proceeding with deletion, show a confirmation modal asking the user to confirm their decision. Clearly communicate that this action is irreversible and all associated data will be lost.
-
Accessing the Profile Modal:
- A button to launch the profile modal should be placed at the top right corner of the screen, positioned beside the logout button for easy accessibility.
-
Design Considerations:
- The modal should match the overall look and feel of Notesphere, utilizing the same color scheme, fonts, and design elements to maintain visual consistency.
- Ensure the modal is responsive and looks good on various screen sizes and devices.
Summary:
This version includes the ability for users to update or delete their profile photo. The button to open the modal is located in the top right corner, next to the logout button.
The profile feature enhances personalization by allowing users to customize their information, such as name and photo, improving engagement. It gives users control over their data, enabling easy updates or deletion. This also streamlines data management and provides quick access, leading to a better overall user experience.