fix: allow valid GitHub usernames with hyphens and numbers#616
fix: allow valid GitHub usernames with hyphens and numbers#616harendra-godara wants to merge 1 commit into
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe signup page validation was updated to accept GitHub-username-compatible patterns instead of letters only. The entire form JSX was restructured across header branding, input fields, error messages, and footer links for improved readability while preserving all rendered content and control flow. ChangesSignup Form Validation and UI Update
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🎉 Thank you @harendra-godara for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 42-43: The current username validation regex in Signup.tsx (the
branch that tests the variable named "value" in the Signup component's username
validation logic) allows consecutive hyphens and unlimited length; update both
occurrences of that regex (the check around the first validation block and the
similar check near lines ~70–72) to a pattern that (1) enforces a 1–39 character
limit, (2) requires the username to start and end with an alphanumeric
character, (3) allows hyphens only between alphanumeric groups, and (4) forbids
consecutive hyphens (i.e., use a regex with a negative lookahead for "--", a
length check for max 39, and a structure like alnum groups separated by single
hyphens); replace the old test with that stricter pattern so invalid GitHub
usernames are rejected client-side.
- Around line 105-109: The catch currently uses catch (error: any) which
violates no-explicit-any; change it to catch (error: unknown) and narrow the
type before using error.response: add a type guard that checks if error is an
AxiosError (import and use axios.isAxiosError) or at minimum if (typeof error
=== 'object' && error !== null && 'response' in error) cast appropriately, then
call setMessage(error.response?.data?.message || "Something went wrong. Please
try again."); keep setMessage and the rest of the error-handling logic
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 86271262-19f1-4e8e-9a3d-f62bde722b52
📒 Files selected for processing (1)
src/pages/Signup/Signup.tsx
| } else if (!/^[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?$/.test(value)) { | ||
| errorMessage = "Enter a valid GitHub username"; |
There was a problem hiding this comment.
Username regex still accepts invalid GitHub usernames.
Line 42 and Line 70 allow consecutive hyphens and unlimited length, which are not GitHub-compatible. This will still pass some invalid usernames client-side.
Proposed fix
+const GITHUB_USERNAME_REGEX = /^(?=.{1,39}$)(?!.*--)[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/;
...
- } else if (!/^[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?$/.test(value)) {
+ } else if (!GITHUB_USERNAME_REGEX.test(value)) {
errorMessage = "Enter a valid GitHub username";
}
...
- : !/^[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?$/.test(formData.username)
+ : !GITHUB_USERNAME_REGEX.test(formData.username)
? "Enter a valid GitHub username"
: "";Also applies to: 70-72
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/Signup/Signup.tsx` around lines 42 - 43, The current username
validation regex in Signup.tsx (the branch that tests the variable named "value"
in the Signup component's username validation logic) allows consecutive hyphens
and unlimited length; update both occurrences of that regex (the check around
the first validation block and the similar check near lines ~70–72) to a pattern
that (1) enforces a 1–39 character limit, (2) requires the username to start and
end with an alphanumeric character, (3) allows hyphens only between alphanumeric
groups, and (4) forbids consecutive hyphens (i.e., use a regex with a negative
lookahead for "--", a length check for max 39, and a structure like alnum groups
separated by single hyphens); replace the old test with that stricter pattern so
invalid GitHub usernames are rejected client-side.
| } catch (error: any) { | ||
| setMessage(error.response?.data?.message || "Something went wrong. Please try again."); | ||
| setMessage( | ||
| error.response?.data?.message || | ||
| "Something went wrong. Please try again.", | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify there are no explicit `any` catch parameters in TS/TSX files.
rg -nP --type=ts --type=tsx 'catch\s*\(\s*[A-Za-z_$][A-Za-z0-9_$]*\s*:\s*any\s*\)'Repository: GitMetricsLab/github_tracker
Length of output: 100
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the exact lines around the reported catch
echo "---- src/pages/Signup/Signup.tsx (around 100-115) ----"
nl -ba src/pages/Signup/Signup.tsx | sed -n '90,125p'
# Search for explicit `any` in catch parameters across the repo
echo "---- Searching for `catch (..: any)` in .ts/.tsx ----"
rg -n --glob='*.ts' --glob='*.tsx' -P 'catch\s*\(\s*[^)]*:\s*any\s*\)'Repository: GitMetricsLab/github_tracker
Length of output: 188
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- src/pages/Signup/Signup.tsx (around 100-115) ----"
cat -n src/pages/Signup/Signup.tsx | sed -n '90,125p'
echo "---- Searching for `catch (..: any)` in .ts/.tsx ----"
rg -n --glob='*.ts' --glob='*.tsx' -P 'catch\s*\(\s*[^)]*:\s*any\s*\)'Repository: GitMetricsLab/github_tracker
Length of output: 1711
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- src/pages/Signup/Signup.tsx (around 100-115) ----"
cat -n src/pages/Signup/Signup.tsx | sed -n '100,112p'
echo "---- Searching for explicit typed `any` in catch parameters ----"
rg -n --glob='*.ts' --glob='*.tsx' -P 'catch\s*\(\s*[^)]*:\s*any\s*\)' .
echo "---- Searching ESLint for no-explicit-any rule ----"
rg -n "no-explicit-any" .eslintrc* package.json eslint.* --hidden || true
echo "---- Searching tsconfig for useUnknownInCatchVariables ----"
rg -n "useUnknownInCatchVariables" tsconfig*.json . --hidden || trueRepository: GitMetricsLab/github_tracker
Length of output: 919
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- repo root ----"
ls -a
echo "---- Searching for explicit typed any in catch parameters (.ts/.tsx) ----"
rg -n --glob='*.ts' --glob='*.tsx' -P 'catch\s*\(\s*[^)]*:\s*any\s*\)' .
echo "---- Searching for ESLint rule no-explicit-any in repo ----"
rg -n "no-explicit-any" . || true
echo "---- Searching for TS compiler option useUnknownInCatchVariables in tsconfig ----"
rg -n "useUnknownInCatchVariables" tsconfig*.json . || true
echo "---- Searching for `@typescript-eslint` in package.json ----"
cat package.json | head -n 80Repository: GitMetricsLab/github_tracker
Length of output: 2796
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- src/pages/Signup/Signup.tsx imports (top) ----"
sed -n '1,60p' src/pages/Signup/Signup.tsx
echo "---- eslint.config.js (relevant excerpts) ----"
sed -n '1,200p' eslint.config.js
echo "---- tsconfig.json (relevant excerpts) ----"
cat tsconfig.json
echo "---- tsconfig.app.json (relevant excerpts) ----"
cat tsconfig.app.json
echo "---- tsconfig.node.json (relevant excerpts) ----"
cat tsconfig.node.jsonRepository: GitMetricsLab/github_tracker
Length of output: 4439
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- Running eslint on src/pages/Signup/Signup.tsx ----"
npx eslint src/pages/Signup/Signup.tsxRepository: GitMetricsLab/github_tracker
Length of output: 306
Replace catch (error: any) with typed narrowing
src/pages/Signup/Signup.tsx uses catch (error: any) at line 105, and @typescript-eslint/no-explicit-any makes eslint fail with “Unexpected any. Specify a different type”.
Proposed fix
+import type { AxiosError } from "axios";
...
- } catch (error: any) {
- setMessage(
- error.response?.data?.message ||
- "Something went wrong. Please try again.",
- );
+ } catch (error: unknown) {
+ const axiosError = error as AxiosError<{ message?: string }>;
+ setMessage(
+ axiosError.response?.data?.message ??
+ "Something went wrong. Please try again.",
+ );
} finally {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (error: any) { | |
| setMessage(error.response?.data?.message || "Something went wrong. Please try again."); | |
| setMessage( | |
| error.response?.data?.message || | |
| "Something went wrong. Please try again.", | |
| ); | |
| import type { AxiosError } from "axios"; | |
| // ... other code ... | |
| } catch (error: unknown) { | |
| const axiosError = error as AxiosError<{ message?: string }>; | |
| setMessage( | |
| axiosError.response?.data?.message ?? | |
| "Something went wrong. Please try again.", | |
| ); | |
| } finally { |
🧰 Tools
🪛 ESLint
[error] 105-105: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/Signup/Signup.tsx` around lines 105 - 109, The catch currently uses
catch (error: any) which violates no-explicit-any; change it to catch (error:
unknown) and narrow the type before using error.response: add a type guard that
checks if error is an AxiosError (import and use axios.isAxiosError) or at
minimum if (typeof error === 'object' && error !== null && 'response' in error)
cast appropriately, then call setMessage(error.response?.data?.message ||
"Something went wrong. Please try again."); keep setMessage and the rest of the
error-handling logic unchanged.
Related Issue
Description
Updated the username validation logic to support valid GitHub usernames.
Changes Made
Removed the restrictive letter-only validation.
Added support for:
Examples
Previously, valid GitHub usernames containing hyphens or numbers were incorrectly rejected with the message "Only letters are allowed".
How Has This Been Tested?
Tested with usernames containing hyphens:
Tested with usernames containing numbers:
Verified that invalid usernames are still rejected.
Confirmed that the previous "Only letters are allowed" error no longer appears for valid GitHub usernames.
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit