287 lines
9.0 KiB
TypeScript
287 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { z } from 'zod';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
|
|
// Define the form schema
|
|
const soaFormSchema = z.object({
|
|
ns1: z.string()
|
|
.min(3, { message: 'Nameserver must be at least 3 characters' })
|
|
.regex(/^[a-zA-Z0-9][a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, {
|
|
message: 'Please enter a valid nameserver (e.g., ns1.example.com)',
|
|
}),
|
|
email: z.string()
|
|
.email({ message: 'Please enter a valid email address' }),
|
|
});
|
|
|
|
interface Domain {
|
|
domain: string;
|
|
date_created: string;
|
|
dnssec?: "enabled" | "disabled";
|
|
}
|
|
|
|
interface SOARecord {
|
|
ns1?: string;
|
|
email?: string;
|
|
}
|
|
|
|
interface DomainSettingsDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
apiKey: string;
|
|
domain: Domain;
|
|
onDomainUpdated: (domain: Domain) => void;
|
|
}
|
|
|
|
export function DomainSettingsDialog({
|
|
open,
|
|
onOpenChange,
|
|
apiKey,
|
|
domain,
|
|
onDomainUpdated
|
|
}: DomainSettingsDialogProps) {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [dnssecEnabled, setDnssecEnabled] = useState(domain.dnssec === "enabled");
|
|
const [soaRecord, setSOARecord] = useState<SOARecord | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const { toast } = useToast();
|
|
|
|
const form = useForm<z.infer<typeof soaFormSchema>>({
|
|
resolver: zodResolver(soaFormSchema),
|
|
defaultValues: {
|
|
ns1: '',
|
|
email: '',
|
|
},
|
|
});
|
|
|
|
// Fetch SOA record when dialog opens
|
|
useEffect(() => {
|
|
if (open) {
|
|
fetchSOARecord();
|
|
}
|
|
}, [open, domain.domain, apiKey]);
|
|
|
|
const fetchSOARecord = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(`/api/vultr/domains/${domain.domain}/soa`, {
|
|
headers: {
|
|
'X-API-Key': apiKey,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch SOA record');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setSOARecord(data.soa);
|
|
|
|
// Update form values
|
|
form.setValue('ns1', data.soa.ns1 || '');
|
|
form.setValue('email', data.soa.email || '');
|
|
} catch (error) {
|
|
console.error('Error fetching SOA record:', error);
|
|
toast({
|
|
title: 'Error',
|
|
description: 'Failed to fetch SOA record',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const updateDNSSEC = async (enabled: boolean) => {
|
|
try {
|
|
setIsSubmitting(true);
|
|
const response = await fetch(`/api/vultr/domains/${domain.domain}/dnssec`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-API-Key': apiKey,
|
|
},
|
|
body: JSON.stringify({
|
|
enabled,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Failed to update DNSSEC settings');
|
|
}
|
|
|
|
setDnssecEnabled(enabled);
|
|
onDomainUpdated({
|
|
...domain,
|
|
dnssec: enabled ? "enabled" : "disabled",
|
|
});
|
|
|
|
toast({
|
|
title: 'DNSSEC Updated',
|
|
description: `DNSSEC has been ${enabled ? 'enabled' : 'disabled'} for ${domain.domain}`,
|
|
});
|
|
} catch (error) {
|
|
console.error('Error updating DNSSEC:', error);
|
|
toast({
|
|
title: 'Error',
|
|
description: error instanceof Error ? error.message : 'Failed to update DNSSEC settings',
|
|
variant: 'destructive',
|
|
});
|
|
// Reset switch to previous state
|
|
setDnssecEnabled(!enabled);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const onSubmitSOA = async (values: z.infer<typeof soaFormSchema>) => {
|
|
try {
|
|
setIsSubmitting(true);
|
|
|
|
const response = await fetch(`/api/vultr/domains/${domain.domain}/soa`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-API-Key': apiKey,
|
|
},
|
|
body: JSON.stringify({
|
|
ns1: values.ns1,
|
|
email: values.email,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Failed to update SOA record');
|
|
}
|
|
|
|
toast({
|
|
title: 'SOA Record Updated',
|
|
description: `SOA record has been updated for ${domain.domain}`,
|
|
});
|
|
|
|
// Update local state
|
|
setSOARecord({
|
|
ns1: values.ns1,
|
|
email: values.email,
|
|
});
|
|
} catch (error) {
|
|
console.error('Error updating SOA record:', error);
|
|
toast({
|
|
title: 'Error',
|
|
description: error instanceof Error ? error.message : 'Failed to update SOA record',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Domain Settings: {domain.domain}</DialogTitle>
|
|
<DialogDescription>
|
|
Manage DNSSEC and SOA settings for your domain.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Tabs defaultValue="dnssec" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="dnssec">DNSSEC</TabsTrigger>
|
|
<TabsTrigger value="soa">SOA Record</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="dnssec" className="py-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<div className="font-medium">DNSSEC</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enable DNSSEC to add an extra layer of security to your domain.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={dnssecEnabled}
|
|
disabled={isSubmitting}
|
|
onCheckedChange={updateDNSSEC}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground mt-4">
|
|
<p>DNSSEC (Domain Name System Security Extensions) helps protect your domain from DNS spoofing attacks by digitally signing DNS data.</p>
|
|
<p className="mt-2">Note: Enabling DNSSEC requires proper configuration with your domain registrar.</p>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="soa" className="py-4">
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmitSOA)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="ns1"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Primary Nameserver</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="ns1.example.com" {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
The primary nameserver for this domain
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Admin Email</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="admin@example.com" {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
The administrator email address for this domain
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<DialogFooter>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Save Changes
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|