For this feature, I focused on creating a seamless interaction between the terminal's data stream and the user interface, allowing for quick authentication when sudo prompts appear. Here is a technical breakdown of the changes.
1. Pattern Detection in Terminal Stream
The core logic resides in [Terminal.tsx].
I intercepted the WebSocket onmessage handler to inspect incoming data chunks from the server. I implemented a regex pattern match to detect standard sudo prompts (e.g., [sudo] password for user:).
When a match is detected—and provided the feature is enabled in the host configuration—the application pauses standard input processing momentarily to render the [SudoPasswordPopup] component.
This ensures the user sees the prompt immediately when authentication is requested.
2. UI Component and Event Interception
I created a new component, [SudoPasswordPopup.tsx], to handle the user interaction.
The most critical technical challenge here was managing keyboard focus and event propagation.
Since xterm.js aggressively captures keyboard input, I implemented a window-level keydown event listener using the capture phase. This allows the popup to intercept Enter (to confirm) and Escape (to dismiss) keys before they bubble down to the terminal instance. I explicitly used e.stopImmediatePropagation() and e.preventDefault() to ensure that confirming the password doesn't accidentally send a newline character to the shell, and dismissing the popup doesn't send an escape code.
3. Configuration and Type Definitions
To persist this setting, I updated the data models in [src/types/index.ts].
I added a sudoPasswordAutoFill boolean property to the [TerminalConfig] interface.
I then updated [HostManagerEditor.tsx] to include a toggle switch within the "Advanced terminal settings" tab. This required updating the Zod validation schema to correctly handle the new field during form submission and persistence.
4. Localization
I standardized the translation keys for this feature across all supported languages.
I placed the keys (title, hint, confirm, dismiss) under the terminal namespace in the [translation.json].
This ensures the feature feels native regardless of the selected interface language.
In the Terminal.tsx file, unfortunately the code ended up indented differently; it might be difficult to spot the differences. I hope that’s not a problem.
Screenshots / Demos
Terminal Settings
Terminal
Checklist
Code follows project style guidelines
Supports mobile and desktop UI/app (if applicable)
# Overview
_Short summary of what this PR does_
- [X] Added: ...
- [ ] Updated: ...
- [ ] Removed: ...
- [ ] Fixed: ...
# Changes Made
## Sudo Password Auto-Fill Implementation
For this feature, I focused on creating a seamless interaction between the terminal's data stream and the user interface, allowing for quick authentication when sudo prompts appear. Here is a technical breakdown of the changes.
### 1. Pattern Detection in Terminal Stream
The core logic resides in [Terminal.tsx].
I intercepted the WebSocket `onmessage` handler to inspect incoming data chunks from the server. I implemented a regex pattern match to detect standard sudo prompts (e.g., `[sudo] password for user:`).
When a match is detected—and provided the feature is enabled in the host configuration—the application pauses standard input processing momentarily to render the [SudoPasswordPopup] component.
This ensures the user sees the prompt immediately when authentication is requested.
### 2. UI Component and Event Interception
I created a new component, [SudoPasswordPopup.tsx], to handle the user interaction.
The most critical technical challenge here was managing keyboard focus and event propagation.
Since xterm.js aggressively captures keyboard input, I implemented a window-level `keydown` event listener using the **capture phase**. This allows the popup to intercept `Enter` (to confirm) and `Escape` (to dismiss) keys before they bubble down to the terminal instance. I explicitly used `e.stopImmediatePropagation()` and `e.preventDefault()` to ensure that confirming the password doesn't accidentally send a newline character to the shell, and dismissing the popup doesn't send an escape code.
### 3. Configuration and Type Definitions
To persist this setting, I updated the data models in [src/types/index.ts].
I added a `sudoPasswordAutoFill` boolean property to the [TerminalConfig] interface.
I then updated [HostManagerEditor.tsx] to include a toggle switch within the "Advanced terminal settings" tab. This required updating the Zod validation schema to correctly handle the new field during form submission and persistence.
### 4. Localization
I standardized the translation keys for this feature across all supported languages.
I placed the keys (title, hint, confirm, dismiss) under the `terminal` namespace in the [translation.json].
This ensures the feature feels native regardless of the selected interface language.
In the Terminal.tsx file, unfortunately the code ended up indented differently; it might be difficult to spot the differences. I hope that’s not a problem.
# Screenshots / Demos
## Terminal Settings
<img width="1334" height="866" alt="host-terminal-settings" src="https://github.com/user-attachments/assets/bda9e7ca-0a2a-4437-8d0c-1775a29949ab" />
## Terminal
<img width="1334" height="911" alt="terminal" src="https://github.com/user-attachments/assets/848d07a0-65cd-4ae2-a920-7892ed04b01e" />
# Checklist
- [X] Code follows project style guidelines
- [ ] Supports mobile and desktop UI/app (if applicable)
- [X] I have read [Contributing.md](https://github.com/Termix-SSH/Termix/blob/main/CONTRIBUTING.md)
LGTM. Termix has a built in alert system for managing alerts which I will migrate your auto-fill alert to use. Thanks.
Thanks for the approval, actually, sorry if I didn't notice that there was already an ad-hoc component, if you want you can reopen the PR and I can do the migration
> LGTM. Termix has a built in alert system for managing alerts which I will migrate your auto-fill alert to use. Thanks.
Thanks for the approval, actually, sorry if I didn't notice that there was already an ad-hoc component, if you want you can reopen the PR and I can do the migration
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
Short summary of what this PR does
Changes Made
Sudo Password Auto-Fill Implementation
For this feature, I focused on creating a seamless interaction between the terminal's data stream and the user interface, allowing for quick authentication when sudo prompts appear. Here is a technical breakdown of the changes.
1. Pattern Detection in Terminal Stream
The core logic resides in [Terminal.tsx].
I intercepted the WebSocket
onmessagehandler to inspect incoming data chunks from the server. I implemented a regex pattern match to detect standard sudo prompts (e.g.,[sudo] password for user:).When a match is detected—and provided the feature is enabled in the host configuration—the application pauses standard input processing momentarily to render the [SudoPasswordPopup] component.
This ensures the user sees the prompt immediately when authentication is requested.
2. UI Component and Event Interception
I created a new component, [SudoPasswordPopup.tsx], to handle the user interaction.
The most critical technical challenge here was managing keyboard focus and event propagation.
Since xterm.js aggressively captures keyboard input, I implemented a window-level
keydownevent listener using the capture phase. This allows the popup to interceptEnter(to confirm) andEscape(to dismiss) keys before they bubble down to the terminal instance. I explicitly usede.stopImmediatePropagation()ande.preventDefault()to ensure that confirming the password doesn't accidentally send a newline character to the shell, and dismissing the popup doesn't send an escape code.3. Configuration and Type Definitions
To persist this setting, I updated the data models in [src/types/index.ts].
I added a
sudoPasswordAutoFillboolean property to the [TerminalConfig] interface.I then updated [HostManagerEditor.tsx] to include a toggle switch within the "Advanced terminal settings" tab. This required updating the Zod validation schema to correctly handle the new field during form submission and persistence.
4. Localization
I standardized the translation keys for this feature across all supported languages.
I placed the keys (title, hint, confirm, dismiss) under the
terminalnamespace in the [translation.json].This ensures the feature feels native regardless of the selected interface language.
In the Terminal.tsx file, unfortunately the code ended up indented differently; it might be difficult to spot the differences. I hope that’s not a problem.
Screenshots / Demos
Terminal Settings
Terminal
Checklist
LGTM. Termix has a built in alert system for managing alerts which I will migrate your auto-fill alert to use. Thanks.
Thanks for the approval, actually, sorry if I didn't notice that there was already an ad-hoc component, if you want you can reopen the PR and I can do the migration
No worries, it’s not an issue. I have it taken care of already.