✨ feat(auth): Add SMS and email configuration options to global store and update localization
This commit is contained in:
web@ppanel
@@ -3,25 +3,28 @@
|
||||
import { getEmailSmtpConfig, testEmailSmtp, updateEmailSmtpConfig } from '@/services/admin/system';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@workspace/ui/components/card';
|
||||
import { Label } from '@workspace/ui/components/label';
|
||||
import { Switch } from '@workspace/ui/components/switch';
|
||||
import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { HTMLEditor } from '@workspace/ui/custom-components/editor';
|
||||
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useRef, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface ConfigProps {
|
||||
data?: Record<string, any> & API.EmailSmtpConfig;
|
||||
updateConfig: (key: string, value: unknown) => Promise<void>;
|
||||
isFetching?: boolean;
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
const t = useTranslations('email');
|
||||
const ref = useRef<Partial<API.EmailSmtpConfig>>({});
|
||||
const [email, setEmail] = useState<string>();
|
||||
|
||||
const { data, refetch, isFetching } = useQuery({
|
||||
queryKey: ['getEmailSmtpConfig'],
|
||||
@@ -42,10 +45,9 @@ export default function Page() {
|
||||
toast.success(t('saveSuccess'));
|
||||
refetch();
|
||||
} catch (error) {
|
||||
/* empty */
|
||||
toast.error(t('saveFailed'));
|
||||
}
|
||||
}
|
||||
const [email, setEmail] = useState<string>();
|
||||
|
||||
return (
|
||||
<Tabs defaultValue='basic'>
|
||||
@@ -54,126 +56,154 @@ export default function Page() {
|
||||
<TabsTrigger value='template'>{t('emailTemplate')}</TabsTrigger>
|
||||
<TabsTrigger value='logs'>{t('emailLogs')}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className='flex-1'>
|
||||
<TabsContent value='basic'>
|
||||
<Table>
|
||||
<TableBody>
|
||||
{[
|
||||
{
|
||||
key: 'email_smtp_host',
|
||||
label: t('smtpServerAddress'),
|
||||
description: t('smtpServerAddressDescription'),
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_port',
|
||||
label: t('smtpServerPort'),
|
||||
description: t('smtpServerPortDescription'),
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_ssl',
|
||||
label: t('smtpEncryptionMethod'),
|
||||
description: t('smtpEncryptionMethodDescription'),
|
||||
component: 'switch',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_user',
|
||||
label: t('smtpAccount'),
|
||||
description: t('smtpAccountDescription'),
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_pass',
|
||||
label: t('smtpPassword'),
|
||||
description: t('smtpPasswordDescription'),
|
||||
type: 'password',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_from',
|
||||
label: t('senderAddress'),
|
||||
description: t('senderAddressDescription'),
|
||||
},
|
||||
].map(({ key, label, description, type = 'text', component = 'input' }) => (
|
||||
<TableRow key={key}>
|
||||
<TableCell>
|
||||
<Label>{label}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{description}</p>
|
||||
</TableCell>
|
||||
<TableCell className='text-right'>
|
||||
{component === 'input' ? (
|
||||
<EnhancedInput
|
||||
placeholder={t('inputPlaceholder')}
|
||||
value={data?.[key]}
|
||||
type={type}
|
||||
onValueBlur={(value) => updateConfig(key, value)}
|
||||
/>
|
||||
) : (
|
||||
<Switch
|
||||
checked={data?.[key]}
|
||||
onCheckedChange={(checked) => updateConfig(key, checked)}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Label>{t('sendTestEmail')}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{t('sendTestEmailDescription')}</p>
|
||||
<TabsContent value='basic'>
|
||||
<Table>
|
||||
<TableBody>
|
||||
{[
|
||||
{
|
||||
key: 'email_enabled',
|
||||
label: t('enable'),
|
||||
description: t('enableDescription'),
|
||||
component: 'switch',
|
||||
},
|
||||
{
|
||||
key: 'enable_email_verify',
|
||||
label: t('emailVerification'),
|
||||
description: t('emailVerificationDescription'),
|
||||
component: 'switch',
|
||||
},
|
||||
{
|
||||
key: 'enable_email_domain_suffix',
|
||||
label: t('emailSuffixWhitelist'),
|
||||
description: t('emailSuffixWhitelistDescription'),
|
||||
component: 'switch',
|
||||
},
|
||||
{
|
||||
key: 'email_domain_suffix_list',
|
||||
label: t('whitelistSuffixes'),
|
||||
description: t('whitelistSuffixesDescription'),
|
||||
component: 'textarea',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_host',
|
||||
label: t('smtpServerAddress'),
|
||||
description: t('smtpServerAddressDescription'),
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_port',
|
||||
label: t('smtpServerPort'),
|
||||
description: t('smtpServerPortDescription'),
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_ssl',
|
||||
label: t('smtpEncryptionMethod'),
|
||||
description: t('smtpEncryptionMethodDescription'),
|
||||
component: 'switch',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_user',
|
||||
label: t('smtpAccount'),
|
||||
description: t('smtpAccountDescription'),
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_pass',
|
||||
label: t('smtpPassword'),
|
||||
description: t('smtpPasswordDescription'),
|
||||
type: 'password',
|
||||
},
|
||||
{
|
||||
key: 'email_smtp_from',
|
||||
label: t('senderAddress'),
|
||||
description: t('senderAddressDescription'),
|
||||
},
|
||||
].map(({ key, label, description, type = 'text', component = 'input' }) => (
|
||||
<TableRow key={key}>
|
||||
<TableCell className={component === 'textarea' ? 'align-top' : undefined}>
|
||||
<Label>{label}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{description}</p>
|
||||
</TableCell>
|
||||
<TableCell className='flex items-center gap-2 text-right'>
|
||||
<EnhancedInput
|
||||
placeholder={t('inputPlaceholder')}
|
||||
value={email}
|
||||
onValueChange={(value) => setEmail(value as string)}
|
||||
/>
|
||||
<Button
|
||||
disabled={!email}
|
||||
onClick={async () => {
|
||||
if (isFetching || !email) return;
|
||||
try {
|
||||
await testEmailSmtp({ email });
|
||||
toast.success(t('sendSuccess'));
|
||||
} catch {
|
||||
toast.error(t('sendFailure'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('sendTestEmail')}
|
||||
</Button>
|
||||
<TableCell className='text-right'>
|
||||
{component === 'input' ? (
|
||||
<EnhancedInput
|
||||
placeholder={t('inputPlaceholder')}
|
||||
value={data?.[key]}
|
||||
type={type}
|
||||
onValueBlur={(value) => updateConfig(key, value)}
|
||||
/>
|
||||
) : component === 'switch' ? (
|
||||
<Switch
|
||||
checked={data?.[key]}
|
||||
onCheckedChange={(checked) => updateConfig(key, checked)}
|
||||
/>
|
||||
) : (
|
||||
<Textarea
|
||||
className='h-32'
|
||||
placeholder={t('whitelistSuffixesPlaceholder')}
|
||||
defaultValue={data?.[key]}
|
||||
onBlur={(e) => updateConfig(key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='template'>
|
||||
<div className='grid grid-cols-1 gap-4 py-4 md:grid-cols-3'>
|
||||
{[
|
||||
'verify_email_template',
|
||||
'expiration_email_template',
|
||||
'maintenance_email_template',
|
||||
].map((templateKey) => (
|
||||
<HTMLEditor
|
||||
key={templateKey}
|
||||
title={t(`${templateKey}`)}
|
||||
description={t(`${templateKey}Description`, { after: '{{', before: '}}' })}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
value={data?.[templateKey as keyof API.EmailSmtpConfig] as string}
|
||||
onBlur={(value) => {
|
||||
updateConfig(templateKey, value);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Label>{t('sendTestEmail')}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{t('sendTestEmailDescription')}</p>
|
||||
</TableCell>
|
||||
<TableCell className='flex items-center gap-2 text-right'>
|
||||
<EnhancedInput
|
||||
placeholder='test@example.com'
|
||||
value={email}
|
||||
type='email'
|
||||
onValueChange={(value) => setEmail(value as string)}
|
||||
/>
|
||||
<Button
|
||||
disabled={!email || isFetching}
|
||||
onClick={async () => {
|
||||
if (!email) return;
|
||||
try {
|
||||
await testEmailSmtp({ email });
|
||||
toast.success(t('sendSuccess'));
|
||||
} catch {
|
||||
toast.error(t('sendFailure'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('sendTestEmail')}
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='logs'>
|
||||
<div>
|
||||
<p>TODO: placeholder for email logs</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</div>
|
||||
<TabsContent value='template'>
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
|
||||
{['verify_email_template', 'expiration_email_template', 'maintenance_email_template'].map(
|
||||
(templateKey) => (
|
||||
<Card key={templateKey}>
|
||||
<CardHeader>
|
||||
<CardTitle>{t(`${templateKey}`)}</CardTitle>
|
||||
<CardDescription>
|
||||
{t(`${templateKey}Description`, { after: '{{', before: '}}' })}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<HTMLEditor
|
||||
placeholder={t('inputPlaceholder')}
|
||||
value={data?.[templateKey as keyof API.EmailSmtpConfig] as string}
|
||||
onBlur={(value) => updateConfig(templateKey, value)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='logs'>Logs</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import { useQuery } from '@tanstack/react-query';
|
||||
import { Label } from '@workspace/ui/components/label';
|
||||
import { Switch } from '@workspace/ui/components/switch';
|
||||
import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { toast } from 'sonner';
|
||||
@@ -55,50 +54,6 @@ export default function Page() {
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Label>{t('emailVerification')}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{t('emailVerificationDescription')}</p>
|
||||
</TableCell>
|
||||
<TableCell className='text-right'>
|
||||
<Switch
|
||||
checked={data?.enable_email_verify}
|
||||
onCheckedChange={(checked) => {
|
||||
updateConfig('enable_email_verify', checked);
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Label>{t('emailSuffixWhitelist')}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{t('emailSuffixWhitelistDescription')}</p>
|
||||
</TableCell>
|
||||
<TableCell className='text-right'>
|
||||
<Switch
|
||||
checked={data?.enable_email_domain_suffix}
|
||||
onCheckedChange={(checked) => {
|
||||
updateConfig('enable_email_domain_suffix', checked);
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className='align-top'>
|
||||
<Label>{t('whitelistSuffixes')}</Label>
|
||||
<p className='text-muted-foreground text-xs'>{t('whitelistSuffixesDescription')}</p>
|
||||
</TableCell>
|
||||
<TableCell className='text-right'>
|
||||
<Textarea
|
||||
className='h-52'
|
||||
placeholder={t('whitelistSuffixesPlaceholder')}
|
||||
defaultValue={data?.email_domain_suffix_list}
|
||||
onBlur={(e) => {
|
||||
updateConfig('email_domain_suffix_list', e.target.value);
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Label>{t('ipRegistrationLimit')}</Label>
|
||||
|
||||
Reference in New Issue
Block a user