Refactor domain verification status handling

TorstenDittmann · TorstenDittmann · commit 235fe34c6649 · 2025-05-30T20:25:09.000+02:00
Change verified prop from boolean to boolean|undefined to better represent
three-state verification (undefined/pending, true/verified, false/failed).
Remove "Pending verification" badges and standardize verification error
messages. Fix grid layout for domain metrics and improve error handling
by displaying error messages instead of error objects.
diff --git a/src/lib/components/domains/cnameTable.svelte b/src/lib/components/domains/cnameTable.svelte
@@ -12,7 +12,7 @@
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
 
     export let domain: string;
-    export let verified = false;
+    export let verified = undefined;
 
     let subdomain = domain.split('.').slice(0, -2).join('.');
 </script>
@@ -23,16 +23,10 @@
             <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 {domain}
             </Typography.Text>
-            {#if verified}
-                <Badge variant="secondary" type="success" content="Verified" />
+            {#if verified === true}
+                <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
-                <Badge variant="secondary" type="error" content="Verification failed" />
-            {:else}
-                <Badge
-                    variant="secondary"
-                    type="warning"
-                    size="xs"
-                    content="Pending verification" />
+                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">
diff --git a/src/lib/components/domains/nameserverTable.svelte b/src/lib/components/domains/nameserverTable.svelte
@@ -4,7 +4,7 @@
     import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
 
     export let domain: string;
-    export let verified = false;
+    export let verified = undefined;
 
     const nameserverList = $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS
         ? $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
@@ -16,10 +16,10 @@
         <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
             {domain}
         </Typography.Text>
-        {#if verified}
+        {#if verified === true}
             <Badge variant="secondary" type="success" size="xs" content="Verified" />
         {:else if verified === false}
-            <Badge variant="secondary" type="warning" size="xs" content="Pending verification" />
+            <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
         {/if}
     </Layout.Stack>
     <Typography.Text variant="m-400">
diff --git a/src/lib/components/domains/recordTable.svelte b/src/lib/components/domains/recordTable.svelte
@@ -11,7 +11,7 @@
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
 
     export let domain: string;
-    export let verified = false;
+    export let verified = undefined;
     export let variant: 'cname' | 'a' | 'aaaa';
     export let service: 'sites' | 'general' = 'general';
 
@@ -37,16 +37,10 @@
             <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 {domain}
             </Typography.Text>
-            {#if verified}
+            {#if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
                 <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
-            {:else}
-                <Badge
-                    variant="secondary"
-                    type="warning"
-                    size="xs"
-                    content="Pending verification" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">
diff --git a/src/lib/components/usageCard.svelte b/src/lib/components/usageCard.svelte
@@ -13,8 +13,9 @@
         </Typography.Caption>
         <slot>
             {#if value !== null && value !== undefined}
-                <Typography.Text size="s" truncate color="--fgcolor-neutral-primary"
-                    >{value}</Typography.Text>
+                <Typography.Text size="s" truncate color="--fgcolor-neutral-primary">
+                    {value}
+                </Typography.Text>
             {:else}
                 <Skeleton variant="line" width="100%" height={19.5} />
             {/if}
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte
@@ -43,29 +43,26 @@
     ];
 </script>
 
-<Layout.Grid gap="m" columnsL={2} columns={1}>
-    <Layout.Stack direction="row" gap="m">
-        {#each metrics.slice(0, 3) as metric}
-            {#if metric.description === 'Status'}
-                <UsageCard description={metric.description}>
-                    <Layout.Stack direction="row" gap="xs" alignItems="center">
-                        <Status
-                            label={metric.value.toString()}
-                            status={isDomainVerified ? 'complete' : 'pending'} />
+<Layout.Grid gap="m" columnsL={6} columns={3} columnsS={2} columnsXXS={1}>
+    {#each metrics.slice(0, 3) as metric}
+        {#if metric.description === 'Status'}
+            <UsageCard description={metric.description}>
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Status
+                        --font-size-s="var(--font-size-xs)"
+                        label={metric.value.toString()}
+                        status={isDomainVerified ? 'complete' : 'pending'} />
 
-                        {#if !isDomainVerified}
-                            <Link on:click={retryVerification}>Retry</Link>
-                        {/if}
-                    </Layout.Stack>
-                </UsageCard>
-            {:else}
-                <UsageCard description={metric.description} bind:value={metric.value} />
-            {/if}
-        {/each}
-    </Layout.Stack>
-    <Layout.Stack direction="row" gap="m">
-        {#each metrics.slice(3) as metric}
+                    {#if !isDomainVerified}
+                        <Link size="s" on:click={retryVerification}>Retry</Link>
+                    {/if}
+                </Layout.Stack>
+            </UsageCard>
+        {:else}
             <UsageCard description={metric.description} bind:value={metric.value} />
-        {/each}
-    </Layout.Stack>
+        {/if}
+    {/each}
+    {#each metrics.slice(3) as metric}
+        <UsageCard description={metric.description} bind:value={metric.value} />
+    {/each}
 </Layout.Grid>
diff --git a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
@@ -46,7 +46,8 @@
             } else {
                 addNotification({
                     type: 'error',
-                    message: 'Domain not verified'
+                    message:
+                        'Domain verification failed. Please check your domain settings or try again later'
                 });
             }
         } catch (error) {
@@ -68,21 +69,18 @@
         </div>
         <Layout.Stack gap="s">
             <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Typography.Text variant="l-500" color="--fgcolor-neutral-primary"
-                    >{domain.domain}</Typography.Text>
+                <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                    {domain.domain}
+                </Typography.Text>
 
                 {#if verified === false}
                     <Badge
                         variant="secondary"
                         type="error"
                         size="xs"
                         content="Verification failed" />
-                {:else}
-                    <Badge
-                        variant="secondary"
-                        type="warning"
-                        size="xs"
-                        content="Pending verification" />
+                {:else if verified === true}
+                    <Badge variant="secondary" type="success" size="xs" content="Verified" />
                 {/if}
             </Layout.Stack>
             <Typography.Text variant="m-400">
diff --git a/src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte b/src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte
@@ -31,13 +31,14 @@
             } else {
                 addNotification({
                     type: 'error',
-                    message: `Domain verification failed. Please check your domain settings or try again later`
+                    message:
+                        'Domain verification failed. Please check your domain settings or try again later'
                 });
             }
             await invalidate(Dependencies.DOMAINS);
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
-            error = e;
+            error = e.message;
             trackError(e, Submit.DomainUpdateVerification);
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -82,7 +82,9 @@
                 await goto(routeBase);
                 await invalidate(Dependencies.FUNCTION_DOMAINS);
             } else {
-                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
+                await goto(
+                    `${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}&domain=${domain.$id}`
+                );
                 await invalidate(Dependencies.FUNCTION_DOMAINS);
             }
         } catch (error) {
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
@@ -28,6 +28,7 @@
     let { data } = $props();
 
     const ruleId = page.url.searchParams.get('rule');
+    const domainId = page.url.searchParams.get('domain');
     const isSubDomain = $derived.by(() => isASubdomain(page.params.domain));
 
     let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
@@ -42,14 +43,15 @@
             selectedTab = 'nameserver';
         }
     });
-    let verified = $state(false);
+    let verified: boolean | undefined = $state(undefined);
 
     let routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
     let isSubmitting = $state(writable(false));
 
     async function verify() {
         const isNewDomain =
-            data.domainsList.domains.findIndex((rule) => rule.domain === page.params.domain) === -1;
+            data.domainsList.domains.find((rule) => rule.domain === page.params.domain) ===
+            undefined;
         try {
             if (selectedTab !== 'nameserver') {
                 const ruleData = await sdk
@@ -62,6 +64,13 @@
                     page.params.domain
                 );
                 verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+            } else if (!isNewDomain && isCloud) {
+                const domain = await sdk.forConsole.domains.updateNameservers(domainId);
+                verified = domain.nameservers === 'Appwrite';
+                if (!verified)
+                    throw new Error(
+                        'Domain verification failed. Please check your domain settings or try again later'
+                    );
             }
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte
@@ -27,7 +27,7 @@
             });
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
-            error = e;
+            error = e.message;
             trackError(e, Submit.DomainUpdateVerification);
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte
@@ -94,7 +94,7 @@
 
                         <svelte:fragment slot="tooltip" let:toggle>
                             <ActionMenu.Root>
-                                {#if proxyRule.status !== 'verified'}
+                                {#if proxyRule.status !== 'verified' && proxyRule.status !== 'verifying'}
                                     <ActionMenu.Item.Button
                                         leadingIcon={IconRefresh}
                                         on:click={(e) => {
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
@@ -52,7 +52,9 @@
                 await goto(routeBase);
                 await invalidate(Dependencies.DOMAINS);
             } else {
-                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
+                await goto(
+                    `${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}&domain=${domain.$id}`
+                );
                 await invalidate(Dependencies.DOMAINS);
             }
         } catch (error) {
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
@@ -28,6 +28,7 @@
     let { data } = $props();
 
     const ruleId = page.url.searchParams.get('rule');
+    const domainId = page.url.searchParams.get('domain');
     const isSubDomain = $derived.by(() => isASubdomain(page.params.domain));
 
     let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
@@ -50,7 +51,8 @@
 
     async function verify() {
         const isNewDomain =
-            data.domainsList.domains.findIndex((rule) => rule.domain === page.params.domain) === -1;
+            data.domainsList.domains.find((rule) => rule.domain === page.params.domain) ===
+            undefined;
         try {
             if (selectedTab !== 'nameserver') {
                 const ruleData = await sdk
@@ -63,6 +65,13 @@
                     page.params.domain
                 );
                 verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+            } else if (!isNewDomain && isCloud) {
+                const domain = await sdk.forConsole.domains.updateNameservers(domainId);
+                verified = domain.nameservers === 'Appwrite';
+                if (!verified)
+                    throw new Error(
+                        'Domain verification failed. Please check your domain settings or try again later'
+                    );
             }
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte
@@ -32,7 +32,7 @@
             });
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
-            error = e;
+            error = e.message;
             trackError(e, Submit.DomainUpdateVerification);
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte
@@ -84,7 +84,7 @@
 
                         <svelte:fragment slot="tooltip" let:toggle>
                             <ActionMenu.Root>
-                                {#if domain.status !== 'verified'}
+                                {#if domain.status !== 'verified' && domain.status !== 'verifiying'}
                                     <ActionMenu.Item.Button
                                         leadingIcon={IconRefresh}
                                         on:click={(e) => {
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
@@ -58,12 +58,16 @@
                     .forProject(page.params.region, page.params.project)
                     .proxy.updateRuleVerification(ruleId);
                 verified = ruleData.status === 'verified';
+                console.log(ruleData);
+                throw new Error('Verification failed');
             } else if (isNewDomain && isCloud) {
                 const domainData = await sdk.forConsole.domains.create(
                     $organization.$id,
                     page.params.domain
                 );
                 verified = domainData.nameservers.toLocaleLowerCase() === 'appwrite';
+                console.log(domainData);
+                throw new Error('Verification failed');
             }
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
@@ -36,7 +36,7 @@
             });
             trackEvent(Submit.DomainCreate);
         } catch (e) {
-            error = e;
+            error = e.message;
             trackError(e, Submit.DomainCreate);
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte
@@ -56,7 +56,7 @@
             });
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
-            error = e;
+            error = e.message;
             trackError(e, Submit.DomainUpdateVerification);
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte
@@ -95,7 +95,7 @@
 
                         <svelte:fragment slot="tooltip" let:toggle>
                             <ActionMenu.Root>
-                                {#if rule.status !== 'verified'}
+                                {#if rule.status !== 'verified' && rule.status !== 'verifying'}
                                     <ActionMenu.Item.Button
                                         leadingIcon={IconRefresh}
                                         on:click={(e) => {

Original file line number	Diff line number	Diff line change
`@@ -31,13 +31,14 @@`
`31`	`31`	`} else {`
`32`	`32`	`addNotification({`
`33`	`33`	`type: 'error',`
`34`		- message: `Domain verification failed. Please check your domain settings or try again later`
	`34`	`+ message:`
	`35`	`+ 'Domain verification failed. Please check your domain settings or try again later'`
`35`	`36`	`});`
`36`	`37`	`}`
`37`	`38`	`await invalidate(Dependencies.DOMAINS);`
`38`	`39`	`trackEvent(Submit.DomainUpdateVerification);`
`39`	`40`	`} catch (e) {`
`40`		`- error = e;`
	`41`	`+ error = e.message;`
`41`	`42`	`trackError(e, Submit.DomainUpdateVerification);`
`42`	`43`	`}`
`43`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`});`
`28`	`28`	`trackEvent(Submit.DomainUpdateVerification);`
`29`	`29`	`} catch (e) {`
`30`		`- error = e;`
	`30`	`+ error = e.message;`
`31`	`31`	`trackError(e, Submit.DomainUpdateVerification);`
`32`	`32`	`}`
`33`	`33`	`}`