fix(ui): address review feedback for API key toggle PR

- Remove applyRawApiKey helper; populate apiKey directly in buildInitialForm
- Revert useState hooks to single-line form
- Replace duplicated .passwordInput styles with @extend .input
This commit is contained in:
gwdgithubnom
2026-05-27 23:31:08 +08:00
parent 3ef3c684b3
commit 7389de5902
2 changed files with 10 additions and 49 deletions
@@ -67,19 +67,6 @@ const headersObjectToText = (headers?: Record<string, string>): string =>
const stripDisableAllRule = (list?: string[]): string[] =>
(list ?? []).filter((s) => s.trim() !== '*');
/** Populate apiKey from resource.raw when editing a non-OpenAI provider. */
const applyRawApiKey = (
brand: Exclude<ProviderBrand, 'ampcode'>,
resource: ProviderResource | null,
mode: 'create' | 'edit',
form: ProviderEntryFormInput
): void => {
if (mode === 'edit' && resource && brand !== 'openaiCompatibility') {
const rawKey = (resource.raw as { apiKey?: string } | undefined)?.apiKey ?? '';
if (rawKey) form.apiKey = rawKey;
}
};
function buildInitialForm(
brand: Exclude<ProviderBrand, 'ampcode'>,
resource: ProviderResource | null,
@@ -148,7 +135,8 @@ function buildInitialForm(
const disabled = hasDisableAllModelsRule(cfg.excludedModels);
const excludedList = stripDisableAllRule(cfg.excludedModels);
return {
apiKey: '',
// Populate apiKey from resource.raw in edit mode so the field is not empty
apiKey: cfg.apiKey ?? '',
name: '',
baseUrl: cfg.baseUrl ?? '',
proxyUrl: cfg.proxyUrl ?? '',
@@ -219,16 +207,12 @@ export function BaseProviderForm({
const { t } = useTranslation();
const descriptor = PROVIDER_DESCRIPTORS[brand];
const fid = useId();
const [form, setForm] = useState<ProviderEntryFormInput>(() => {
const initial = buildInitialForm(brand, resource, mode);
applyRawApiKey(brand, resource, mode, initial);
return initial;
});
const [initialFormSignature] = useState<string>(() => {
const initial = buildInitialForm(brand, resource, mode);
applyRawApiKey(brand, resource, mode, initial);
return JSON.stringify(initial);
});
const [form, setForm] = useState<ProviderEntryFormInput>(() =>
buildInitialForm(brand, resource, mode)
);
const [initialFormSignature] = useState<string>(() =>
JSON.stringify(buildInitialForm(brand, resource, mode))
);
const [error, setError] = useState<string | null>(null);
const [showPasswords, setShowPasswords] = useState<Set<number>>(new Set());
const [showSingleApiKey, setShowSingleApiKey] = useState(false);
@@ -497,31 +497,8 @@
}
.passwordInput {
width: 100%;
height: 36px;
padding: 8px 36px 8px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
box-sizing: border-box;
&::placeholder {
color: var(--text-tertiary);
}
&:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-10);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@extend .input;
padding-right: 36px;
}
.passwordToggle {