diff --git a/src/components/DomainSetupForm.jsx b/src/components/DomainSetupForm.jsx deleted file mode 100644 index 87e74f2..0000000 --- a/src/components/DomainSetupForm.jsx +++ /dev/null @@ -1,810 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { Toast } from './Toast'; -import { TemplatePreview } from './TemplatePreview'; - -export const DomainSetupForm = ({ defaultSubdomain }) => { - // Deployment type and app selections - const [deploymentType, setDeploymentType] = useState('app'); - const [appType, setAppType] = useState('wordpress'); - const [sampleWebAppType, setSampleWebAppType] = useState('developer'); // New state for sample web app type - const [sourceType, setSourceType] = useState('public'); - const [repoUrl, setRepoUrl] = useState(''); - const [deploymentKey, setDeploymentKey] = useState(''); - const [fileName, setFileName] = useState(''); - - // Domain configuration - const [useSubdomain, setUseSubdomain] = useState(true); - const [useCustomDomain, setUseCustomDomain] = useState(false); - const [customDomain, setCustomDomain] = useState(''); - const [customSubdomain, setCustomSubdomain] = useState(''); - const [domainType, setDomainType] = useState('domain'); // 'domain' or 'subdomain' - - // Domain validation states - const [isValidating, setIsValidating] = useState(false); - const [isValidDomain, setIsValidDomain] = useState(false); - const [validationMessage, setValidationMessage] = useState(''); - - // DNS configuration - const [dnsMethod, setDnsMethod] = useState('cname'); - const [showDnsConfig, setShowDnsConfig] = useState(false); - const [dnsVerified, setDnsVerified] = useState({ - cname: false, - ns: false, - a: false, - ip: false - }); - - // Form validation - const [formValid, setFormValid] = useState(true); - - // Toast notification - const [toast, setToast] = useState({ visible: false, message: '' }); - - // File upload reference - const fileInputRef = React.useRef(null); - - // Effect for handling domain type changes - useEffect(() => { - if (!useCustomDomain) { - setShowDnsConfig(false); - setIsValidDomain(false); - setValidationMessage(''); - setIsValidating(false); - } - - validateForm(); - }, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, dnsVerified.ns, domainType, dnsMethod]); - - // Show toast notification - const showToast = (message) => { - setToast({ visible: true, message }); - setTimeout(() => setToast({ visible: false, message: '' }), 3000); - }; - - // Handle deployment type change - const handleDeploymentTypeChange = (e) => { - setDeploymentType(e.target.value); - }; - - // Handle source type change - const handleSourceTypeChange = (e) => { - setSourceType(e.target.value); - }; - - // Handle file upload - const handleFileChange = (e) => { - if (e.target.files.length > 0) { - setFileName(e.target.files[0].name); - } else { - setFileName(''); - } - }; - - // Handle domain checkbox changes - const handleUseSubdomainChange = (e) => { - setUseSubdomain(e.target.checked); - - // If CNAME record is selected, SiliconPin subdomain must be enabled - if (useCustomDomain && dnsMethod === 'cname' && !e.target.checked) { - setUseCustomDomain(false); - } - - validateForm(); - }; - - const handleUseCustomDomainChange = (e) => { - setUseCustomDomain(e.target.checked); - if (!e.target.checked) { - setShowDnsConfig(false); - setIsValidDomain(false); - setValidationMessage(''); - setIsValidating(false); - setDnsVerified({ - cname: false, - ns: false, - a: false, - ip: false - }); - } else { - // Force SiliconPin subdomain to be checked if custom domain is checked - setUseSubdomain(true); - } - - validateForm(); - }; - - // Handle domain type change - const handleDomainTypeChange = (e) => { - setDomainType(e.target.value); - - // Reset validation when changing domain type - setIsValidDomain(false); - setValidationMessage(''); - setDnsVerified({ - cname: false, - ns: false, - a: false - }); - - validateForm(); - }; - - // Handle domain and subdomain input changes - const handleDomainChange = (e) => { - const cleanedValue = e.target.value.replace(/^(https?:\/\/)?(www\.)?/i, '').replace(/\/+$/, '').trim(); - setCustomDomain(cleanedValue); - }; - - const handleSubdomainChange = (e) => { - const cleanedValue = e.target.value.replace(/^(https?:\/\/)?/i, '').replace(/\/+$/, '').trim(); - setCustomSubdomain(cleanedValue); - }; - - // Handle DNS method change - const handleDnsMethodChange = (e) => { - setDnsMethod(e.target.value); - - // If changing to CNAME, ensure SiliconPin subdomain is enabled - if (e.target.value === 'cname') { - setUseSubdomain(true); - } - - // Reset DNS verification - setDnsVerified(prev => ({ - ...prev, - [e.target.value]: false - })); - - validateForm(); - }; - - // Validate domain - const validateDomain = () => { - const domain = domainType === 'domain' ? customDomain : customSubdomain; - - if (!domain) { - setValidationMessage('Please enter a domain name.'); - setIsValidDomain(false); - return; - } - - // Initial validation: check format with regex - const validFormat = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(domain); - if (!validFormat) { - setValidationMessage('Domain format is invalid. Please check your entry.'); - setIsValidDomain(false); - return; - } - - setIsValidating(true); - setValidationMessage(''); - setShowDnsConfig(false); - -<<<<<<< HEAD - fetch('/validate-domain', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - domain, - type: domainType - }) - }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(data => { - const checkResult = data.status === "success"; - console.log("finding:: checkResult:: ", checkResult, data); -======= - // Simulate an API call to validate the domain - setTimeout(() => { - // Simulate a real domain check - in a real app this would be an API call - // call /host-api/v1/domains/validate/?domain=domain.com - const checkResult = true; // Assume domain is valid for demo ->>>>>>> origin/staging - - setIsValidating(false); - setIsValidDomain(checkResult); - - if (checkResult) { - setValidationMessage('Domain is valid and registered.'); - setShowDnsConfig(true); - } else { - setValidationMessage('Domain appears to be unregistered or unavailable.'); - } - -<<<<<<< HEAD - validateForm(); - }) - .catch(error => { - console.error('Error validating domain:', error); - setIsValidating(false); - setIsValidDomain(false); - setValidationMessage('Error checking domain. Please try again.'); - validateForm(); - }); -======= - validateForm(); - }, 500); ->>>>>>> origin/staging - }; - - // Check DNS configuration - const checkSubDomainCname = () => { - const domainToCheck = customDomain || customSubdomain; - - fetch('http://localhost:2058/host-api/v1/check-c-name/', { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - }, - body: `domain=${encodeURIComponent(domainToCheck)}` - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(data => { - if (data.status === 'success') { - checkDnsConfig('cname'); - showToast(`Checking ${type}... (This would verify DNS in a real app)`); - console.log('CNAME record:', data.cname); - // Handle success - update UI - } else { - console.error('Error:', data.message); - // Handle error - } - }) - .catch(error => { - console.error('Fetch error:', error); - // Show error to user - }); - }; - const checkDnsConfig = (type) => { - showToast(`Checking ${type}... (This would verify DNS in a real app)`); - - // Simulate DNS check - setTimeout(() => { - setDnsVerified(prev => ({ - ...prev, - [type]: true - })); - - showToast(`${type} verified successfully!`); - validateForm(); - }, 1500); - }; - - // Copy to clipboard - const copyToClipboard = (text) => { - navigator.clipboard.writeText(text) - .then(() => { - showToast('Copied to clipboard!'); - }) - .catch(err => { - showToast('Failed to copy: ' + err); - }); - }; - - // Validate form - const validateForm = () => { - // For custom domain, require DNS verification - if (useCustomDomain) { - if (dnsMethod === 'cname' && !dnsVerified.cname) { - setFormValid(false); - return; - } - - if (dnsMethod === 'ns' && !dnsVerified.ns) { - setFormValid(false); - return; - } - if (dnsMethod === 'ip' && !dnsVerified.ip) { - setFormValid(false); - return; - } - } - - setFormValid(true); - }; - - // Handle form submission - const handleSubmit = (e) => { - e.preventDefault(); - - if (!formValid) { - showToast('Please complete DNS verification before deploying.'); - return; - } - - // In a real app, this would submit the form data to the server - console.log([{ deploymentType, appType, sampleWebAppType, sourceType, repoUrl, deploymentKey, useSubdomain, useCustomDomain, customDomain, customSubdomain, domainType, dnsMethod}]); - - showToast('Form submitted successfully!'); - }; - - return ( -
-
- {/* Deployment Type Selection */} -
- - -
- - {/* App Options */} - {deploymentType === 'app' && ( -
- - -
- )} - - {/* Sample Web App Options */} - {deploymentType === 'sample-web-app' && ( -
- - - -
-
-
ℹī¸
-
-

- Deploy a ready-to-use template that you can customize. We'll set up the basic structure and you can modify it to fit your needs. -

-
-
-
- - {/* Template Preview */} - -
- )} - - {/* Source Options */} - {deploymentType === 'source' && ( -
-
- - -
- -
- - setRepoUrl(e.target.value)} - placeholder="https://github.com/username/repository" - className="w-full rounded-md py-2 px-3 bg-neutral-700 border border-neutral-600 text-white focus:outline-none focus:ring-2 focus:ring-[#6d9e37]" - /> -
- - {sourceType === 'private' && ( -
-
- - -
-