Skip to content

Commit e7528d0

Browse files
acoshiftacoshift
authored
domain: add downgrade page (#72)
* domain: add downgrade page * cleanup * fix jsdoc
1 parent 3ac62ec commit e7528d0

3 files changed

Lines changed: 165 additions & 23 deletions

File tree

‎src/routes/(auth)/(project)/domain/cdn-downgrade/+page.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { redirect, error } from '@sveltejs/kit'
2+
import api from '$lib/api'
3+
4+
export async function load ({ url, parent, fetch }) {
5+
const { project } = await parent()
6+
const domainName = url.searchParams.get('domain')
7+
8+
/** @type {Api.Response<Api.Domain>} */
9+
const domain = await api.invoke('domain.get', { project, domain: domainName }, fetch)
10+
if (!domain.ok) {
11+
if (domain.error?.notFound) redirect(302, `/domain?project=${project}`)
12+
error(500, domain.error?.message)
13+
}
14+
if (!domain.result) redirect(302, `/domain?project=${project}`)
15+
if (!domain.result.cdn) redirect(302, `/domain/detail?project=${project}&domain=${domainName}`)
16+
17+
/** @type {Api.Response<Api.Location>} */
18+
const location = await api.invoke('location.get', { id: domain.result.location }, fetch)
19+
if (!location.ok) {
20+
error(500, location.error?.message)
21+
}
22+
if (!location.result) redirect(302, `/domain?project=${project}`)
23+
24+
return {
25+
domain: domain.result,
26+
location: location.result
27+
}
28+
}

‎src/routes/(auth)/(project)/domain/cdn-downgrade/+page.svelte‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<script>
2+
import { onMount } from 'svelte'
3+
import ClipboardJS from 'clipboard'
4+
import { goto } from '$app/navigation'
5+
import * as modal from '$lib/modal'
6+
import api from '$lib/api'
7+
8+
const { data } = $props()
9+
10+
const project = $derived(data.project)
11+
const domain = $derived(data.domain)
12+
const location = $derived(data.location)
13+
14+
onMount(() => {
15+
const copyList = new ClipboardJS('.copy')
16+
return () => {
17+
copyList.destroy()
18+
}
19+
})
20+
21+
function downgradeCdn () {
22+
modal.confirm({
23+
html: `Remove CDN from "${domain.domain}" ?`,
24+
yes: 'Downgrade',
25+
callback: async () => {
26+
const resp = await api.invoke('domain.create', {
27+
project,
28+
location: domain.location,
29+
domain: domain.domain,
30+
wildcard: domain.wildcard,
31+
cdn: false
32+
}, fetch)
33+
if (!resp.ok) {
34+
modal.error({ error: resp.error })
35+
return
36+
}
37+
await goto(`/domain/detail?project=${project}&domain=${domain.domain}`)
38+
}
39+
})
40+
}
41+
</script>
42+
43+
<div class="nm-breadcrumb">
44+
<div class="nm-breadcrumb-item">
45+
<a href={`/domain?project=${project}`} class="nm-link"><h6>Domains</h6></a>
46+
</div>
47+
<div class="nm-breadcrumb-item">
48+
<a href="/domain/detail?project={project}&domain={domain.domain}" class="nm-link"><h6>{domain.domain}</h6></a>
49+
</div>
50+
<div class="nm-breadcrumb-item">
51+
<h6>CDN Downgrade</h6>
52+
</div>
53+
</div>
54+
55+
<br>
56+
<div class="nm-panel is-level-300 _dp-g _g-7">
57+
<div class="lo-12 _g-5">
58+
<h3>
59+
<strong>CDN Downgrade</strong>
60+
</h3>
61+
</div>
62+
63+
<hr>
64+
65+
<div class="content _dp-g _g-6 _w-100pct">
66+
<div class="nm-field">
67+
<label for="input-gsa">Domain</label>
68+
<div class="nm-input">
69+
<input id="input-gsa" value={domain.domain} readonly disabled>
70+
</div>
71+
</div>
72+
<div class="nm-field">
73+
<label for="input-location">Location</label>
74+
<div class="nm-input">
75+
<input id="input-location" value={domain.location} readonly disabled>
76+
</div>
77+
</div>
78+
<div class="nm-field">
79+
<div class="nm-checkbox">
80+
<input id="input-wildcard" type="checkbox" bind:checked={domain.wildcard} disabled readonly>
81+
<label for="input-wildcard">Wildcard</label>
82+
</div>
83+
</div>
84+
85+
<hr>
86+
{#if location.endpoint}
87+
<div class="nm-field">
88+
<label for="input-ip">A Record</label>
89+
{#each [location.endpoint] as ip}
90+
<div class="nm-input -has-icon-right _mgbt-3">
91+
<input id="input-ip" value={ip} readonly disabled>
92+
<span class="icon -is-right copy"
93+
data-clipboard-text={ip}>
94+
<i class="fa-light fa-copy"></i>
95+
</span>
96+
</div>
97+
{/each}
98+
</div>
99+
{/if}
100+
<!--{#if (domain.dnsConfig.ipv6 ?? []).length > 0}-->
101+
<!-- <div class="nm-field">-->
102+
<!-- <label for="input-ipv6">AAAA Record</label>-->
103+
<!-- {#each domain.dnsConfig.ipv6 as ip}-->
104+
<!-- <div class="nm-input -has-icon-right _mgbt-3">-->
105+
<!-- <input id="input-ipv6" value={ip} readonly disabled>-->
106+
<!-- <span class="icon -is-right copy"-->
107+
<!-- data-clipboard-text={ip}>-->
108+
<!-- <i class="fa-light fa-copy"></i>-->
109+
<!-- </span>-->
110+
<!-- </div>-->
111+
<!-- {/each}-->
112+
<!-- </div>-->
113+
<!--{/if}-->
114+
{#if location.cname}
115+
<div class="nm-field">
116+
<label for="input-cname">CNAME Record</label>
117+
{#each [location.cname] as cname}
118+
<div class="nm-input -has-icon-right">
119+
<input id="input-cname" value={cname} readonly disabled>
120+
<span class="icon -is-right copy"
121+
data-clipboard-text={cname}>
122+
<i class="fa-light fa-copy"></i>
123+
</span>
124+
</div>
125+
{/each}
126+
</div>
127+
{/if}
128+
</div>
129+
130+
<hr>
131+
<div class="_dp-f _g-6">
132+
<div class="_dp-f _alit-ct _fw-w">
133+
<button class="nm-button" onclick={downgradeCdn}>Downgrade</button>
134+
</div>
135+
</div>
136+
</div>

‎src/routes/(auth)/(project)/domain/detail/+page.svelte‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -197,28 +197,6 @@
197197
}
198198
})
199199
}
200-
201-
function downgradeCdn () {
202-
modal.confirm({
203-
html: `Remove CDN from "${domain.domain}" ?`,
204-
yes: 'Downgrade',
205-
callback: async () => {
206-
const resp = await api.invoke('domain.create', {
207-
project,
208-
location: domain.location,
209-
domain: domain.domain,
210-
wildcard: domain.wildcard,
211-
cdn: false
212-
}, fetch)
213-
if (!resp.ok) {
214-
modal.error({ error: resp.error })
215-
return
216-
}
217-
await api.invalidate('domain.get')
218-
handleReload()
219-
}
220-
})
221-
}
222200
</script>
223201

224202
<div class="nm-breadcrumb">
@@ -457,7 +435,7 @@
457435
<hr>
458436
{#if domain.cdn}
459437
<div class="_dp-f _alit-ct _fw-w">
460-
<button class="nm-button" onclick={downgradeCdn}>Remove CDN (DDoS Protection)</button>
438+
<a class="nm-button" href="/domain/cdn-downgrade?project={project}&domain={domain.domain}">Remove CDN (DDoS Protection)</a>
461439
</div>
462440
{:else}
463441
<div class="_dp-f _alit-ct _fw-w">

0 commit comments

Comments
 (0)