openship 0.1.1 → 0.1.7

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/DomainSettings.tsx

@@ -1,523 +0,0 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import { Plus, X, ExternalLink, Check, AlertTriangle, Globe, Shield, Copy, RefreshCw } from "lucide-react";
-import { generateIcon } from "@/utils/icons";
-import { useProjectSettings } from "@/context/ProjectSettingsContext";
-import { projectsApi, deployApi } from "@/lib/api";
-import { useToast } from "@/context/ToastContext";
-
-interface DnsRecord {
-  type: "CNAME" | "A" | "TXT";
-  host: string;
-  value: string;
-}
-
-export const DomainSettings = () => {
-  const { domainsData, updateDomains, id } = useProjectSettings();
-  const { showToast } = useToast();
-
-  const [newDomain, setNewDomain] = useState("");
-  const [showCustomDomainSection, setShowCustomDomainSection] = useState(false);
-  const [includeWww, setIncludeWww] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [logs, setLogs] = useState<string[]>([]);
-  const [sslData, setSSLData] = useState<any>(null);
-  const [isLoadingSSL, setIsLoadingSSL] = useState(false);
-  const [isRenewingSSL, setIsRenewingSSL] = useState(false);
-  const [dnsRecords, setDnsRecords] = useState<DnsRecord[]>([]);
-  const [dnsMode, setDnsMode] = useState<"cloud" | "selfhosted">("cloud");
-
-  const primaryDomain = domainsData?.domains?.find((d) => d.primary) || {};
-
-  const addLog = (message: string) => {
-    setLogs(prev => [...prev, `[${new Date().toLocaleTimeString()}] ${message}`]);
-  };
-
-  // Fetch SSL status when primary domain changes
-  useEffect(() => {
-    const fetchSSLStatus = async () => {
-      if (!primaryDomain?.domain) return;
-      
-      setIsLoadingSSL(true);
-      try {
-        const result = await deployApi.sslStatus(primaryDomain.domain);
-
-        if (result.success) {
-          setSSLData(result);
-        }
-      } catch (error) {
-        console.error('Failed to fetch SSL status:', error);
-      } finally {
-        setIsLoadingSSL(false);
-      }
-    };
-
-    fetchSSLStatus();
-  }, [primaryDomain?.domain]);
-
-
-  const handleSubmitDomains = async () => {
-    if (!newDomain.trim()) return;
-
-    setIsSubmitting(true);
-    setLogs([]);
-
-    const result = await projectsApi.connectDomain(id, {
-      domain: newDomain.trim(),
-      includeWww: includeWww,
-    });
-
-    console.log('result', result);
-
-    if (!result.success) {
-      showToast(result.error || 'Failed to connect domain', 'error', result.message || 'Failed to connect domain');
-      setIsSubmitting(false);
-      return;
-    }
-
-    // Store DNS records from the API
-    if (result.records?.records) {
-      setDnsRecords(result.records.records);
-      setDnsMode(result.records.mode ?? "cloud");
-    }
-
-    // Add the custom domain and set it as primary
-    const newDomainObj = {
-      id: Date.now(),
-      domain: newDomain.trim(),
-      primary: true,
-      verified: true,
-    };
-
-    const updatedDomains = [
-      ...domainsData.domains.map((d) => ({ ...d, primary: false })),
-      newDomainObj
-    ];
-
-    await updateDomains(updatedDomains);
-
-    setIsSubmitting(false);
-    setShowCustomDomainSection(false);
-    setNewDomain("");
-    setIncludeWww(false);
-    setLogs([]);
-  };
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-  };
-
-  // Check if primary domain is .opsh.io
-  const isObleeDomain = primaryDomain?.domain?.endsWith('.opsh.io');
-
-  const handleRenewSSL = async () => {
-    if (!primaryDomain?.domain) return;
-
-    setIsRenewingSSL(true);
-    try {
-      const result = await deployApi.sslRenew(primaryDomain.domain, false);
-
-      if (result.success) {
-        showToast('SSL certificate renewed successfully', 'success');
-        // Refresh SSL status
-        const statusResult = await deployApi.sslStatus(primaryDomain.domain);
-        if (statusResult.success) {
-          setSSLData(statusResult);
-        }
-      } else {
-        showToast(result.message || result.error || 'Failed to renew SSL certificate', 'error', result.message);
-      }
-    } catch (error) {
-      console.error('Failed to renew SSL:', error);
-      showToast('Failed to renew SSL certificate', 'error');
-    } finally {
-      setIsRenewingSSL(false);
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Primary Domain & SSL Status */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Primary Domain Card */}
-        <div className="bg-white rounded-xl p-6">
-          <div className="flex items-center gap-3 mb-5">
-            <div className="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center">
-              {generateIcon("world-229-1658433759.png", 24, "var(--color-indigo-600)")}
-            </div>
-            <div>
-              <h3 className=" font-bold text-black">Primary Domain</h3>
-              <p className="text-sm text-gray-500">Your main deployment URL</p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="p-4 bg-gray-50 rounded-2xl border-2 border-gray-200">
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Domain</span>
-              </div>
-              <span className="text-sm text-black font-semibold block">
-                {primaryDomain?.domain}
-              </span >
-            </div>
-
-            <div className="flex items-center gap-2">
-              {primaryDomain?.verified ? (
-                <>
-                  {/* <span className="text-sm text-emerald-600 font-medium">Active & Verified</span> */}
-                </>
-              ) : (
-                <>
-                  {generateIcon("error%20triangle-16-1662499385.png", 20, "var(--color-amber-600)")}
-                  <span className="text-sm text-amber-600 font-medium">Pending Verification</span>
-                </>
-              )}
-            </div>
-
-            <div className="flex gap-3">
-              <button
-                className="flex items-center justify-center flex-1 bg-black hover:bg-gray-800 gap-2 text-white border-0 font-semibold py-3 rounded-2xl transition-all shadow-md hover:shadow-lg"
-                onClick={() => window.open(`https://${primaryDomain?.domain}`, '_blank')}
-              >
-                {generateIcon("External_link_HtLszLDBXqHilHK674zh2aKoSL7xUhyboAzP.png", 16, "white")}
-                Visit
-              </button>
-
-              <button
-                className="flex items-center justify-center flex-1 font-semibold border-0 text-black bg-black/10 hover:bg-black/20 py-3 rounded-2xl transition-all gap-2"
-                onClick={() => setShowCustomDomainSection(!showCustomDomainSection)}
-              >
-                {showCustomDomainSection ? (
-                  <>
-                    Cancel
-                  </>
-                ) : (
-                  <>
-                    Add Domain
-                  </>
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* SSL Certificate Card */}
-        <div className="bg-white rounded-xl p-6">
-          <div className="flex items-center gap-3 mb-5">
-            <div className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center">
-              {generateIcon("ssl-133-1691989601.png", 24, "var(--color-emerald-600)")}
-            </div>
-            <div>
-              <h3 className=" font-bold text-black">SSL Certificate</h3>
-              <p className="text-sm text-gray-500">Secure HTTPS encryption</p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            {isLoadingSSL ? (
-              <div className="flex items-center justify-center p-4 bg-gray-50 rounded-2xl border-2 border-gray-200">
-                <span className="text-sm text-gray-500">Loading SSL status...</span>
-              </div>
-            ) : (
-              <div className={`flex items-center justify-between p-4 rounded-2xl border-2 ${
-                sslData?.status === 'expired' 
-                  ? 'bg-red-50 border-red-200' 
-                  : sslData?.status === 'expiring_soon'
-                  ? 'bg-amber-50 border-amber-200'
-                  : 'bg-emerald-50 border-emerald-200'
-              }`}>
-                <div className="flex items-center gap-2">
-                  <div className={`w-2 h-2 rounded-full ${
-                    sslData?.status === 'expired' 
-                      ? 'bg-red-500' 
-                      : sslData?.status === 'expiring_soon'
-                      ? 'bg-amber-500 animate-pulse'
-                      : 'bg-emerald-500 animate-pulse'
-                  }`}></div>
-                  <span className={`text-sm font-semibold ${
-                    sslData?.status === 'expired' 
-                      ? 'text-red-700' 
-                      : sslData?.status === 'expiring_soon'
-                      ? 'text-amber-700'
-                      : 'text-emerald-700'
-                  }`}>
-                    {sslData?.status === 'expired' 
-                      ? 'Expired - Action Required' 
-                      : sslData?.status === 'expiring_soon'
-                      ? `Expiring Soon (${sslData?.daysUntilExpiry} days)`
-                      : sslData?.enabled ? 'Active' : 'Inactive'}
-                  </span>
-                </div>
-                {isObleeDomain ? (
-                  <span className="text-xs bg-emerald-100 text-emerald-700 px-3 py-1.5 rounded-full font-semibold">
-                    Included
-                  </span>
-                ) : (
-                  sslData?.autoRenew && (
-                    <span className="text-xs bg-emerald-100 text-emerald-700 px-3 py-1.5 rounded-full font-medium">
-                      Auto-renew
-                    </span>
-                  )
-                )}
-              </div>
-            )}
-
-            {isObleeDomain ? (
-              <div className="p-5 bg-indigo-50 rounded-2xl border-2 border-indigo-200">
-                <div className="flex items-start gap-3">
-                  {generateIcon("check%20circle-68-1658234612.png", 32, "var(--color-indigo-900)")}
-                  <div>
-                    <div className="text-sm font-semibold text-indigo-900 mb-1">
-                      Free SSL Included
-                    </div>
-                    <div className="text-xs text-indigo-900">
-                      Your .opsh.io domain includes free SSL with no expiration. Certificate renewal is available for custom domains.
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className="p-4 bg-gray-50 rounded-2xl border-2 border-gray-200">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="flex items-center gap-6 flex-1">
-                      <div>
-                        <div className="text-xs text-gray-500 mb-0.5">Issuer</div>
-                        <div className="text-sm font-semibold text-black">{sslData?.issuer || "Let's Encrypt"}</div>
-                      </div>
-                      <div>
-                        <div className="text-xs text-gray-500 mb-0.5">Expires</div>
-                        <div className="text-sm font-semibold text-black">
-                          {sslData?.expiresAt ? new Date(sslData.expiresAt).toLocaleDateString() : 'N/A'}
-                        </div>
-                      </div>
-                    </div>
-                    
-                    {sslData?.enabled && (
-                      <button
-                        onClick={handleRenewSSL}
-                        disabled={isRenewingSSL}
-                        title={sslData?.daysUntilExpiry > 7 ? `Renewal available in ${sslData?.daysUntilExpiry - 7} days` : ''}
-                        className={`${
-                          sslData?.status === 'expired' || sslData?.status === 'expiring_soon'
-                            ? 'bg-amber-600 hover:bg-amber-700'
-                            : 'bg-emerald-600 hover:bg-emerald-700'
-                        } text-white text-sm font-semibold border-0 px-4 py-2 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap`}
-                      >
-                        {isRenewingSSL ? 'Renewing...' : (sslData?.status === 'expired' ? 'Renew Now' : 'Renew')}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Custom Domain & DNS Configuration */}
-      {showCustomDomainSection && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Add Custom Domain - Left Section */}
-          <div className="space-y-6">
-            <div className="bg-white rounded-xl  p-6">
-              <div className="flex items-center gap-3 mb-5">
-                <div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
-                  <Plus className="h-5 w-5 text-blue-600" />
-                </div>
-                <div>
-                  <h3 className=" font-bold text-black">Custom Domain</h3>
-                  <p className="text-sm text-gray-500">Configure your own domain</p>
-                </div>
-              </div>
-
-              <div className="space-y-5">
-                <div>
-                  <label className="block text-sm font-semibold text-gray-700 mb-3">
-                    Domain Name
-                  </label>
-                  <input
-                    placeholder="yourdomain.com"
-                    value={newDomain}
-                    onChange={(e) => setNewDomain(e.target.value)}
-                    className="w-full bg-white border-2 border-gray-300 text-black rounded-2xl px-4 py-3"
-                  />
-                </div>
-
-                {/* WWW Toggle */}
-                <div className="flex items-center justify-between p-4 bg-gray-50 rounded-2xl border-2 border-gray-200">
-                  <div>
-                    <div className="text-sm font-semibold text-black">Include WWW subdomain</div>
-                    <div className="text-xs text-gray-500 mt-0.5">Also configure www.{newDomain || 'yourdomain.com'}</div>
-                  </div>
-                  <button
-                    onClick={() => setIncludeWww(!includeWww)}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${includeWww ? 'bg-black' : 'bg-gray-300'
-                      }`}
-                  >
-                    <span
-                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${includeWww ? 'translate-x-6' : 'translate-x-1'
-                        }`}
-                    />
-                  </button>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  onClick={handleSubmitDomains}
-                  className="flex items-center justify-center w-full bg-black hover:bg-gray-800 gap-2 text-white font-semibold border-0 py-4 text-sm rounded-2xl transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl"
-                  disabled={!newDomain.trim() || isSubmitting}
-                >
-                  {isSubmitting ? (
-                    <>
-                      Configuring...
-                    </>
-                  ) : (
-                    <>
-                      Submit & Configure
-                    </>
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* DNS Configuration OR Logs Section - Right Section */}
-          {(isSubmitting || logs.length > 0) ? (
-            /* Logs Section - Shows after submit */
-            <div className="bg-white rounded-xl  p-6 h-fit sticky top-6 animate-in fade-in duration-300">
-              <div className="flex items-center gap-3 mb-5">
-                <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center">
-                  {generateIcon("terminal-184-1658431404.png", 24, "black")}
-                </div>
-                <div>
-                  <h3 className=" font-bold text-black">Process Logs</h3>
-                  <p className="text-sm text-gray-500">SSL & Configuration logs</p>
-                </div>
-              </div>
-
-              <div className="bg-white rounded-2xl  p-5 text-xs text-black h-80 overflow-y-auto ">
-                <div className="space-y-1.5">
-                  {logs.map((log, index) => (
-                    <div key={index} className="leading-relaxed">
-                      {log}
-                    </div>
-                  ))}
-                  {isSubmitting && (
-                    <div className="leading-relaxed animate-pulse">
-                      {generateIcon("flash%20refresh-94-1658434699.png", 20, "rgba(255, 255, 255, 0.25)")}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          ) : (
-            /* DNS Configuration - Shows before submit */
-            <div className="bg-white rounded-xl  p-6">
-              <div className="flex items-center gap-3 mb-5">
-                <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
-                  {generateIcon("server%20tree-57-1658435258.png", 24, "var(--color-purple-600)")}
-                </div>
-                <div>
-                  <h3 className=" font-bold text-black">DNS Configuration</h3>
-                  <p className="text-sm text-gray-500">Add these records to your DNS</p>
-                </div>
-              </div>
-
-              <div className="space-y-5">
-                <div className="p-5 bg-purple-50 rounded-2xl border-2 border-purple-200">
-                  <div className="text-xs font-semibold text-purple-900 mb-4 uppercase tracking-wider">
-                    Add these DNS records
-                  </div>
-                  <div className="space-y-3">
-                    {dnsRecords.length > 0 ? (
-                      dnsRecords.map((record, i) => (
-                        <div key={i} className="bg-white rounded-2xl p-4 border-2 border-purple-100">
-                          <div className="flex items-center justify-between mb-2">
-                            <div className="flex flex-col">
-                              <span className="text-xs font-semibold text-gray-500">{record.type} Record</span>
-                              <span className="text-xs text-gray-400 mt-0.5">
-                                {record.host} → {record.value || "loading..."}
-                              </span>
-                            </div>
-                            {record.value && (
-                              <button
-                                onClick={() => copyToClipboard(record.value)}
-                                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
-                                title="Copy"
-                              >
-                                {generateIcon("copy%201-34-1662364367.png", 20, "rgb(0, 0, 0, 0.5)")}
-                              </button>
-                            )}
-                          </div>
-                          <code className="text-xs text-black block">{record.value || "—"}</code>
-                        </div>
-                      ))
-                    ) : (
-                      <>
-                        {/* Placeholder before submit */}
-                        <div className="bg-white rounded-2xl p-4 border-2 border-purple-100">
-                          <div className="flex flex-col">
-                            <span className="text-xs font-semibold text-gray-500">
-                              {dnsMode === "selfhosted" ? "A Record" : "CNAME Record"}
-                            </span>
-                            <span className="text-xs text-gray-400 mt-0.5">
-                              @ → {dnsMode === "selfhosted" ? "your server IP" : "provided after connecting"}
-                            </span>
-                          </div>
-                        </div>
-                        <div className="bg-white rounded-2xl p-4 border-2 border-purple-100">
-                          <div className="flex flex-col">
-                            <span className="text-xs font-semibold text-gray-500">TXT Record</span>
-                            <span className="text-xs text-gray-400 mt-0.5">
-                              _openship-challenge → project slug
-                            </span>
-                          </div>
-                          <p className="text-xs text-gray-500 mt-2">Records will be provided after you submit the domain below.</p>
-                        </div>
-                      </>
-                    )}
-
-                    {/* WWW CNAME Record - Only show when includeWww is true */}
-                    {includeWww && (
-                      <div className="bg-white rounded-2xl p-4 border-2 border-purple-100 animate-in fade-in duration-200">
-                        <div className="flex items-center justify-between mb-2">
-                          <div className="flex flex-col">
-                            <span className="text-xs font-semibold text-gray-500">
-                              {dnsMode === "selfhosted" ? "A Record (WWW)" : "CNAME Record (WWW)"}
-                            </span>
-                            <span className="text-xs text-gray-400 mt-0.5">
-                              www → {dnsRecords.find((r) => r.type !== "TXT")?.value || "same as above"}
-                            </span>
-                          </div>
-                          {dnsRecords.find((r) => r.type !== "TXT")?.value && (
-                            <button
-                              onClick={() => copyToClipboard(dnsRecords.find((r) => r.type !== "TXT")!.value)}
-                              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
-                              title="Copy"
-                            >
-                              <Copy className="h-3 w-3 text-gray-400" />
-                            </button>
-                          )}
-                        </div>
-                        <code className="text-xs text-black block">
-                          {dnsRecords.find((r) => r.type !== "TXT")?.value || "—"}
-                        </code>
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                <div className="p-4 bg-blue-50 rounded-2xl border-2 border-blue-200">
-                  <p className="text-xs text-blue-800 leading-relaxed">
-                    <span className="font-semibold">Note:</span> DNS changes can take up to 48 hours to propagate globally.
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};