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:
@@ -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">
|
||||
仅显示当前密钥首尾用于识别。留空可保持原密钥,输入新值将覆盖原密钥。
|
||||
|
||||
Reference in New Issue
Block a user