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:
2026-08-19 10:41:58 +00:00
co-authored by Claude Opus 5
parent 7f2df667b7
commit a9b83228be
+6 -5
View File
@@ -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>
); );