Add React frontend with Tailwind CSS
This commit is contained in:
oguz ozturk
parent
0593965305
commit
8d0b564738
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hosting Platform - DNS & SSL Management</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "hosting-platform-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0 --port 3001",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"axios": "^1.6.2",
|
||||
"react-router-dom": "^6.20.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"vite": "^5.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
.app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #6ee7b7;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fca5a5;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #93c5fd;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { useState } from 'react'
|
||||
import DomainSetup from './pages/DomainSetup'
|
||||
import DomainList from './pages/DomainList'
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
const [currentPage, setCurrentPage] = useState('setup')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white text-xl font-bold">H</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Hosting Platform</h1>
|
||||
<p className="text-sm text-gray-500">DNS & SSL Management</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex space-x-4">
|
||||
<button
|
||||
onClick={() => setCurrentPage('setup')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
currentPage === 'setup'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
Add Domain
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage('list')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
currentPage === 'list'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
My Domains
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{currentPage === 'setup' ? <DomainSetup /> : <DomainList />}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white border-t border-gray-200 mt-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="text-center text-gray-500 text-sm">
|
||||
<p>© 2024 Hosting Platform. Powered by Cloudflare.</p>
|
||||
<p className="mt-1">Automated DNS & SSL Management</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { dnsAPI } from '../services/api'
|
||||
|
||||
function DomainList() {
|
||||
const [domains, setDomains] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchDomains()
|
||||
}, [])
|
||||
|
||||
const fetchDomains = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await dnsAPI.getDomains()
|
||||
setDomains(response.data)
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'Failed to fetch domains')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
const colors = {
|
||||
active: 'bg-green-100 text-green-800',
|
||||
pending: 'bg-yellow-100 text-yellow-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
}
|
||||
return colors[status] || 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Loading domains...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="alert alert-error">
|
||||
<strong>Error:</strong> {error}
|
||||
</div>
|
||||
<button onClick={fetchDomains} className="btn btn-primary mt-4">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (domains.length === 0) {
|
||||
return (
|
||||
<div className="card text-center">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-2">No Domains Yet</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
You haven't added any domains yet. Click "Add Domain" to get started.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">My Domains</h2>
|
||||
<button onClick={fetchDomains} className="btn btn-secondary">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{domains.map((domain) => (
|
||||
<div key={domain.id} className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h3 className="text-xl font-bold text-gray-800">
|
||||
{domain.domain_name}
|
||||
</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusBadge(domain.status)}`}>
|
||||
{domain.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Load Balancer IP:</span>
|
||||
<p className="font-medium text-gray-800">{domain.lb_ip || 'N/A'}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-gray-500">DNS Configured:</span>
|
||||
<p className="font-medium text-gray-800">
|
||||
{domain.dns_configured ? '✓ Yes' : '✗ No'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-gray-500">SSL Configured:</span>
|
||||
<p className="font-medium text-gray-800">
|
||||
{domain.ssl_configured ? '✓ Yes' : '✗ No'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-gray-500">Cloudflare Proxy:</span>
|
||||
<p className="font-medium text-gray-800">
|
||||
{domain.cf_proxy_enabled ? '✓ Enabled' : '✗ Disabled'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-xs text-gray-500">
|
||||
Added: {new Date(domain.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-4">
|
||||
<a
|
||||
href={`https://${domain.domain_name}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn btn-primary"
|
||||
>
|
||||
Visit Site →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainList
|
||||
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
import { useState } from 'react'
|
||||
import { dnsAPI } from '../services/api'
|
||||
|
||||
function DomainSetup() {
|
||||
const [step, setStep] = useState(1)
|
||||
const [domain, setDomain] = useState('')
|
||||
const [cfToken, setCfToken] = useState('')
|
||||
const [zoneInfo, setZoneInfo] = useState(null)
|
||||
const [preview, setPreview] = useState(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [success, setSuccess] = useState(null)
|
||||
|
||||
const handleValidateToken = async (e) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await dnsAPI.validateToken(domain, cfToken)
|
||||
|
||||
if (response.data.status === 'success') {
|
||||
setZoneInfo(response.data)
|
||||
setStep(2)
|
||||
} else {
|
||||
setError(response.data.message)
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'Failed to validate token')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePreviewChanges = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await dnsAPI.previewChanges(
|
||||
domain,
|
||||
zoneInfo.zone_id,
|
||||
cfToken
|
||||
)
|
||||
|
||||
if (response.data.status !== 'error') {
|
||||
setPreview(response.data)
|
||||
setStep(3)
|
||||
} else {
|
||||
setError(response.data.message)
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'Failed to preview changes')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleApplyChanges = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await dnsAPI.applyChanges(
|
||||
domain,
|
||||
zoneInfo.zone_id,
|
||||
cfToken,
|
||||
preview,
|
||||
true
|
||||
)
|
||||
|
||||
if (response.data.status === 'success') {
|
||||
setSuccess('Domain successfully configured!')
|
||||
setStep(4)
|
||||
} else {
|
||||
setError('Failed to apply changes')
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'Failed to apply changes')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setStep(1)
|
||||
setDomain('')
|
||||
setCfToken('')
|
||||
setZoneInfo(null)
|
||||
setPreview(null)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Progress Steps */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
{[1, 2, 3, 4].map((s) => (
|
||||
<div key={s} className="flex items-center">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center font-bold ${
|
||||
step >= s
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</div>
|
||||
{s < 4 && (
|
||||
<div
|
||||
className={`w-24 h-1 mx-2 ${
|
||||
step > s ? 'bg-blue-500' : 'bg-gray-200'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between mt-2 text-sm text-gray-600">
|
||||
<span>Domain Info</span>
|
||||
<span>Verify</span>
|
||||
<span>Preview</span>
|
||||
<span>Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Alert */}
|
||||
{error && (
|
||||
<div className="alert alert-error mb-4">
|
||||
<strong>Error:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Alert */}
|
||||
{success && (
|
||||
<div className="alert alert-success mb-4">
|
||||
<strong>Success!</strong> {success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 1: Domain & Token */}
|
||||
{step === 1 && (
|
||||
<div className="card">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800">
|
||||
Step 1: Enter Domain & Cloudflare Token
|
||||
</h2>
|
||||
<form onSubmit={handleValidateToken} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Domain Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
placeholder="example.com"
|
||||
value={domain}
|
||||
onChange={(e) => setDomain(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Cloudflare API Token
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
placeholder="Your Cloudflare API Token"
|
||||
value={cfToken}
|
||||
onChange={(e) => setCfToken(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Get your API token from Cloudflare Dashboard → My Profile → API Tokens
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary w-full"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Validating...' : 'Validate & Continue'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Zone Info */}
|
||||
{step === 2 && zoneInfo && (
|
||||
<div className="card">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800">
|
||||
Step 2: Verify Zone Information
|
||||
</h2>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-green-800 font-medium">✓ Token validated successfully!</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-left">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500">Zone Name</label>
|
||||
<p className="text-lg font-semibold text-gray-800">{zoneInfo.zone_name}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500">Zone ID</label>
|
||||
<p className="text-gray-800 font-mono text-sm">{zoneInfo.zone_id}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500">Status</label>
|
||||
<p className="text-gray-800">{zoneInfo.zone_status}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500">Nameservers</label>
|
||||
<ul className="list-disc list-inside text-gray-800">
|
||||
{zoneInfo.nameservers?.map((ns, i) => (
|
||||
<li key={i}>{ns}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4 mt-6">
|
||||
<button
|
||||
onClick={() => setStep(1)}
|
||||
className="btn btn-secondary flex-1"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePreviewChanges}
|
||||
className="btn btn-primary flex-1"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading...' : 'Preview Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Preview Changes */}
|
||||
{step === 3 && preview && (
|
||||
<div className="card">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800">
|
||||
Step 3: Preview DNS Changes
|
||||
</h2>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-blue-800">
|
||||
<strong>New IP:</strong> {preview.new_ip}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-left">
|
||||
<h3 className="font-semibold text-gray-800">Changes to be applied:</h3>
|
||||
|
||||
{preview.changes?.map((change, i) => (
|
||||
<div key={i} className="border border-gray-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="font-medium text-gray-800">
|
||||
{change.record_type} Record: {change.name}
|
||||
</span>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
change.action === 'create' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
|
||||
}`}>
|
||||
{change.action.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{change.current && (
|
||||
<div className="text-sm text-gray-600 mb-1">
|
||||
Current: {change.current.value} (Proxied: {change.current.proxied ? 'Yes' : 'No'})
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-sm text-gray-800 font-medium">
|
||||
New: {change.new.value} (Proxied: {change.new.proxied ? 'Yes' : 'No'})
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4 mt-6">
|
||||
<button
|
||||
onClick={() => setStep(2)}
|
||||
className="btn btn-secondary flex-1"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleApplyChanges}
|
||||
className="btn btn-primary flex-1"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Applying...' : 'Apply Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Success */}
|
||||
{step === 4 && (
|
||||
<div className="card text-center">
|
||||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-4">
|
||||
Domain Configured Successfully!
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Your domain <strong>{domain}</strong> has been configured with DNS and SSL settings.
|
||||
</p>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 text-left">
|
||||
<h3 className="font-semibold text-blue-900 mb-2">What's Next?</h3>
|
||||
<ul className="list-disc list-inside text-blue-800 space-y-1">
|
||||
<li>DNS changes may take a few minutes to propagate</li>
|
||||
<li>SSL certificate will be automatically provisioned by Cloudflare</li>
|
||||
<li>Your site will be accessible via HTTPS within 15 minutes</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={resetForm}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
Add Another Domain
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainSetup
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://176.96.129.77:5000'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
export const dnsAPI = {
|
||||
// Health check
|
||||
health: () => api.get('/health'),
|
||||
|
||||
// Validate Cloudflare token
|
||||
validateToken: (domain, cfToken) =>
|
||||
api.post('/api/dns/validate-token', {
|
||||
domain,
|
||||
cf_token: cfToken,
|
||||
}),
|
||||
|
||||
// Preview DNS changes
|
||||
previewChanges: (domain, zoneId, cfToken) =>
|
||||
api.post('/api/dns/preview-changes', {
|
||||
domain,
|
||||
zone_id: zoneId,
|
||||
cf_token: cfToken,
|
||||
}),
|
||||
|
||||
// Apply DNS changes
|
||||
applyChanges: (domain, zoneId, cfToken, preview, proxyEnabled = true) =>
|
||||
api.post('/api/dns/apply-changes', {
|
||||
domain,
|
||||
zone_id: zoneId,
|
||||
cf_token: cfToken,
|
||||
preview,
|
||||
proxy_enabled: proxyEnabled,
|
||||
customer_id: 1, // TODO: Get from auth
|
||||
}),
|
||||
|
||||
// Get domains
|
||||
getDomains: (customerId = 1) =>
|
||||
api.get('/api/domains', {
|
||||
params: { customer_id: customerId },
|
||||
}),
|
||||
|
||||
// Get domain by ID
|
||||
getDomain: (domainId) => api.get(`/api/domains/${domainId}`),
|
||||
}
|
||||
|
||||
export default api
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3001,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://176.96.129.77:5000',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue