tool-plugin secret-input display unexpected #11961

Closed
opened 2026-02-21 19:04:59 -05:00 by yindo · 5 comments
Owner

Originally created by @bionexit on GitHub (Mar 21, 2025).

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.1.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

I'm working on a tool-plugin development, when I set a parameter to a specific input element with secret-input type, unfortunately the front end doesn't show * marked the content.

please kindly help.

./tools/connector.yaml

parameters:
  - name: mysql_password
    type: secret-input
    required: true
    label:
      en_US: MySQL Password
      zh_Hans:  MySQL 密码
    human_description:
      en_US: Please input your MySQL password
      zh_Hans: 请输入你的 MySQL 密码
    form: form 

✔️ Expected Behavior

Image

the password section should be covered with *

Actual Behavior

Image

Originally created by @bionexit on GitHub (Mar 21, 2025). ### Self Checks - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:) - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.1.1 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce I'm working on a tool-plugin development, when I set a parameter to a specific input element with `secret-input` type, unfortunately the front end doesn't show * marked the content. please kindly help. ./tools/connector.yaml ``` parameters: - name: mysql_password type: secret-input required: true label: en_US: MySQL Password zh_Hans: MySQL 密码 human_description: en_US: Please input your MySQL password zh_Hans: 请输入你的 MySQL 密码 form: form ``` ### ✔️ Expected Behavior ![Image](https://github.com/user-attachments/assets/a1045556-a7f5-447d-a92c-4d183e50234e) the password section should be covered with * ### ❌ Actual Behavior ![Image](https://github.com/user-attachments/assets/856e5a8d-bd3e-4c32-943a-dafe391c9a8b)
yindo added the 🔨 feat:tools label 2026-02-21 19:04:59 -05:00
yindo closed this issue 2026-02-21 19:04:59 -05:00
Author
Owner

@dosubot[bot] commented on GitHub (Mar 21, 2025):

To address the issue where the secret-input type is not displaying as expected (i.e., not masking the input with asterisks), ensure that the frontend component responsible for rendering the input fields is correctly configured. The secret-input type should be rendered using an Input component with the type attribute set to 'password'. This is how the Dify frontend typically handles secret-input types:

<Input
  type={type === 'secret' ? 'password' : 'text'}
  id={variable}
  name={variable}
  value={fieldValue}
  onChange={val => handleFormChange(variable, val.target.value)}
  required={required}
  className={cn(inputClassName)}
/>

Make sure that the type in your form schema is correctly set to 'secret' so that the input field is rendered as a password field, which will automatically mask the input content [1]. Additionally, verify that your YAML configuration is correctly set up with type: secret-input for the mysql_password parameter, as you've shown in your example [2]. If the issue persists, there might be a problem with how the frontend is interpreting the form schema or rendering the component.

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Mar 21, 2025): <!-- Answer --> To address the issue where the `secret-input` type is not displaying as expected (i.e., not masking the input with asterisks), ensure that the frontend component responsible for rendering the input fields is correctly configured. The `secret-input` type should be rendered using an `Input` component with the `type` attribute set to `'password'`. This is how the Dify frontend typically handles `secret-input` types: ```tsx <Input type={type === 'secret' ? 'password' : 'text'} id={variable} name={variable} value={fieldValue} onChange={val => handleFormChange(variable, val.target.value)} required={required} className={cn(inputClassName)} /> ``` Make sure that the `type` in your form schema is correctly set to `'secret'` so that the input field is rendered as a password field, which will automatically mask the input content <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/datasets/external-api/external-api-modal/Form.tsx)</sup>. Additionally, verify that your YAML configuration is correctly set up with `type: secret-input` for the `mysql_password` parameter, as you've shown in your example <sup>[[2]](https://github.com/langgenius/dify-docs/blob/main/jp/guides/tools/quick-tool-integration.md)</sup>. If the issue persists, there might be a problem with how the frontend is interpreting the form schema or rendering the component. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=other)</sup>
Author
Owner

@bionexit commented on GitHub (Mar 24, 2025):

To address the issue where the secret-input type is not displaying as expected (i.e., not masking the input with asterisks), ensure that the frontend component responsible for rendering the input fields is correctly configured. The secret-input type should be rendered using an Input component with the type attribute set to 'password'. This is how the Dify frontend typically handles secret-input types:

<Input
type={type === 'secret' ? 'password' : 'text'}
id={variable}
name={variable}
value={fieldValue}
onChange={val => handleFormChange(variable, val.target.value)}
required={required}
className={cn(inputClassName)}
/>
Make sure that the type in your form schema is correctly set to 'secret' so that the input field is rendered as a password field, which will automatically mask the input content [1]. Additionally, verify that your YAML configuration is correctly set up with type: secret-input for the mysql_password parameter, as you've shown in your example [2]. If the issue persists, there might be a problem with how the frontend is interpreting the form schema or rendering the component.

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

100% sure the correctly set up with type: secret-input for the mysql_password parameter. And please guide my further for how to adjust the type in the form schema set to 'secret' when i'm creating a tool-plugin.

Still have same appearance. @dosubot

