540 lines
24 KiB
TypeScript
540 lines
24 KiB
TypeScript
import {useEffect, useState} from 'react';
|
|
import {useForm} from 'react-hook-form';
|
|
import {zodResolver} from '@hookform/resolvers/zod';
|
|
import {DomainSchemas} from '@plunk/shared';
|
|
import {
|
|
Alert,
|
|
AlertDescription,
|
|
Badge,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
ConfirmDialog,
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
Input,
|
|
} from '@plunk/ui';
|
|
import {AnimatePresence, motion} from 'framer-motion';
|
|
import {Check, CheckCircle2, Copy, Loader2, RefreshCw, Trash2, XCircle} from 'lucide-react';
|
|
import {useAddDomain, useCheckDomainVerification, useDomains, useRemoveDomain} from '../lib/hooks/useDomains';
|
|
|
|
interface DomainsSettingsProps {
|
|
projectId: string;
|
|
}
|
|
|
|
export function DomainsSettings({projectId}: DomainsSettingsProps) {
|
|
const {domains, mutate: mutateDomains, isLoading} = useDomains(projectId);
|
|
const {addDomain} = useAddDomain();
|
|
const {checkVerification} = useCheckDomainVerification();
|
|
const {removeDomain} = useRemoveDomain();
|
|
|
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
const [selectedDomain, setSelectedDomain] = useState<string | null>(null);
|
|
const [verificationStatus, setVerificationStatus] = useState<{
|
|
[key: string]: boolean | string | {tokens: string[] | null; status: string; verified: boolean};
|
|
}>({});
|
|
const [checkingVerification, setCheckingVerification] = useState<string | null>(null);
|
|
const [copiedToken, setCopiedToken] = useState<string | null>(null);
|
|
const [lastVerificationCheck, setLastVerificationCheck] = useState<{[key: string]: number}>({});
|
|
const [cooldownSeconds, setCooldownSeconds] = useState<{[key: string]: number}>({});
|
|
const [showRemoveDialog, setShowRemoveDialog] = useState(false);
|
|
const [domainToRemove, setDomainToRemove] = useState<{id: string; name: string} | null>(null);
|
|
|
|
const form = useForm<{domain: string}>({
|
|
resolver: zodResolver(DomainSchemas.create.omit({projectId: true})),
|
|
defaultValues: {
|
|
domain: '',
|
|
},
|
|
});
|
|
|
|
// Handle cooldown timer
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const now = Date.now();
|
|
const newCooldowns: {[key: string]: number} = {};
|
|
let hasActiveCooldowns = false;
|
|
|
|
Object.keys(lastVerificationCheck).forEach(domainId => {
|
|
const lastCheck = lastVerificationCheck[domainId];
|
|
if (lastCheck === undefined) return;
|
|
|
|
const elapsedSeconds = Math.floor((now - lastCheck) / 1000);
|
|
const remainingSeconds = 10 - elapsedSeconds;
|
|
|
|
if (remainingSeconds > 0) {
|
|
newCooldowns[domainId] = remainingSeconds;
|
|
hasActiveCooldowns = true;
|
|
}
|
|
});
|
|
|
|
setCooldownSeconds(newCooldowns);
|
|
|
|
// Clear interval if no active cooldowns
|
|
if (!hasActiveCooldowns && Object.keys(newCooldowns).length === 0) {
|
|
clearInterval(interval);
|
|
}
|
|
}, 100); // Update every 100ms for smooth countdown
|
|
|
|
return () => clearInterval(interval);
|
|
}, [lastVerificationCheck]);
|
|
|
|
const showMessage = (type: 'success' | 'error', message: string) => {
|
|
if (type === 'success') {
|
|
setSuccessMessage(message);
|
|
setErrorMessage(null);
|
|
setTimeout(() => setSuccessMessage(null), 5000);
|
|
} else {
|
|
setErrorMessage(message);
|
|
setSuccessMessage(null);
|
|
}
|
|
};
|
|
|
|
const onSubmit = async (values: {domain: string}) => {
|
|
try {
|
|
setErrorMessage(null);
|
|
const newDomain = await addDomain(projectId, values.domain);
|
|
|
|
// Store DKIM tokens for display
|
|
if (newDomain.dkimTokens) {
|
|
setVerificationStatus(prev => ({
|
|
...prev,
|
|
[newDomain.id]: {
|
|
tokens: newDomain.dkimTokens,
|
|
status: 'Pending',
|
|
verified: false,
|
|
},
|
|
}));
|
|
setSelectedDomain(newDomain.id);
|
|
}
|
|
|
|
await mutateDomains();
|
|
form.reset();
|
|
showMessage('success', `Domain ${values.domain} added successfully. Please configure DNS records.`);
|
|
} catch (error) {
|
|
showMessage('error', error instanceof Error ? error.message : 'Failed to add domain');
|
|
}
|
|
};
|
|
|
|
const handleCheckVerification = async (domainId: string) => {
|
|
// Check if cooldown is active
|
|
const now = Date.now();
|
|
const lastCheck = lastVerificationCheck[domainId];
|
|
if (lastCheck) {
|
|
const elapsedSeconds = Math.floor((now - lastCheck) / 1000);
|
|
if (elapsedSeconds < 10) {
|
|
return; // Still in cooldown, do nothing
|
|
}
|
|
}
|
|
|
|
try {
|
|
setCheckingVerification(domainId);
|
|
setLastVerificationCheck(prev => ({
|
|
...prev,
|
|
[domainId]: now,
|
|
}));
|
|
|
|
const status = await checkVerification(domainId);
|
|
|
|
setVerificationStatus(prev => ({
|
|
...prev,
|
|
[domainId]: status,
|
|
}));
|
|
|
|
await mutateDomains();
|
|
|
|
if (status.verified) {
|
|
showMessage('success', `Domain ${status.domain} is verified!`);
|
|
} else {
|
|
showMessage('error', `Domain ${status.domain} is not yet verified. Please check your DNS records.`);
|
|
}
|
|
} catch (error) {
|
|
showMessage('error', error instanceof Error ? error.message : 'Failed to check verification');
|
|
} finally {
|
|
setCheckingVerification(null);
|
|
}
|
|
};
|
|
|
|
const handleRemoveDomain = async () => {
|
|
if (!domainToRemove) return;
|
|
|
|
try {
|
|
await removeDomain(domainToRemove.id);
|
|
await mutateDomains();
|
|
if (selectedDomain === domainToRemove.id) {
|
|
setSelectedDomain(null);
|
|
}
|
|
showMessage('success', `Domain ${domainToRemove.name} removed successfully`);
|
|
} catch (error) {
|
|
showMessage('error', error instanceof Error ? error.message : 'Failed to remove domain');
|
|
} finally {
|
|
setDomainToRemove(null);
|
|
}
|
|
};
|
|
|
|
const handleCopyToken = async (token: string, index: number) => {
|
|
await navigator.clipboard.writeText(token);
|
|
setCopiedToken(`${token}-${index}`);
|
|
setTimeout(() => setCopiedToken(null), 2000);
|
|
};
|
|
|
|
const getDomainStatus = (domain: {
|
|
id: string;
|
|
verified: boolean;
|
|
dkimTokens: unknown;
|
|
}): {verified: boolean; tokens: unknown; status: string} => {
|
|
const status = verificationStatus[domain.id];
|
|
if (status && typeof status === 'object' && 'verified' in status) {
|
|
return status;
|
|
}
|
|
return {verified: domain.verified, tokens: domain.dkimTokens, status: domain.verified ? 'Success' : 'Pending'};
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Add Domain Form */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Add Domain</CardTitle>
|
|
<CardDescription>Add a custom domain to send emails from</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="domain"
|
|
render={({field}) => (
|
|
<FormItem>
|
|
<FormLabel>Domain</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="example.com" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Success/Error Messages */}
|
|
<AnimatePresence mode="wait">
|
|
{successMessage && (
|
|
<motion.div
|
|
initial={{opacity: 0, y: -10}}
|
|
animate={{opacity: 1, y: 0}}
|
|
exit={{opacity: 0}}
|
|
className="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-800"
|
|
>
|
|
{successMessage}
|
|
</motion.div>
|
|
)}
|
|
{errorMessage && (
|
|
<motion.div
|
|
initial={{opacity: 0, y: -10}}
|
|
animate={{opacity: 1, y: 0}}
|
|
exit={{opacity: 0}}
|
|
className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800"
|
|
>
|
|
{errorMessage}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={form.formState.isSubmitting}>
|
|
{form.formState.isSubmitting ? 'Adding...' : 'Add Domain'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Domains List */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Your Domains</CardTitle>
|
|
<CardDescription>Manage your verified domains</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
|
|
</div>
|
|
) : !domains || domains.length === 0 ? (
|
|
<div className="text-center py-8 text-neutral-500">
|
|
<p>No domains added yet</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{domains.map(domain => {
|
|
const status = getDomainStatus(domain);
|
|
return (
|
|
<div key={domain.id} className="border border-neutral-200 rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<h3 className="font-medium text-neutral-900">{domain.domain}</h3>
|
|
{status.verified ? (
|
|
<Badge variant="success" className="flex items-center gap-1">
|
|
<CheckCircle2 className="h-3 w-3" />
|
|
Verified
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="warning" className="flex items-center gap-1">
|
|
<XCircle className="h-3 w-3" />
|
|
Pending
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleCheckVerification(domain.id)}
|
|
disabled={checkingVerification === domain.id || (cooldownSeconds[domain.id] ?? 0) > 0}
|
|
className="min-w-[80px]"
|
|
>
|
|
{checkingVerification === domain.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (cooldownSeconds[domain.id] ?? 0) > 0 ? (
|
|
<span className="text-xs">{cooldownSeconds[domain.id]}s</span>
|
|
) : (
|
|
<RefreshCw className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setDomainToRemove({id: domain.id, name: domain.domain});
|
|
setShowRemoveDialog(true);
|
|
}}
|
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{!status.verified && Array.isArray(status.tokens) && (status.tokens as string[]).length > 0 && (
|
|
<div className="mt-4 pt-4 border-t border-neutral-200">
|
|
<Alert>
|
|
<AlertDescription>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="font-medium text-sm mb-1">DNS Configuration Required</p>
|
|
<p className="text-xs text-neutral-600">
|
|
Add the following DNS records to verify your domain. DNS changes can take up to 48
|
|
hours to propagate.
|
|
</p>
|
|
</div>
|
|
|
|
{/* DNS Records Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-neutral-200">
|
|
<th className="text-left py-2 px-3 font-medium text-neutral-700 bg-neutral-50">
|
|
Type
|
|
</th>
|
|
<th className="text-left py-2 px-3 font-medium text-neutral-700 bg-neutral-50">
|
|
Name
|
|
</th>
|
|
<th className="text-left py-2 px-3 font-medium text-neutral-700 bg-neutral-50">
|
|
Value
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-neutral-200">
|
|
{/* DKIM Records */}
|
|
{status.tokens.map((token: string, index: number) => (
|
|
<tr key={index} className="hover:bg-neutral-50/50">
|
|
<td className="py-3 px-3">
|
|
<code className="text-xs font-medium text-neutral-900">CNAME</code>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
{token}._domainkey.{domain.domain}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
handleCopyToken(`${token}._domainkey.${domain.domain}`, index + 2000)
|
|
}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken ===
|
|
`${token}._domainkey.${domain.domain}-${index + 2000}` ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
{token}.dkim.amazonses.com
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleCopyToken(`${token}.dkim.amazonses.com`, index)}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken === `${token}.dkim.amazonses.com-${index}` ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
|
|
{/* MX Record */}
|
|
<tr className="hover:bg-neutral-50/50">
|
|
<td className="py-3 px-3">
|
|
<code className="text-xs font-medium text-neutral-900">MX</code>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
plunk.{domain.domain}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleCopyToken(`plunk.${domain.domain}`, 3000)}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken === `plunk.${domain.domain}-3000` ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
10 feedback-smtp.eu-north-1.amazonses.com
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
handleCopyToken('10 feedback-smtp.eu-north-1.amazonses.com', 1000)
|
|
}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken === '10 feedback-smtp.eu-north-1.amazonses.com-1000' ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
{/* TXT Record (SPF) */}
|
|
<tr className="hover:bg-neutral-50/50">
|
|
<td className="py-3 px-3">
|
|
<code className="text-xs font-medium text-neutral-900">TXT</code>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
plunk.{domain.domain}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleCopyToken(`plunk.${domain.domain}`, 3001)}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken === `plunk.${domain.domain}-3001` ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs font-mono text-neutral-700 break-all flex-1">
|
|
"v=spf1 include:amazonses.com ~all"
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleCopyToken('"v=spf1 include:amazonses.com ~all"', 1001)}
|
|
className="shrink-0 h-6 w-6 p-0"
|
|
>
|
|
{copiedToken === '"v=spf1 include:amazonses.com ~all"-1001' ? (
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
) : (
|
|
<Copy className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
|
<div className="text-blue-600 mt-0.5">
|
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p className="text-xs text-blue-900">
|
|
Click the copy icon to copy record values. After adding all records to your DNS
|
|
provider, use the refresh button above to verify your domain.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<ConfirmDialog
|
|
open={showRemoveDialog}
|
|
onOpenChange={setShowRemoveDialog}
|
|
onConfirm={handleRemoveDomain}
|
|
title="Remove Domain"
|
|
description={`Are you sure you want to remove ${domainToRemove?.name}?`}
|
|
confirmText="Remove"
|
|
variant="destructive"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|