Issue:
The application lacked functionality for users to select and update their profile pictures.
Related Issue:
Closes Issue #47
Overview:
Enhanced the user profile settings to allow users to select and update their profile pictures from a set of predefined options. This feature provides users with more personalization choices for their profiles. Also includes some updated tests for the changed constructor using email, and changes the bio edit/display.
Changes Made:
Implemented frontend JavaScript (profilePic.js) to handle profile picture selection.
Incorporated Thymeleaf expressions to dynamically display the current user's profile picture and username.
Updated profilesetting.html to include a <select> dropdown for choosing from predefined profile pictures or uploading a custom image.
Added JavaScript functionality to update the profile picture preview when a stock image option is selected.
Backend Integration:
Modified UserController.java to include endpoint /update-profile for handling profile updates, including profile picture changes and bio.
Updated the User entity to include the profilePhoto field for storing selected profile picture paths.
Changed GlobalControllerAdvice.java to handle new user details (including username and profile picture) without requiring re-login.
Styling and UI:
profilesetting.html uses the standard style.css stylesheet of the website along with profilesetting.css. Adjustments in profilesetting.css are for profile picture size, buttons, spacing, etc. Bio display is copied from the myaccount style.
Notes:
The link to the profile photo is stored in the database, so it'll need another column for profile_photo.
Todo:
Enhance user profile functionality to include features such as user book lists, friend lists, and other relevant details. Consider future iteration for potential additions like custom profile picture uploads if viable.
Issue: The application lacked functionality for users to select and update their profile pictures.
Related Issue: Closes Issue #47
Overview:
Changes Made:
profilePic.js) to handle profile picture selection.profilesetting.htmlto include a<select>dropdown for choosing from predefined profile pictures or uploading a custom image.Backend Integration:
UserController.javato include endpoint/update-profilefor handling profile updates, including profile picture changes and bio.Userentity to include theprofilePhotofield for storing selected profile picture paths.GlobalControllerAdvice.javato handle new user details (including username and profile picture) without requiring re-login.Styling and UI:
profilesetting.htmluses the standardstyle.cssstylesheet of the website along withprofilesetting.css. Adjustments inprofilesetting.cssare for profile picture size, buttons, spacing, etc. Bio display is copied from the myaccount style.Notes:
profile_photo.Todo:
Files Modified:
profilePic.jsprofilesetting.htmlprofilesetting.cssUserController.java,User.java,GlobalControllerAdvice.java