commit
937882fba2
|
@ -30,7 +30,8 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
const [dnsVerified, setDnsVerified] = useState({
|
const [dnsVerified, setDnsVerified] = useState({
|
||||||
cname: false,
|
cname: false,
|
||||||
ns: false,
|
ns: false,
|
||||||
a: false
|
a: false,
|
||||||
|
ip: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// Form validation
|
// Form validation
|
||||||
|
@ -61,7 +62,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
validateForm();
|
validateForm();
|
||||||
}, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, domainType, dnsMethod]);
|
}, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, dnsVerified.ns, domainType, dnsMethod]);
|
||||||
|
|
||||||
// Show toast notification
|
// Show toast notification
|
||||||
const showToast = (message) => {
|
const showToast = (message) => {
|
||||||
|
@ -110,7 +111,8 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
setDnsVerified({
|
setDnsVerified({
|
||||||
cname: false,
|
cname: false,
|
||||||
ns: false,
|
ns: false,
|
||||||
a: false
|
a: false,
|
||||||
|
ip: false
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Force SiliconPin subdomain to be checked if custom domain is checked
|
// Force SiliconPin subdomain to be checked if custom domain is checked
|
||||||
|
@ -246,6 +248,10 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
setFormValid(false);
|
setFormValid(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (dnsMethod === 'ip' && !dnsVerified.ip) {
|
||||||
|
setFormValid(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setFormValid(true);
|
setFormValid(true);
|
||||||
|
@ -261,20 +267,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// In a real app, this would submit the form data to the server
|
// In a real app, this would submit the form data to the server
|
||||||
console.log({
|
console.log([{ deploymentType, appType, sampleWebAppType, sourceType, repoUrl, deploymentKey, useSubdomain, useCustomDomain, customDomain, customSubdomain, domainType, dnsMethod}]);
|
||||||
deploymentType,
|
|
||||||
appType,
|
|
||||||
sampleWebAppType,
|
|
||||||
sourceType,
|
|
||||||
repoUrl,
|
|
||||||
deploymentKey,
|
|
||||||
useSubdomain,
|
|
||||||
useCustomDomain,
|
|
||||||
customDomain,
|
|
||||||
customSubdomain,
|
|
||||||
domainType,
|
|
||||||
dnsMethod
|
|
||||||
});
|
|
||||||
|
|
||||||
showToast('Form submitted successfully!');
|
showToast('Form submitted successfully!');
|
||||||
};
|
};
|
||||||
|
@ -550,9 +543,10 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
|
|
||||||
{/* Domain Validation */}
|
{/* Domain Validation */}
|
||||||
<button
|
<button
|
||||||
|
disabled={!customDomain}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={validateDomain}
|
onClick={validateDomain}
|
||||||
className="px-4 py-2 bg-neutral-600 text-white font-medium rounded-md hover:bg-neutral-500 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500"
|
className={`px-4 py-2 ${!customDomain ? 'bg-neutral-600 cursor-not-allowed' : 'bg-[#6d9e37] focus:ring-[#6d9e37] transition-colors'} text-white font-medium rounded-md transition-colors focus:outline-none`}
|
||||||
>
|
>
|
||||||
Validate Domain
|
Validate Domain
|
||||||
</button>
|
</button>
|
||||||
|
@ -582,7 +576,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
|
|
||||||
{/* CNAME Record Option */}
|
{/* CNAME Record Option */}
|
||||||
<div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
|
<div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
|
||||||
<div className="flex items-start">
|
<label for="dns-cname" className="flex items-start cursor-pointer">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
id="dns-cname"
|
id="dns-cname"
|
||||||
|
@ -622,67 +616,114 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Nameserver Option (only for full domains, not subdomains) */}
|
{/* Nameserver Option (only for full domains, not subdomains) */}
|
||||||
{domainType === 'domain' && (
|
{domainType === 'domain' && (
|
||||||
<div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
|
<>
|
||||||
<div className="flex items-start">
|
<div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
|
||||||
<input
|
<label for="dns-ns" className="flex items-start cursor-pointer">
|
||||||
type="radio"
|
<input
|
||||||
id="dns-ns"
|
type="radio"
|
||||||
name="dns-method"
|
id="dns-ns"
|
||||||
value="ns"
|
name="dns-method"
|
||||||
checked={dnsMethod === 'ns'}
|
value="ns"
|
||||||
onChange={handleDnsMethodChange}
|
checked={dnsMethod === 'ns'}
|
||||||
className="mt-1 mr-2"
|
onChange={handleDnsMethodChange}
|
||||||
/>
|
className="mt-1 mr-2"
|
||||||
<div className="flex-1">
|
/>
|
||||||
<label htmlFor="dns-ns" className="block text-white font-medium">Use Our Nameservers</label>
|
<div className="flex-1">
|
||||||
<p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
|
<label htmlFor="dns-ns" className="block text-white font-medium">Use Our Nameservers</label>
|
||||||
|
<p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
|
||||||
|
|
||||||
<div className="mt-3 space-y-2">
|
<div className="mt-3 space-y-2">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns1.siliconpin.com</div>
|
<div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns1.siliconpin.com</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => copyToClipboard('ns1.siliconpin.com')}
|
onClick={() => copyToClipboard('ns1.siliconpin.com')}
|
||||||
className="ml-2 text-[#6d9e37] hover:text-white"
|
className="ml-2 text-[#6d9e37] hover:text-white"
|
||||||
aria-label="Copy nameserver value"
|
aria-label="Copy nameserver value"
|
||||||
>
|
>
|
||||||
<span className="text-lg">📋</span>
|
<span className="text-lg">📋</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns2.siliconpin.com</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => copyToClipboard('ns2.siliconpin.com')}
|
||||||
|
className="ml-2 text-[#6d9e37] hover:text-white"
|
||||||
|
aria-label="Copy nameserver value"
|
||||||
|
>
|
||||||
|
<span className="text-lg">📋</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center">
|
<div className="mt-2 text-right">
|
||||||
<div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns2.siliconpin.com</div>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => copyToClipboard('ns2.siliconpin.com')}
|
onClick={() => checkDnsConfig('ns')}
|
||||||
className="ml-2 text-[#6d9e37] hover:text-white"
|
className={`px-3 py-1 text-white text-sm rounded
|
||||||
aria-label="Copy nameserver value"
|
${dnsVerified.ns
|
||||||
|
? 'bg-green-700 hover:bg-green-600'
|
||||||
|
: 'bg-neutral-600 hover:bg-neutral-500'}`}
|
||||||
>
|
>
|
||||||
<span className="text-lg">📋</span>
|
{dnsVerified.ns ? '✓ Nameservers Verified' : 'Check Nameservers'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</label>
|
||||||
<div className="mt-2 text-right">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => checkDnsConfig('ns')}
|
|
||||||
className={`px-3 py-1 text-white text-sm rounded
|
|
||||||
${dnsVerified.ns
|
|
||||||
? 'bg-green-700 hover:bg-green-600'
|
|
||||||
: 'bg-neutral-600 hover:bg-neutral-500'}`}
|
|
||||||
>
|
|
||||||
{dnsVerified.ns ? '✓ Nameservers Verified' : 'Check Nameservers'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
|
||||||
|
<label for="dns-ip" className="flex items-start cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="dns-ip"
|
||||||
|
name="dns-method"
|
||||||
|
value="ip"
|
||||||
|
checked={dnsMethod === 'ip'}
|
||||||
|
onChange={handleDnsMethodChange}
|
||||||
|
className="mt-1 mr-2"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<label htmlFor="dns-ip" className="block text-white font-medium">Use Our IP Address</label>
|
||||||
|
<p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
|
||||||
|
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">xxx.xxx.x.xx</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => copyToClipboard('xxx.xxx.x.xx')}
|
||||||
|
className="ml-2 text-[#6d9e37] hover:text-white"
|
||||||
|
aria-label="Copy nameserver value"
|
||||||
|
>
|
||||||
|
<span className="text-lg">📋</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-right">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => checkDnsConfig('ip')}
|
||||||
|
className={`px-3 py-1 text-white text-sm rounded
|
||||||
|
${dnsMethod === 'ip'
|
||||||
|
? 'bg-green-700 hover:bg-green-600'
|
||||||
|
: 'bg-neutral-600 hover:bg-neutral-500'}`}
|
||||||
|
>
|
||||||
|
{/* {dnsVerified.ip ? '✓ IP Address Verified' : 'Check IP Address'} */}
|
||||||
|
Proceed to Pay
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -692,7 +733,6 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Form Submit Button */}
|
{/* Form Submit Button */}
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -706,7 +746,6 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
|
||||||
Start the Deployment
|
Start the Deployment
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<Toast visible={toast.visible} message={toast.message} />
|
<Toast visible={toast.visible} message={toast.message} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -133,7 +133,7 @@ const contactSchema = {
|
||||||
<span class="text-neutral-300 font-medium">Sunday:</span>
|
<span class="text-neutral-300 font-medium">Sunday:</span>
|
||||||
<span class="text-white">Closed</span>
|
<span class="text-white">Closed</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-3 border-t border-neutral-700">
|
<div class="pt-3 border-t border-neutral-700 flex items-center justify-between">
|
||||||
<span class="text-neutral-300">Technical Support:</span>
|
<span class="text-neutral-300">Technical Support:</span>
|
||||||
<span class="text-[#6d9e37] font-semibold block mt-1">24/7</span>
|
<span class="text-[#6d9e37] font-semibold block mt-1">24/7</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue