fix: Refactor API Key Inputs to Use PasswordInputField Component

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

@@ -7,6 +7,7 @@ import type { ProviderSettings } from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -38,14 +39,12 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.apiKey || ""}
-				type="password"
-				onInput={handleInputChange("apiKey")}
+				onChange={handleInputChange("apiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.anthropicApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -6,6 +6,7 @@ import { type ProviderSettings, type ModelInfo, BEDROCK_REGIONS, BEDROCK_1M_CONT
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -77,14 +78,12 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 			{apiConfiguration?.awsUseApiKey ? (
-				<VSCodeTextField
+				<PasswordInputField
 					value={apiConfiguration?.awsApiKey || ""}
-					type="password"
-					onInput={handleInputChange("awsApiKey")}
+					onChange={handleInputChange("awsApiKey")}
 					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.awsApiKey")}</label>
-				</VSCodeTextField>
+					label={t("settings:providers.awsApiKey")}
+					className="w-full"></PasswordInputField>
 			) : apiConfiguration?.awsUseProfile ? (
 				<VSCodeTextField
 					value={apiConfiguration?.awsProfile || ""}
@@ -95,30 +94,24 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				</VSCodeTextField>
 			) : (
 				<>
-					<VSCodeTextField
+					<PasswordInputField
 						value={apiConfiguration?.awsAccessKey || ""}
-						type="password"
-						onInput={handleInputChange("awsAccessKey")}
+						onChange={handleInputChange("awsAccessKey")}
 						placeholder={t("settings:placeholders.accessKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsAccessKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsAccessKey")}
+						className="w-full"></PasswordInputField>
+					<PasswordInputField
 						value={apiConfiguration?.awsSecretKey || ""}
-						type="password"
-						onInput={handleInputChange("awsSecretKey")}
+						onChange={handleInputChange("awsSecretKey")}
 						placeholder={t("settings:placeholders.secretKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSecretKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsSecretKey")}
+						className="w-full"></PasswordInputField>
+					<PasswordInputField
 						value={apiConfiguration?.awsSessionToken || ""}
-						type="password"
-						onInput={handleInputChange("awsSessionToken")}
+						onChange={handleInputChange("awsSessionToken")}
 						placeholder={t("settings:placeholders.sessionToken")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSessionToken")}</label>
-					</VSCodeTextField>
+						label={t("settings:providers.awsSessionToken")}
+						className="w-full"></PasswordInputField>
 				</>
 			)}
 			<div>

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Cerebras = ({ apiConfiguration, setApiConfigurationField }: Cerebra
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.cerebrasApiKey || ""}
-				type="password"
-				onInput={handleInputChange("cerebrasApiKey")}
+				onChange={handleInputChange("cerebrasApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.cerebrasApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.cerebrasApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Chutes = ({ apiConfiguration, setApiConfigurationField }: ChutesPro
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.chutesApiKey || ""}
-				type="password"
-				onInput={handleInputChange("chutesApiKey")}
+				onChange={handleInputChange("chutesApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.chutesApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.chutesApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { OrganizationAllowList, type ProviderSettings, deepInfraDefaultModelId } from "@roo-code/types"
 
@@ -8,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -51,14 +51,12 @@ export const DeepInfra = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.deepInfraApiKey || ""}
-				type="password"
-				onInput={handleInputChange("deepInfraApiKey")}
+				onChange={handleInputChange("deepInfraApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.apiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.apiKey")}
+				className="w-full"></PasswordInputField>
 
 			<Button
 				variant="outline"

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const DeepSeek = ({ apiConfiguration, setApiConfigurationField }: DeepSee
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.deepSeekApiKey || ""}
-				type="password"
-				onInput={handleInputChange("deepSeekApiKey")}
+				onChange={handleInputChange("deepSeekApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.deepSeekApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.deepSeekApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Doubao = ({ apiConfiguration, setApiConfigurationField }: DoubaoPro
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.doubaoApiKey || ""}
-				type="password"
-				onInput={handleInputChange("doubaoApiKey")}
+				onChange={handleInputChange("doubaoApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.doubaoApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.doubaoApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Featherless = ({ apiConfiguration, setApiConfigurationField }: Feat
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.featherlessApiKey || ""}
-				type="password"
-				onInput={handleInputChange("featherlessApiKey")}
+				onChange={handleInputChange("featherlessApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.featherlessApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.featherlessApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -1,10 +1,10 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +29,12 @@ export const Fireworks = ({ apiConfiguration, setApiConfigurationField }: Firewo
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.fireworksApiKey || ""}
-				type="password"
-				onInput={handleInputChange("fireworksApiKey")}
+				onChange={handleInputChange("fireworksApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.fireworksApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.fireworksApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

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

@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 
@@ -35,14 +36,12 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.geminiApiKey || ""}
-				type="password"
-				onInput={handleInputChange("geminiApiKey")}
+				onChange={handleInputChange("geminiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.geminiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.geminiApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>

webview-ui/src/components/settings/providers/Glama.tsx

@@ -1,5 +1,4 @@
 import { useCallback } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { type ProviderSettings, type OrganizationAllowList, glamaDefaultModelId } from "@roo-code/types"
 
@@ -8,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getGlamaAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { PasswordInputField } from "@src/components/ui/password-input"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -44,14 +44,12 @@ export const Glama = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<PasswordInputField
 				value={apiConfiguration?.glamaApiKey || ""}
-				type="password"
-				onInput={handleInputChange("glamaApiKey")}
+				onChange={handleInputChange("glamaApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.glamaApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.glamaApiKey")}
+				className="w-full"></PasswordInputField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>