Skip to content

Add client-side GitHub username format validation before API call #2158

@chavanGaneshDatta

Description

@chavanGaneshDatta

Summary

Currently the username input accepts any string and fires a network request regardless — including empty strings, spaces, or strings that can never be valid GitHub usernames. Validating the format client-side before any API call eliminates unnecessary requests, surfaces helpful errors immediately, and prevents confusing empty-state renders.

GitHub's username rules: 1–39 chars, alphanumeric + hyphens only, cannot start or end with a hyphen, no consecutive hyphens.

No existing issue or PR covers this

Checked all open issues (#74#97) and all open PRs (#28#102). No duplicate found.

Proposed implementation

  • Add a validateGitHubUsername(username: string): boolean utility in lib/utils.ts using the regex /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.
  • In the dashboard input component, run this check before triggering the SVG fetch. If invalid, show an inline error message without making any network request.
  • Clear the error as soon as the user starts typing again.
  • Add unit tests for the validator covering: empty string, too-long username, leading/trailing hyphen, consecutive hyphens, and valid usernames.
  • No backend changes needed.

Acceptance criteria

  • Typing an invalid username shows an inline error without triggering a network request.
  • Valid usernames still work exactly as before.
  • Unit tests cover all edge cases including boundary lengths.
  • Error message is dismissed on next keystroke.

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions