From fbc4ded1c9a76e2fd0dc9a3690f15cd4af757271 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 10 Apr 2025 16:02:14 +0200 Subject: [PATCH] feat: add tabs to retry domain --- .../components/domains/nameserverTable.svelte | 2 +- src/lib/components/domains/recordTable.svelte | 2 +- .../add-domain/verify-[domain]/+page.svelte | 6 +- .../verificationFieldset.svelte | 63 ------------- .../domains/retryDomainModal.svelte | 89 ++++++++++++++++--- .../sites/site-[site]/domains/table.svelte | 19 +++- 6 files changed, 98 insertions(+), 83 deletions(-) delete mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/verificationFieldset.svelte diff --git a/src/lib/components/domains/nameserverTable.svelte b/src/lib/components/domains/nameserverTable.svelte index 2dcd252c0..be059890f 100644 --- a/src/lib/components/domains/nameserverTable.svelte +++ b/src/lib/components/domains/nameserverTable.svelte @@ -7,7 +7,7 @@ export let verified = false; const nameserverList = $consoleVariables?._APP_DOMAINS_NAMESERVERS - ? $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',') + ? $consoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',') : ['ns1.appwrite.io', 'ns2.appwrite.io']; diff --git a/src/lib/components/domains/recordTable.svelte b/src/lib/components/domains/recordTable.svelte index aefeada81..dba63ac6d 100644 --- a/src/lib/components/domains/recordTable.svelte +++ b/src/lib/components/domains/recordTable.svelte @@ -15,7 +15,7 @@ export let verified = false; export let variant: 'cname' | 'a' | 'aaaa'; - let subdomain = domain.split('.').slice(0, -2).join('.'); + let subdomain = domain?.split('.')?.slice(0, -2)?.join('.'); function setTarget() { switch (variant) { diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte index f484631bc..f11d13849 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte @@ -9,7 +9,6 @@ Tabs, Typography } from '@appwrite.io/pink-svelte'; - import VerificationFieldset from './verificationFieldset.svelte'; import { Button, Form } from '$lib/elements/forms'; import { sdk } from '$lib/stores/sdk'; import { organization } from '$lib/stores/organization'; @@ -28,8 +27,10 @@ let { data } = $props(); const ruleId = page.url.searchParams.get('rule'); + let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3); + let selectedTab: 'cname' | 'nameserver' | 'a' | 'aaaa' = $state( - !!$consoleVariables._APP_DOMAIN_TARGET_CNAME + !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain ? 'cname' : !!$consoleVariables._APP_DOMAIN_TARGET_A ? 'a' @@ -41,7 +42,6 @@ let routeBase = `${base}/project-${page.params.project}/sites/site-${page.params.site}/domains`; let isSubmitting = $state(writable(false)); - let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3); async function verify() { const isNewDomain = diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/verificationFieldset.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/verificationFieldset.svelte deleted file mode 100644 index 2e52df9a6..000000000 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/verificationFieldset.svelte +++ /dev/null @@ -1,63 +0,0 @@ - - -
- -
- - {#if isSubDomain} - (selectedTab = 'cname')} - active={selectedTab === 'cname'}> - CNAME - - {/if} - {#if isCloud} - (selectedTab = 'nameserver')} - active={selectedTab === 'nameserver'}> - Nameservers - - {/if} - {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'} - (selectedTab = 'a')} - active={selectedTab === 'a'}> - A - - {/if} - {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'} - (selectedTab = 'aaaa')} - active={selectedTab === 'aaaa'}> - AAAA - - {/if} - - -
- {#if selectedTab === 'nameserver'} - - {:else} - - {/if} - - -
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte index cfd18874c..2eb893de3 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte @@ -7,16 +7,42 @@ import { Submit, trackEvent, trackError } from '$lib/actions/analytics'; import { Dependencies } from '$lib/constants'; import type { Models } from '@appwrite.io/console'; - import CnameTable from '$lib/components/domains/cnameTable.svelte'; + import { Divider, Tabs } from '@appwrite.io/pink-svelte'; + import { consoleVariables } from '$routes/(console)/store'; + import { isCloud } from '$lib/system'; + import { page } from '$app/state'; + import NameserverTable from '$lib/components/domains/nameserverTable.svelte'; + import RecordTable from '$lib/components/domains/recordTable.svelte'; - export let show = false; - export let selectedDomain: Models.ProxyRule; + let { + show = $bindable(false), + selectedDomain + }: { + show: boolean; + selectedDomain: Models.ProxyRule; + } = $props(); - let error = null; + let isSubDomain = $derived.by(() => + selectedDomain?.domain?.length ? selectedDomain?.domain?.split('.')?.length >= 3 : false + ); + let selectedTab: 'cname' | 'nameserver' | 'a' | 'aaaa' = $state( + !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain + ? 'cname' + : !!$consoleVariables._APP_DOMAIN_TARGET_A + ? 'a' + : !!$consoleVariables._APP_DOMAIN_TARGET_AAAA + ? 'aaaa' + : 'nameserver' + ); + + let verified = $state(false); + + let error = $state(null); async function retryDomain() { try { - await sdk.forProject.proxy.updateRuleVerification(selectedDomain.$id); + const domain = await sdk.forProject.proxy.updateRuleVerification(selectedDomain.$id); await invalidate(Dependencies.SITES_DOMAINS); + verified = domain.status === 'verified'; show = false; addNotification({ type: 'success', @@ -29,16 +55,55 @@ } } - $: if (!show) { - error = null; - } + $effect(() => { + if (!show) { + error = null; + } + }); - {#if selectedDomain} - +
+ + {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'} + (selectedTab = 'cname')} + active={selectedTab === 'cname'}> + CNAME + + {/if} + {#if isCloud} + (selectedTab = 'nameserver')} + active={selectedTab === 'nameserver'}> + Nameservers + + {/if} + {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'} + (selectedTab = 'a')} + active={selectedTab === 'a'}> + A + + {/if} + {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'} + (selectedTab = 'aaaa')} + active={selectedTab === 'aaaa'}> + AAAA + + {/if} + + +
+ {#if selectedTab === 'nameserver'} + + {:else} + {/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte index c0e4bfec4..272458929 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte @@ -5,7 +5,15 @@ import { protocol } from '$routes/(console)/store'; import type { Models } from '@appwrite.io/console'; import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte'; - import { ActionMenu, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte'; + import { + ActionMenu, + Badge, + Icon, + Layout, + Popover, + Table, + Typography + } from '@appwrite.io/pink-svelte'; import DeleteDomainModal from './deleteDomainModal.svelte'; import RetryDomainModal from './retryDomainModal.svelte'; import { columns } from './store'; @@ -34,6 +42,13 @@ {domain.domain} + {#if domain.status !== 'verified'} + + {/if} {:else if column.id === 'target'} @@ -64,7 +79,6 @@ { - e.preventDefault(); selectedDomain = domain; showRetry = true; toggle(e); @@ -76,7 +90,6 @@ status="danger" leadingIcon={IconTrash} on:click={(e) => { - e.preventDefault(); selectedDomain = domain; showDelete = true; toggle(e);