commit 8a67761c9a38355a568b1154200e1e7e21dcb8a8 Author: Ryan Malloy Date: Sun Mar 16 07:38:30 2025 -0600 initial commit diff --git a/.bolt/config.json b/.bolt/config.json new file mode 100644 index 0000000..f236591 --- /dev/null +++ b/.bolt/config.json @@ -0,0 +1,3 @@ +{ + "template": "nextjs-shadcn" +} diff --git a/.bolt/ignore b/.bolt/ignore new file mode 100644 index 0000000..bbe3a15 --- /dev/null +++ b/.bolt/ignore @@ -0,0 +1,2 @@ +components/ui/* +hooks/use-toast.ts diff --git a/.bolt/prompt b/.bolt/prompt new file mode 100644 index 0000000..9bbced5 --- /dev/null +++ b/.bolt/prompt @@ -0,0 +1,14 @@ +For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production. + +When using client-side hooks (useState and useEffect) in a component that's being treated as a Server Component by Next.js, always add the "use client" directive at the top of the file. + +Do not write code that will trigger this error: "Warning: Extra attributes from the server: %s%s""class,style" + +By default, this template supports JSX syntax with Tailwind CSS classes, the shadcn/ui library, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them. + +Use icons from lucide-react for logos. + +Use stock photos from unsplash where appropriate, only valid URLs you know exist. + + +CRITICAL RULE: NEVER WRITE `package.json` directly use npm comands to install packages if needed diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5d92f47 --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +/dist + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/app/api/vultr/domains/[domain]/dnssec/route.ts b/app/api/vultr/domains/[domain]/dnssec/route.ts new file mode 100644 index 0000000..a51920a --- /dev/null +++ b/app/api/vultr/domains/[domain]/dnssec/route.ts @@ -0,0 +1,213 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Helper function to get API key from cookies +function getApiKey(): string | null { + const cookieStore = cookies(); + return cookieStore.get(API_KEY_COOKIE)?.value || null; +} + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for GET requests (get DNSSEC status) +export async function GET( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/dnssec`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, { + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || `Failed to fetch DNSSEC status for ${domain}` }, + { status: response.status } + ); + } + + return NextResponse.json({ + dnssec: data.dnssec_enabled ? "enabled" : "disabled" + }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/dnssec`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error fetching DNSSEC status for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for PUT requests (update DNSSEC status) +export async function PUT( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/dnssec`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + // Parse request body + const body = await request.json(); + + // Validate required fields + if (typeof body.enabled !== 'boolean') { + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/dnssec`, + statusCode: 400, + responseTime: Date.now() - startTime, + error: 'Missing or invalid enabled field', + apiKey + }); + + return NextResponse.json( + { error: 'The enabled field is required and must be a boolean' }, + { status: 400 } + ); + } + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, + apiKey, + requestBody: { enabled: body.enabled } + }); + + // Make request to Vultr API + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, { + method: 'PUT', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + enabled: body.enabled, + }), + }); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/dnssec`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + const data = await response.json(); + return NextResponse.json( + { error: data.error || `Failed to update DNSSEC status for ${domain}` }, + { status: response.status } + ); + } + + // Return the updated DNSSEC status + return NextResponse.json({ + dnssec: body.enabled ? "enabled" : "disabled" + }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/dnssec`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error updating DNSSEC status for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} diff --git a/app/api/vultr/domains/[domain]/records/[recordId]/route.ts b/app/api/vultr/domains/[domain]/records/[recordId]/route.ts new file mode 100644 index 0000000..20d1a0a --- /dev/null +++ b/app/api/vultr/domains/[domain]/records/[recordId]/route.ts @@ -0,0 +1,187 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Helper function to get API key from cookies +function getApiKey(): string | null { + const cookieStore = cookies(); + return cookieStore.get(API_KEY_COOKIE)?.value || null; +} + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for PATCH requests (update DNS record) +export async function PATCH( + request: NextRequest, + { params }: { params: { domain: string; recordId: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const { domain, recordId } = params; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'PATCH', + endpoint: `/api/vultr/domains/${domain}/records/${recordId}`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + const body = await request.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PATCH', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, + requestBody: body, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, { + method: 'PATCH', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body), + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PATCH', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || `Failed to update DNS record ${recordId}` }, + { status: response.status } + ); + } + + return NextResponse.json({ record: data.record }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PATCH', + endpoint: `/api/vultr/domains/${domain}/records/${recordId}`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error updating DNS record ${recordId}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for DELETE requests (delete DNS record) +export async function DELETE( + request: NextRequest, + { params }: { params: { domain: string; recordId: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const { domain, recordId } = params; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: `/api/vultr/domains/${domain}/records/${recordId}`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, { + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records/${recordId}`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + const errorData = await response.json().catch(() => ({})); + return NextResponse.json( + { error: errorData.error || `Failed to delete DNS record ${recordId}` }, + { status: response.status } + ); + } + + return NextResponse.json({ success: true }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: `/api/vultr/domains/${domain}/records/${recordId}`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error deleting DNS record ${recordId}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} diff --git a/app/api/vultr/domains/[domain]/records/route.ts b/app/api/vultr/domains/[domain]/records/route.ts new file mode 100644 index 0000000..d67cb32 --- /dev/null +++ b/app/api/vultr/domains/[domain]/records/route.ts @@ -0,0 +1,187 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Helper function to get API key from cookies +function getApiKey(): string | null { + const cookieStore = cookies(); + return cookieStore.get(API_KEY_COOKIE)?.value || null; +} + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for GET requests (list DNS records) +export async function GET( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/records`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/records`, { + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || `Failed to fetch DNS records for ${domain}` }, + { status: response.status } + ); + } + + return NextResponse.json({ records: data.records }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/records`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error fetching DNS records for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for POST requests (create DNS record) +export async function POST( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `/api/vultr/domains/${domain}/records`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + const body = await request.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records`, + requestBody: body, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/records`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body), + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/records`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || `Failed to create DNS record for ${domain}` }, + { status: response.status } + ); + } + + return NextResponse.json({ record: data.record }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `/api/vultr/domains/${domain}/records`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error creating DNS record for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} diff --git a/app/api/vultr/domains/[domain]/soa/route.ts b/app/api/vultr/domains/[domain]/soa/route.ts new file mode 100644 index 0000000..2884657 --- /dev/null +++ b/app/api/vultr/domains/[domain]/soa/route.ts @@ -0,0 +1,219 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Helper function to get API key from cookies +function getApiKey(): string | null { + const cookieStore = cookies(); + return cookieStore.get(API_KEY_COOKIE)?.value || null; +} + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for GET requests (get SOA information) +export async function GET( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/soa`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/soa`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/soa`, { + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/soa`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || `Failed to fetch SOA record for ${domain}` }, + { status: response.status } + ); + } + + return NextResponse.json({ + soa: { + ns1: data.soa?.ns_primary || '', + email: data.soa?.email || '', + } + }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `/api/vultr/domains/${domain}/soa`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error fetching SOA record for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for PUT requests (update SOA information) +export async function PUT( + request: NextRequest, + { params }: { params: { domain: string } } +) { + const logger = getLogger(); + const startTime = Date.now(); + const domain = params.domain; + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/soa`, + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + // Parse request body + const body = await request.json(); + + // Validate required fields + if (!body.ns1 || !body.email) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/soa`, + statusCode: 400, + responseTime: Date.now() - startTime, + error: 'Missing required fields', + apiKey + }); + + return NextResponse.json( + { error: 'Primary nameserver and email are required' }, + { status: 400 } + ); + } + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/soa`, + apiKey, + requestBody: { ns_primary: body.ns1, email: body.email } + }); + + // Make request to Vultr API + const response = await fetch(`${VULTR_API_BASE_URL}/domains/${domain}/soa`, { + method: 'PATCH', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + ns_primary: body.ns1, + email: body.email, + }), + }); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `${VULTR_API_BASE_URL}/domains/${domain}/soa`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + const data = await response.json(); + return NextResponse.json( + { error: data.error || `Failed to update SOA record for ${domain}` }, + { status: response.status } + ); + } + + // Return the updated SOA information + return NextResponse.json({ + soa: { + ns1: body.ns1, + email: body.email, + } + }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'PUT', + endpoint: `/api/vultr/domains/${domain}/soa`, + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error(`Error updating SOA record for ${domain}:`, error); + return NextResponse.json( + { error: 'Internal server error' },{ status: 500 } + ); + } +} diff --git a/app/api/vultr/domains/route.ts b/app/api/vultr/domains/route.ts new file mode 100644 index 0000000..7ce0557 --- /dev/null +++ b/app/api/vultr/domains/route.ts @@ -0,0 +1,208 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Helper function to get API key from cookies +function getApiKey(): string | null { + const cookieStore = cookies(); + return cookieStore.get(API_KEY_COOKIE)?.value || null; +} + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for GET requests (list domains) +export async function GET(request: NextRequest) { + const logger = getLogger(); + const startTime = Date.now(); + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: '/api/vultr/domains', + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/domains`, { + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/domains`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || 'Failed to fetch domains' }, + { status: response.status } + ); + } + + return NextResponse.json({ domains: data.domains }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: '/api/vultr/domains', + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error('Error fetching domains:', error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for POST requests (create domain) +export async function POST(request: NextRequest) { + const logger = getLogger(); + const startTime = Date.now(); + + // Check if user is authenticated + const apiKey = getApiKey(); + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: '/api/vultr/domains', + statusCode: 401, + responseTime: Date.now() - startTime, + error: 'Authentication required' + }); + + return NextResponse.json( + { error: 'Authentication required' }, + { status: 401 } + ); + } + + try { + // Parse request body + const body = await request.json(); + + // Validate required fields + if (!body.domain || !body.serverip) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: '/api/vultr/domains', + statusCode: 400, + responseTime: Date.now() - startTime, + error: 'Missing required fields', + apiKey + }); + + return NextResponse.json( + { error: 'Domain name and server IP are required' }, + { status: 400 } + ); + } + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `${VULTR_API_BASE_URL}/domains`, + apiKey, + requestBody: { domain: body.domain, serverip: body.serverip } + }); + + // Make request to Vultr API + const response = await fetch(`${VULTR_API_BASE_URL}/domains`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + domain: body.domain, + serverip: body.serverip, + }), + }); + + const data = await response.json(); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: `${VULTR_API_BASE_URL}/domains`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: data.error || 'Failed to create domain' }, + { status: response.status } + ); + } + + // Return the newly created domain + return NextResponse.json({ + domain: { + domain: body.domain, + date_created: new Date().toISOString() + } + }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: '/api/vultr/domains', + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage, + apiKey + }); + + console.error('Error creating domain:', error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} diff --git a/app/api/vultr/route.ts b/app/api/vultr/route.ts new file mode 100644 index 0000000..300ba9b --- /dev/null +++ b/app/api/vultr/route.ts @@ -0,0 +1,145 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { cookies } from 'next/headers'; +import { getLogger } from '@/lib/logger'; + +// Base URL for Vultr API +const VULTR_API_BASE_URL = 'https://api.vultr.com/v2'; + +// Cookie name for storing the API key +const API_KEY_COOKIE = 'vultr_api_key'; + +// Set export const dynamic to force dynamic rendering +export const dynamic = 'force-dynamic'; + +// Handler for GET requests (get logs) +export async function GET(request: NextRequest) { + const logger = getLogger(); + return NextResponse.json({ logs: logger.getLogs() }); +} + +// Handler for POST requests (set API key) +export async function POST(request: NextRequest) { + const logger = getLogger(); + const startTime = Date.now(); + + try { + const body = await request.json(); + const { apiKey } = body; + + if (!apiKey) { + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: '/api/vultr', + statusCode: 400, + responseTime: Date.now() - startTime, + error: 'API key is required' + }); + + return NextResponse.json( + { error: 'API key is required' }, + { status: 400 } + ); + } + + // Validate API key by making a test request to Vultr API + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/account`, + apiKey + }); + + const response = await fetch(`${VULTR_API_BASE_URL}/account`, { + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json', + }, + }); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'GET', + endpoint: `${VULTR_API_BASE_URL}/account`, + statusCode: response.status, + responseTime: Date.now() - startTime, + apiKey + }); + + if (!response.ok) { + return NextResponse.json( + { error: 'Invalid API key' }, + { status: 401 } + ); + } + + // Set API key in cookie (HTTP only for security) + const cookieStore = cookies(); + cookieStore.set(API_KEY_COOKIE, apiKey, { + httpOnly: true, + secure: process.env.NODE_ENV === 'production', + sameSite: 'strict', + path: '/', + // Expire in 7 days + maxAge: 60 * 60 * 24 * 7, + }); + + return NextResponse.json({ success: true }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'POST', + endpoint: '/api/vultr', + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage + }); + + console.error('Error setting API key:', error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} + +// Handler for DELETE requests (clear API key) +export async function DELETE(request: NextRequest) { + const logger = getLogger(); + const startTime = Date.now(); + + try { + // Clear API key cookie + const cookieStore = cookies(); + cookieStore.delete(API_KEY_COOKIE); + + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: '/api/vultr', + statusCode: 200, + responseTime: Date.now() - startTime + }); + + return NextResponse.json({ success: true }); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + logger.log({ + timestamp: new Date().toISOString(), + method: 'DELETE', + endpoint: '/api/vultr', + statusCode: 500, + responseTime: Date.now() - startTime, + error: errorMessage + }); + + console.error('Error clearing API key:', error); + return NextResponse.json( + { error: 'Internal server error' }, + { status: 500 } + ); + } +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..20b1c1d --- /dev/null +++ b/app/globals.css @@ -0,0 +1,82 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..7fa8c18 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,34 @@ +import './globals.css'; +import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; +import { Toaster } from '@/components/ui/toaster'; +import { ThemeProvider } from '@/components/theme-provider'; + +const inter = Inter({ subsets: ['latin'] }); + +export const metadata: Metadata = { + title: 'Vultr DNS Manager', + description: 'A web interface for managing Vultr DNS records', +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..1cd6308 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,9 @@ +import { DNSManager } from '@/components/dns-manager'; + +export default function Home() { + return ( +
+ +
+ ); +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..c597462 --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} diff --git a/components/add-domain-dialog.tsx b/components/add-domain-dialog.tsx new file mode 100644 index 0000000..c917d3d --- /dev/null +++ b/components/add-domain-dialog.tsx @@ -0,0 +1,138 @@ +"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; + +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({ + 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 ( + + + + Add New Domain + + Enter the domain name and server IP address to add a new domain to your Vultr account. + + + +
+ + ( + + Domain Name + + + + + + )} + /> + + ( + + Server IP Address + + + + + + )} + /> + + + + + + + +
+ + ); +} diff --git a/components/api-key-form.tsx b/components/api-key-form.tsx new file mode 100644 index 0000000..e1f1887 --- /dev/null +++ b/components/api-key-form.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { useState } from 'react'; +import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { Button } from '@/components/ui/button'; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { Key, Loader2 } from 'lucide-react'; + +const formSchema = z.object({ + apiKey: z.string().min(1, 'API Key is required'), +}); + +interface ApiKeyFormProps { + onApiKeySubmit: (apiKey: string) => void; +} + +export function ApiKeyForm({ onApiKeySubmit }: ApiKeyFormProps) { + const [isLoading, setIsLoading] = useState(false); + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + apiKey: '', + }, + }); + + async function onSubmit(values: z.infer) { + setIsLoading(true); + try { + // Validate the API key by making a test request + const response = await fetch('/api/vultr', { + headers: { + 'X-API-Key': values.apiKey, + }, + }); + + if (response.ok) { + onApiKeySubmit(values.apiKey); + } else { + form.setError('apiKey', { + type: 'manual', + message: 'Invalid API Key. Please check and try again.', + }); + } + } catch (error) { + form.setError('apiKey', { + type: 'manual', + message: 'Failed to validate API Key. Please try again.', + }); + } finally { + setIsLoading(false); + } + } + + return ( +
+
+
+ +
+
+ +
+ + ( + + Vultr API Key + + + + + Your API key can be found in your Vultr account settings. + + + + )} + /> + + + +
+ ); +} diff --git a/components/api-logs.tsx b/components/api-logs.tsx new file mode 100644 index 0000000..353f3b1 --- /dev/null +++ b/components/api-logs.tsx @@ -0,0 +1,134 @@ +"use client"; + +import { useEffect, useState } from 'react'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Trash2, RefreshCw, FileText } from 'lucide-react'; +import { Card, CardContent } from '@/components/ui/card'; + +interface LogEntry { + id: string; + timestamp: string; + method: string; + url: string; + status: number; + duration: number; +} + +export function ApiLogs() { + const [logs, setLogs] = useState([]); + const [loading, setLoading] = useState(true); + + const fetchLogs = async () => { + try { + setLoading(true); + const response = await fetch('/api/vultr/logs'); + if (!response.ok) { + throw new Error('Failed to fetch logs'); + } + const data = await response.json(); + setLogs(data.logs || []); + } catch (error) { + console.error('Error fetching logs:', error); + } finally { + setLoading(false); + } + }; + + const clearLogs = async () => { + try { + const response = await fetch('/api/vultr/logs', { + method: 'DELETE', + }); + if (!response.ok) { + throw new Error('Failed to clear logs'); + } + setLogs([]); + } catch (error) { + console.error('Error clearing logs:', error); + } + }; + + useEffect(() => { + fetchLogs(); + }, []); + + const getMethodColor = (method: string) => { + const colors: Record = { + GET: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20', + POST: 'bg-green-500/10 text-green-500 dark:bg-green-500/20', + PUT: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20', + DELETE: 'bg-red-500/10 text-red-500 dark:bg-red-500/20', + }; + return colors[method] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20'; + }; + + const getStatusColor = (status: number) => { + if (status >= 200 && status < 300) { + return 'bg-green-500/10 text-green-500 dark:bg-green-500/20'; + } else if (status >= 300 && status < 400) { + return 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20'; + } else if (status >= 400 && status < 500) { + return 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20'; + } else { + return 'bg-red-500/10 text-red-500 dark:bg-red-500/20'; + } + }; + + return ( +
+
+

API Request Logs

+
+ + +
+
+ + {logs.length === 0 ? ( +
+ +

No API Logs

+

+ There are no API request logs to display. Logs will appear here as you interact with the Vultr API. +

+
+ ) : ( + +
+ {logs.map((log) => ( + + +
+
+ + {log.method} + + + {log.status} + +
+
+ {new Date(log.timestamp).toLocaleString()} +
+
+
{log.url}
+
+ Duration: {log.duration}ms +
+ + + ))} +
+ + )} +
+ ); +} diff --git a/components/dns-manager.tsx b/components/dns-manager.tsx new file mode 100644 index 0000000..6b8ce04 --- /dev/null +++ b/components/dns-manager.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { useState } from 'react'; +import { ApiKeyForm } from './api-key-form'; +import { DomainsList } from './domains-list'; +import { RecordsList } from './records-list'; +import { ApiLogs } from './api-logs'; +import { ThemeToggle } from './theme-toggle'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Separator } from '@/components/ui/separator'; + +export function DNSManager() { + const [apiKey, setApiKey] = useState(null); + const [selectedDomain, setSelectedDomain] = useState(null); + + return ( +
+
+
+

Vultr DNS Manager

+

Manage your DNS records with ease

+
+ +
+ + + +
+ {!apiKey ? ( + + + Welcome to Vultr DNS Manager + + Enter your Vultr API key to get started + + + + + + + ) : ( +
+
+ + + Domains + Select a domain to manage + + + + + +
+ +
+ + {selectedDomain ? ( + + +
+ {selectedDomain} + + Records + API Logs + +
+ + Manage DNS records for this domain + + + + + + + + + + + + ) : ( + + No Domain Selected + + Please select a domain from the list to manage its DNS records + + + )} + +
+
+ )} +
+ +
+

© {new Date().getFullYear()} Vultr DNS Manager

+
+
+ ); +} diff --git a/components/domain-settings-dialog.tsx b/components/domain-settings-dialog.tsx new file mode 100644 index 0000000..edee3e5 --- /dev/null +++ b/components/domain-settings-dialog.tsx @@ -0,0 +1,286 @@ +"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(null); + const [isLoading, setIsLoading] = useState(true); + const { toast } = useToast(); + + const form = useForm>({ + 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) => { + 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 ( + + + + Domain Settings: {domain.domain} + + Manage DNSSEC and SOA settings for your domain. + + + + + + DNSSEC + SOA Record + + + +
+
+
+
DNSSEC
+

+ Enable DNSSEC to add an extra layer of security to your domain. +

+
+ +
+ +
+

DNSSEC (Domain Name System Security Extensions) helps protect your domain from DNS spoofing attacks by digitally signing DNS data.

+

Note: Enabling DNSSEC requires proper configuration with your domain registrar.

+
+
+ + + + {isLoading ? ( +
+ +
+ ) : ( +
+ + ( + + Primary Nameserver + + + + + The primary nameserver for this domain + + + + )} + /> + + ( + + Admin Email + + + + + The administrator email address for this domain + + + + )} + /> + + + + + + + )} +
+ + + + ); +} diff --git a/components/domains-list.tsx b/components/domains-list.tsx new file mode 100644 index 0000000..4cc12c6 --- /dev/null +++ b/components/domains-list.tsx @@ -0,0 +1,237 @@ +"use client"; + +import { useEffect, useState } from 'react'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Button } from '@/components/ui/button'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Input } from '@/components/ui/input'; +import { useToast } from '@/hooks/use-toast'; +import { Globe, Plus, Settings, Search, X } from 'lucide-react'; +import { AddDomainDialog } from './add-domain-dialog'; +import { DomainSettingsDialog } from './domain-settings-dialog'; + +interface Domain { + domain: string; + date_created: string; + dnssec?: "enabled" | "disabled"; +} + +interface DomainsListProps { + apiKey: string; + onSelectDomain: (domain: string) => void; + selectedDomain: string | null; +} + +export function DomainsList({ apiKey, onSelectDomain, selectedDomain }: DomainsListProps) { + const [domains, setDomains] = useState([]); + const [filteredDomains, setFilteredDomains] = useState([]); + const [searchQuery, setSearchQuery] = useState(''); + const [loading, setLoading] = useState(true); + const [isAddDomainOpen, setIsAddDomainOpen] = useState(false); + const [isSettingsOpen, setIsSettingsOpen] = useState(false); + const { toast } = useToast(); + + const fetchDomains = async () => { + try { + setLoading(true); + const response = await fetch('/api/vultr/domains', { + headers: { + 'X-API-Key': apiKey, + }, + }); + + if (!response.ok) { + throw new Error('Failed to fetch domains'); + } + + const data = await response.json(); + setDomains(data.domains || []); + setFilteredDomains(data.domains || []); + } catch (error) { + console.error('Error fetching domains:', error); + toast({ + title: 'Error', + description: 'Failed to fetch domains. Please check your API key.', + variant: 'destructive', + }); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchDomains(); + }, [apiKey, toast]); + + // Filter domains when search query changes + useEffect(() => { + if (searchQuery.trim() === '') { + setFilteredDomains(domains); + } else { + const query = searchQuery.toLowerCase(); + const filtered = domains.filter(domain => + domain.domain.toLowerCase().includes(query) + ); + setFilteredDomains(filtered); + } + }, [searchQuery, domains]); + + const handleDomainAdded = (newDomain: Domain) => { + const updatedDomains = [newDomain, ...domains]; + setDomains(updatedDomains); + setFilteredDomains(updatedDomains); + toast({ + title: 'Domain Added', + description: `${newDomain.domain} has been added successfully.`, + }); + setIsAddDomainOpen(false); + }; + + const handleDomainUpdated = (updatedDomain: Domain) => { + const updatedDomains = domains.map(domain => + domain.domain === updatedDomain.domain ? updatedDomain : domain + ); + setDomains(updatedDomains); + setFilteredDomains(updatedDomains); + toast({ + title: 'Domain Updated', + description: `${updatedDomain.domain} settings have been updated successfully.`, + }); + setIsSettingsOpen(false); + }; + + const clearSearch = () => { + setSearchQuery(''); + }; + + if (loading) { + return ( +
+ + {Array.from({ length: 5 }).map((_, i) => ( + + ))} +
+ ); + } + + const selectedDomainData = selectedDomain + ? domains.find(d => d.domain === selectedDomain) + : null; + + return ( + <> +
+
+ + setSearchQuery(e.target.value)} + className="pl-9 pr-9" + /> + {searchQuery && ( + + )} +
+ + + + {selectedDomain && ( + + )} +
+ + {domains.length === 0 ? ( +
+ +

No domains found

+

+ You don't have any domains configured in your Vultr account. +

+
+ ) : filteredDomains.length === 0 ? ( +
+ +

No matching domains

+

+ No domains match your search query "{searchQuery}" +

+ +
+ ) : ( + +
+ {filteredDomains.map((domain) => ( + + ))} +
+ + )} + + + + {selectedDomainData && ( + + )} + + ); +} diff --git a/components/record-form.tsx b/components/record-form.tsx new file mode 100644 index 0000000..72adc0a --- /dev/null +++ b/components/record-form.tsx @@ -0,0 +1,426 @@ +"use client"; + +import { useState } from 'react'; +import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { Button } from '@/components/ui/button'; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { useToast } from '@/hooks/use-toast'; +import { ArrowLeft, Loader2 } from 'lucide-react'; + +interface DNSRecord { + id: string; + type: string; + name: string; + data: string; + priority?: number; + ttl: number; +} + +interface RecordFormProps { + apiKey: string; + domain: string; + record?: DNSRecord | null; + onCancel: () => void; + onSuccess: () => void; +} + +const recordSchema = z.object({ + type: z.string(), + name: z.string(), + data: z.string(), + priority: z.number().optional(), + ttl: z.number().min(60, 'TTL must be at least 60 seconds'), + // SSHFP specific fields + algorithm: z.number().min(0).max(4).optional(), + fptype: z.number().min(0).max(2).optional(), + fingerprint: z.string().optional(), +}); + +export function RecordForm({ apiKey, domain, record, onCancel, onSuccess }: RecordFormProps) { + const [isSubmitting, setIsSubmitting] = useState(false); + const { toast } = useToast(); + + const form = useForm>({ + resolver: zodResolver(recordSchema), + defaultValues: { + type: record?.type || 'A', + name: record?.name || '', + data: record?.data || '', + priority: record?.priority, + ttl: record?.ttl || 3600, + algorithm: undefined, + fptype: undefined, + fingerprint: '', + }, + }); + + const watchType = form.watch('type'); + const watchAlgorithm = form.watch('algorithm'); + const watchFptype = form.watch('fptype'); + const watchFingerprint = form.watch('fingerprint'); + + // Update data field when SSHFP components change + const updateSSHFPData = () => { + if (watchType === 'SSHFP' && + watchAlgorithm !== undefined && + watchFptype !== undefined && + watchFingerprint) { + const sshfpData = `${watchAlgorithm} ${watchFptype} ${watchFingerprint}`; + form.setValue('data', sshfpData); + } + }; + + // Parse SSHFP data when editing an existing record + const parseSSHFPData = (data: string) => { + if (record?.type === 'SSHFP' && data) { + const parts = data.split(' '); + if (parts.length >= 3) { + form.setValue('algorithm', parseInt(parts[0])); + form.setValue('fptype', parseInt(parts[1])); + form.setValue('fingerprint', parts.slice(2).join(' ')); + } + } + }; + + // Parse SSHFP data on initial load + useState(() => { + if (record?.type === 'SSHFP' && record.data) { + parseSSHFPData(record.data); + } + }); + + async function onSubmit(values: z.infer) { + // Ensure SSHFP data is properly formatted + if (values.type === 'SSHFP') { + updateSSHFPData(); + } + + setIsSubmitting(true); + try { + const url = record + ? `/api/vultr/domains/${domain}/records/${record.id}` + : `/api/vultr/domains/${domain}/records`; + + const method = record ? 'PUT' : 'POST'; + + // Remove SSHFP specific fields before sending to API + const { algorithm, fptype, fingerprint, ...apiValues } = values; + + const response = await fetch(url, { + method, + headers: { + 'Content-Type': 'application/json', + 'X-API-Key': apiKey, + }, + body: JSON.stringify(apiValues), + }); + + if (!response.ok) { + throw new Error('Failed to save record'); + } + + toast({ + title: 'Success', + description: `DNS record ${record ? 'updated' : 'created'} successfully.`, + }); + + onSuccess(); + } catch (error) { + console.error('Error saving record:', error); + toast({ + title: 'Error', + description: `Failed to ${record ? 'update' : 'create'} DNS record.`, + variant: 'destructive', + }); + } finally { + setIsSubmitting(false); + } + } + + return ( +
+
+ +

+ {record ? 'Edit DNS Record' : 'Add DNS Record'} +

+
+ +
+ +
+ ( + + Record Type + + + The type of DNS record to create. + + + + )} + /> + + ( + + Name + + + + + Subdomain name (@ for root domain) + + + + )} + /> + + {watchType !== 'SSHFP' && ( + ( + + Value + + + + + {watchType === 'A' || watchType === 'AAAA' + ? 'IP address' + : watchType === 'CNAME' + ? 'Target domain' + : watchType === 'TXT' + ? 'Text content' + : 'Record value'} + + + + )} + /> + )} + + {watchType === 'SSHFP' && ( + <> + ( + + Algorithm + + + SSH key algorithm + + + + )} + /> + + ( + + Fingerprint Type + + + Fingerprint hash algorithm + + + + )} + /> + + ( + + Fingerprint + + { + field.onChange(e.target.value); + setTimeout(updateSSHFPData, 0); + }} + /> + + + Hexadecimal fingerprint value + + + + )} + /> + + )} + + {watchType === 'MX' && ( + ( + + Priority + + field.onChange(parseInt(e.target.value) || 0)} + /> + + + Priority for MX records (lower values have higher priority) + + + + )} + /> + )} + + ( + + TTL (seconds) + + field.onChange(parseInt(e.target.value) || 3600)} + /> + + + Time to live in seconds (min: 60) + + + + )} + /> +
+ +
+ + +
+
+ +
+ ); +} diff --git a/components/records-list.tsx b/components/records-list.tsx new file mode 100644 index 0000000..007fd75 --- /dev/null +++ b/components/records-list.tsx @@ -0,0 +1,288 @@ +"use client"; + +import { useEffect, useState } from 'react'; +import { useToast } from '@/hooks/use-toast'; +import { Button } from '@/components/ui/button'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Skeleton } from '@/components/ui/skeleton'; +import { RecordForm } from './record-form'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from '@/components/ui/alert-dialog'; +import { Plus, Trash2, Edit, Loader2, FileWarning } from 'lucide-react'; +import { Badge } from './ui/badge'; + +interface DNSRecord { + id: string; + type: string; + name: string; + data: string; + priority?: number; + ttl: number; +} + +interface RecordsListProps { + apiKey: string; + domain: string; +} + +export function RecordsList({ apiKey, domain }: RecordsListProps) { + const [records, setRecords] = useState([]); + const [loading, setLoading] = useState(true); + const [isAddingRecord, setIsAddingRecord] = useState(false); + const [editingRecord, setEditingRecord] = useState(null); + const [deletingRecordId, setDeletingRecordId] = useState(null); + const [isDeleting, setIsDeleting] = useState(false); + const { toast } = useToast(); + + const fetchRecords = async () => { + try { + setLoading(true); + const response = await fetch(`/api/vultr/domains/${domain}/records`, { + headers: { + 'X-API-Key': apiKey, + }, + }); + + if (!response.ok) { + throw new Error('Failed to fetch records'); + } + + const data = await response.json(); + setRecords(data.records || []); + } catch (error) { + console.error('Error fetching records:', error); + toast({ + title: 'Error', + description: 'Failed to fetch DNS records.', + variant: 'destructive', + }); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + if (domain) { + fetchRecords(); + } + }, [domain, apiKey]); + + const handleDeleteRecord = async () => { + if (!deletingRecordId) return; + + try { + setIsDeleting(true); + const response = await fetch( + `/api/vultr/domains/${domain}/records/${deletingRecordId}`, + { + method: 'DELETE', + headers: { + 'X-API-Key': apiKey, + }, + } + ); + + if (!response.ok) { + throw new Error('Failed to delete record'); + } + + toast({ + title: 'Success', + description: 'DNS record deleted successfully.', + }); + + // Refresh the records list + fetchRecords(); + } catch (error) { + console.error('Error deleting record:', error); + toast({ + title: 'Error', + description: 'Failed to delete DNS record.', + variant: 'destructive', + }); + } finally { + setIsDeleting(false); + setDeletingRecordId(null); + } + }; + + const getRecordTypeColor = (type: string) => { + const types: Record = { + A: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20', + AAAA: 'bg-purple-500/10 text-purple-500 dark:bg-purple-500/20', + CNAME: 'bg-green-500/10 text-green-500 dark:bg-green-500/20', + MX: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20', + TXT: 'bg-slate-500/10 text-slate-500 dark:bg-slate-500/20', + NS: 'bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20', + SRV: 'bg-rose-500/10 text-rose-500 dark:bg-rose-500/20', + CAA: 'bg-cyan-500/10 text-cyan-500 dark:bg-cyan-500/20', + }; + + return types[type] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20'; + }; + + if (loading) { + return ( +
+
+ + +
+
+
+ +
+ {Array.from({ length: 5 }).map((_, i) => ( +
+ +
+ ))} +
+
+ ); + } + + if (isAddingRecord || editingRecord) { + return ( + { + setIsAddingRecord(false); + setEditingRecord(null); + }} + onSuccess={() => { + setIsAddingRecord(false); + setEditingRecord(null); + fetchRecords(); + }} + /> + ); + } + + return ( +
+
+

DNS Records

+ +
+ + {records.length === 0 ? ( +
+ +

No DNS Records Found

+

+ This domain doesn't have any DNS records yet. Click the "Add Record" button to create your first record. +

+
+ ) : ( + +
+ + + + Type + Name + Value + TTL + Actions + + + + {records.map((record) => ( + + + + {record.type} + + + +
{record.name || '@'}
+ {record.priority !== undefined && ( +
+ Priority: {record.priority} +
+ )} + + + {record.data} + + {record.ttl} + +
+ + +
+ + + ))} + +
+
+ + )} + + !open && setDeletingRecordId(null)}> + + + Are you sure? + + This will permanently delete this DNS record. This action cannot be undone. + + + + Cancel + + {isDeleting ? ( + <> + + Deleting... + + ) : ( + 'Delete' + )} + + + + +
+ ); +} diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx new file mode 100644 index 0000000..8c90fbc --- /dev/null +++ b/components/theme-provider.tsx @@ -0,0 +1,9 @@ +"use client" + +import * as React from "react" +import { ThemeProvider as NextThemesProvider } from "next-themes" +import { type ThemeProviderProps } from "next-themes/dist/types" + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx new file mode 100644 index 0000000..d631a6f --- /dev/null +++ b/components/theme-toggle.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ThemeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..84bf2eb --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +'use client'; + +import * as React from 'react'; +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import { ChevronDown } from 'lucide-react'; + +import { cn } from '@/lib/utils'; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = 'AccordionItem'; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180', + className + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..5cba559 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +'use client'; + +import * as React from 'react'; +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; + +import { cn } from '@/lib/utils'; +import { buttonVariants } from '@/components/ui/button'; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = 'AlertDialogHeader'; + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = 'AlertDialogFooter'; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName; + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +}; diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..d2b59cc --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '@/lib/utils'; + +const alertVariants = cva( + 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', + { + variants: { + variant: { + default: 'bg-background text-foreground', + destructive: + 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', + }, + }, + defaultVariants: { + variant: 'default', + }, + } +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = 'Alert'; + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertTitle.displayName = 'AlertTitle'; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = 'AlertDescription'; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..aaabffb --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +'use client'; + +import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; + +const AspectRatio = AspectRatioPrimitive.Root; + +export { AspectRatio }; diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..1346957 --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +'use client'; + +import * as React from 'react'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; + +import { cn } from '@/lib/utils'; + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..2eb790a --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '@/lib/utils'; + +const badgeVariants = cva( + 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + { + variants: { + variant: { + default: + 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', + secondary: + 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', + destructive: + 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', + outline: 'text-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, + } +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants }; diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..8b62197 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { ChevronRight, MoreHorizontal } from 'lucide-react'; + +import { cn } from '@/lib/utils'; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<'nav'> & { + separator?: React.ReactNode; + } +>(({ ...props }, ref) =>