Header Component

The Header component is a reusable navigation bar that provides user-related actions such as language selection, password change, and logout. It also displays the current user's information.

Purpose and Utility

The Header component is designed to provide a consistent navigation experience across the application. It includes:

• Language selection for localization.
• User information display.
• Options to change the user's password.
• Logout functionality.

Example Usage

The Header component is used in the Layout component to provide a top navigation bar:

<template>
  <div>
    <Header />
    <!-- ...existing code... -->
  </div>
</template>

Props and Data

Props

The Header component does not accept any props.

Data

• locale: The current language locale.
• userData: Contains the user's username and name.
• infoMsg: A message displayed in the info modal.
• newPassword: An object containing currentPassword and newPassword for password change functionality.

Methods

• checkLang: Checks and sets the current language based on cookies.
• esLangChange: Changes the language to Spanish.
• enLangChange: Changes the language to English.
• logout: Logs the user out and redirects to the login page.
• getMeInfo: Fetches the current user's information.
• showModal: Displays a modal by its ID.
• hideModal: Hides a modal by its ID.
• changePassword: Sends a request to change the user's password.

Modals

The Header component includes the following modals:

1. Change Password Modal: Allows the user to change their password.
2. Info Modal: Displays informational messages.
3. Error Modal: Displays error messages.

Notes

• The Header component uses BootstrapVue for styling and functionality.
• Language flags are displayed using assets located in the assets/icons directory.