Integrate Backend with Profile and Password Tabs

[mahid797]

Integrate the backend functionality for Profile and Password tabs into the frontend forms, ensuring seamless user interactions. The backend for profile updates (e.g., name submission) and password changes (e.g., current password verification and password submission) is already implemented and only needs to be integrated with the frontend. Use a loading button for backend interactions, such as checking the current password or submitting new data, to improve the user experience. Successful submissions for both tabs should display success toasts. Note that the avatar submission/update backend is not currently implemented, so this functionality can be skipped for now.

Ensure that password complexity validation is handled on the frontend using the PasswordValidation.tsx component, made reusable across all three pages: auth\sign-up, auth\reset-password, and profile\PasswordForm.

---

Tasks

Profile Tab Integration

• Fetch and display profile details, including:
  • First name
  • Last name
  • Email (non-editable)
  • Avatar (Comment this code during testing)
• Connect the backend for updating:
  • First name
  • Last name
  • Skip avatar submission/update for now as the backend is not implemented.
• Add functionality for:
  • Uploading avatars using modals (placeholder for future backend integration).
  • Deleting avatars using modals (placeholder for future backend integration).
• Use the Toast Component to provide:
  • Success notifications for successful submissions.
  • Error notifications for backend errors.
• Ensure the Save button:
  • Validates inputs before making API calls.
  • Indicates loading state while interacting with the backend.
  • Displays a success toast on successful submission.
• Temporarily disable the Delete Account button

---

Password Tab Integration

• Frontend Password Validation:

  • Use the PasswordValidation.tsx component to enforce the following password complexity rules:
    • Contain at least one uppercase letter.
    • Include at least one symbol.
    • Be at least 8 characters long.
  • Modify PasswordValidation.tsx:
    • Ensure checkmarks turn green when the condition is satisfied.
    • Add functionality for red crosses when conditions are not met after the user leaves the field.
  • Ensure validation errors are visible as grey checks by default, turning into green ticks or red crosses dynamically.
  • Update PasswordValidation.tsx logic for reusability in:
    • auth\sign-up
    • auth\reset-password
    • profile\PasswordForm

• Backend Password Validation:

  • Use the backend to verify the current password.
  • Integrate backend submission for new passwords.
  • Use the Toast Component to provide server-side error messages for:
    • Incorrect current password.
    • Other server errors during password change.
  • Use an alert if passwords do not match during frontend validation..

• Ensure the Save button:

  • Validates inputs for all fields before submission.
  • Displays loading button during backend interactions (e.g., verifying the current password or submitting the new password).
  • Handles the following validation and error scenarios:
    • Passwords do not match: Show an alert.
    • Current password is incorrect: Display a toast notification.
    • Other server errors: Display toast notifications.
  • Displays a success toast upon successful password submission.

---

UI Enhancements

• Ensure smooth transitions between the Profile and Password tabs.
• Add loading indicators for all backend operations to enhance user experience.

---

Tests to Ensure Functionality

• Verify that the Save button on both tabs:
  • Validates inputs correctly.
  • Triggers appropriate backend calls for updates.
  • Provides feedback for success and failure states using toasts or alerts.
• Test fetching and updating profile details, including avatar uploads and deletions (Avatar Backend will be implemented soon).
• Validate password update flows with correct error messages for invalid inputs.
• Test the reusability of PasswordValidation.tsx across all relevant pages.