Profile Management

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/front/src/editprofilepage/editprofilepage.jsx
• BACKEND/src/controllers/user.controller.js
• BACKEND/src/models/User.model.js
• frontend/front/src/services/api.js
• frontend/front/src/signup/signup.jsx
• frontend/front/src/editprofilepage/editprofilepage.css

The Profile Management system provides the necessary infrastructure for users to register, authenticate, and modify their personal account details within the Bridge AI platform. It encompasses both a React-based frontend for user interaction and a Node.js/Express backend that handles data persistence, password hashing, and token-based session management.

This module ensures that user information such as full names, email addresses, and credentials are securely stored and accessible only to authorized users through JSON Web Tokens (JWT). Users can update their identity information via a dedicated glassmorphism interface that communicates with RESTful API endpoints.

Sources: frontend/front/src/editprofilepage/editprofilepage.jsx, BACKEND/src/controllers/user.controller.js, BACKEND/src/models/User.model.js

Architecture and Data Flow

Profile management follows a client-server architecture. The frontend uses axios to send asynchronous requests to the backend, utilizing an interceptor to attach bearer tokens for authentication. The backend processes these requests using a controller-service pattern and interacts with a MongoDB database via Mongoose models.

User Data Model

The system relies on a Mongoose schema to define the structure of a user profile. Key fields include unique identifiers for usernames and emails, along with encrypted password storage.

Field	Type	Constraints	Description
username	String	Unique, Required, Indexed	The unique handle for the user.
email	String	Unique, Required	The user's registered email address.
fullName	String	Required, Indexed	The user's display name.
password	String	Required	BCRYPT hashed password string.
refreshToken	String	Optional	Token used for session persistence.

Sources: BACKEND/src/models/User.model.js:5-41

Authentication and Session Flow

The system uses a dual-token strategy involving Access Tokens and Refresh Tokens to manage active user sessions.

Frontend Components

The profile management interface is built using functional React components and hooks for state management.

Edit Profile Page

The EditProfilePage component allows users to modify their existing details. It uses the useState hook to manage form inputs for username, fullName, email, and password.

• Logic: The component captures user input and triggers a handleSaveChanges function upon form submission.
• Styling: Utilizes a glassmorphism design with backdrop-filter: blur(12px) and semi-transparent backgrounds to maintain the platform's aesthetic.

Sources: frontend/front/src/editprofilepage/editprofilepage.jsx:4-13, frontend/front/src/editprofilepage/editprofilepage.css:22-30

API Integration

Communication with the backend is abstracted into a service layer.

// Example of profile update integration
export const updateProfile = async (userData) => {
  try {
    const response = await api.put("/users/profile", userData);
    return response.data;
  } catch (error) {
    throw error.response?.data || error.message;
  }
};

Sources: frontend/front/src/services/api.js:53-60

Backend Logic and Security

The backend manages the lifecycle of a profile through the user.controller.js.

Profile Update Logic

The updateAccountDetails function is responsible for persisting changes to a user's profile. It validates that required fields are present before performing an atomic update in the database using findByIdAndUpdate.

Security Implementations

1. Password Hashing: Before saving a user to the database, the system uses a Mongoose pre hook to hash the password using bcrypt with 10 salt rounds.
2. Credential Verification: The User model includes a custom method isPasswordCorrect to safely compare plain-text login attempts with stored hashes.
3. Token Security: Access tokens are signed using an ACCESS_TOKEN_SECRET and include the user's ID, email, and username as payload.

Sources: BACKEND/src/models/User.model.js:43-56, BACKEND/src/controllers/user.controller.js:132-135

API Endpoints Summary

Endpoint	Method	Description	Source
/users/register	POST	Creates a new user account.	user.controller.js
/users/login	POST	Authenticates user and issues tokens.	user.controller.js
/users/profile	GET	Fetches current user information.	api.js
/users/profile	PUT	Updates name and email details.	user.controller.js
/users/refresh-token	POST	Issues new access token using refresh token.	user.controller.js

Sources: BACKEND/src/controllers/user.controller.js:51-267, frontend/front/src/services/api.js:43-69

Summary

Profile Management in this project provides a secure bridge between user identity and platform features. By combining bcrypt for data at rest and JWT for data in transit, the system maintains high security standards while offering a fluid React-based user interface for account maintenance.