Move username validation from report output to the input field

[kaungmyatshwe1397]

📌 Fixes

Fixes # <417>

---

📝 Summary of Changes

• Moved username validation from Scrum Report output box to the input field
• Added inline error message and red border for invalid username
• Blocked Generate button and Enter key when username is empty/whitespace
• Removed old Scrum Report error injection for missing username
• Made Error display styling depend on dark and light mode

---

📸 Screenshots / Demo (if UI-related)

---

✅ Checklist

• I’ve tested my changes locally
• My code follows the project’s code style guidelines

---

👀 Reviewer Notes

Add any special notes for the reviewer here

Summary by Sourcery

Validate the Scrum Helper username directly on the input field instead of in the generated report output, with accessible inline error messaging and styling.

Bug Fixes:

• Prevent generating Scrum reports when the username field is empty or whitespace-only, including blocking Enter key submission from the username input.

Enhancements:

• Add reusable username validation logic wired to input events, platform changes, and storage updates to keep the username field state consistent.
• Show inline, accessible username error messaging with visual invalid-state styling that adapts to light and dark modes.
• Simplify popup error handling by removing legacy username-missing error injection into the report output area.

[sourcery-ai]

Reviewer's Guide

Moves username validation from the Scrum Report output area into the username input field, adds inline/accessible error handling and styling (including dark mode support), wires validation into all relevant UI flows, and removes the old scrum report error injection logic.

Sequence diagram for generating a report with username validation

sequenceDiagram
  actor User
  participant Popup as PopupJS
  participant UsernameInput as platformUsername_input
  participant Storage as chrome_storage_local
  participant ScrumHelper as scrumHelper_allIncluded

  User->>UsernameInput: Type username
  User->>Popup: Click generateReport button
  Popup->>Popup: handleGenerateReport()
  Popup->>Popup: validateUsername(showError_true)
  alt Username invalid
    Popup->>UsernameInput: showUsernameValidationError()
    Popup-->>User: Report generation blocked
  else Username valid
    Popup->>Storage: get(platform)
    Storage-->>Popup: platform value
    Popup->>Storage: get(startingDate, endingDate, orgName, orgRepo, ignoreOrgRepos, platformUsername)
    Storage-->>Popup: stored values
    Popup->>ScrumHelper: allIncluded(popup)
    ScrumHelper-->>Popup: generated report HTML
    Popup-->>User: Render Scrum Report
  end

  User->>UsernameInput: Press Enter key
  UsernameInput->>Popup: keydown(Enter)
  Popup->>Popup: handleGenerateReport() (same flow as above)

Loading

File-Level Changes

Change	Details	Files
Introduce reusable username validation logic tied to the username input field and gate report generation on it.	Declare helper functions to validate the username input, show and clear validation errors, and expose a global validatePlatformUsernameInput hook. Initialize aria-describedby and aria-invalid attributes on the username input for accessibility. Invoke validation after loading the stored username from chrome.storage to ensure the UI state reflects stored data. Wrap the Generate Report flow in a handleGenerateReport function that short-circuits when username validation fails. Trigger handleGenerateReport on Enter keypress within the username field while preventing the default submission behavior. Revalidate the username on platform username input changes, blur events, platform UI updates, platform selection changes, and platform dropdown initialization.	src/scripts/popup.js
Add inline username error UI and styling, including light/dark mode support and invalid-input visuals.	Add an error message container under the username input with icon, text span, alert role, and polite aria-live for screen readers. Define CSS for the username error container, invalid username input border/background/box-shadow, and dark-mode variants for both input and error icon/text. Ensure error text inherits color so light/dark theming stays consistent.	src/popup.html src/index.css
Remove legacy scrum report error injection for missing username and keep only button reset behavior.	Stop writing an inline HTML error message into the scrum report output when username is missing in popup context while keeping generate button reset (label and disabled state).	src/scripts/scrumHelper.js

Possibly linked issues

• Chore: Move GitHub/GitLab Username Validation to Input Field #417: PR adds input-level username validation, red border, inline error, and blocks Generate, matching the issue request.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The platformUsername field has aria-describedby and aria-invalid set both in HTML and immediately again in JS; consider defining these attributes in only one place to avoid redundancy and reduce the chance of them getting out of sync.
• Exposing validatePlatformUsernameInput on window just so updatePlatformUI/setPlatformDropdown can call it introduces a brittle global; consider refactoring so the validation function is imported/shared as a module helper instead of being attached to window.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `platformUsername` field has `aria-describedby` and `aria-invalid` set both in HTML and immediately again in JS; consider defining these attributes in only one place to avoid redundancy and reduce the chance of them getting out of sync.
- Exposing `validatePlatformUsernameInput` on `window` just so `updatePlatformUI`/`setPlatformDropdown` can call it introduces a brittle global; consider refactoring so the validation function is imported/shared as a module helper instead of being attached to `window`.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}