139 lines
4.3 KiB
TypeScript
139 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } 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, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
// Define the form schema
|
|
const formSchema = z.object({
|
|
domain: z.string()
|
|
.min(3, { message: 'Domain must be at least 3 characters' })
|
|
.regex(/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/, {
|
|
message: 'Please enter a valid domain name (e.g., example.com)',
|
|
}),
|
|
serverIp: z.string()
|
|
.regex(/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/, {
|
|
message: 'Please enter a valid IPv4 address',
|
|
}),
|
|
});
|
|
|
|
type FormValues = z.infer<typeof formSchema>;
|
|
|
|
interface AddDomainDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
apiKey: string;
|
|
onDomainAdded: (domain: { domain: string; date_created: string }) => void;
|
|
}
|
|
|
|
export function AddDomainDialog({ open, onOpenChange, apiKey, onDomainAdded }: AddDomainDialogProps) {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const { toast } = useToast();
|
|
|
|
const form = useForm<FormValues>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
domain: '',
|
|
serverIp: '',
|
|
},
|
|
});
|
|
|
|
const onSubmit = async (values: FormValues) => {
|
|
try {
|
|
setIsSubmitting(true);
|
|
|
|
const response = await fetch('/api/vultr/domains', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-API-Key': apiKey,
|
|
},
|
|
body: JSON.stringify({
|
|
domain: values.domain,
|
|
serverip: values.serverIp,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Failed to add domain');
|
|
}
|
|
|
|
const data = await response.json();
|
|
onDomainAdded(data.domain);
|
|
form.reset();
|
|
} catch (error) {
|
|
console.error('Error adding domain:', error);
|
|
toast({
|
|
title: 'Error',
|
|
description: error instanceof Error ? error.message : 'Failed to add domain',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Add New Domain</DialogTitle>
|
|
<DialogDescription>
|
|
Enter the domain name and server IP address to add a new domain to your Vultr account.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 py-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="domain"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Domain Name</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="example.com" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="serverIp"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Server IP Address</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="192.0.2.123" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Add Domain
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|