Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2535 Reimplement User Profile Management (Frontend + Backend)

2025-04-23T12:57:07Z

Gsharma3:

==Overview==

The goal of this project is to reimplement the User Profile Management feature in the Expertiza system, replacing the legacy Ruby-based frontend with a modern, responsive interface built using React with TypeScript, while retaining and enhancing the existing Ruby on Rails backend.

This modernization effort addresses the challenges posed by outdated UI, limited form validation, and insecure session handling in the current implementation. By leveraging modern frameworks and best practices, the new system will allow users to securely update their profile details, manage email and notification preferences, and change passwords.

The improved design will enhance maintainability, user experience, and security, aligning with Expertiza’s broader goal of offering a user-friendly, scalable, and secure open-source platform for peer-reviewed assignments.

==Problem Statement==

The current user profile management system in Expertiza is built using legacy Ruby views, which makes it difficult to maintain, extend, and modernize. The UI lacks responsiveness, and the user experience is hindered by minimal validation, outdated styling, and insufficient feedback mechanisms.

From a security perspective, the current system does not follow best practices for handling sensitive operations such as password changes and session management. For instance:
* Password updates do not log out other active sessions, leaving accounts vulnerable.
* API responses may expose too much information, enabling account enumeration.
* There is no rate limiting, making the system susceptible to brute-force attacks.

These limitations lead to:
* Poor user experience (UX) and accessibility
* Increased technical debt and maintenance burden
* Security risks in managing user authentication and sessions

As Expertiza evolves, it is essential to rebuild the profile management feature using modern frontend technologies and robust backend practices that improve usability, security, and maintainability.

== Existing Issues ==

* '''Legacy Frontend Implementation''':
** Uses Ruby templates, limiting flexibility and scalability.
** Transition to React will improve maintainability and user experience.
* '''Inconsistent Form Validation''':
** Validation is not uniform, leading to unclear user feedback.
** React Hook Form will be used for consistent validation.
* '''Limited Security for Password Changes''':
** No session invalidation after password updates.
** New implementation will log out all active sessions and invalidate old tokens.
* '''Basic Error Handling''':
** Current error handling is minimal and vague.
** Enhanced error messages and better handling for edge cases will be implemented.
* '''Outdated User Interface''':
** The UI is not modern or responsive.
** A redesigned UI will be created for improved user interaction and accessibility.

==Proposed Changes==

=== Front-End ===

Enhance usability and data integrity through a tab-based layout that organizes the profile page into distinct sections, ensuring that users can update specific areas independently without risk of data loss.

==== Key Features ====

* Tab-based Layout
** The profile page will be restructured into multiple tabs, with each tab dedicated to a specific subsection (e.g., Personal Details, Password, Notification Settings).
** This separation allows users to navigate between different sections without losing unsaved data from other areas.

* Dedicated Forms for Each Section
** Implement separate forms for each tab using React Hook Form which enables efficient state management and robust schema-driven validations.
** Ensure that each form manages its own state and validation logic independently, avoiding interference between sections.

* Enhanced User Experience
** Users will benefit from clear, compartmentalized UI sections, reducing cognitive load and streamlining the update process.
** Real-time validation and dedicated feedback per section will help prevent input errors and improve overall form usability.

==== Proposed Wireframes ====
[[File:wireframes1.png|600px|Wireframe 1]]
[[File:wireframes2.png|600px|Wireframe 2]]
[[File:wireframes3.png|600px|Wireframe 3]]
[[File:wireframes4.png|600px|Wireframe 4]]
[[File:wireframes5.png|600px|Wireframe 5]]

''Attached Wireframes are not to be mistaken as actual designs or the live application/website.''

