feat: Add visibility toggle for API key inputs

[teungdao]

Related GitHub Issue

Closes: #6113

Description

Added visibility toggle to API key input fields for all supported providers. Key changes:

• Created reusable PasswordInput component with eye icon toggle
• Replaced plain password fields with new toggle component in all provider settings
• Implemented show/hide functionality for API keys
• Ensured consistent UI/UX across all providers

Affected providers: Amazon Bedrock, Anthropic, Chutes, Claude Code, Deepseek, GCP Vertex, Glama, Gemini, Groq, Human Relay, LiteLLM, LM Studio, Mistral, Moonshot, Ollama, OpenAI, OpenAI Compatible, Requesty, Unbound, VS Code LM API, xAI (Grok)

Test Procedure

1. Open extension settings
2. Navigate to any provider's configuration
3. Verify eye icon appears next to API key field
4. Click eye icon to toggle between visible/hidden states
5. Confirm API key text visibility changes accordingly
6. Verify icon changes between open/closed eye states

Pre-Submission Checklist

• Issue Linked: Add visibility toggle to API key fields #6113
• Scope: Changes focused on adding visibility toggle
• Self-Review: Performed code review and testing
• Testing: Manual testing completed for all providers
• Documentation Impact: No documentation updates needed
• Contribution Guidelines: Read and agreed

Screenshots / Videos

Documentation Updates

• No documentation updates are required.

Additional Notes

• Implemented consistent UX pattern across all providers
• Used VS Code's built-in eye icons for visual consistency
• Component handles all accessibility concerns

Get in Touch

Discord: uta080522

---

Important

Introduce ApiKeyInput component with visibility toggle for API keys across provider settings.

• Components:
  • Add ApiKeyInput component in ApiKeyInput.tsx with visibility toggle for API keys.
• Provider Settings:
  • Replace VSCodeTextField with ApiKeyInput in Anthropic.tsx, Bedrock.tsx, and Chutes.tsx for API key fields.
  • Apply ApiKeyInput to DeepSeek.tsx, Gemini.tsx, and Glama.tsx for consistent API key handling.
  • Update Groq.tsx, LiteLLM.tsx, and Mistral.tsx to use ApiKeyInput for API key inputs.
  • Modify Moonshot.tsx, OpenAI.tsx, and OpenAICompatible.tsx to integrate ApiKeyInput.
  • Implement ApiKeyInput in OpenRouter.tsx, Requesty.tsx, and Unbound.tsx for API key visibility.
  • Use ApiKeyInput in Vertex.tsx and XAI.tsx for API key fields.

^{This description was created by for fc2b3b2. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Consider replacing the clickable

used for toggling API key visibility with a element that includes an appropriate aria-label for better accessibility.