wrap inputs in real forms, so enter submits instead of doing nothing
24 panel and screen files had their fields sitting in a <div> instead of a <form> — typing a value and pressing Enter did nothing, and the button was the only way in. Fixed the sites that are a real form, a single field with an obvious action, or a multi-field editor; left search/filter boxes and a few genuinely ambiguous sites alone (see TODO.md for the full breakdown). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -1,3 +1,4 @@
|
||||
import type { FormEvent } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
@@ -84,7 +85,8 @@ export const SMTPSection = () => {
|
||||
...(provider === 'resend' ? { apiKey } : { host, port: parseInt(port) || 587, username, password, secure }),
|
||||
});
|
||||
|
||||
const handleSave = async () => {
|
||||
const handleSave = async (ev?: FormEvent) => {
|
||||
ev?.preventDefault();
|
||||
if (isSaving) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
@@ -118,7 +120,8 @@ export const SMTPSection = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
const handleTest = async (ev?: FormEvent) => {
|
||||
ev?.preventDefault();
|
||||
if (isTesting || !testEmail) return;
|
||||
setIsTesting(true);
|
||||
try {
|
||||
@@ -151,150 +154,147 @@ export const SMTPSection = () => {
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Provider</span>
|
||||
<Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
|
||||
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[600]">
|
||||
<SelectItem value="mailhog">MailHog (local testing)</SelectItem>
|
||||
<SelectItem value="resend">Resend</SelectItem>
|
||||
<SelectItem value="smtp">Custom SMTP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Label>
|
||||
|
||||
{provider === 'resend' && (
|
||||
<form onSubmit={handleSave} className="grid gap-4">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">API Key</span>
|
||||
<Input
|
||||
type="password"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="re_..."
|
||||
value={apiKey}
|
||||
onChange={(ev) => setApiKey(ev.target.value)}
|
||||
/>
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Provider</span>
|
||||
<Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
|
||||
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[600]">
|
||||
<SelectItem value="mailhog">MailHog (local testing)</SelectItem>
|
||||
<SelectItem value="resend">Resend</SelectItem>
|
||||
<SelectItem value="smtp">Custom SMTP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Label>
|
||||
)}
|
||||
|
||||
{showSmtpFields && (
|
||||
<>
|
||||
<div className="grid grid-cols-[1fr_auto] gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Host</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="smtp.example.com"
|
||||
value={host}
|
||||
onChange={(ev) => setHost(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Port</span>
|
||||
<Input
|
||||
type="number"
|
||||
className="h-11 w-24 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
|
||||
value={port}
|
||||
onChange={(ev) => setPort(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
{provider === 'smtp' && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Username</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="user@example.com"
|
||||
value={username}
|
||||
onChange={(ev) => setUsername(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Password</span>
|
||||
<Input
|
||||
type="password"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
|
||||
value={password}
|
||||
onChange={(ev) => setPassword(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
<Label className="flex items-center gap-3">
|
||||
<Switch checked={secure} onCheckedChange={setSecure} />
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">TLS / SSL</span>
|
||||
{provider === 'resend' && (
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">API Key</span>
|
||||
<Input
|
||||
type="password"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="re_..."
|
||||
value={apiKey}
|
||||
onChange={(ev) => setApiKey(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
)}
|
||||
|
||||
{showSmtpFields && (
|
||||
<>
|
||||
<div className="grid grid-cols-[1fr_auto] gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Host</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="smtp.example.com"
|
||||
value={host}
|
||||
onChange={(ev) => setHost(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Port</span>
|
||||
<Input
|
||||
type="number"
|
||||
className="h-11 w-24 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
|
||||
value={port}
|
||||
onChange={(ev) => setPort(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
{provider === 'smtp' && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Username</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
placeholder="user@example.com"
|
||||
value={username}
|
||||
onChange={(ev) => setUsername(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">Password</span>
|
||||
<Input
|
||||
type="password"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
|
||||
value={password}
|
||||
onChange={(ev) => setPassword(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
<Label className="flex items-center gap-3">
|
||||
<Switch checked={secure} onCheckedChange={setSecure} />
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">TLS / SSL</span>
|
||||
</Label>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">From Name</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
value={fromName}
|
||||
onChange={(ev) => setFromName(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">From Email</span>
|
||||
<Input
|
||||
type="email"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
value={fromEmail}
|
||||
onChange={(ev) => setFromEmail(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">From Name</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
value={fromName}
|
||||
onChange={(ev) => setFromName(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70">From Email</span>
|
||||
<Input
|
||||
type="email"
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
|
||||
value={fromEmail}
|
||||
onChange={(ev) => setFromEmail(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTestConnection}
|
||||
disabled={isTestingConnection}
|
||||
className="h-11 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{isTestingConnection ? 'Testing...' : 'Test'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTestConnection}
|
||||
disabled={isTestingConnection}
|
||||
className="h-11 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{isTestingConnection ? 'Testing...' : 'Test'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="border-t border-duck-dark/10 dark:border-foreground/10 pt-4 mt-1">
|
||||
<span className="text-sm font-medium text-duck-dark dark:text-foreground">Send Test Email</span>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<form onSubmit={handleTest} className="flex items-center gap-2 mt-2">
|
||||
<Input
|
||||
type="email"
|
||||
className="h-9 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40 flex-1"
|
||||
placeholder="recipient@example.com"
|
||||
value={testEmail}
|
||||
onChange={(ev) => setTestEmail(ev.target.value)}
|
||||
onKeyDown={(ev) => {
|
||||
if (ev.key === 'Enter') handleTest();
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
type="submit"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleTest}
|
||||
disabled={isTesting || !testEmail}
|
||||
className="h-9 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{isTesting ? 'Sending...' : 'Send'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user