pastilhas
44f5246e38
ServerSettings reaches zero: OCR, STT, TTS, SMTP, maintenance and the AI harnesses. Two more hand-rolled plurals became real plural entries -- maintenance said "commit" with a ternary on length === 1, and both read correctly at 0, 1 and 2 in both locales now. The three Cancel buttons in AIHarnessesSection take ui.button.cancel rather than adding a fourth app-level copy of the word, which is what phase 1 put it there for. Scanner: a single token carrying digits and punctuation is a name, not a sentence -- the OCR placeholder is the example model file Qwen2.5-VL-7B-Instruct-q4_k_m.gguf. Prose has spaces, and requiring whitespace to be absent is what keeps this from eating real one-word labels. Verified the delta is exactly that one string. Note for the owner: another session has src/servers/api/sub-agents/router.ts in flight with three type errors. Untouched by me and excluded from my gate; the full tree will not typecheck clean until they land it.
310 lines
12 KiB
TypeScript
310 lines
12 KiB
TypeScript
import type { FormEvent } from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { useAuth } from 'hooks/useAuth';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
|
|
type Provider = 'resend' | 'smtp' | 'mailhog';
|
|
|
|
type SmtpConfig = {
|
|
provider: Provider;
|
|
apiKey?: string;
|
|
host?: string;
|
|
port?: number;
|
|
username?: string;
|
|
password?: string;
|
|
secure?: boolean;
|
|
fromName: string;
|
|
fromEmail: string;
|
|
};
|
|
|
|
const PROVIDER_DEFAULTS: Record<Provider, Partial<SmtpConfig>> = {
|
|
mailhog: { host: 'localhost', port: 1025, secure: false, username: '', password: '' },
|
|
resend: { apiKey: '' },
|
|
smtp: { host: '', port: 587, secure: false, username: '', password: '' },
|
|
};
|
|
|
|
export const SMTPSection = () => {
|
|
const { t } = useTranslation();
|
|
const client = useClient();
|
|
const queryClient = useQueryClient();
|
|
const { user } = useAuth();
|
|
|
|
const { data: config, isLoading } = useQuery({
|
|
queryKey: ['SMTP_CONFIG'],
|
|
queryFn: () => client.get<SmtpConfig | null>('/server-settings/smtp'),
|
|
});
|
|
|
|
const [provider, setProvider] = useState<Provider>('mailhog');
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [host, setHost] = useState('localhost');
|
|
const [port, setPort] = useState('1025');
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [secure, setSecure] = useState(false);
|
|
const [fromName, setFromName] = useState('officerdev');
|
|
const [fromEmail, setFromEmail] = useState('no-reply@officer.dev');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isTestingConnection, setIsTestingConnection] = useState(false);
|
|
const [testEmail, setTestEmail] = useState(user?.email ?? '');
|
|
const [isTesting, setIsTesting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!config) return;
|
|
setProvider(config.provider);
|
|
setApiKey(config.apiKey ?? '');
|
|
setHost(config.host ?? '');
|
|
setPort(String(config.port ?? 587));
|
|
setUsername(config.username ?? '');
|
|
setPassword(config.password ?? '');
|
|
setSecure(config.secure ?? false);
|
|
setFromName(config.fromName || 'officerdev');
|
|
setFromEmail(config.fromEmail || 'no-reply@officer.dev');
|
|
}, [config]);
|
|
|
|
const handleProviderChange = (v: Provider) => {
|
|
setProvider(v);
|
|
const defaults = PROVIDER_DEFAULTS[v];
|
|
if (defaults.host !== undefined) setHost(defaults.host);
|
|
if (defaults.port !== undefined) setPort(String(defaults.port));
|
|
if (defaults.secure !== undefined) setSecure(defaults.secure);
|
|
if (defaults.username !== undefined) setUsername(defaults.username);
|
|
if (defaults.password !== undefined) setPassword(defaults.password);
|
|
if (defaults.apiKey !== undefined) setApiKey(defaults.apiKey);
|
|
};
|
|
|
|
const buildConfig = (): SmtpConfig => ({
|
|
provider,
|
|
fromName,
|
|
fromEmail,
|
|
...(provider === 'resend' ? { apiKey } : { host, port: parseInt(port) || 587, username, password, secure }),
|
|
});
|
|
|
|
const handleSave = async (ev?: FormEvent) => {
|
|
ev?.preventDefault();
|
|
if (isSaving) return;
|
|
setIsSaving(true);
|
|
try {
|
|
await client.put('/server-settings/smtp', buildConfig());
|
|
queryClient.invalidateQueries({ queryKey: ['SMTP_CONFIG'] });
|
|
toast.success(t('settings.server.smtp.saved'));
|
|
} catch {
|
|
toast.error(t('settings.server.smtp.saveFailed'));
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleTestConnection = async () => {
|
|
if (isTestingConnection) return;
|
|
setIsTestingConnection(true);
|
|
try {
|
|
await client.post('/server-settings/smtp/test-connection');
|
|
toast.success(t('settings.server.smtp.connected'));
|
|
} catch (err: unknown) {
|
|
const raw = (err as { message?: string })?.message;
|
|
let msg = 'Connection failed';
|
|
try {
|
|
if (raw) msg = JSON.parse(raw).error ?? msg;
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
toast.error(msg);
|
|
} finally {
|
|
setIsTestingConnection(false);
|
|
}
|
|
};
|
|
|
|
const handleTest = async (ev?: FormEvent) => {
|
|
ev?.preventDefault();
|
|
if (isTesting || !testEmail) return;
|
|
setIsTesting(true);
|
|
try {
|
|
const result = await client.post<{ success?: boolean; error?: string }>('/server-settings/smtp/test', {
|
|
...buildConfig(),
|
|
to: testEmail,
|
|
});
|
|
if (result.error) {
|
|
toast.error(result.error);
|
|
} else {
|
|
toast.success(t('settings.server.smtp.testSent', { email: testEmail }));
|
|
}
|
|
} catch (err: unknown) {
|
|
const raw = (err as { message?: string })?.message;
|
|
let msg = 'Failed to send test email';
|
|
try {
|
|
if (raw) msg = JSON.parse(raw).error ?? msg;
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
toast.error(msg);
|
|
} finally {
|
|
setIsTesting(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) return <p className="text-sm text-duck-dark/40">{t('settings.server.loading')}</p>;
|
|
|
|
const showSmtpFields = provider === 'smtp' || provider === 'mailhog';
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<form onSubmit={handleSave} className="grid gap-4">
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">{t('settings.server.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">{t('settings.server.smtp.mailhog')}</SelectItem>
|
|
<SelectItem value="resend">{t('settings.server.smtp.resend')}</SelectItem>
|
|
<SelectItem value="smtp">{t('settings.server.smtp.custom')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Label>
|
|
|
|
{provider === 'resend' && (
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">{t('settings.server.smtp.apiKey')}</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">{t('settings.server.smtp.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">{t('settings.server.smtp.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">
|
|
{t('settings.server.smtp.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={t('settings.server.smtp.userExample')}
|
|
value={username}
|
|
onChange={(ev) => setUsername(ev.target.value)}
|
|
/>
|
|
</Label>
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">
|
|
{t('settings.server.smtp.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">{t('settings.server.smtp.tls')}</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">{t('settings.server.smtp.fromName')}</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">{t('settings.server.smtp.fromEmail')}</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="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">
|
|
{t('settings.server.smtp.sendTest')}
|
|
</span>
|
|
<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={t('settings.server.smtp.recipientExample')}
|
|
value={testEmail}
|
|
onChange={(ev) => setTestEmail(ev.target.value)}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={isTesting || !testEmail}
|
|
className="h-9 cursor-pointer disabled:opacity-50"
|
|
>
|
|
{isTesting ? 'Sending...' : 'Send'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|