feat(frontend): Implement User Profile Management Functionality #6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added new logo files to the `img` directory for use in the frontend. - Included various formats and sizes to support different display requirements.
- Added `favicon.ico` file for use as the website's favicon.
- Added `sidebar.ejs` to create a sidebar component with navigation links. - Implemented toggle functionality to show/hide the sidebar on smaller screens. - Included necessary styles and scripts for the sidebar component. - Updated the layout to integrate the sidebar component.
- Added `/dashboard` route in `index.js` to render the dashboard page. - Created `dashboard.ejs` view with a basic layout and included the sidebar component. - Integrated the sidebar component into the dashboard view. - Set up a placeholder main content area in the dashboard view.
…n active path - Enhanced link highlighting in `sidebar.ejs` to indicate the active path. - Implemented logic to expand the parent menu if the active link is within a collapsed menu. - Ensured the sidebar reflects the current navigation state based on the active path. - Updated the sidebar script to handle link highlighting and menu expansion dynamically.
…uests - Added `User` class in `user.js` to manage user-related API requests. - Implemented methods for fetching user data, settings, and safety records. - Added methods for updating username, email, password, profile, and settings. - Utilized `fetch` API to communicate with backend endpoints. - Integrated the `User` class with the main application class for seamless user management.
…lated paths - Updated `isPublicRoute` method in `Location` class to include user-related paths. - Ensured user-related paths such as `/user`, `/user/edit`, and `/user/settings` are not considered public routes. - Improved route handling to correctly redirect authenticated and unauthenticated users.
- Added `default-avatar.png` to the `img` directory for use as the default user avatar. - Updated relevant components to use the default avatar image when no user avatar is provided.
- Added `/user` route in `userRoutes.js` to render the user profile page. - Created `profile.ejs` view for displaying user profile information including avatar, name, username, email, school, birthday, country, and joined date. - Implemented logic in `profile.ejs` to fetch and display user data from the backend. - Updated `index.js` to include user routes and handle navigation to the user profile page.
… link - Added `/user/edit` route in `userRoutes.js` to render the edit profile page. - Created `edit-profile.ejs` view for editing user profile information including avatar, name, username, email, school, birthday, and country. - Implemented form handling and submission logic in `edit-profile.ejs` to update user profile. - Updated the profile page to include a link to the edit profile page.
…views - Updated `edit-profile.ejs` to handle empty profile fields by providing default values or placeholders. - Updated `profile.ejs` to handle empty profile fields by displaying "N/A" or default values. - Ensured the profile and edit profile views display user data correctly, even when some fields are missing.
- Updated `userSchema` to ensure the `country` field is always stored in uppercase. - Added a pre-save hook to convert the `country` field to uppercase before saving the document. - Ensured consistency in storing country codes in the database.
- Updated `styles.css` to apply background and text colors to the `body` element using Tailwind CSS classes. - Ensured consistent styling across the application by setting the `bg-background` and `text-text` classes on the `body`.
- Added `/user/account` route in `userRoutes.js` to render the account settings page. - Created `account.ejs` view for managing account settings including username, email, and password. - Implemented form handling and submission logic in `account.ejs` to update user account details. - Included necessary scripts and styles in `account.ejs` for form handling and UI.
- Updated `updatePassword` controller in `userControllers.js` to retrieve the user by ID before verifying the current password. - Ensured the user is fetched from the database before performing password verification. - Improved error handling for cases where the user is not found or the password verification fails.
- Added `/user/account/complete-email-update` route in `userRoutes.js` to handle email update completion. - Created `complete-email-update.ejs` view to process and display the result of the email update. - Implemented logic in `complete-email-update.ejs` to call the `completeEmailUpdate` method and display success or error messages. - Included necessary scripts and styles in `complete-email-update.ejs` for form handling and UI.
- Added `/user/settings` route in `userRoutes.js` to render the settings page. - Created `settings.ejs` view for managing user settings including time format, date format, and theme. - Implemented form handling and submission logic in `settings.ejs` to update user settings. - Included necessary scripts and styles in `settings.ejs` for form handling and UI.
- Added `/user/security` route in `userRoutes.js` to render the security records page. - Created `security.ejs` view for displaying user security records including type, time, IP address, and device info. - Implemented logic in `security.ejs` to fetch and display security records from the backend with pagination support. - Included necessary scripts and styles in `security.ejs` for table display and pagination controls.
- Added `/user/logout` route in `userRoutes.js` to render the logout confirmation page. - Created `logout.ejs` view to confirm user logout with a button to proceed. - Implemented logout functionality in `logout.ejs` to destroy the user session and redirect to the login page. - Included necessary scripts and styles in `logout.ejs` for the logout confirmation button.
…ement - Added `Cache` class in `app.js` to manage session storage. - Implemented methods to load, save, and proxy cache data. - Ensured cache data is stored in session storage and automatically saved on updates. - Integrated the `Cache` class with the main `App` class for seamless session management.
- Updated `sidebar.ejs` to include a user avatar section with user name and username. - Implemented logic to fetch and display user data including avatar, name, and username. - Added a mini-menu for quick access to account, settings, and logout options. - Included necessary scripts to handle sidebar toggle and user data fetching.
There was a problem hiding this comment.
Copilot reviewed 12 out of 24 changed files in this pull request and generated no comments.
Files not reviewed (12)
- frontend/src/styles.css: Language not supported
- frontend/src/views/components/sidebar.ejs: Language not supported
- frontend/src/views/pages/dashboard.ejs: Language not supported
- frontend/src/views/pages/user/account.ejs: Language not supported
- frontend/src/views/pages/user/complete-email-update.ejs: Language not supported
- frontend/src/views/pages/user/edit-profile.ejs: Language not supported
- frontend/src/views/pages/user/logout.ejs: Language not supported
- frontend/src/views/pages/user/profile.ejs: Language not supported
- frontend/src/views/pages/user/security.ejs: Language not supported
- frontend/src/views/pages/user/settings.ejs: Language not supported
- backend/src/controllers/userControllers.js: Evaluated as low risk
- backend/src/models/userSchema.js: Evaluated as low risk
Comments suppressed due to low confidence (2)
frontend/public/js/user.js:16
- [nitpick] The variable name DEFAULT_SAFETY_RECORDS_LIMIT should be in camelCase to maintain consistency with other variable names.
this.DEFAULT_SAFETY_RECORDS_LIMIT = 10;
frontend/public/js/user.js:24
- [nitpick] The parameter name userId should be renamed to userID to maintain consistency with other parts of the codebase where ID is capitalized.
async getUser(userId = this.app.auth.userId) {
TKanX
deleted the
feature/4-implement-user-profile-management-functionality
branch
49 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Implemented a complete user profile management system, enabling a user-friendly and secure way to manage profiles, settings, and security records. Key functionalities include:
Changes:
Added Components:
Added Pages:
Added
UserClass Methods:getUser(),updateProfile().getSettings(),updateSettings().getSafetyRecords().updateUsername(),updateEmail(),completeEmailUpdate(),updatePassword().Enhanced User Experience: