Problem: When opening Add Host or Edit Host, cursor was not focusing on any field,
making it less convenient for users to start entering connection details.
Root cause: The react-hook-form field spread operator {...field} was overriding
our custom ref, preventing proper ref binding to the IP input element.
Solution:
- Use function ref to properly bind both react-hook-form ref and our custom ref
- Set focus on component mount and when editingHost changes
- Focus on IP address field as it's the first logical field in connection details
- Use 300ms timeout to ensure DOM rendering is complete
Now when users click "Add Host" or edit a host, the cursor automatically
focuses on the IP address input field for better UX.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
When adding or editing a host, the cursor now automatically focuses on the IP address field, which is the first field in the connection details section. This improves UX by allowing users to immediately start typing the most logical first piece of information.
Changes:
- Added useRef for IP address input field
- Added useEffect to focus IP field when component mounts or editingHost changes
- Uses setTimeout to ensure DOM is ready before focusing
- Works for both adding new hosts and editing existing hosts
- Modified empty state in HostManagerHostViewer to include all import controls
- Import JSON button, sample download, and format guide now appear consistently
- Maintained existing functionality while improving user experience
- Added helpful message directing users to use import functionality
- Fixed conditional rendering logic that was hiding import options
Resolves#125
Backend improvements:
- Fix SSH host update authentication system (use effectiveAuthType)
- Support both authType and authMethod field mapping
- Prevent empty password/key from overwriting existing credentials
- Add proper credentialId support for credential-based authentication
Frontend enhancements:
- Add dedicated "Add Credential" page similar to Add Host
- Refactor credentials management with consistent Host Manager styling
- Fix credential display bug (hide keyType for password credentials)
- Enhance CredentialSelector with improved API response handling
i18n internationalization:
- Fix Admin Settings i18n issues with comprehensive translation support
- Add missing credentials.* translation keys for both English and Chinese
- Fix hardcoded key type labels (RSA, ECDSA, Ed25519) with proper translations
- Add missing placeholders and form labels
UI/UX improvements:
- Update HostManager with 4-tab structure including credential management
- Improve visual consistency across credential components
- Better error handling and user feedback
- Enhanced form validation and submission logic
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Add credential selection tab to Host Manager editor
- Create CredentialSelector component for credential selection
- Update form validation to support credential-based authentication
- Extend SSH host interfaces with credentialId field
- Add internationalization support for credential authentication
- Fix OIDC config endpoint to return 200 with null data instead of 404
- Improve credentials UI spacing and color consistency
- Remove hardcoded colors and use Zinc theme throughout
- Add complete SSH credentials CRUD operations with AES-256 encryption
- Implement database migration system for schema versioning
- Create modern UI with Zinc theme for credentials management
- Add credential viewer and editor with responsive design
- Support password and SSH key authentication methods
- Include usage tracking and folder organization
- Enhance sidebar width and improve page spacing
- Add comprehensive i18n support (EN/ZH)
- Integrate with existing SSH host management
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
ZacharyZcRandClaude