Handle NS record flow and auto-verification of sub-domains

src/lib/components/domains/nameserverTable.svelte

@@ -3,8 +3,15 @@
 
     import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
 
-    export let domain: string;
-    export let verified = undefined;
+    let {
+        domain,
+        verified,
+        ruleStatus
+    }: {
+        domain: string;
+        verified?: boolean;
+        ruleStatus?: 'created' | 'verifying' | 'unverified' | 'verified';
+    } = $props();
 
     const nameserverList = $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS
         ? $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
@@ -16,14 +23,24 @@
         <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
             {domain}
         </Typography.Text>
-        {#if verified === true}
-            <Badge variant="secondary" type="success" size="xs" content="Verified" />
-        {:else if verified === false}
-            <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
+        {#if verified !== undefined}
+            {#if ruleStatus === 'created'}
+                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+            {:else if ruleStatus === 'verifying'}
+                <Badge variant="secondary" size="xs" content="Generating certificate" />
+            {:else if ruleStatus === 'unverified'}
+                <Badge
+                    variant="secondary"
+                    type="error"
+                    size="xs"
+                    content="Certificate generation failed" />
+            {:else if verified === true}
+                <Badge variant="secondary" type="success" size="xs" content="Verified" />
+            {/if}
         {/if}
     </Layout.Stack>
     <Typography.Text variant="m-400">
-        Add the following nameservers on your DNS provider. Note that changes may take up to 48
+        Add the following nameservers on your DNS provider. Note that DNS changes may take up to 48
         hours to propagate fully.
     </Typography.Text>
 </Layout.Stack>

src/lib/components/domains/recordTable.svelte

@@ -14,10 +14,10 @@
 
     let {
         domain,
-        verified = undefined,
+        verified,
         variant,
         service = 'general',
-        ruleStatus = undefined,
+        ruleStatus,
         onNavigateToNameservers = () => {},
         onNavigateToA = () => {},
         onNavigateToAAAA = () => {}
@@ -115,7 +115,9 @@
         </svelte:fragment>
         <Table.Row.Base {root}>
             <Table.Cell column="type" {root}>{variant.toUpperCase()}</Table.Cell>
-            <Table.Cell column="name" {root}>{subdomain || '@'}</Table.Cell>
+            <Table.Cell column="name" {root}>
+                <InteractiveText variant="copy" isVisible text={subdomain || '@'} />
+            </Table.Cell>
             <Table.Cell column="value" {root}>
                 <InteractiveText variant="copy" isVisible text={setTarget()} />
             </Table.Cell>

src/routes/(console)/organization-[organization]/domains/+page.svelte

@@ -93,9 +93,9 @@
                                         {#if !isDomainVerified(domain)}
                                             <Badge
                                                 variant="secondary"
-                                                type="warning"
+                                                type="error"
                                                 content="Not verified"
-                                                size="s" />
+                                                size="xs" />
                                         {/if}
                                     </Layout.Stack>
                                 {:else if column.id === 'registrar'}

src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { goto } from '$app/navigation';
     import { Button, Form } from '$lib/elements/forms';
     import { InputDomain } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
@@ -23,7 +24,16 @@
                 teamId: page.params.organization,
                 domain: domainName.toLocaleLowerCase()
             });
-            invalidate(Dependencies.DOMAINS);
+
+            await invalidate(Dependencies.DOMAINS);
+            const verified = domain.nameservers.toLowerCase() === 'appwrite';
+            if (verified) {
+                await goto(backPage);
+                addNotification({
+                    type: 'success',
+                    message: 'Domain verified successfully'
+                });
+            }
         } catch (error) {
             addNotification({
                 type: 'error',

src/routes/(console)/organization-[organization]/domains/recordsCard.svelte

@@ -39,7 +39,7 @@
             if (verified) {
                 addNotification({
                     type: 'success',
-                    message: 'Domain verified'
+                    message: 'Domain verified successfully'
                 });
 
                 await goto(routeBase);
@@ -76,16 +76,16 @@
                 {#if verified === false}
                     <Badge
                         variant="secondary"
-                        type="warning"
+                        type="error"
                         size="xs"
                         content="Verification failed" />
                 {:else if verified === true}
                     <Badge variant="secondary" type="success" size="xs" content="Verified" />
                 {/if}
             </Layout.Stack>
             <Typography.Text variant="m-400">
-                Add the following nameservers on your DNS provider. Note that changes may take up to
-                48 hours to propagate fully.
+                Add the following nameservers on your DNS provider. Note that DNS changes may take
+                up to 48 hours to propagate fully.
             </Typography.Text>
         </Layout.Stack>
 

src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte

@@ -32,17 +32,20 @@
             const domain = await sdk.forConsole.domains.updateNameservers({
                 domainId: selectedDomain.$id
             });
-            if (domain.nameservers.toLowerCase() === 'appwrite') {
-                show = false;
-                addNotification({
-                    type: 'success',
-                    message: `${selectedDomain.domain} has been verified`
-                });
-            } else {
-                error =
-                    'Domain verification failed. Please check your domain settings or try again later';
-            }
+
             await Promise.all([invalidate(Dependencies.DOMAIN), invalidate(Dependencies.DOMAINS)]);
+
+            const verified = domain?.nameservers.toLowerCase() === 'appwrite';
+            if (!verified) {
+                throw new Error(
+                    'Domain verification failed. Please check your domain settings or try again later'
+                );
+            }
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Domain verified successfully'
+            });
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
             error = e.message;
@@ -64,8 +67,8 @@
                 >{selectedDomain.domain}</Typography.Text>
         </Layout.Stack>
         <Typography.Text variant="m-400">
-            Add the following nameservers on your DNS provider. Note that changes may take up to 48
-            hours to propagate fully.
+            Add the following nameservers on your DNS provider. Note that DNS changes may take up to
+            48 hours to propagate fully.
         </Typography.Text>
     </Layout.Stack>
 

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte

@@ -48,16 +48,24 @@
 
     async function addDomain() {
         const apexDomain = getApexDomain(domainName);
-        let domain = data.domainsList.domains.find((d: Models.Domain) => d.domain === apexDomain);
+        const domain = data.domainsList.domains.find((d: Models.Domain) => d.domain === apexDomain);
 
         if (apexDomain && !domain && isCloud) {
             try {
-                domain = await sdk.forConsole.domains.create({
+                await sdk.forConsole.domains.create({
                     teamId: $project.teamId,
                     domain: apexDomain
                 });
             } catch (error) {
-                // Apex domain creation error needs to be silent.
+                // apex might already be added on organization level, skip.
+                const alreadyAdded = error?.type === 'domain_already_exists';
+                if (!alreadyAdded) {
+                    addNotification({
+                        type: 'error',
+                        message: error.message
+                    });
+                    return;
+                }
             }
         }
 
@@ -89,12 +97,18 @@
                         functionId: page.params.function
                     });
             }
-            if (rule?.status === 'verified') {
+
+            await invalidate(Dependencies.FUNCTION_DOMAINS);
+
+            const verified = rule?.status !== 'created';
+            if (verified) {
+                addNotification({
+                    type: 'success',
+                    message: 'Domain verified successfully'
+                });
                 await goto(routeBase);
-                await invalidate(Dependencies.FUNCTION_DOMAINS);
             } else {
                 await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
-                await invalidate(Dependencies.FUNCTION_DOMAINS);
             }
         } catch (error) {
             addNotification({

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte

@@ -11,7 +11,6 @@
     } from '@appwrite.io/pink-svelte';
     import { Button, Form } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
-    import { organization } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
@@ -23,6 +22,7 @@
     import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
     import RecordTable from '$lib/components/domains/recordTable.svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import { getApexDomain } from '$lib/helpers/tlds.js';
 
     let { data } = $props();
 
@@ -44,6 +44,7 @@
     );
     const showNSTab = isCloud;
 
+    let proxyRule = $derived(data.proxyRule);
     let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>(getDefaultTab());
     let routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
     let verified: boolean | undefined = $state(undefined);
@@ -54,44 +55,35 @@
     }
 
     async function verify() {
-        const isNewDomain =
-            data.domainsList.domains.find((rule) => rule.domain === data.proxyRule.domain) ===
-            undefined;
+        verified = undefined;
+
         try {
-            if (selectedTab !== 'nameserver') {
-                const ruleData = await sdk
-                    .forProject(page.params.region, page.params.project)
-                    .proxy.updateRuleVerification({ ruleId });
-                verified = ruleData.status === 'verified';
+            const apexDomain = getApexDomain(proxyRule.domain);
+            const domain = data.domainsList.domains.find((d) => d.domain === apexDomain);
 
-                // This means domain verification using DNS records hasn't succeeded and the rule is still in initial state.
-                if (ruleData.status === 'created') {
-                    throw new Error(
-                        'Domain verification failed. Please check your domain settings or try again later'
-                    );
-                }
-            } else if (isNewDomain && isCloud) {
-                const domainData = await sdk.forConsole.domains.create({
-                    teamId: $organization.$id,
-                    domain: data.proxyRule.domain
+            if (isCloud && domain) {
+                await sdk.forConsole.domains.updateNameservers({
+                    domainId: domain.$id
                 });
-                verified = domainData.nameservers.toLowerCase() === 'appwrite';
             }
+        } catch (error) {
+            // Ignore error
+        }
 
-            if (verified) {
-                addNotification({
-                    type: 'success',
-                    message: 'Domain added successfully'
-                });
-            } else {
-                addNotification({
-                    type: 'info',
-                    message: 'Verification in progress'
-                });
-            }
+        try {
+            proxyRule = await sdk
+                .forProject(page.params.region, page.params.project)
+                .proxy.updateRuleVerification({ ruleId });
+
+            await Promise.all([
+                invalidate(Dependencies.DOMAINS),
+                invalidate(Dependencies.FUNCTION_DOMAINS)
+            ]);
             await goto(routeBase);
-            await invalidate(Dependencies.DOMAINS);
-            await invalidate(Dependencies.FUNCTION_DOMAINS);
+            addNotification({
+                type: 'success',
+                message: 'Domain verified successfully'
+            });
         } catch (error) {
             verified = false;
             isSubmitting.set(false);
@@ -108,7 +100,7 @@
                 .forProject(page.params.region, page.params.project)
                 .proxy.deleteRule({ ruleId });
         }
-        await goto(`${routeBase}/add-domain?domain=${data.proxyRule.domain}`);
+        await goto(`${routeBase}/add-domain?domain=${proxyRule.domain}`);
     }
 </script>
 
@@ -125,7 +117,7 @@
                         <Icon icon={IconGlobeAlt} color="--fgcolor-neutral-primary" />
 
                         <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
-                            {data.proxyRule.domain}
+                            {proxyRule.domain}
                         </Typography.Text>
                     </Layout.Stack>
                     <Button secondary on:click={back}>Change</Button>
@@ -172,14 +164,17 @@
                         <Divider />
                     </div>
                     {#if selectedTab === 'nameserver'}
-                        <NameserverTable domain={data.proxyRule.domain} {verified} />
+                        <NameserverTable
+                            {verified}
+                            domain={proxyRule.domain}
+                            ruleStatus={proxyRule.status} />
                     {:else}
                         <RecordTable
                             {verified}
                             service="functions"
                             variant={selectedTab}
-                            domain={data.proxyRule.domain}
-                            ruleStatus={data.proxyRule.status}
+                            domain={proxyRule.domain}
+                            ruleStatus={proxyRule.status}
                             onNavigateToNameservers={() => (selectedTab = 'nameserver')}
                             onNavigateToA={() => (selectedTab = 'a')}
                             onNavigateToAAAA={() => (selectedTab = 'aaaa')} />

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte

@@ -25,8 +25,8 @@
                     <Badge variant="secondary" type="warning" content="Pending verification" />
                 </Layout.Stack>
                 <Typography.Text variant="m-400">
-                    Add the following nameservers on your DNS provider. Note that changes may take
-                    up to 48 hours to propagate fully.
+                    Add the following nameservers on your DNS provider. Note that DNS changes may
+                    take up to 48 hours to propagate fully.
                 </Typography.Text>
             </Layout.Stack>