Refactor DynamicField component to simplify password input handling

- Remove the showPassword state and associated logic for toggling password visibility.
- Streamline the password input to always use type "password" and directly handle value changes.
- Update placeholder text for clarity while maintaining existing functionality for stored values.
This commit is contained in:
Xin Wang
2026-07-09 17:32:41 +08:00
parent 03b532dd09
commit 195579c5b7

View File

@@ -6,7 +6,6 @@ import {
ChevronUp,
Copy,
Eye,
EyeOff,
Loader2,
MoreHorizontal,
Pencil,
@@ -933,8 +932,6 @@ function DynamicField({
storedValueMask?: string;
onChange: (value: unknown) => void;
}) {
const [showPassword, setShowPassword] = useState(false);
if (field.type === "boolean") {
return (
<div className="flex items-center justify-between rounded-xl border border-hairline p-4">
@@ -984,31 +981,13 @@ function DynamicField({
</code>
</div>
)}
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
value={inputValue}
onChange={(event) => {
const nextValue = event.target.value;
if (!nextValue) setShowPassword(false);
onChange(nextValue);
}}
placeholder={
hasStoredValue ? "已配置,留空则保持不变" : undefined
}
autoComplete="new-password"
className="pr-10"
/>
<button
type="button"
disabled={!inputValue}
onClick={() => setShowPassword((current) => !current)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-soft transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
aria-label={showPassword ? "隐藏密钥" : "显示密钥"}
>
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
</button>
</div>
<Input
type="password"
value={inputValue}
onChange={(event) => onChange(event.target.value)}
placeholder={hasStoredValue ? "已配置,留空则保持不变" : undefined}
autoComplete="new-password"
/>
{hasStoredValue && (
<p className="text-xs leading-5 text-muted-foreground">