As a user, I want update my profile Details.

[Dmanoj07]

Description We will develop a profile section using React and Next.js. In this section, users can modify their registered name, email address, and password. We'll divide the profile update process into two parts: Name and Email, and Reset Password. Once they submit their new profile details, we will perform client-side validation. Upon successful validation, we will update their credentials in our database..

Acceptance Criteria

• Name and Email Update:

  • The profile section displays the user’s current name and email.
  • Users can edit their name and email fields.
  • Validation ensures that the name and email are in the correct format (e.g., valid email address).
  • Upon successful validation, the updated details are saved to the database.

• Password Reset:

  • Users can initiate a password reset.
  • Users need to provide old password.
  • Users can set a new password.
  • The new password must meet security requirements (e.g., minimum length, complexity).
  • After successful validation, the password is updated in the database

Testing Criteria

• Name and Email Update:

  • Verify that the profile section displays the correct user information.
  • Test input validation for name and email fields (e.g., empty fields, invalid email format).
  • Confirm that valid updates are reflected in the database.

• Password Reset:

  • Verify old password.
  • Set a new password.
  • Validate password complexity requirements.
  • Ensure the updated password is stored securely.

[Dmanoj07]

SPRINT TASK: Sprint Tasks:

-Design UI Components:

• Create the layout for the profile section with fields for name, email, and password.
• Implement editable text fields for name and email updates.
• Add a separate section for password reset functionality.

Implement Client-Side Validation:

• Write validation logic for name and email to check for correct formatting.
• Ensure the new password adheres to security requirements (minimum length, complexity).

Backend Integration:

• Set up API endpoints to handle profile updates and password resets.
• Ensure secure communication between the frontend and the backend.

Database Operations:

• Develop logic to update user details in the database upon successful validation.
• Implement secure password storage mechanisms.

[marcusgeorgievski]

Clerk, out auth solution, actually has a Manage Account feature implemented - no extra code required. With the Google sign in option, users can change their name and profile picture from this modal. We can customize this modal to instead be a web page for a certain route, although the modal does not force the user to change pages. If we would like to change the sign in option to email and password, Clerk will likely also allow the user to change their email and password as well. The UI components are also provided by Clerk.

For the backend, all we need to do is implement a middleware to authorize the request based on the user's session. The reference for this is here, I briefly got started playing with it in the routes dir. On line 30 I create /clerk-test which uses a middleware Clerk provides, it works well. However, we may want to create a custom one to return a customized error.

To review

• UI, user security, validation, and database storage is managed by Clerk
• Securing endpoints are secured with the ClerkExpressRequireAuth() middleware function
• We should create a custom middleware function to return a better/customized error