abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(deploy): move custom domain toggle from Review to Optional Services step

Browse Source 
The custom domain option now lives in Step 2 alongside Redis, RabbitMQ,
and Elasticsearch, styled consistently as a toggle card. The Review step
remains a read-only summary.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
keyhan
2026-05-14 00:53:04 +03:30
parent 30ccfa4ee2
commit e8be7fbf03
1 changed files with 45 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/dashboard/deploy/page.tsx
+45 -42
View File
@@ -1472,6 +1472,51 @@ export default function DeployPage() {
: 'Each enabled service adds to the monthly cost. Services are deployed in your namespace.'}
</p>
)}
{/* Custom Domain */}
<div className="mt-4 space-y-3">
<div className={`p-4 rounded-xl border-2 text-left transition-all ${
enableCustomDomain
? 'border-purple-400 bg-purple-50 shadow-sm'
: 'border-gray-200 bg-white hover:border-gray-300'
}`}>
<button
type="button"
onClick={() => setEnableCustomDomain(!enableCustomDomain)}
className="w-full text-left"
>
<div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${enableCustomDomain ? 'bg-purple-100' : 'bg-gray-100'}`}>
<Globe className={`w-6 h-6 ${enableCustomDomain ? 'text-purple-500' : 'text-gray-400'}`} />
</div>
<div>
<p className="font-semibold text-gray-900">Custom Domain</p>
<p className="text-xs text-gray-500">
Use your own domain with free SSL
{domainPriceData && domainPriceData.monthlyPrice > 0 && (
<span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman/mo</span>
)}
</p>
</div>
</div>
</button>
{enableCustomDomain && (
<div className="mt-3 pt-3 border-t border-purple-200 space-y-2">
<label className="block text-xs text-gray-600">Domain Address</label>
<input
type="text"
value={customDomainInput}
onChange={(e) => setCustomDomainInput(e.target.value)}
placeholder="example.com or www.example.com"
className="input-field w-full font-mono text-sm"
/>
<p className="text-xs text-purple-600">
After deployment, configure your DNS records. Instructions will be shown on the app detail page.
</p>
</div>
)}
</div>
</div>
</div>
{/* App Storage Size (all app types) */}
@@ -1937,48 +1982,6 @@ export default function DeployPage() {
)}
</div>
{/* Custom Domain Option */}
<div className="bg-white rounded-xl p-5 border border-gray-200">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3 min-w-0">
<div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center shrink-0">
<Globe className="w-5 h-5 text-purple-600" />
</div>
<div className="min-w-0">
<h3 className="text-sm font-semibold text-gray-800">Custom Domain</h3>
<p className="text-xs text-gray-500">
Use your own domain with free SSL
{domainPriceData && domainPriceData.monthlyPrice > 0 && (
<span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman/mo</span>
)}
</p>
</div>
</div>
<button
type="button"
onClick={() => setEnableCustomDomain(!enableCustomDomain)}
className={`relative shrink-0 w-11 h-6 rounded-full transition-colors ${enableCustomDomain ? 'bg-purple-600' : 'bg-gray-300'}`}
>
<span className={`block absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${enableCustomDomain ? 'translate-x-5' : 'translate-x-0'}`} />
</button>
</div>
{enableCustomDomain && (
<div className="mt-4 pt-4 border-t border-gray-100">
<label className="block text-sm font-medium text-gray-700 mb-2">Domain Address</label>
<input
type="text"
value={customDomainInput}
onChange={(e) => setCustomDomainInput(e.target.value)}
placeholder="example.com or www.example.com"
className="input-field w-full font-mono text-sm"
/>
<p className="text-xs text-gray-400 mt-2">
After deployment, you will need to configure your DNS records. Full instructions will be shown on the application detail page.
</p>
</div>
)}
</div>
{/* Cost Breakdown */}
<div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-5 sm:p-6 border border-emerald-200">
<h3 className="text-sm font-semibold text-gray-700 flex items-center gap-2 mb-3">