feat: add EmailConfigPage with SMTP form, registration toggle, and test email
This commit is contained in:
hsiegeln
296
ui/src/pages/vendor/EmailConfigPage.tsx
vendored
Normal file
296
ui/src/pages/vendor/EmailConfigPage.tsx
vendored
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { Send, Trash2, Save, Power } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
useEmailConnector,
|
||||||
|
useSaveEmailConnector,
|
||||||
|
useDeleteEmailConnector,
|
||||||
|
useTestEmailConnector,
|
||||||
|
useToggleRegistration,
|
||||||
|
} from '../../api/email-connector-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
export function EmailConfigPage() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { data: connector, isLoading, isError } = useEmailConnector();
|
||||||
|
const saveMutation = useSaveEmailConnector();
|
||||||
|
const deleteMutation = useDeleteEmailConnector();
|
||||||
|
const testMutation = useTestEmailConnector();
|
||||||
|
const toggleMutation = useToggleRegistration();
|
||||||
|
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [host, setHost] = useState('');
|
||||||
|
const [port, setPort] = useState('587');
|
||||||
|
const [username, setUsername] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [fromEmail, setFromEmail] = useState('');
|
||||||
|
const [testTo, setTestTo] = useState('');
|
||||||
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||||
|
|
||||||
|
const isConfigured = connector != null;
|
||||||
|
const showForm = !isConfigured || editing;
|
||||||
|
|
||||||
|
function startEditing() {
|
||||||
|
if (connector) {
|
||||||
|
setHost(connector.host);
|
||||||
|
setPort(String(connector.port));
|
||||||
|
setUsername(connector.username);
|
||||||
|
setPassword('');
|
||||||
|
setFromEmail(connector.fromEmail);
|
||||||
|
}
|
||||||
|
setEditing(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!host || !username || !password || !fromEmail) {
|
||||||
|
toast({ title: 'All fields are required', variant: 'error' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await saveMutation.mutateAsync({
|
||||||
|
host,
|
||||||
|
port: parseInt(port, 10) || 587,
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
fromEmail,
|
||||||
|
});
|
||||||
|
toast({ title: 'Email connector saved', variant: 'success' });
|
||||||
|
setEditing(false);
|
||||||
|
setPassword('');
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to save', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
try {
|
||||||
|
await deleteMutation.mutateAsync();
|
||||||
|
toast({ title: 'Email connector removed', variant: 'success' });
|
||||||
|
setConfirmDelete(false);
|
||||||
|
setEditing(false);
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to delete', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleTest() {
|
||||||
|
if (!testTo) {
|
||||||
|
toast({ title: 'Enter a recipient email address', variant: 'error' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const result = await testMutation.mutateAsync(testTo);
|
||||||
|
if (result.status === 'sent') {
|
||||||
|
toast({ title: 'Test email sent', description: result.message, variant: 'success' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Test failed', description: result.message, variant: 'error' });
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Test failed', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleToggleRegistration() {
|
||||||
|
if (!connector) return;
|
||||||
|
const newValue = !connector.registrationEnabled;
|
||||||
|
try {
|
||||||
|
await toggleMutation.mutateAsync(newValue);
|
||||||
|
toast({
|
||||||
|
title: newValue ? 'Registration enabled' : 'Registration disabled',
|
||||||
|
variant: 'success',
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to toggle registration', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load email configuration">
|
||||||
|
Could not fetch email connector data. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
<h1 className={styles.heading}>Email Connector</h1>
|
||||||
|
|
||||||
|
{!isConfigured && (
|
||||||
|
<Alert variant="info" title="Email delivery not configured">
|
||||||
|
Self-service registration is disabled. Configure an SMTP connector to enable email
|
||||||
|
verification for sign-up and password reset.
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: 16 }}>
|
||||||
|
{/* Current config card (when configured and not editing) */}
|
||||||
|
{isConfigured && !editing && (
|
||||||
|
<Card title="SMTP Configuration">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Host</span>
|
||||||
|
<span className={styles.kvValue}>{connector.host}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Port</span>
|
||||||
|
<span className={styles.kvValue}>{connector.port}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Username</span>
|
||||||
|
<span className={styles.kvValue}>{connector.username}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Password</span>
|
||||||
|
<span className={styles.kvValueMono}>{'*'.repeat(8)}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>From Email</span>
|
||||||
|
<span className={styles.kvValue}>{connector.fromEmail}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ paddingTop: 8, display: 'flex', gap: 8 }}>
|
||||||
|
<Button variant="secondary" onClick={startEditing}>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
{!confirmDelete ? (
|
||||||
|
<Button variant="secondary" onClick={() => setConfirmDelete(true)}>
|
||||||
|
<Trash2 size={14} style={{ marginRight: 6 }} />
|
||||||
|
Remove
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button variant="primary" onClick={handleDelete} loading={deleteMutation.isPending}
|
||||||
|
style={{ background: 'var(--error)' }}>
|
||||||
|
Confirm removal
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={() => setConfirmDelete(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* SMTP form (when unconfigured or editing) */}
|
||||||
|
{showForm && (
|
||||||
|
<Card title={isConfigured ? 'Edit SMTP Configuration' : 'SMTP Configuration'}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
|
<FormField label="SMTP Host *">
|
||||||
|
<Input
|
||||||
|
placeholder="smtp.example.com"
|
||||||
|
value={host}
|
||||||
|
onChange={(e) => setHost(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="SMTP Port *">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="587"
|
||||||
|
value={port}
|
||||||
|
onChange={(e) => setPort(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Username *">
|
||||||
|
<Input
|
||||||
|
placeholder="user@example.com"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Password *">
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder={isConfigured ? 'Enter new password' : 'Password'}
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="From Email *">
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="noreply@example.com"
|
||||||
|
value={fromEmail}
|
||||||
|
onChange={(e) => setFromEmail(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button variant="primary" onClick={handleSave} loading={saveMutation.isPending}>
|
||||||
|
<Save size={14} style={{ marginRight: 6 }} />
|
||||||
|
{isConfigured ? 'Update' : 'Save'}
|
||||||
|
</Button>
|
||||||
|
{editing && (
|
||||||
|
<Button variant="secondary" onClick={() => setEditing(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Registration toggle (when configured) */}
|
||||||
|
{isConfigured && !editing && (
|
||||||
|
<Card title="Self-Service Registration">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<p className={styles.description}>
|
||||||
|
{connector.registrationEnabled
|
||||||
|
? 'New users can register with their email address and verify via a code sent to their inbox.'
|
||||||
|
: 'Registration is disabled. Only admin-invited users can sign in.'}
|
||||||
|
</p>
|
||||||
|
<div style={{ paddingTop: 8 }}>
|
||||||
|
<Button
|
||||||
|
variant={connector.registrationEnabled ? 'secondary' : 'primary'}
|
||||||
|
onClick={handleToggleRegistration}
|
||||||
|
loading={toggleMutation.isPending}
|
||||||
|
>
|
||||||
|
<Power size={14} style={{ marginRight: 6 }} />
|
||||||
|
{connector.registrationEnabled ? 'Disable Registration' : 'Enable Registration'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Test email (when configured and not editing) */}
|
||||||
|
{isConfigured && !editing && (
|
||||||
|
<Card title="Send Test Email">
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
|
<FormField label="Recipient">
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="you@example.com"
|
||||||
|
value={testTo}
|
||||||
|
onChange={(e) => setTestTo(e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<Button variant="primary" onClick={handleTest} loading={testMutation.isPending}>
|
||||||
|
<Send size={14} style={{ marginRight: 6 }} />
|
||||||
|
Send Test Email
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user