chore: clean git cache
This commit is contained in:
GitHub Actions
296
frontend/src/pages/SMTPSettings.tsx
Normal file
296
frontend/src/pages/SMTPSettings.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../components/ui/Card'
|
||||
import { Button } from '../components/ui/Button'
|
||||
import { Input } from '../components/ui/Input'
|
||||
import { Label } from '../components/ui/Label'
|
||||
import { Alert } from '../components/ui/Alert'
|
||||
import { Badge } from '../components/ui/Badge'
|
||||
import { Skeleton } from '../components/ui/Skeleton'
|
||||
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../components/ui/Select'
|
||||
import { toast } from '../utils/toast'
|
||||
import { getSMTPConfig, updateSMTPConfig, testSMTPConnection, sendTestEmail } from '../api/smtp'
|
||||
import type { SMTPConfigRequest } from '../api/smtp'
|
||||
import { Mail, Send, CheckCircle2, XCircle } from 'lucide-react'
|
||||
|
||||
export default function SMTPSettings() {
|
||||
const { t } = useTranslation()
|
||||
const queryClient = useQueryClient()
|
||||
const [host, setHost] = useState('')
|
||||
const [port, setPort] = useState(587)
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [fromAddress, setFromAddress] = useState('')
|
||||
const [encryption, setEncryption] = useState<'none' | 'ssl' | 'starttls'>('starttls')
|
||||
const [testEmail, setTestEmail] = useState('')
|
||||
|
||||
const { data: smtpConfig, isLoading } = useQuery({
|
||||
queryKey: ['smtp-config'],
|
||||
queryFn: getSMTPConfig,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (smtpConfig) {
|
||||
setHost(smtpConfig.host || '')
|
||||
setPort(smtpConfig.port || 587)
|
||||
setUsername(smtpConfig.username || '')
|
||||
setPassword(smtpConfig.password || '')
|
||||
setFromAddress(smtpConfig.from_address || '')
|
||||
setEncryption(smtpConfig.encryption || 'starttls')
|
||||
}
|
||||
}, [smtpConfig])
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const config: SMTPConfigRequest = {
|
||||
host,
|
||||
port,
|
||||
username,
|
||||
password,
|
||||
from_address: fromAddress,
|
||||
encryption,
|
||||
}
|
||||
return updateSMTPConfig(config)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['smtp-config'] })
|
||||
toast.success(t('smtp.settingsSaved'))
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
const err = error as { response?: { data?: { error?: string } } }
|
||||
toast.error(err.response?.data?.error || t('smtp.saveFailed'))
|
||||
},
|
||||
})
|
||||
|
||||
const testConnectionMutation = useMutation({
|
||||
mutationFn: testSMTPConnection,
|
||||
onSuccess: (data) => {
|
||||
if (data.success) {
|
||||
toast.success(data.message || t('smtp.connectionSuccess'))
|
||||
} else {
|
||||
toast.error(data.error || t('smtp.connectionFailed'))
|
||||
}
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
const err = error as { response?: { data?: { error?: string } } }
|
||||
toast.error(err.response?.data?.error || t('smtp.testFailed'))
|
||||
},
|
||||
})
|
||||
|
||||
const sendTestEmailMutation = useMutation({
|
||||
mutationFn: async () => sendTestEmail({ to: testEmail }),
|
||||
onSuccess: (data) => {
|
||||
if (data.success) {
|
||||
toast.success(data.message || t('smtp.testEmailSent'))
|
||||
setTestEmail('')
|
||||
} else {
|
||||
toast.error(data.error || t('smtp.testEmailFailed'))
|
||||
}
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
const err = error as { response?: { data?: { error?: string } } }
|
||||
toast.error(err.response?.data?.error || t('smtp.testEmailFailed'))
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-7 w-48" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-80" />
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-brand-500/10 rounded-lg">
|
||||
<Mail className="h-6 w-6 text-brand-500" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-content-primary">{t('smtp.title')}</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-content-secondary">
|
||||
{t('smtp.description')}
|
||||
</p>
|
||||
|
||||
{/* SMTP Configuration Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('smtp.configuration')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('smtp.configDescription')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-host" required>{t('smtp.host')}</Label>
|
||||
<Input
|
||||
id="smtp-host"
|
||||
type="text"
|
||||
value={host}
|
||||
onChange={(e) => setHost(e.target.value)}
|
||||
placeholder="smtp.gmail.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-port" required>{t('smtp.port')}</Label>
|
||||
<Input
|
||||
id="smtp-port"
|
||||
type="number"
|
||||
value={port}
|
||||
onChange={(e) => setPort(parseInt(e.target.value) || 587)}
|
||||
placeholder="587"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-username">{t('smtp.username')}</Label>
|
||||
<Input
|
||||
id="smtp-username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-password">{t('smtp.password')}</Label>
|
||||
<Input
|
||||
id="smtp-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
helperText={t('smtp.passwordHelper')}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-from" required>{t('smtp.fromAddress')}</Label>
|
||||
<Input
|
||||
id="smtp-from"
|
||||
type="email"
|
||||
value={fromAddress}
|
||||
onChange={(e) => setFromAddress(e.target.value)}
|
||||
placeholder="Charon <no-reply@example.com>"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtp-encryption">{t('smtp.encryption')}</Label>
|
||||
<Select value={encryption} onValueChange={(value) => setEncryption(value as 'none' | 'ssl' | 'starttls')}>
|
||||
<SelectTrigger id="smtp-encryption">
|
||||
<SelectValue placeholder={t('smtp.selectEncryption')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="starttls">{t('smtp.starttls')}</SelectItem>
|
||||
<SelectItem value="ssl">{t('smtp.sslTls')}</SelectItem>
|
||||
<SelectItem value="none">{t('smtp.none')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="justify-end gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => testConnectionMutation.mutate()}
|
||||
isLoading={testConnectionMutation.isPending}
|
||||
disabled={!host || !fromAddress}
|
||||
>
|
||||
{t('smtp.testConnection')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => saveMutation.mutate()}
|
||||
isLoading={saveMutation.isPending}
|
||||
>
|
||||
{t('smtp.saveSettings')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Status Indicator */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{smtpConfig?.configured ? (
|
||||
<>
|
||||
<CheckCircle2 className="h-5 w-5 text-success" />
|
||||
<span className="font-medium text-content-primary">{t('smtp.configured')}</span>
|
||||
<Badge variant="success" size="sm">{t('smtp.active')}</Badge>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<XCircle className="h-5 w-5 text-warning" />
|
||||
<span className="font-medium text-content-primary">{t('smtp.notConfigured')}</span>
|
||||
<Badge variant="warning" size="sm">{t('smtp.inactive')}</Badge>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Test Email */}
|
||||
{smtpConfig?.configured && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('smtp.sendTestEmail')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('smtp.testEmailDescription')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="email"
|
||||
value={testEmail}
|
||||
onChange={(e) => setTestEmail(e.target.value)}
|
||||
placeholder="recipient@example.com"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => sendTestEmailMutation.mutate()}
|
||||
isLoading={sendTestEmailMutation.isPending}
|
||||
disabled={!testEmail}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
{t('smtp.sendTest')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Help Alert */}
|
||||
<Alert variant="info" title={t('smtp.needHelp')}>
|
||||
{t('smtp.helpText')}
|
||||
</Alert>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user