==== File Modifications ====
* Edit the existing code in [https://github.com/expertiza/reimplementation-front-end/blob/main/src/pages/Profile/Edit.tsx `src/pages/Profile/Edit.tsx`] to implement the new layout.

=== Back-End ===

The backend will be enhanced to support secure, RESTful profile and password updates, while incorporating session management and protection against attacks.

==== User Model Enhancements ====
Add/update methods to:
* Safely update user profile fields (e.g., name, email)
* Change passwords using bcrypt for hashing
* Invalidate old sessions upon password update

==== New API Endpoints ====
There are some of the proposed endpoints for the reimplementation.
* `GET /api/v1/profile` – Fetch current user details
* `PUT /api/v1/profile` – Update user profile
* `PUT /api/v1/profile/password` – Update password securely

==== Session Management ====
* Log out all active sessions after a successful password change
* Revoke previous tokens to ensure account safety

==== Security Measures ====
* Implement rate limiting with `Rack::Attack` to prevent brute-force attacks
* Return generic error messages for failed logins to avoid account enumeration

==Database Changes==

The existing `users` table currently includes all the necessary fields required for user profile management, such as name, email, and password. As of now, no immediate changes to the schema are required. However, during the implementation phase, if additional fields are identified as necessary, the schema will be updated accordingly. Any modifications to the schema will be thoroughly reviewed and documented to ensure they align with the project requirements and maintain data integrity.

==Overview of Classes==

=== UsersController (app/controllers/api/v1/users_controller.rb) ===
Will be extended to:
* `GET /profile`: Return current user details (JSON)
* `PUT /profile`: Update user attributes like name, email, notification preferences

=== PasswordsController (app/controllers/api/v1/passwords_controller.rb) ===
Will handle secure password changes via:
* `PUT /password`:
** Authenticate using current password
** Update using bcrypt
** Invalidate old sessions/tokens
** Issue a new session token

=== User Model (app/models/user.rb) ===
Updated to include:
* `update_profile(params)` method for secure profile updates
* `change_password(current_password, new_password)` with proper validations
* Session/token handling logic after password changes

=== AuthenticationTokenService / Session Handler ===
* Issues new tokens upon password change
* Invalidates previous sessions to prevent unauthorized access

=== ApplicationController ===
* Handles token-based authentication for API access
* Provides common methods for current user lookup and error handling

=== Rack::Attack Configuration (config/initializers/rack_attack.rb) ===
* Implements rate limiting for profile and password update endpoints
* Helps mitigate brute-force and enumeration attacks

=== Class Diagram ===

<center>[[File:ClassDiagramE2535.png||Class Diagram]]</center>

==Design Goals==

=== Usability & User Experience (UX) ===
* '''Intuitive Interface''': The user profile page should be easy to navigate with clear sections for updating profile information, changing passwords, and managing notifications. Each form will include:
** Informative tooltips and labels
** Clear error messages and success notifications
** Loading indicators to improve responsiveness

* '''Responsive Design''': The profile page must be fully responsive across various devices, from desktops to mobile phones, ensuring an optimized experience for all users.

* '''Smooth Transitions''': Using React Router, transitions between different sections (such as profile editing and password change) should feel seamless without page reloads, improving the overall user experience.

=== Security ===
* '''Password Management'''
** Use bcrypt to hash passwords securely before saving them to the database.
** Implement token-based authentication for user sessions.
** When the password is updated, invalidate all active sessions and issue a new authentication token to prevent unauthorized access.

* '''Rate Limiting''': To prevent brute-force attacks, rate limiting will be implemented on sensitive endpoints like the password change and login routes using Rack::Attack.

* '''Account Enumeration Protection''': Return generic error messages on failed login attempts and password changes to prevent attackers from determining whether a username/email is valid.

* '''Session Management''': When a password is successfully updated, ensure that all other active sessions are logged out and new tokens are issued to prevent session hijacking.

=== Maintainability & Scalability ===
* '''Modular Codebase''': The code will follow a modular approach by breaking down functionality into smaller, reusable components (both frontend and backend). For example, the frontend components will be encapsulated, and the backend logic will be implemented using service objects where appropriate.

* '''RESTful API Structure''': The backend will adhere to RESTful principles for API endpoints, ensuring that the architecture is scalable and easily extendable in the future. Common conventions like GET, PUT, and PATCH will be used for profile and password management.

* '''Separation of Concerns''': The frontend and backend will be clearly separated with well-defined API contracts. The frontend will handle the presentation and user interactions, while the backend will focus on business logic and data persistence.

* '''Testing and Quality Assurance''': Automated tests will be implemented to ensure the robustness of the system. RSpec will be used for backend testing, and Jest will be used for frontend testing.

=== Code Quality ===
* '''Adhere to DRY Principles''': The code will avoid repetition by creating reusable components and centralized validation logic for both frontend and backend. For example, validation logic for user input will be shared between the frontend (React Hook Form validation) and the backend (model validations).

* '''Consistent API Responses''': API responses will be standardized across endpoints to ensure a consistent interface for the frontend. This includes:
** Returning relevant HTTP status codes
** Structuring responses with consistent fields

* '''Clear Documentation''': The documentation will be maintained, detailing endpoint routes, required parameters, expected responses, and error handling procedures.

== Implementation Plan ==

=== Frontend Implementation ===
* Create new React components
* Implement validation of form fields
* Connect to backend endpoints
* Add success/confirmation messages on profile updates
* Add loading states and error handling
* Implement responsive design

=== Backend Implementation ===
* Update UserController with new endpoints
* Implement password security measures
* Add rate limiting functionality
* Update user model validation
* Implement session management

==== Sequence Diagram ====

<center>[[File:SequenceDiagram.png|600px|Sequence Diagram]]</center>

== Implementation ==

=== Frontend Implementation ===
The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles. This feature redesigns the Edit Profile page, implementing a modern, form-based interface using React, TypeScript, and React Hook Form, with full backend integration for real-time data fetch and update. The new UI focuses on form validation, user experience, and code maintainability.

Key Features:
* Form Management: Uses `react-hook-form` and `yup` for structured form handling and ensuring reliable input checks and robust form validation
* Backend Integration: Profile data is fetched from the backend and is used to populate the form fields. On submission, this data is validated and triggers an API request to update profile and password (if the password is changed).
* API Communication: Uses `axios` for making HTTP requests to fetch user profile data and submit updates to the backend, including GET, PATCH and POST requests with authentication headers.
* UI Enhancements: Improved error handling and form usability. `Yup` validation checks data before it is sent to the backend, ensuring fast display of errors. The form also display success and error messages for API requests.

[[File:FinalUI.png|600px|Form View - User can edit profile fields]]
[[File:FinalUI-Success.png|600px|Success Message - Profile updated successfully]]
[[File:FinalUI-Failure.png|600px|Error Message - Displaying validation error]]

==Test Plan==

=== Unit Tests ===
* '''Details''': Write tests to validate that the model validations are functioning correctly.
* '''Focus''': Ensure associations are set up properly (`belongs_to`, `has_many`), and no dangling records are left after CRUD operations.

=== Functional Tests ===
* '''Details''': Use RSpec to test the behavior of the controllers.
* '''Focus''': Verify that the controllers correctly handle user input and update the database.

=== Manual Testing ===
* '''Details''': Validate the overall user experience.
* '''Focus''': Test UI layout, responsiveness, toggle functionality (password visibility), and the system's performance under normal usage.

==Mentor==

* [mailto:pkodali@ncsu.edu Prathyusha Kodali]

==Team Members==

* [mailto:dsaraog@ncsu.edu Devang Saraogi]
* [mailto:gsharma3@ncsu.edu Galav Sharma]
* [mailto:jshah23@ncsu.edu Jash Shah]

==References==
* [https://expertiza.ncsu.edu/ Expertiza]
* [https://docs.google.com/document/d/1jjbqggRDiOHrxdsMlliY62JnP34bGTNHVWAZNz89kT8/edit?usp=sharing Final Projects on Expertiza]
* [https://github.com/expertiza/reimplementation-front-end Front-end Github]
* [https://github.com/expertiza/reimplementation-back-end Back-end Github]

CSC/ECE 517 Spring 2025 - E2535 Reimplement User Profile Management (Frontend + Backend)

2025-04-23T12:52:41Z

Gsharma3:

==Overview==

The goal of this project is to reimplement the User Profile Management feature in the Expertiza system, replacing the legacy Ruby-based frontend with a modern, responsive interface built using React with TypeScript, while retaining and enhancing the existing Ruby on Rails backend.

This modernization effort addresses the challenges posed by outdated UI, limited form validation, and insecure session handling in the current implementation. By leveraging modern frameworks and best practices, the new system will allow users to securely update their profile details, manage email and notification preferences, and change passwords.

The improved design will enhance maintainability, user experience, and security, aligning with Expertiza’s broader goal of offering a user-friendly, scalable, and secure open-source platform for peer-reviewed assignments.

==Problem Statement==

The current user profile management system in Expertiza is built using legacy Ruby views, which makes it difficult to maintain, extend, and modernize. The UI lacks responsiveness, and the user experience is hindered by minimal validation, outdated styling, and insufficient feedback mechanisms.

From a security perspective, the current system does not follow best practices for handling sensitive operations such as password changes and session management. For instance:
* Password updates do not log out other active sessions, leaving accounts vulnerable.
* API responses may expose too much information, enabling account enumeration.
* There is no rate limiting, making the system susceptible to brute-force attacks.

These limitations lead to:
* Poor user experience (UX) and accessibility
* Increased technical debt and maintenance burden
* Security risks in managing user authentication and sessions

As Expertiza evolves, it is essential to rebuild the profile management feature using modern frontend technologies and robust backend practices that improve usability, security, and maintainability.

== Existing Issues ==

* '''Legacy Frontend Implementation''':
** Uses Ruby templates, limiting flexibility and scalability.
** Transition to React will improve maintainability and user experience.
* '''Inconsistent Form Validation''':
** Validation is not uniform, leading to unclear user feedback.
** React Hook Form will be used for consistent validation.
* '''Limited Security for Password Changes''':
** No session invalidation after password updates.
** New implementation will log out all active sessions and invalidate old tokens.
* '''Basic Error Handling''':
** Current error handling is minimal and vague.
** Enhanced error messages and better handling for edge cases will be implemented.
* '''Outdated User Interface''':
** The UI is not modern or responsive.
** A redesigned UI will be created for improved user interaction and accessibility.

==Proposed Changes==

=== Front-End ===

Enhance usability and data integrity through a tab-based layout that organizes the profile page into distinct sections, ensuring that users can update specific areas independently without risk of data loss.

==== Key Features ====

* Tab-based Layout
** The profile page will be restructured into multiple tabs, with each tab dedicated to a specific subsection (e.g., Personal Details, Password, Notification Settings).
** This separation allows users to navigate between different sections without losing unsaved data from other areas.

* Dedicated Forms for Each Section
** Implement separate forms for each tab using React Hook Form which enables efficient state management and robust schema-driven validations.
** Ensure that each form manages its own state and validation logic independently, avoiding interference between sections.

* Enhanced User Experience
** Users will benefit from clear, compartmentalized UI sections, reducing cognitive load and streamlining the update process.
** Real-time validation and dedicated feedback per section will help prevent input errors and improve overall form usability.

==== Proposed Wireframes ====
[[File:wireframes1.png|600px|Wireframe 1]]
[[File:wireframes2.png|600px|Wireframe 2]]
[[File:wireframes3.png|600px|Wireframe 3]]
[[File:wireframes4.png|600px|Wireframe 4]]
[[File:wireframes5.png|600px|Wireframe 5]]

''Attached Wireframes are not to be mistaken as actual designs or the live application/website.''

==== File Modifications ====
* Edit the existing code in [https://github.com/expertiza/reimplementation-front-end/blob/main/src/pages/Profile/Edit.tsx `src/pages/Profile/Edit.tsx`] to implement the new layout.

=== Back-End ===

The backend will be enhanced to support secure, RESTful profile and password updates, while incorporating session management and protection against attacks.

==== User Model Enhancements ====
Add/update methods to:
* Safely update user profile fields (e.g., name, email)
* Change passwords using bcrypt for hashing
* Invalidate old sessions upon password update

==== New API Endpoints ====
There are some of the proposed endpoints for the reimplementation.
* `GET /api/v1/profile` – Fetch current user details
* `PUT /api/v1/profile` – Update user profile
* `PUT /api/v1/profile/password` – Update password securely

==== Session Management ====
* Log out all active sessions after a successful password change
* Revoke previous tokens to ensure account safety

==== Security Measures ====
* Implement rate limiting with `Rack::Attack` to prevent brute-force attacks
* Return generic error messages for failed logins to avoid account enumeration

==Database Changes==

The existing `users` table currently includes all the necessary fields required for user profile management, such as name, email, and password. As of now, no immediate changes to the schema are required. However, during the implementation phase, if additional fields are identified as necessary, the schema will be updated accordingly. Any modifications to the schema will be thoroughly reviewed and documented to ensure they align with the project requirements and maintain data integrity.

==Overview of Classes==

=== UsersController (app/controllers/api/v1/users_controller.rb) ===
Will be extended to:
* `GET /profile`: Return current user details (JSON)
* `PUT /profile`: Update user attributes like name, email, notification preferences

=== PasswordsController (app/controllers/api/v1/passwords_controller.rb) ===
Will handle secure password changes via:
* `PUT /password`:
** Authenticate using current password
** Update using bcrypt
** Invalidate old sessions/tokens
** Issue a new session token

=== User Model (app/models/user.rb) ===
Updated to include:
* `update_profile(params)` method for secure profile updates
* `change_password(current_password, new_password)` with proper validations
* Session/token handling logic after password changes

=== AuthenticationTokenService / Session Handler ===
* Issues new tokens upon password change
* Invalidates previous sessions to prevent unauthorized access

=== ApplicationController ===
* Handles token-based authentication for API access
* Provides common methods for current user lookup and error handling

=== Rack::Attack Configuration (config/initializers/rack_attack.rb) ===
* Implements rate limiting for profile and password update endpoints
* Helps mitigate brute-force and enumeration attacks

=== Class Diagram ===

<center>[[File:ClassDiagramE2535.png||Class Diagram]]</center>

==Design Goals==

=== Usability & User Experience (UX) ===
* '''Intuitive Interface''': The user profile page should be easy to navigate with clear sections for updating profile information, changing passwords, and managing notifications. Each form will include:
** Informative tooltips and labels
** Clear error messages and success notifications
** Loading indicators to improve responsiveness

* '''Responsive Design''': The profile page must be fully responsive across various devices, from desktops to mobile phones, ensuring an optimized experience for all users.

* '''Smooth Transitions''': Using React Router, transitions between different sections (such as profile editing and password change) should feel seamless without page reloads, improving the overall user experience.

=== Security ===
* '''Password Management'''
** Use bcrypt to hash passwords securely before saving them to the database.
** Implement token-based authentication for user sessions.
** When the password is updated, invalidate all active sessions and issue a new authentication token to prevent unauthorized access.

* '''Rate Limiting''': To prevent brute-force attacks, rate limiting will be implemented on sensitive endpoints like the password change and login routes using Rack::Attack.

* '''Account Enumeration Protection''': Return generic error messages on failed login attempts and password changes to prevent attackers from determining whether a username/email is valid.

* '''Session Management''': When a password is successfully updated, ensure that all other active sessions are logged out and new tokens are issued to prevent session hijacking.

=== Maintainability & Scalability ===
* '''Modular Codebase''': The code will follow a modular approach by breaking down functionality into smaller, reusable components (both frontend and backend). For example, the frontend components will be encapsulated, and the backend logic will be implemented using service objects where appropriate.

* '''RESTful API Structure''': The backend will adhere to RESTful principles for API endpoints, ensuring that the architecture is scalable and easily extendable in the future. Common conventions like GET, PUT, and PATCH will be used for profile and password management.

* '''Separation of Concerns''': The frontend and backend will be clearly separated with well-defined API contracts. The frontend will handle the presentation and user interactions, while the backend will focus on business logic and data persistence.

* '''Testing and Quality Assurance''': Automated tests will be implemented to ensure the robustness of the system. RSpec will be used for backend testing, and Jest will be used for frontend testing.

=== Code Quality ===
* '''Adhere to DRY Principles''': The code will avoid repetition by creating reusable components and centralized validation logic for both frontend and backend. For example, validation logic for user input will be shared between the frontend (React Hook Form validation) and the backend (model validations).

* '''Consistent API Responses''': API responses will be standardized across endpoints to ensure a consistent interface for the frontend. This includes:
** Returning relevant HTTP status codes
** Structuring responses with consistent fields

* '''Clear Documentation''': The documentation will be maintained, detailing endpoint routes, required parameters, expected responses, and error handling procedures.

== Implementation Plan ==

=== Frontend Implementation ===
* Create new React components
* Implement validation of form fields
* Connect to backend endpoints
* Add success/confirmation messages on profile updates
* Add loading states and error handling
* Implement responsive design

=== Backend Implementation ===
* Update UserController with new endpoints
* Implement password security measures
* Add rate limiting functionality
* Update user model validation
* Implement session management

== Implementation ==

=== Frontend Implementation ===
The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles. This feature redesigns the Edit Profile page, implementing a modern, form-based interface using React, TypeScript, and React Hook Form, with full backend integration for real-time data fetch and update. The new UI focuses on form validation, user experience, and code maintainability.

Key Features:
* Form Management: Uses `react-hook-form` and `yup` for structured form handling and ensuring reliable input checks and robust form validation
* Backend Integration: Profile data is fetched from the backend and is used to populate the form fields. On submission, this data is validated and triggers an API request to update profile and password (if the password is changed).
* API Communication: Uses `axios` for making HTTP requests to fetch user profile data and submit updates to the backend, including GET, PATCH and POST requests with authentication headers.
* UI Enhancements: Improved error handling and form usability. `Yup` validation checks data before it is sent to the backend, ensuring fast display of errors. The form also display success and error messages for API requests.

[[File:FinalUI.png|600px|Form View - User can edit profile fields]]
[[File:FinalUI-Success.png|600px|Success Message - Profile updated successfully]]
[[File:FinalUI-Failure.png|600px|Error Message - Displaying validation error]]

==== Sequence Diagram ====

<center>[[File:SequenceDiagram.png|600px|Sequence Diagram]]</center>

==Test Plan==

=== Unit Tests ===
* '''Details''': Write tests to validate that the model validations are functioning correctly.
* '''Focus''': Ensure associations are set up properly (`belongs_to`, `has_many`), and no dangling records are left after CRUD operations.

=== Functional Tests ===
* '''Details''': Use RSpec to test the behavior of the controllers.
* '''Focus''': Verify that the controllers correctly handle user input and update the database.

=== Manual Testing ===
* '''Details''': Validate the overall user experience.
* '''Focus''': Test UI layout, responsiveness, toggle functionality (password visibility), and the system's performance under normal usage.

==Mentor==

* [mailto:pkodali@ncsu.edu Prathyusha Kodali]

==Team Members==

* [mailto:dsaraog@ncsu.edu Devang Saraogi]
* [mailto:gsharma3@ncsu.edu Galav Sharma]
* [mailto:jshah23@ncsu.edu Jash Shah]

==References==
* [https://expertiza.ncsu.edu/ Expertiza]
* [https://docs.google.com/document/d/1jjbqggRDiOHrxdsMlliY62JnP34bGTNHVWAZNz89kT8/edit?usp=sharing Final Projects on Expertiza]
* [https://github.com/expertiza/reimplementation-front-end Front-end Github]
* [https://github.com/expertiza/reimplementation-back-end Back-end Github]

File:FinalUI-Failure.png

2025-04-23T12:37:08Z

Gsharma3:

File:FinalUI-Success.png

2025-04-23T12:35:22Z

Gsharma3:

File:FinalUI.png

2025-04-23T12:28:04Z

Gsharma3:

CSC/ECE 517 Spring 2025 - E2535 Reimplement User Profile Management (Frontend + Backend)

2025-04-23T12:27:45Z

Gsharma3:

==Overview==

The goal of this project is to reimplement the User Profile Management feature in the Expertiza system, replacing the legacy Ruby-based frontend with a modern, responsive interface built using React with TypeScript, while retaining and enhancing the existing Ruby on Rails backend.

This modernization effort addresses the challenges posed by outdated UI, limited form validation, and insecure session handling in the current implementation. By leveraging modern frameworks and best practices, the new system will allow users to securely update their profile details, manage email and notification preferences, and change passwords.

The improved design will enhance maintainability, user experience, and security, aligning with Expertiza’s broader goal of offering a user-friendly, scalable, and secure open-source platform for peer-reviewed assignments.

==Problem Statement==

The current user profile management system in Expertiza is built using legacy Ruby views, which makes it difficult to maintain, extend, and modernize. The UI lacks responsiveness, and the user experience is hindered by minimal validation, outdated styling, and insufficient feedback mechanisms.

From a security perspective, the current system does not follow best practices for handling sensitive operations such as password changes and session management. For instance:
* Password updates do not log out other active sessions, leaving accounts vulnerable.
* API responses may expose too much information, enabling account enumeration.
* There is no rate limiting, making the system susceptible to brute-force attacks.

These limitations lead to:
* Poor user experience (UX) and accessibility
* Increased technical debt and maintenance burden
* Security risks in managing user authentication and sessions

As Expertiza evolves, it is essential to rebuild the profile management feature using modern frontend technologies and robust backend practices that improve usability, security, and maintainability.

== Existing Issues ==

* '''Legacy Frontend Implementation''':
** Uses Ruby templates, limiting flexibility and scalability.
** Transition to React will improve maintainability and user experience.
* '''Inconsistent Form Validation''':
** Validation is not uniform, leading to unclear user feedback.
** React Hook Form will be used for consistent validation.
* '''Limited Security for Password Changes''':
** No session invalidation after password updates.
** New implementation will log out all active sessions and invalidate old tokens.
* '''Basic Error Handling''':
** Current error handling is minimal and vague.
** Enhanced error messages and better handling for edge cases will be implemented.
* '''Outdated User Interface''':
** The UI is not modern or responsive.
** A redesigned UI will be created for improved user interaction and accessibility.

==Proposed Changes==

=== Front-End ===

Enhance usability and data integrity through a tab-based layout that organizes the profile page into distinct sections, ensuring that users can update specific areas independently without risk of data loss.

==== Key Features ====

* Tab-based Layout
** The profile page will be restructured into multiple tabs, with each tab dedicated to a specific subsection (e.g., Personal Details, Password, Notification Settings).
** This separation allows users to navigate between different sections without losing unsaved data from other areas.

* Dedicated Forms for Each Section
** Implement separate forms for each tab using React Hook Form which enables efficient state management and robust schema-driven validations.
** Ensure that each form manages its own state and validation logic independently, avoiding interference between sections.

* Enhanced User Experience
** Users will benefit from clear, compartmentalized UI sections, reducing cognitive load and streamlining the update process.
** Real-time validation and dedicated feedback per section will help prevent input errors and improve overall form usability.

==== Proposed Wireframes ====
[[File:wireframes1.png|600px|Wireframe 1]]
[[File:wireframes2.png|600px|Wireframe 2]]
[[File:wireframes3.png|600px|Wireframe 3]]
[[File:wireframes4.png|600px|Wireframe 4]]
[[File:wireframes5.png|600px|Wireframe 5]]

''Attached Wireframes are not to be mistaken as actual designs or the live application/website.''

==== File Modifications ====
* Edit the existing code in [https://github.com/expertiza/reimplementation-front-end/blob/main/src/pages/Profile/Edit.tsx `src/pages/Profile/Edit.tsx`] to implement the new layout.

=== Back-End ===

The backend will be enhanced to support secure, RESTful profile and password updates, while incorporating session management and protection against attacks.

==== User Model Enhancements ====
Add/update methods to:
* Safely update user profile fields (e.g., name, email)
* Change passwords using bcrypt for hashing
* Invalidate old sessions upon password update

==== New API Endpoints ====
There are some of the proposed endpoints for the reimplementation.
* `GET /api/v1/profile` – Fetch current user details
* `PUT /api/v1/profile` – Update user profile
* `PUT /api/v1/profile/password` – Update password securely

==== Session Management ====
* Log out all active sessions after a successful password change
* Revoke previous tokens to ensure account safety

==== Security Measures ====
* Implement rate limiting with `Rack::Attack` to prevent brute-force attacks
* Return generic error messages for failed logins to avoid account enumeration

==Database Changes==

The existing `users` table currently includes all the necessary fields required for user profile management, such as name, email, and password. As of now, no immediate changes to the schema are required. However, during the implementation phase, if additional fields are identified as necessary, the schema will be updated accordingly. Any modifications to the schema will be thoroughly reviewed and documented to ensure they align with the project requirements and maintain data integrity.

==Overview of Classes==

=== UsersController (app/controllers/api/v1/users_controller.rb) ===
Will be extended to:
* `GET /profile`: Return current user details (JSON)
* `PUT /profile`: Update user attributes like name, email, notification preferences

=== PasswordsController (app/controllers/api/v1/passwords_controller.rb) ===
Will handle secure password changes via:
* `PUT /password`:
** Authenticate using current password
** Update using bcrypt
** Invalidate old sessions/tokens
** Issue a new session token

=== User Model (app/models/user.rb) ===
Updated to include:
* `update_profile(params)` method for secure profile updates
* `change_password(current_password, new_password)` with proper validations
* Session/token handling logic after password changes

=== AuthenticationTokenService / Session Handler ===
* Issues new tokens upon password change
* Invalidates previous sessions to prevent unauthorized access

=== ApplicationController ===
* Handles token-based authentication for API access
* Provides common methods for current user lookup and error handling

=== Rack::Attack Configuration (config/initializers/rack_attack.rb) ===
* Implements rate limiting for profile and password update endpoints
* Helps mitigate brute-force and enumeration attacks

=== Class Diagram ===

<center>[[File:ClassDiagramE2535.png||Class Diagram]]</center>

==Design Goals==

=== Usability & User Experience (UX) ===
* '''Intuitive Interface''': The user profile page should be easy to navigate with clear sections for updating profile information, changing passwords, and managing notifications. Each form will include:
** Informative tooltips and labels
** Clear error messages and success notifications
** Loading indicators to improve responsiveness

* '''Responsive Design''': The profile page must be fully responsive across various devices, from desktops to mobile phones, ensuring an optimized experience for all users.

* '''Smooth Transitions''': Using React Router, transitions between different sections (such as profile editing and password change) should feel seamless without page reloads, improving the overall user experience.

=== Security ===
* '''Password Management'''
** Use bcrypt to hash passwords securely before saving them to the database.
** Implement token-based authentication for user sessions.
** When the password is updated, invalidate all active sessions and issue a new authentication token to prevent unauthorized access.

* '''Rate Limiting''': To prevent brute-force attacks, rate limiting will be implemented on sensitive endpoints like the password change and login routes using Rack::Attack.

* '''Account Enumeration Protection''': Return generic error messages on failed login attempts and password changes to prevent attackers from determining whether a username/email is valid.

* '''Session Management''': When a password is successfully updated, ensure that all other active sessions are logged out and new tokens are issued to prevent session hijacking.

=== Maintainability & Scalability ===
* '''Modular Codebase''': The code will follow a modular approach by breaking down functionality into smaller, reusable components (both frontend and backend). For example, the frontend components will be encapsulated, and the backend logic will be implemented using service objects where appropriate.

* '''RESTful API Structure''': The backend will adhere to RESTful principles for API endpoints, ensuring that the architecture is scalable and easily extendable in the future. Common conventions like GET, PUT, and PATCH will be used for profile and password management.

* '''Separation of Concerns''': The frontend and backend will be clearly separated with well-defined API contracts. The frontend will handle the presentation and user interactions, while the backend will focus on business logic and data persistence.

* '''Testing and Quality Assurance''': Automated tests will be implemented to ensure the robustness of the system. RSpec will be used for backend testing, and Jest will be used for frontend testing.

=== Code Quality ===
* '''Adhere to DRY Principles''': The code will avoid repetition by creating reusable components and centralized validation logic for both frontend and backend. For example, validation logic for user input will be shared between the frontend (React Hook Form validation) and the backend (model validations).

* '''Consistent API Responses''': API responses will be standardized across endpoints to ensure a consistent interface for the frontend. This includes:
** Returning relevant HTTP status codes
** Structuring responses with consistent fields

* '''Clear Documentation''': The documentation will be maintained, detailing endpoint routes, required parameters, expected responses, and error handling procedures.

== Implementation Plan ==

=== Frontend Implementation ===
* Create new React components
* Implement validation of form fields
* Connect to backend endpoints
* Add success/confirmation messages on profile updates
* Add loading states and error handling
* Implement responsive design

=== Backend Implementation ===
* Update UserController with new endpoints
* Implement password security measures
* Add rate limiting functionality
* Update user model validation
* Implement session management

== Implementation ==

=== Frontend Implementation ===
The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles. This feature redesigns the Edit Profile page, implementing a modern, form-based interface using React, TypeScript, and React Hook Form, with full backend integration for real-time data fetch and update. The new UI focuses on form validation, user experience, and code maintainability.

Key Features:
* Form Management: Uses `react-hook-form` and `yup` for structured form handling and ensuring reliable input checks and robust form validation
* Backend Integration: Profile data is fetched from the backend and is used to populate the form fields. On submission, this data is validated and triggers an API request to update profile and password (if the password is changed).
* UI Enhancements: Improved error handling and form usability. `Yup` validation checks data before it is sent to the backend, ensuring fast display of errors. The form also display success and error messages for API requests.

<center>[[File:FinalUI.png|600px|Final UI]]</center>
<center>[[File:FinalUI-Success.png|600px|Final UI]]</center>
<center>[[File:FinalUI-Failure.png|600px|Final UI]]</center>

==== Sequence Diagram ====

<center>[[File:SequenceDiagram.png|600px|Sequence Diagram]]</center>

==Test Plan==

=== Unit Tests ===
* '''Details''': Write tests to validate that the model validations are functioning correctly.
* '''Focus''': Ensure associations are set up properly (`belongs_to`, `has_many`), and no dangling records are left after CRUD operations.

=== Functional Tests ===
* '''Details''': Use RSpec to test the behavior of the controllers.
* '''Focus''': Verify that the controllers correctly handle user input and update the database.

=== Manual Testing ===
* '''Details''': Validate the overall user experience.
* '''Focus''': Test UI layout, responsiveness, toggle functionality (password visibility), and the system's performance under normal usage.

==Mentor==

* [mailto:pkodali@ncsu.edu Prathyusha Kodali]

==Team Members==

* [mailto:dsaraog@ncsu.edu Devang Saraogi]
* [mailto:gsharma3@ncsu.edu Galav Sharma]
* [mailto:jshah23@ncsu.edu Jash Shah]

==References==
* [https://expertiza.ncsu.edu/ Expertiza]
* [https://docs.google.com/document/d/1jjbqggRDiOHrxdsMlliY62JnP34bGTNHVWAZNz89kT8/edit?usp=sharing Final Projects on Expertiza]
* [https://github.com/expertiza/reimplementation-front-end Front-end Github]
* [https://github.com/expertiza/reimplementation-back-end Back-end Github]