feat(vtop-login): add MutationObserver for captcha refresh

[chanu0073]

Previous code was not able to autofill captcha on vtop login page when refresh button was clicked.
So, I added MutationObserver to watch captcha changes and autofill whenever refresh button is clicked.

Please review the code.

Summary by CodeRabbit

• Bug Fixes
  • Improved captcha handling on the login page, making the login flow more reliable when the captcha area updates dynamically.
  • Better support for loading and interacting with the captcha image and input field when they appear late or change after the page loads.
  • The submit button is now only activated when available, reducing unexpected behavior during login.

[coderabbitai]

📝 Walkthrough

Walkthrough

The captcha-handling logic for the VTOP login page was refactored into a named function, solveVtopLoginCaptcha(), which retrieves the captcha image, text input, and submit button with existence checks before acting. A MutationObserver now re-invokes this function when the captcha block's children change.

Changes

Captcha Solving Refactor

Layer / File(s)	Summary
Encapsulate and re-trigger captcha solver js/captcha/captchaparser.js	Wraps captcha logic in solveVtopLoginCaptcha(), adds null checks before calling solve() and focusing the submit button, switches to style.setProperty(..., "important"), and adds a MutationObserver on captchaBlock to re-run the solver when captcha refreshes.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DOM as captchaBlock DOM
  participant Observer as MutationObserver
  participant Solver as solveVtopLoginCaptcha
  participant Solve as solve()

  Solver->>DOM: query img, captchaStr, submitBtn
  Solver->>Solve: solve(img, textB) if both exist
  Solver->>DOM: focus submitBtn if exists
  DOM-->>Observer: children changed
  Observer->>Solver: re-invoke solveVtopLoginCaptcha()

Loading

Poem

A hop, a skip, a captcha's plight,
Now watched and solved with careful sight.
No more null crashes in the night,
The observer keeps the form just right.
🐇✨ Login on, my burrow bright!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately highlights the main change: adding a MutationObserver to handle captcha refreshes in the VTOP login flow.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

This PR improves the VTOP login captcha autofill flow by re-solving the captcha when the captcha UI updates (e.g., after using the refresh button), using a MutationObserver.

Changes:

• Refactored VTOP login captcha handling into a dedicated solveVtopLoginCaptcha() helper.
• Added a MutationObserver on the captcha container to trigger re-solving when the captcha changes.

---

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

[coderabbitai]

🧹 Nitpick comments (1)

js/captcha/captchaparser.js (1)

258-301: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Duplicated captcha-solve/observer pattern across branches.

solveVtopLoginCaptcha mirrors the newly-added solveRegistrationCaptcha (lines 280-301) and the earlier solve_captcha + MutationObserver blocks for vtopcc/vtop2 (lines 224-256) — same shape, only selectors differ. Consider extracting a shared helper (e.g., attachCaptchaSolver({imgSelector, textSelector, submitSelector, observeTarget})) to reduce triplication and ease future maintenance.

🤖 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 `@js/captcha/captchaparser.js` around lines 258 - 301, The captcha-solving
logic is duplicated across solveVtopLoginCaptcha, solveRegistrationCaptcha, and
the earlier solve_captcha/MutationObserver branches, with only selectors
changing. Extract the repeated “find image/text/submit, resize image, call
solve, focus submit, attach observer” flow into a shared helper such as
attachCaptchaSolver or a generalized solveCaptchaForPage, and have each hostname
branch pass its specific selectors and observe target.

🤖 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.

Nitpick comments:
In `@js/captcha/captchaparser.js`:
- Around line 258-301: The captcha-solving logic is duplicated across
solveVtopLoginCaptcha, solveRegistrationCaptcha, and the earlier
solve_captcha/MutationObserver branches, with only selectors changing. Extract
the repeated “find image/text/submit, resize image, call solve, focus submit,
attach observer” flow into a shared helper such as attachCaptchaSolver or a
generalized solveCaptchaForPage, and have each hostname branch pass its specific
selectors and observe target.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 36f0564c-62a4-4c1a-9b3d-1c76b6d31df8

📥 Commits

Reviewing files that changed from the base of the PR and between 2c62680 and 96e07a0.

📒 Files selected for processing (1)

• js/captcha/captchaparser.js