wrap the connection form in a <form> so enter submits
the url and api key fields sat in a div, so pressing enter did nothing and the save button was the only way in. same fix as gitea's connection screen: submit is now onSubmit with preventDefault, and disconnect is marked type="button" so it can't submit the form. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -52,7 +52,8 @@ export const SoulseekConnection = () => {
|
|||||||
setApiKey('');
|
setApiKey('');
|
||||||
}, [connection?.id]);
|
}, [connection?.id]);
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async (ev: React.FormEvent) => {
|
||||||
|
ev.preventDefault();
|
||||||
setError('');
|
setError('');
|
||||||
try {
|
try {
|
||||||
await save.mutateAsync({ url: url.trim(), apiKey: apiKey.trim() });
|
await save.mutateAsync({ url: url.trim(), apiKey: apiKey.trim() });
|
||||||
@@ -98,7 +99,7 @@ export const SoulseekConnection = () => {
|
|||||||
|
|
||||||
{connection && <StatusRow connection={connection} health={health} />}
|
{connection && <StatusRow connection={connection} health={health} />}
|
||||||
|
|
||||||
<div className="flex flex-col gap-4 rounded-xl border p-4">
|
<form onSubmit={submit} className="flex flex-col gap-4 rounded-xl border p-4">
|
||||||
<label className="flex flex-col gap-1.5">
|
<label className="flex flex-col gap-1.5">
|
||||||
<span className="text-xs font-medium">Server URL</span>
|
<span className="text-xs font-medium">Server URL</span>
|
||||||
<Input
|
<Input
|
||||||
@@ -134,21 +135,21 @@ export const SoulseekConnection = () => {
|
|||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
|
type="submit"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={submit}
|
|
||||||
disabled={!url.trim() || (!apiKey.trim() && !connection?.hasSecret) || save.isPending}
|
disabled={!url.trim() || (!apiKey.trim() && !connection?.hasSecret) || save.isPending}
|
||||||
>
|
>
|
||||||
{save.isPending && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
|
{save.isPending && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
|
||||||
{connection ? 'Save' : 'Connect'}
|
{connection ? 'Save' : 'Connect'}
|
||||||
</Button>
|
</Button>
|
||||||
{connection && (
|
{connection && (
|
||||||
<Button size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}>
|
<Button type="button" size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}>
|
||||||
<Trash2 className="mr-2 h-3.5 w-3.5" />
|
<Trash2 className="mr-2 h-3.5 w-3.5" />
|
||||||
Disconnect
|
Disconnect
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user