Add real-time underline validation, Enter key validation, and sync error border with toast for organization input#582
Open
gurusatsangi wants to merge 4 commits intofossasia:mainfrom
Open
Conversation
…ror border with toast for organization input
Contributor
Reviewer's GuideImplements real-time, format-based validation for the organization input, adds Enter-key-triggered validation that reuses existing blur logic, and synchronizes a persistent red error border with the invalid-organization toast using a shared CSS class. Sequence diagram for real-time and Enter-key organization validationsequenceDiagram
actor User
participant OrgInput as orgInput
participant DebouncedValidator as debouncedValidateOrg
participant BlurValidator as validateOrgOnBlur
participant Fetch as validateOrganization
participant GitHubAPI
participant Toast as invalidOrgToast
User->>OrgInput: Type characters
OrgInput->>OrgInput: Persist orgName to storage
OrgInput->>DebouncedValidator: input event (org)
DebouncedValidator->>DebouncedValidator: Check format /^[a-z0-9-]{1,39}$/
alt Invalid format
DebouncedValidator->>OrgInput: Add class invalid-org
else Valid format or empty
DebouncedValidator->>OrgInput: Remove class invalid-org
end
User->>OrgInput: Press Enter
OrgInput->>OrgInput: keydown Enter (prevent default)
OrgInput->>OrgInput: blur()
OrgInput->>BlurValidator: validateOrgOnBlur(org)
BlurValidator->>Fetch: validateOrganization(org)
Fetch->>GitHubAPI: GET /orgs/{org}
GitHubAPI-->>Fetch: HTTP status
alt Status 200
BlurValidator->>Toast: Remove existing invalid-org-toast
BlurValidator->>OrgInput: Remove class invalid-org
else Non-200 or error
BlurValidator->>Toast: Create invalid-org-toast element
BlurValidator->>OrgInput: Add class invalid-org
Toast-->>Toast: Auto-remove after timeout
end
Flow diagram for organization input CSS border and toast stateflowchart TD
A["User types in orgInput"] --> B["Persist orgName to storage"]
B --> C{"Debounced format check<br>/^[a-z0-9-]{1,39}$/"}
C -->|Empty input| D["Remove class invalid-org"]
C -->|Invalid format| E["Add class invalid-org (underline)"]
C -->|Valid format| F["Remove class invalid-org"]
G["User presses Enter or input blurs"] --> H["Call validateOrgOnBlur(org)"]
H --> I["Call validateOrganization(org)"]
I --> J{"GitHub API status"}
J -->|200 OK| K["Remove invalid-org-toast if present"]
K --> L["Remove class invalid-org (no error)"]
J -->|Non-200 or error| M["Show invalid-org-toast"]
M --> N["Add class invalid-org (red border)"]
M --> O["Toast auto-dismiss after timeout"]
O --> P["Red border remains until org becomes valid or input cleared"]
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
github-actions
Bot
added
javascript
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 3 issues, and left some high level feedback:
- The new
validateOrganizationasync helper is never used; either wire it into the validation flow (e.g., for blur/Enter validation) or remove it to avoid dead code. - Consider deferring
browser.storage.local.set({ orgName: org })to blur/Enter or throttling it, since updating storage on everyinputevent can be unnecessarily frequent for fast typing.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The new `validateOrganization` async helper is never used; either wire it into the validation flow (e.g., for blur/Enter validation) or remove it to avoid dead code.
- Consider deferring `browser.storage.local.set({ orgName: org })` to blur/Enter or throttling it, since updating storage on every `input` event can be unnecessarily frequent for fast typing.
## Individual Comments
### Comment 1
<location path="src/scripts/popup.js" line_range="882" />
<code_context>
+ return;
+ }
+
+ const isValidFormat = /^[a-z0-9-]{1,39}$/.test(org);
+
+ if (!isValidFormat) {
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Org name regex is permissive in ways GitHub is not (leading/trailing hyphens, consecutive hyphens) and may give misleading feedback.
GitHub org names can’t start or end with a hyphen and can’t contain consecutive hyphens, but this pattern allows them (e.g. `-foo`, `foo-`, `foo--bar`). Those values will be treated as “valid format” here and then rejected by the API, leading to confusing UX. Please either tighten the regex to match GitHub’s rules or centralize the validation so UI and API stay aligned.
```suggestion
// GitHub org rules: 1–39 chars, lowercase letters/digits/hyphens,
// no leading/trailing hyphen, no consecutive hyphens
const isValidFormat = /^(?!.*--)[a-z0-9](?:[a-z0-9-]{0,37}[a-z0-9])?$/.test(org);
```
</issue_to_address>
### Comment 2
<location path="src/scripts/popup.js" line_range="895" />
<code_context>
+ orgInput.addEventListener('input', () => {
+ const org = orgInput.value.trim().toLowerCase();
+
+ browser.storage.local.set({ orgName: org });
+
+ debouncedValidateOrg(org);
</code_context>
<issue_to_address>
**suggestion (performance):** Writing to browser.storage on every keystroke can be unnecessarily heavy; consider debouncing or deferring.
Since `input` fires on every keypress, this will trigger a storage write per character, which may be excessive for frequent use. You could either reuse the existing debounce (so writes happen only after the user pauses), or only persist on blur/Enter when editing is finished, preserving behavior while reducing I/O.
Suggested implementation:
```javascript
}
}, 500);
const debouncedSaveOrgName = debounce((org) => {
browser.storage.local.set({ orgName: org });
}, 500);
// 🔹 INPUT (typing + backspace both covered)
orgInput.addEventListener('input', () => {
const org = orgInput.value.trim().toLowerCase();
debouncedSaveOrgName(org);
debouncedValidateOrg(org);
});
```
If the debounce delay for validation and storage should differ (e.g., faster validation vs. slower writes), you may want to adjust the `500` ms timeout for `debouncedSaveOrgName` independently, or derive it from a shared constant used elsewhere in the file.
</issue_to_address>
### Comment 3
<location path="src/index.css" line_range="403-405" />
<code_context>
}
}
-
+.invalid-org {
+ border: 1px solid #ef4444 !important;
+}
@keyframes shake {
</code_context>
<issue_to_address>
**suggestion:** Using `!important` on `.invalid-org` could make it hard to integrate with existing theming or focus styles.
Because this sets a full border with `!important`, it can override focus rings, themed borders, or high-contrast styles on the same element. If you just need to show an error, consider changing only the border color (without `!important` if you can), or narrowing the selector to the specific input. That keeps it compatible with other states like focus and hover.
```suggestion
.invalid-org {
border-color: #ef4444;
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Fixes #581
📝 Summary of Changes
⚙️ Behavior Changes
📸screenshot
📸recording
2026-04-20.21-46-59.-.Trim.mp4
Before:
After:
✅ Checklist
👀 Reviewer Notes
This PR improves UX by:
🔍 Summary by Sourcery
Enhance organization input validation by adding real-time feedback, enabling Enter key validation, and synchronizing error indication with toast and persistent border.
Summary by Sourcery
Improve organization input validation UX with real-time format feedback, Enter-key-triggered validation, and synchronized visual error indication.
New Features:
Enhancements: