pull/6/head
Suvodip 2025-03-21 18:08:06 +05:30
parent fd5cb4b00a
commit 6907bf2852
2 changed files with 108 additions and 69 deletions

View File

@ -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,13 +616,14 @@ 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="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
<div className="flex items-start"> <label for="dns-ns" className="flex items-start cursor-pointer">
<input <input
type="radio" type="radio"
id="dns-ns" id="dns-ns"
@ -681,18 +676,63 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
</button> </button>
</div> </div>
</div> </div>
</div> </label>
</div>
)}
</div>
)}
</div>
)}
</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>
)}
</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>
); );

View File

@ -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>