Skip to content

Commit e238052

Browse files
Githubguy132010Githubguy132010
committed
Refactor API Key Inputs to Use PasswordInputField Component
- Replaced VSCodeTextField with PasswordInputField for API key inputs across multiple provider components (Bedrock, Cerebras, Chutes, DeepInfra, DeepSeek, Doubao, Featherless, Fireworks, Gemini, Glama, Groq, HuggingFace, IOIntelligence, LiteLLM, Mistral, Moonshot, Ollama, OpenAI, OpenAICompatible, OpenRouter, Requesty, SambaNova, Unbound, VercelAiGateway, XAI, ZAi). - Introduced a new PasswordInputField component to handle password visibility toggling and improved accessibility. - Updated imports and adjusted props accordingly to maintain functionality and styling.
1 parent 6b8c21f commit e238052

29 files changed

+207
-184
lines changed

‎webview-ui/src/components/settings/providers/Anthropic.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { ProviderSettings } from "@roo-code/types"
77
import { useAppTranslation } from "@src/i18n/TranslationContext"
88
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
99
import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
10+
import { PasswordInputField } from "@src/components/ui/password-input"
1011

1112
import { inputEventTransform, noTransform } from "../transforms"
1213

@@ -38,14 +39,12 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
3839

3940
return (
4041
<>
41-
<VSCodeTextField
42+
<PasswordInputField
4243
value={apiConfiguration?.apiKey || ""}
43-
type="password"
44-
onInput={handleInputChange("apiKey")}
44+
onChange={handleInputChange("apiKey")}
4545
placeholder={t("settings:placeholders.apiKey")}
46-
className="w-full">
47-
<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
48-
</VSCodeTextField>
46+
label={t("settings:providers.anthropicApiKey")}
47+
className="w-full"></PasswordInputField>
4948
<div className="text-sm text-vscode-descriptionForeground -mt-2">
5049
{t("settings:providers.apiKeyStorageNotice")}
5150
</div>

‎webview-ui/src/components/settings/providers/Bedrock.tsx‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { type ProviderSettings, type ModelInfo, BEDROCK_REGIONS, BEDROCK_1M_CONT
66

77
import { useAppTranslation } from "@src/i18n/TranslationContext"
88
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
9+
import { PasswordInputField } from "@src/components/ui/password-input"
910

1011
import { inputEventTransform, noTransform } from "../transforms"
1112

@@ -77,14 +78,12 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
7778
{t("settings:providers.apiKeyStorageNotice")}
7879
</div>
7980
{apiConfiguration?.awsUseApiKey ? (
80-
<VSCodeTextField
81+
<PasswordInputField
8182
value={apiConfiguration?.awsApiKey || ""}
82-
type="password"
83-
onInput={handleInputChange("awsApiKey")}
83+
onChange={handleInputChange("awsApiKey")}
8484
placeholder={t("settings:placeholders.apiKey")}
85-
className="w-full">
86-
<label className="block font-medium mb-1">{t("settings:providers.awsApiKey")}</label>
87-
</VSCodeTextField>
85+
label={t("settings:providers.awsApiKey")}
86+
className="w-full"></PasswordInputField>
8887
) : apiConfiguration?.awsUseProfile ? (
8988
<VSCodeTextField
9089
value={apiConfiguration?.awsProfile || ""}
@@ -95,30 +94,24 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
9594
</VSCodeTextField>
9695
) : (
9796
<>
98-
<VSCodeTextField
97+
<PasswordInputField
9998
value={apiConfiguration?.awsAccessKey || ""}
100-
type="password"
101-
onInput={handleInputChange("awsAccessKey")}
99+
onChange={handleInputChange("awsAccessKey")}
102100
placeholder={t("settings:placeholders.accessKey")}
103-
className="w-full">
104-
<label className="block font-medium mb-1">{t("settings:providers.awsAccessKey")}</label>
105-
</VSCodeTextField>
106-
<VSCodeTextField
101+
label={t("settings:providers.awsAccessKey")}
102+
className="w-full"></PasswordInputField>
103+
<PasswordInputField
107104
value={apiConfiguration?.awsSecretKey || ""}
108-
type="password"
109-
onInput={handleInputChange("awsSecretKey")}
105+
onChange={handleInputChange("awsSecretKey")}
110106
placeholder={t("settings:placeholders.secretKey")}
111-
className="w-full">
112-
<label className="block font-medium mb-1">{t("settings:providers.awsSecretKey")}</label>
113-
</VSCodeTextField>
114-
<VSCodeTextField
107+
label={t("settings:providers.awsSecretKey")}
108+
className="w-full"></PasswordInputField>
109+
<PasswordInputField
115110
value={apiConfiguration?.awsSessionToken || ""}
116-
type="password"
117-
onInput={handleInputChange("awsSessionToken")}
111+
onChange={handleInputChange("awsSessionToken")}
118112
placeholder={t("settings:placeholders.sessionToken")}
119-
className="w-full">
120-
<label className="block font-medium mb-1">{t("settings:providers.awsSessionToken")}</label>
121-
</VSCodeTextField>
113+
label={t("settings:providers.awsSessionToken")}
114+
className="w-full"></PasswordInputField>
122115
</>
123116
)}
124117
<div>

‎webview-ui/src/components/settings/providers/Cerebras.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const Cerebras = ({ apiConfiguration, setApiConfigurationField }: Cerebra
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.cerebrasApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("cerebrasApiKey")}
35+
onChange={handleInputChange("cerebrasApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.cerebrasApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.cerebrasApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/Chutes.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const Chutes = ({ apiConfiguration, setApiConfigurationField }: ChutesPro
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.chutesApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("chutesApiKey")}
35+
onChange={handleInputChange("chutesApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.chutesApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.chutesApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/DeepInfra.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type { RouterModels } from "@roo/api"
88
import { vscode } from "@src/utils/vscode"
99
import { useAppTranslation } from "@src/i18n/TranslationContext"
1010
import { Button } from "@src/components/ui"
11+
import { PasswordInputField } from "@src/components/ui/password-input"
1112

1213
import { inputEventTransform } from "../transforms"
1314
import { ModelPicker } from "../ModelPicker"
@@ -51,14 +52,12 @@ export const DeepInfra = ({
5152

5253
return (
5354
<>
54-
<VSCodeTextField
55+
<PasswordInputField
5556
value={apiConfiguration?.deepInfraApiKey || ""}
56-
type="password"
57-
onInput={handleInputChange("deepInfraApiKey")}
57+
onChange={handleInputChange("deepInfraApiKey")}
5858
placeholder={t("settings:placeholders.apiKey")}
59-
className="w-full">
60-
<label className="block font-medium mb-1">{t("settings:providers.apiKey")}</label>
61-
</VSCodeTextField>
59+
label={t("settings:providers.apiKey")}
60+
className="w-full"></PasswordInputField>
6261

6362
<Button
6463
variant="outline"

‎webview-ui/src/components/settings/providers/DeepSeek.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const DeepSeek = ({ apiConfiguration, setApiConfigurationField }: DeepSee
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.deepSeekApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("deepSeekApiKey")}
35+
onChange={handleInputChange("deepSeekApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.deepSeekApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.deepSeekApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/Doubao.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const Doubao = ({ apiConfiguration, setApiConfigurationField }: DoubaoPro
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.doubaoApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("doubaoApiKey")}
35+
onChange={handleInputChange("doubaoApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.doubaoApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.doubaoApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/Featherless.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const Featherless = ({ apiConfiguration, setApiConfigurationField }: Feat
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.featherlessApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("featherlessApiKey")}
35+
onChange={handleInputChange("featherlessApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.featherlessApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.featherlessApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/Fireworks.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
55

66
import { useAppTranslation } from "@src/i18n/TranslationContext"
77
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
8+
import { PasswordInputField } from "@src/components/ui/password-input"
89

910
import { inputEventTransform } from "../transforms"
1011

@@ -29,14 +30,12 @@ export const Fireworks = ({ apiConfiguration, setApiConfigurationField }: Firewo
2930

3031
return (
3132
<>
32-
<VSCodeTextField
33+
<PasswordInputField
3334
value={apiConfiguration?.fireworksApiKey || ""}
34-
type="password"
35-
onInput={handleInputChange("fireworksApiKey")}
35+
onChange={handleInputChange("fireworksApiKey")}
3636
placeholder={t("settings:placeholders.apiKey")}
37-
className="w-full">
38-
<label className="block font-medium mb-1">{t("settings:providers.fireworksApiKey")}</label>
39-
</VSCodeTextField>
37+
label={t("settings:providers.fireworksApiKey")}
38+
className="w-full"></PasswordInputField>
4039
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4140
{t("settings:providers.apiKeyStorageNotice")}
4241
</div>

‎webview-ui/src/components/settings/providers/Gemini.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
66

77
import { useAppTranslation } from "@src/i18n/TranslationContext"
88
import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
9+
import { PasswordInputField } from "@src/components/ui/password-input"
910

1011
import { inputEventTransform } from "../transforms"
1112

@@ -35,14 +36,12 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, fromWelcome
3536

3637
return (
3738
<>
38-
<VSCodeTextField
39+
<PasswordInputField
3940
value={apiConfiguration?.geminiApiKey || ""}
40-
type="password"
41-
onInput={handleInputChange("geminiApiKey")}
41+
onChange={handleInputChange("geminiApiKey")}
4242
placeholder={t("settings:placeholders.apiKey")}
43-
className="w-full">
44-
<label className="block font-medium mb-1">{t("settings:providers.geminiApiKey")}</label>
45-
</VSCodeTextField>
43+
label={t("settings:providers.geminiApiKey")}
44+
className="w-full"></PasswordInputField>
4645
<div className="text-sm text-vscode-descriptionForeground -mt-2">
4746
{t("settings:providers.apiKeyStorageNotice")}
4847
</div>

0 commit comments

Comments
 (0)