Dashboard

The Dashboard component serves as the main user area after logging in. It displays the user's email, provides a logout option, and prompts the user to change their password upon first login if they haven’t completed registration.

Props

The Dashboard component does not accept any props.

Dependencies

• axios: Used for handling API requests to log out, fetch user profile data, and change password.

• react-hot-toast: Displays notifications for feedback on actions such as logout, password change, and errors.

• react-router-dom: Uses useNavigate to redirect users based on login status and other actions.

• UserContext: Accesses and updates the global user context with profile data after successful authentication.

Usage Example

The Dashboard component is typically used as a protected route, available only to authenticated users:

<Route path="/dashboard" element={<Dashboard />} />

Additional Notes

• User Context:

  • Retrieves user information from the global UserContext. If user is null, the component redirects to the login page.

  • Checks if user.completedRegistration is false upon initial render, showing the ChangePassword component if it’s the user's first login.

• Logout Functionality:

  • The handleLogout function sends a logout request, clears user data from local storage, updates the UserContext, and redirects to the login page, with a success toast notification.

• Password Change Prompt:

  • When showChangePassword is true, the ChangePassword component is displayed, requiring the user to set a new password upon first login.

  • The handlePasswordChangeConfirm function sends the new password, updates the UserContext, and hides the prompt after a successful password change.

---

This documentation covers all main aspects of the Dashboard component.