Refactor BaseInput component structure and enhance Chat component functionality

[tabiodun]

• BaseInput.vue:

  • Refactored template structure to improve label rendering logic by moving the v-if condition for required fields.
  • Added additional event emits for 'blur', 'focus', and 'enter'.

• Chat.vue:

  • Introduced FontAwesomeIcon component to indicate mobile users in the chat.
  • Added a new div element to display a mobile icon for users who are online via the mobile app.
  • Updated props and component imports to include FontAwesomeIcon.
  • Modified logic to handle online users by distinguishing between all online users and mobile online users.
  • Updated the WebSocket event handler to process online and mobile users separately and fetch their data accordingly.

[sentry-io[bot]]

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: src/hooks/useAuth.ts

Function	Unhandled Issue
authStore	ReferenceError: Can't find variable: t <anonymous... Event Count: 3 Affected Users: 2
authStore	SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. ... Event Count: 1 Affected Users: 1

📄 File: src/utils/errors.ts (Click to Expand)

| Function | Unhandled Issue | | :------- | :----- | | **`getErrorMessage`** | [**TypeError: Cannot read properties of undefined (reading '0')**](https://crisis-cleanup.sentry.io/issues/5402282812/?referrer=github-open-pr-bot) getErrorMessage(src/u...
`Event Count:` **1** `Affected Users:` **1** |

---

_{Did you find this useful? React with a 👍 or 👎}

[github-actions[bot]]

Playwright test results

 12 failed
 40 passed

Details

 52 tests across 12 suites
 5 minutes, 22 seconds
 64125c8

Failed tests

chromium › pages/myOrganization.test.ts › MyOrganization › User Management: should display all required elements - `( @primary @slow @read @development @staging @production )` chromium › pages/myOrganization.test.ts › MyOrganization › Organization Profile: should display all required elements - `( @primary @slow @read @development @staging @production )` firefox › pages/myOrganization.test.ts › MyOrganization › User Management: should display all required elements - `( @primary @slow @read @development @staging @production )` firefox › pages/myOrganization.test.ts › MyOrganization › Organization Profile: should display all required elements - `( @primary @slow @read @development @staging @production )` chromium › pages/otherOrganizations.test.ts › OtherOrganizations › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/otherOrganizations.test.ts › OtherOrganizations › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/phone.test.ts › PhonePage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/phone.test.ts › PhonePage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/user-profile.test.ts › UserProfile › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/user-profile.test.ts › UserProfile › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/work.test.ts › WorkPage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/work.test.ts › WorkPage › should have visible data-testids - `( @primary @slow @read @development @staging @production )`

[github-actions[bot]]

Playwright test results

 12 failed
 39 passed
 1 flaky

Details

 52 tests across 12 suites
 4 minutes, 12 seconds
 a81f13e

Failed tests

chromium › pages/myOrganization.test.ts › MyOrganization › User Management: should display all required elements - `( @primary @slow @read @development @staging @production )` chromium › pages/myOrganization.test.ts › MyOrganization › Organization Profile: should display all required elements - `( @primary @slow @read @development @staging @production )` firefox › pages/myOrganization.test.ts › MyOrganization › User Management: should display all required elements - `( @primary @slow @read @development @staging @production )` firefox › pages/myOrganization.test.ts › MyOrganization › Organization Profile: should display all required elements - `( @primary @slow @read @development @staging @production )` chromium › pages/otherOrganizations.test.ts › OtherOrganizations › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/otherOrganizations.test.ts › OtherOrganizations › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/phone.test.ts › PhonePage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/phone.test.ts › PhonePage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/user-profile.test.ts › UserProfile › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/user-profile.test.ts › UserProfile › should have visible data-testids - `( @primary @slow @read @development @staging @production )` chromium › pages/work.test.ts › WorkPage › should have visible data-testids - `( @primary @slow @read @development @staging @production )` firefox › pages/work.test.ts › WorkPage › should have visible data-testids - `( @primary @slow @read @development @staging @production )`

Flaky tests

firefox › authentication.test.ts › Authentication › should load unauthorized routes as expected with and without authentication - `( @slow @primary @development @staging @production )`

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 52.94118% with 16 lines in your changes are missing coverage. Please review.

Project coverage is 15.53%. Comparing base (ccf55f8) to head (a81f13e).

Files	Patch %	Lines
src/components/chat/Chat.vue	51.85%	13 Missing :warning:
src/components/BaseInput.vue	57.14%	3 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #913 +/- ## ======================================= Coverage 15.52% 15.53% ======================================= Files 380 380 Lines 80841 80862 +21 Branches 848 848 ======================================= + Hits 12549 12559 +10 - Misses 68292 68303 +11 ``` | [Flag](https://app.codecov.io/gh/CrisisCleanup/crisiscleanup-4-web/pull/913/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CrisisCleanup) | Coverage Δ | | |---|---|---| | [unitTests](https://app.codecov.io/gh/CrisisCleanup/crisiscleanup-4-web/pull/913/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CrisisCleanup) | `15.53% <52.94%> (+<0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CrisisCleanup#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.