feat: Implement user profile management page closes #77#92
Conversation
|
@M0izz is attempting to deploy a commit to the Shiv Raj Singh's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a user profile feature (profilePic/bio fields, updateUserProfile API, PUT /update route, Profile page with view/edit modes, avatar rendering in Navbar, and /profile routing). The remainder of the PR applies broad non-functional formatting changes (quote style, line-wrapping, bullet markers) across documentation, configuration, and client/server source files. ChangesUser Profile Feature
Estimated code review effort: 3 (Moderate) | ~25 minutes Repo-wide formatting and style cleanup
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
client/src/pages/Profile.jsx (2)
179-197: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueBroken avatar is only cleared client-side, not persisted back.
On image load failure,
setUserData({ ...userData, profilePic: "" })updates local state/localStorage but never calls the update API, so the invalid URL remains stored server-side. The broken-image toast will resurface on every fresh session/reload until the user manually re-edits their profile.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/pages/Profile.jsx` around lines 179 - 197, The avatar fallback in Profile is only clearing local state inside the img onError handler, so the broken profilePic remains saved on the server. Update the onError flow in Profile.jsx to persist the cleared profilePic through the existing profile update API instead of only calling setProfilePic and setUserData, so the invalid image URL is removed for future sessions.
82-90: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick winClient-side URL validation accepts non-http(s) schemes.
Same underlying gap as the backend's
new URL(profilePic)check (seeserver/controllers/userController.jslines 70-79) — this only confirms parseability, not that the scheme ishttp/https. Since the backend is the authoritative boundary, fixing it there is the priority; this client-side duplicate should mirror whatever restriction is added server-side for consistent UX (immediate feedback instead of a round-trip 400).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/pages/Profile.jsx` around lines 82 - 90, The Profile.jsx client-side check only verifies that profilePic can be parsed by new URL, so it can still accept non-http(s) schemes. Update the validation in the Profile component to mirror the server-side restriction in userController by explicitly requiring http:// or https://, and keep the error message aligned with that rule so the UX matches the authoritative backend validation.server/controllers/userController.js (1)
22-37: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicated user-response shaping between
getUserDataandupdateUserProfile.The
{ id, name, email, ... profilePic, bio, createdAt }object is built identically in both handlers. Extracting a smallformatUserResponse(user)helper would remove the duplication and keep the two endpoints' contracts in sync automatically going forward.Also applies to: 101-116
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@server/controllers/userController.js` around lines 22 - 37, The user response object is being assembled twice in both getUserData and updateUserProfile, so extract the shared shaping logic into a helper like formatUserResponse(user) near userController.js and use it in both handlers. Keep the helper responsible for returning the same fields currently included (id, name, email, isAccountVerified, role, hasCompletedOnboarding, organization, profilePic, bio, createdAt) so both endpoints stay consistent and duplication is removed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@client/src/components/Navbar.jsx`:
- Around line 398-414: The avatar image fallback in Navbar is mutating the DOM
with an inline display:none, which can leave a broken avatar permanently hidden
after the URL changes. Update the desktop and mobile avatar render paths to use
React state in Navbar instead of e.target.style.display, so a failed load is
tracked and cleared whenever userData.profilePic changes. Keep the fallback
logic centralized by extracting a small Avatar component or otherwise applying
the same state-reset behavior to both duplicated copies.
In `@server/controllers/userController.js`:
- Around line 81-93: The `userModel.findByIdAndUpdate` update in
`userController` is overwriting `profilePic` and `bio` with empty strings when
those fields are omitted. Change the update payload so `name`, `profilePic`, and
`bio` are only included in `$set` when they were actually provided in
`req.body`, using the existing `updatedUser` flow to keep the partial-update
behavior safe.
- Around line 63-79: The profile update validation in userController should be
tightened so it enforces the same minimum name length on the server and only
accepts browser-safe image URLs for profilePic. Update the validation logic in
the profile update handler to reject names shorter than the required minimum,
and in the existing new URL(profilePic) check, additionally verify the scheme is
limited to http and https before accepting it.
---
Nitpick comments:
In `@client/src/pages/Profile.jsx`:
- Around line 179-197: The avatar fallback in Profile is only clearing local
state inside the img onError handler, so the broken profilePic remains saved on
the server. Update the onError flow in Profile.jsx to persist the cleared
profilePic through the existing profile update API instead of only calling
setProfilePic and setUserData, so the invalid image URL is removed for future
sessions.
- Around line 82-90: The Profile.jsx client-side check only verifies that
profilePic can be parsed by new URL, so it can still accept non-http(s) schemes.
Update the validation in the Profile component to mirror the server-side
restriction in userController by explicitly requiring http:// or https://, and
keep the error message aligned with that rule so the UX matches the
authoritative backend validation.
In `@server/controllers/userController.js`:
- Around line 22-37: The user response object is being assembled twice in both
getUserData and updateUserProfile, so extract the shared shaping logic into a
helper like formatUserResponse(user) near userController.js and use it in both
handlers. Keep the helper responsible for returning the same fields currently
included (id, name, email, isAccountVerified, role, hasCompletedOnboarding,
organization, profilePic, bio, createdAt) so both endpoints stay consistent and
duplication is removed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f05f6d71-57a2-4a4c-978f-2e5f203b7746
📒 Files selected for processing (57)
.github/ISSUE_TEMPLATE/bug_report.md.github/ISSUE_TEMPLATE/config.yml.github/PULL_REQUEST_TEMPLATE.mdCODE_OF_CONDUCT.mdCONTRIBUTING.mdREADME.mdSECURITY.mdclient/eslint.config.jsclient/index.htmlclient/src/App.jsxclient/src/assets/assets.jsclient/src/assets/emailTemplates.jsclient/src/components/FAQ.jsxclient/src/components/Footer.jsxclient/src/components/Header.jsxclient/src/components/Hero.jsxclient/src/components/Navbar.jsxclient/src/components/meetings/EmptyState.jsxclient/src/components/meetings/MeetingCard.jsxclient/src/components/meetings/MeetingFilters.jsxclient/src/components/meetings/MeetingRepository.jsxclient/src/components/meetings/Pagination.jsxclient/src/context/AppContent.jsclient/src/context/AppContext.jsxclient/src/index.cssclient/src/main.jsxclient/src/pages/CreateOrganizationPage.jsxclient/src/pages/EmailVerify.jsxclient/src/pages/MeetingRoom.jsxclient/src/pages/Profile.jsxclient/src/pages/Reports.jsxclient/src/pages/ResetPassword.jsxclient/src/pages/SelectRolePage.jsxclient/src/pages/Summaries.jsxclient/src/pages/TeamMembers.jsxclient/vite.config.jspineconeSearch.jsscripts/update-contributors.jsserver/config/emailTemplates.jsserver/config/mongodb.jsserver/controllers/aiController.jsserver/controllers/analyticsController.jsserver/controllers/authControllers.jsserver/controllers/meetingController.jsserver/controllers/organizationController.jsserver/controllers/searchController.jsserver/controllers/userController.jsserver/middleware/userAuth.jsserver/models/meetingModel.jsserver/models/organizationModel.jsserver/models/userModel.jsserver/routes/geminiRoutes.jsserver/routes/meetingRoutes.jsserver/routes/userRoutes.jsserver/server.jsserver/services/speechService.jstestEmbedding.js
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
imuniqueshiv
left a comment
imuniqueshiv
left a comment
There was a problem hiding this comment.
@M0izz Thank you for your contribution and for the effort you've put into implementing the User Profile Management page! 🚀
Overall, this is a well-structured feature with a good user experience. I appreciate the backend validation, frontend integration, responsive layout, and the immediate AppContext updates after saving profile changes.
Before I can merge this PR, I'd like to request a couple of changes:
1. Fix the avatar fallback behavior
Currently, the avatar image is hidden using an inline display: none inside the onError handler.
Once an image fails to load, updating the profile with a valid image URL can still leave the avatar hidden until the page is refreshed.
Please manage the image loading state using React state instead of directly mutating the DOM so that the avatar updates correctly whenever the profile picture changes.
2. Resolve the CodeQL security alerts
The PR currently introduces new High Severity CodeQL alerts related to missing rate limiting on:
GET /api/user/dataPUT /api/user/update
Please add the project's existing rate limiting middleware (or another appropriate solution) to these routes so the new security alerts are resolved before merging.
Once these two items are addressed, I'll be happy to review the updated implementation again.
Thanks again for your contribution and for taking the time to build this feature. I really appreciate your effort and look forward to the updated PR! 🎉
M0izz
force-pushed
the
feat/user-profile-page
branch
from
4e98f68 to
e924718
Compare
…ct DOM manipulation
|
@imuniqueshiv fixed the issues , can u take a look and tell me any more changes you would like?, thnx letting me contribute :) |
|
@M0izz Thank you for your excellent contribution and for being so responsive to the review feedback! 🚀 I really appreciate the effort you put into refining the implementation, addressing the avatar fallback issue, and resolving the remaining review comments. The User Profile Management page is a valuable addition to MeetOnMemory, and I'm happy to have merged your work. Thank you for contributing to MeetOnMemory! If you found the project helpful, please consider ⭐ starring the repository. I hope to see more of your contributions in the future. Happy coding! 💙 |
|
🎉 Thank you for your contribution! Your pull request has been successfully merged. We appreciate your effort in improving MeetOnMemory, @M0izz! |
imuniqueshiv
added
enhancement
3 participants
Summary
Implements a dedicated User Profile Management page at /profile, closing #77. Users can now view their profile details and edit their name, avatar (via image URL), and bio, without touching any authentication or JWT logic.
Backend
Frontend
Scope
No changes to authentication, JWT handling, protected routes, organization management, or unrelated pages, per the issue's constraints.
Screenshots
Before: (no dedicated profile page - see artifacts)
After - view mode: (see artifacts)
After - edit mode: (see artifacts)
Screen recording and artifacts
The visual demo and saved screenshot are available in the local directory:
Testing checklist
Summary by CodeRabbit
New Features
Improvements