@bionexit commented on GitHub (Mar 24, 2025): > To address the issue where the `secret-input` type is not displaying as expected (i.e., not masking the input with asterisks), ensure that the frontend component responsible for rendering the input fields is correctly configured. The `secret-input` type should be rendered using an `Input` component with the `type` attribute set to `'password'`. This is how the Dify frontend typically handles `secret-input` types: > > <Input > type={type === 'secret' ? 'password' : 'text'} > id={variable} > name={variable} > value={fieldValue} > onChange={val => handleFormChange(variable, val.target.value)} > required={required} > className={cn(inputClassName)} > /> > Make sure that the `type` in your form schema is correctly set to `'secret'` so that the input field is rendered as a password field, which will automatically mask the input content [[1]](https://github.com/langgenius/dify/blob/main/web/app/components/datasets/external-api/external-api-modal/Form.tsx). Additionally, verify that your YAML configuration is correctly set up with `type: secret-input` for the `mysql_password` parameter, as you've shown in your example [[2]](https://github.com/langgenius/dify-docs/blob/main/jp/guides/tools/quick-tool-integration.md). If the issue persists, there might be a problem with how the frontend is interpreting the form schema or rendering the component. > > _To continue talking to [Dosu](https://dosu.dev), mention [@dosu](https://github.com/dosu)._ > > Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/faf319a5-f66d-4290-95d3-3b33dd6b5bd2?feedback_type=other) 100% sure the correctly set up with `type: secret-input` for the `mysql_password` parameter. And please guide my further for how to adjust the type in the form schema set to 'secret' when i'm creating a tool-plugin. Still have same appearance. @dosubot
Author
Owner

@dosubot[bot] commented on GitHub (Mar 24, 2025):

To adjust the type in the form schema to 'secret' when creating a tool-plugin, ensure that the ToolParameter is initialized with ToolParameterType.SECRET_INPUT. Since you have already set up the mysql_password parameter with type: secret-input, you can create a ToolParameter with the type set to SECRET_INPUT like this:

from tool_entities import ToolParameter, ToolParameterType

# Example of creating a ToolParameter with type 'secret'
mysql_password_parameter = ToolParameter.get_simple_instance(
    name="mysql_password",
    llm_description="The password for MySQL connection",
    typ=ToolParameterType.SECRET_INPUT,
    required=True
)

This code snippet ensures that the ToolParameter is correctly set to SECRET_INPUT, which corresponds to the 'secret' type in the form schema [1].

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Mar 24, 2025): <!-- Answer --> To adjust the type in the form schema to 'secret' when creating a tool-plugin, ensure that the `ToolParameter` is initialized with `ToolParameterType.SECRET_INPUT`. Since you have already set up the `mysql_password` parameter with `type: secret-input`, you can create a `ToolParameter` with the type set to `SECRET_INPUT` like this: ```python from tool_entities import ToolParameter, ToolParameterType # Example of creating a ToolParameter with type 'secret' mysql_password_parameter = ToolParameter.get_simple_instance( name="mysql_password", llm_description="The password for MySQL connection", typ=ToolParameterType.SECRET_INPUT, required=True ) ``` This code snippet ensures that the `ToolParameter` is correctly set to `SECRET_INPUT`, which corresponds to the 'secret' type in the form schema <sup>[[1]](https://github.com/langgenius/dify/blob/main/api/core/tools/entities/tool_entities.py)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/2a962f1f-dc95-4e5e-a178-6b83dbc2b336?feedback_type=other)</sup>
Author
Owner

@zxhxp commented on GitHub (Apr 11, 2025):

I also encountered this problem, this is a front-end program BUG, need to modify a tsx file。
file path:

app\components\header\account-setting\model-provider-page\model-modal\Form.tsx

line 170.
type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}

to

type={formSchema.type === FormTypeEnum.textNumber ? 'number' : (formSchema.type === FormTypeEnum.secretInput ? 'password' : 'text')}

@zxhxp commented on GitHub (Apr 11, 2025): I also encountered this problem, this is a front-end program BUG, need to modify a tsx file。 file path: app\components\header\account-setting\model-provider-page\model-modal\Form.tsx line 170. `type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}` to `type={formSchema.type === FormTypeEnum.textNumber ? 'number' : (formSchema.type === FormTypeEnum.secretInput ? 'password' : 'text')}`
Author
Owner

@dosubot[bot] commented on GitHub (May 13, 2025):

Hi, @bionexit. I'm Dosu, and I'm helping the Dify team manage their backlog. I'm marking this issue as stale.

Issue Summary:

  • The issue involves a bug with the secret-input type parameter not displaying masked content.
  • You reported the issue, and I suggested ensuring the frontend component renders the input field as a password type.
  • @zxhxp confirmed the issue and identified a specific line in a TypeScript file that needed modification.
  • The problem was related to frontend rendering and required code adjustments.
  • The issue has been resolved by configuring the frontend component and modifying the TypeScript file.

Next Steps:

  • Please confirm if this issue is still relevant to the latest version of the Dify repository by commenting on this issue.
  • If there is no further activity, the issue will be automatically closed in 15 days.

Thank you for your understanding and contribution!

@dosubot[bot] commented on GitHub (May 13, 2025): Hi, @bionexit. I'm [Dosu](https://dosu.dev), and I'm helping the Dify team manage their backlog. I'm marking this issue as stale. **Issue Summary:** - The issue involves a bug with the `secret-input` type parameter not displaying masked content. - You reported the issue, and I suggested ensuring the frontend component renders the input field as a password type. - @zxhxp confirmed the issue and identified a specific line in a TypeScript file that needed modification. - The problem was related to frontend rendering and required code adjustments. - The issue has been resolved by configuring the frontend component and modifying the TypeScript file. **Next Steps:** - Please confirm if this issue is still relevant to the latest version of the Dify repository by commenting on this issue. - If there is no further activity, the issue will be automatically closed in 15 days. Thank you for your understanding and contribution!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#11961