marge get-started-new-code

2025-03-31 16:51:02 +05:30
parent dffdbc6e40
commit 9cbe98eff5
21 changed files with 1569 additions and 811 deletions
--- a/src/components/DomainSetupForm/DomainConfiguration/CustomDomain.jsx
+++ b/src/components/DomainSetupForm/DomainConfiguration/CustomDomain.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import DnsConfiguration from './DnsConfiguration';
+
+/**
+ * Component for custom domain configuration
+ * @param {Object} props - Component props
+ * @param {Object} props.domainConfig - Domain configuration state
+ * @param {Object} props.validation - Domain validation state
+ * @param {Object} props.dnsVerified - DNS verification state
+ * @param {Object} props.handlers - Event handlers for domain config
+ * @param {Function} props.checkDnsConfig - Function to check DNS configuration
+ * @param {string} props.defaultSubdomain - Default SiliconPin subdomain
+ * @param {Function} props.showToast - Function to show toast notifications
+ * @returns {JSX.Element} - Rendered component
+ */
+const CustomDomain = ({
+                        domainConfig,
+                        validation,
+                        dnsVerified,
+                        handlers,
+                        checkDnsConfig,
+                        defaultSubdomain,
+                        showToast
+                      }) => {
+  const {
+    domainType,
+    customDomain,
+    customSubdomain,
+    dnsMethod
+  } = domainConfig;
+
+  const {
+    isValidating,
+    isValidDomain,
+    validationMessage,
+    showDnsConfig
+  } = validation;
+
+  const {
+    handleDomainTypeChange,
+    handleDomainChange,
+    handleSubdomainChange,
+    handleDnsMethodChange,
+    validateDomain
+  } = handlers;
+
+  return (
+    <div className="mt-3 space-y-4">
+      {/* Domain Type Selection */}
+      <div className="flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
+        <div className="flex items-center">
+          <input
+            type="radio"
+            id="domain-type-domain"
+            name="domain-type"
+            value="domain"
+            checked={domainType === 'domain'}
+            onChange={handleDomainTypeChange}
+            className="mr-2"
+          />
+          <label htmlFor="domain-type-domain" className="text-white">Root Domain</label>
+        </div>
+
+        <div className="flex items-center">
+          <input
+            type="radio"
+            id="domain-type-subdomain"
+            name="domain-type"
+            value="subdomain"
+            checked={domainType === 'subdomain'}
+            onChange={handleDomainTypeChange}
+            className="mr-2"
+          />
+          <label htmlFor="domain-type-subdomain" className="text-white">Subdomain</label>
+        </div>
+      </div>
+
+      {/* Domain Input */}
+      {domainType === 'domain' ? (
+        <div>
+          <input
+            type="text"
+            id="custom-domain"
+            value={customDomain}
+            onChange={handleDomainChange}
+            placeholder="yourdomain.com"
+            aria-label="Enter root domain"
+            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]"
+          />
+          <p className="mt-1 text-xs text-neutral-400">
+            Enter domain without http://, www, or trailing slashes (example.com). You can configure www or other subdomains later.
+          </p>
+        </div>
+      ) : (
+        <div>
+          <input
+            type="text"
+            id="custom-subdomain"
+            value={customSubdomain}
+            onChange={handleSubdomainChange}
+            placeholder="blog.yourdomain.com"
+            aria-label="Enter subdomain"
+            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]"
+          />
+          <p className="mt-1 text-xs text-neutral-400">
+            Enter the full subdomain without http:// or trailing slashes. www and protocol prefixes will be automatically removed.
+          </p>
+        </div>
+      )}
+
+      {/* Domain Validation */}
+      <button
+        type="button"
+        onClick={validateDomain}
+        disabled={isValidating}
+        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 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {isValidating ? 'Validating...' : 'Validate Domain'}
+      </button>
+
+      {/* Validation Status */}
+      {isValidating && (
+        <div className="p-3 bg-neutral-700/50 rounded-md">
+          <div className="flex items-center justify-center space-x-2">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+            <p className="text-white">Verifying domain registration and availability...</p>
+          </div>
+        </div>
+      )}
+
+      {!isValidating && validationMessage && (
+        <div className={`p-3 rounded-md ${isValidDomain ? 'bg-green-900/20 border border-green-700/50' : 'bg-red-900/20 border border-red-700/50'}`}>
+          <p className={isValidDomain ? 'text-green-400' : 'text-red-400'}>
+            {validationMessage}
+          </p>
+        </div>
+      )}
+
+      {/* DNS Configuration Options */}
+      {showDnsConfig && (
+        <DnsConfiguration
+          domainType={domainType}
+          dnsMethod={dnsMethod}
+          defaultSubdomain={defaultSubdomain}
+          dnsVerified={dnsVerified}
+          onDnsMethodChange={handleDnsMethodChange}
+          checkDnsConfig={checkDnsConfig}
+          showToast={showToast}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CustomDomain;