Add username below user icon

[akhuoa]

Fixes #121 and #80.

Changes

• The username (account name) has been added beside the user icon after the user logs in.
• Additionally, when the user clicks the login link from the navigation, landing on the login page, the username input is now automatically focused.
• Also fixes the FOUC issue on login failed FOUC issue on login error message #80.

The changes are available on https://akhuoa.github.io/pmrapp-frontend/ for testing.

[Copilot]

Pull request overview

Adds post-login identity visibility in the header and improves login form usability by focusing the username field on navigation to the login page.

Changes:

• Display the authenticated user’s username next to the user icon in the header dropdown trigger.
• Auto-focus the username input when the login page mounts.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/organisms/Login.vue	Adds a template ref + onMounted focus for the username input to streamline login.
src/components/molecules/UserDropdown.vue	Renders the current username beside the user icon in the authenticated header control.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[akhuoa]

Hi @agarny, the layout of the username and icon has been updated.
The error message positioning in the login is also updated.

https://akhuoa.github.io/pmrapp-frontend/

Username

Error message

[agarny]

Thanks @akhuoa, this looks much better! Regarding the error message:

• Can't we have something else than "InvalidCredentials". This really doesn't look professional to have what looks like some kind of technical error message.
• Can we have the error message disappear after some time and/or when we try to log in again?

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/components/molecules/UserDropdown.vue:103

• role="menu" / role="menuitem" introduce the WAI-ARIA menu pattern, which generally requires keyboard support (arrow key navigation, focus management) to be conformant. Currently the dropdown only toggles on click and doesn’t manage focus/keyboard interactions, so assistive tech may announce it as a menu but users can’t interact with it as expected.

Either implement the full menu keyboard behavior (and consider keeping the menu in the DOM via v-show so aria-controls always references an existing element), or drop the menu/menuitem roles and treat it as a simple popup/list.

<template>
  <div v-if="authStore.isAuthenticated" ref="dropdownRef" class="relative">
    <button
      @click="toggleDropdown"
      class="nav-link p-2 transition-colors cursor-pointer relative"
      :aria-label="buttonLabel"
      aria-haspopup="true"
      :aria-expanded="isOpen"
      :aria-controls="menuId"
    >
      <UserIcon class="w-5 h-5" />
      <span class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-2 text-xs text-gray-700 dark:text-gray-300 max-w-[4.6rem] truncate hidden sm:inline">
        {{ authStore.username }}
      </span>
      <span class="sr-only sm:hidden">
        {{ authStore.username }}
      </span>
    </button>

    <div
      v-if="isOpen"
      :id="menuId"
      role="menu"
      class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50"
    >
      <button
        @click="confirmLogout"
        class="w-full cursor-pointer text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
        role="menuitem"
      >
        Log out
      </button>
    </div>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[akhuoa]

Thanks @akhuoa, this looks much better! Regarding the error message:

• Can't we have something else than "InvalidCredentials". This really doesn't look professional to have what looks like some kind of technical error message.
• Can we have the error message disappear after some time and/or when we try to log in again?

@agarny, thanks for the review.

• Login error messages are updated. 1bf3e6a
• The error message will disappear after 5 seconds. 4afa3ef

Also added a function to focus on the username input when the user clicks on "Log in" again. e069dbc
It will also focus on the username input when an error occurs after login. 1ebdc72

All these updates are available on https://akhuoa.github.io/pmrapp-frontend/login.