feat: domains fixes

2026-06-06 19:27:48 +00:00 · 2025-03-18 17:37:18 +01:00
parent 9c79c87977
commit 358b12ada7
7 changed files with 170 additions and 102 deletions
@@ -97,7 +97,7 @@

                                <svelte:fragment slot="tooltip" let:toggle>
                                    <ActionMenu.Root>
-                                        <!-- {#if domain.status !== 'verified'}
+                                        {#if domain.nameservers !== 'Appwrite'}
                                            <ActionMenu.Item.Button
                                                leadingIcon={IconRefresh}
                                                on:click={(e) => {
@@ -105,13 +105,16 @@
                                                    selectedDomain = domain;
                                                    showRetry = true;
                                                    toggle(e);
-                                                    trackEvent(Click.DomainRetryDomainVerificationClick, {
-                                                    source: 'organization_domain_overview'
-                                                });
+                                                    trackEvent(
+                                                        Click.DomainRetryDomainVerificationClick,
+                                                        {
+                                                            source: 'organization_domain_overview'
+                                                        }
+                                                    );
                                                }}>
                                                Retry
                                            </ActionMenu.Item.Button>
-                                        {/if} -->
+                                        {/if}
                                        <ActionMenu.Item.Button
                                            status="danger"
                                            leadingIcon={IconTrash}
@@ -189,6 +192,6 @@
    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
 {/if}

-<!-- {#if showRetry}
+{#if showRetry}
    <RetryDomainModal show={showRetry} {selectedDomain} />
-{/if} -->
+{/if}
@@ -12,7 +12,7 @@
    import { Dependencies } from '$lib/constants';
    import type { Domain } from '$lib/sdk/domains';

-    const backPage = `${base}/project-${$page.params.organization}/domains`;
+    const backPage = `${base}/organization-${$page.params.organization}/domains`;

    let domainName = '';
    let domain: Domain;
@@ -31,7 +31,7 @@
    }
 </script>

-<Wizard title="Add domain" href={backPage} column columnSize="s" hideFooter={!domain}>
+<Wizard title="Add domain" href={backPage} column columnSize="s" hideFooter>
    {#if domain}
        <RecordsCard {domain} />
    {:else}
@@ -54,11 +54,4 @@
            </Form>
        </Fieldset>
    {/if}
-
-    <svelte:fragment slot="footer">
-        <Button text href={backPage}>Cancel</Button>
-        {#if domain}
-            <Button secondary href={backPage}>Skip to console</Button>
-        {/if}
-    </svelte:fragment>
 </Wizard>
@@ -18,7 +18,7 @@
    import { IconDownload, IconPlus, IconUpload } from '@appwrite.io/pink-icons-svelte';
    import { ViewSelector } from '$lib/components';
    import { View } from '$lib/helpers/load';
-    import { columns } from './store';
+    import { columns, presets } from './store';
    import CreateRecordModal from './createRecordModal.svelte';
    import Table from './table.svelte';
    import AddPresetModal from './addPresetModal.svelte';
@@ -30,8 +30,6 @@
    let showPresetModal = false;
    let showImportModal = false;
    let selectedPreset = '';
-
-    const presets = ['Zoho', 'Mailgun', 'Outlook', 'Proton Mail', 'iCloud', 'Google Workspace'];
 </script>

 <Container>
@@ -54,7 +52,7 @@
                        </Tooltip>
                    </Layout.Stack>
                    <Layout.Stack direction="row" gap="s" inline>
-                        <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+                        <ViewSelector view={View.Table} {columns} hideView />
                        <Popover let:toggle padding="none">
                            <Button secondary on:click={toggle}>Add preset</Button>
                            <svelte:fragment slot="tooltip" let:toggle>
@@ -7,23 +7,57 @@
    import { capitalize } from '$lib/helpers/string';
    import { sdk } from '$lib/stores/sdk';
    import { page } from '$app/stores';
+    import type { DnsRecordsList } from '$lib/sdk/domains';
+    import { presets } from './store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';

    export let show = false;
-    export let selectedPreset;
+    export let selectedPreset: (typeof presets)[number];
+    let records: DnsRecordsList;
    let error = '';
-
    async function fetchPreset() {
        switch (selectedPreset.toLowerCase()) {
            //TODO: finish switch statement
            case 'zoho':
-                return await sdk.forConsole.domains.getPresetZoho($page.params.domain);
+                records = await sdk.forConsole.domains.getPresetZoho($page.params.domain);
+                return records;
+            case 'google workspace':
+                records = await sdk.forConsole.domains.getPresetGoogleWorkspace(
+                    $page.params.domain
+                );
+                return records;
+            case 'outlook':
+                records = await sdk.forConsole.domains.getPresetOutlook($page.params.domain);
+                return records;
+            case 'proton mail':
+                records = await sdk.forConsole.domains.getPresetProtonMail($page.params.domain);
+                return records;
+            case 'mailgun':
+                records = await sdk.forConsole.domains.getPresetMailgun($page.params.domain);
+                return records;
+            case 'icloud':
+                records = await sdk.forConsole.domains.getPresetICloud($page.params.domain);
+                return records;
        }
    }

    async function handleSubmit() {
        try {
            //TODO: create DNS records
-
+            if (records.total) {
+                const promises = records.dnsRecords.map((record) =>
+                    sdk.forConsole.domains.createRecordMX(
+                        $page.params.domain,
+                        record.name,
+                        record.value,
+                        record.ttl,
+                        record.priority
+                    )
+                );
+                await Promise.all(promises);
+            }
+            invalidate(Dependencies.DOMAIN);
            show = false;
            addNotification({
                type: 'success',
@@ -69,8 +103,7 @@
                </Table.Row>
            {/each}
        {:then presetData}
-            {JSON.stringify(presetData)}
-            {#each presetData as record}
+            {#each presetData.dnsRecords as record}
                <Table.Row>
                    <Table.Cell>{record.type}</Table.Cell>
                    <Table.Cell>{record.name}</Table.Cell>
@@ -66,3 +66,5 @@ export const recordTypes = [
        helper: 'ALIAS records are similar to CNAMEs but can be used for the root domain, allowing you to point your domain to another domain or server.'
    }
 ];
+
+export const presets = ['Zoho', 'Mailgun', 'Outlook', 'Proton Mail', 'iCloud', 'Google Workspace'];
@@ -1,20 +1,20 @@
 <script lang="ts">
-    import { Copy } from '$lib/components';
    import { Link } from '$lib/elements';
    import { Button } from '$lib/elements/forms';
    import type { Domain } from '$lib/sdk/domains';
    import { addNotification } from '$lib/stores/notifications';
    import { sdk } from '$lib/stores/sdk';
    import { consoleVariables } from '$routes/(console)/store';
-    import { IconDuplicate, IconInfo } from '@appwrite.io/pink-icons-svelte';
    import {
        Badge,
        Layout,
        Typography,
        Table,
        Fieldset,
-        Icon,
-        Divider
+        Divider,
+        Tabs,
+        Input,
+        InteractiveText
    } from '@appwrite.io/pink-svelte';

    export let domain: Domain;
@@ -30,7 +30,7 @@
    async function verifyStatus() {
        try {
            domain = await sdk.forConsole.domains.updateNameservers(domain.$id);
-            verified = domain.nameservers === nameservers;
+            verified = domain.nameservers === 'Appwrite';
            console.log(domain);
        } catch (error) {
            addNotification({
@@ -40,73 +40,68 @@
        }
    }

-    async function back() {
-        try {
-            await sdk.forConsole.domains.delete(domain.$id);
-            domain = undefined;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    }
-
    $: console.log($consoleVariables._APP_DOMAINS_NAMESERVERS);
 </script>

 <Fieldset legend="Verification">
    <Layout.Stack gap="xl">
-        <Layout.Stack gap="xl">
-            <Layout.Stack gap="s">
-                <Layout.Stack gap="s" direction="row" alignItems="center">
-                    <Typography.Text variant="l-500">{domain.domain}</Typography.Text>
-
-                    {#if verified === false}
-                        <Badge variant="secondary" type="error" content="Verification failed" />
-                    {/if}
-                    <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 DNS changes may
-                    take time to propagate fully.
-                </Typography.Text>
-            </Layout.Stack>
-
-            <Table.Root>
-                <svelte:fragment slot="header">
-                    <Table.Header.Cell>Type</Table.Header.Cell>
-                    <Table.Header.Cell>Value</Table.Header.Cell>
-                    <Table.Header.Cell />
-                </svelte:fragment>
-                {#each nameservers as nameserver}
-                    <Table.Row>
-                        <Table.Cell>NS</Table.Cell>
-                        <Table.Cell>{nameserver}</Table.Cell>
-                        <Table.Cell>
-                            <Layout.Stack alignItems="flex-end">
-                                <Copy value={nameserver}>
-                                    <Icon icon={IconDuplicate} />
-                                </Copy>
-                            </Layout.Stack>
-                        </Table.Cell>
-                    </Table.Row>
-                {/each}
-            </Table.Root>
+        <div>
+            <Tabs.Root variant="secondary" let:root>
+                <Tabs.Item.Button {root} active>Nameservers</Tabs.Item.Button>
+            </Tabs.Root>
+            <Divider />
+        </div>
+        <Layout.Stack gap="s">
            <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                    A list of all domain providers and their DNS setting is available <Link
-                        variant="muted"
-                        href="#">here</Link
-                    >.
-                </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" />
+                {/if}
            </Layout.Stack>
+            <Typography.Text variant="m-400">
+                Add the following nameservers on your DNS provider. Note that DNS changes may take
+                time to propagate fully.
+            </Typography.Text>
        </Layout.Stack>
+
+        <Table.Root>
+            <svelte:fragment slot="header">
+                <Table.Header.Cell>Type</Table.Header.Cell>
+                <Table.Header.Cell>Value</Table.Header.Cell>
+                <Table.Header.Cell />
+            </svelte:fragment>
+            {#each nameservers as nameserver}
+                <Table.Row>
+                    <Table.Cell>NS</Table.Cell>
+                    <Table.Cell>
+                        <InteractiveText variant="copy" isVisible text={nameserver}>
+                            {nameserver}</InteractiveText>
+                    </Table.Cell>
+                </Table.Row>
+            {/each}
+        </Table.Root>
+        <Input.Helper state="default">
+            A list of all domain providers and their DNS setting is available <Link
+                variant="muted"
+                external
+                href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+            >.
+        </Input.Helper>
        <Divider />
        <Layout.Stack direction="row" justifyContent="flex-end">
-            <Button text on:click={back}>Back</Button>
-            <Button secondary on:click={verifyStatus}>Verify</Button>
+            <Button on:click={verifyStatus}>Verify</Button>
        </Layout.Stack>
    </Layout.Stack>
 </Fieldset>
@@ -4,28 +4,41 @@
    import { sdk } from '$lib/stores/sdk';
    import { addNotification } from '$lib/stores/notifications';
    import { invalidate } from '$app/navigation';
-    import type { Models } from '@appwrite.io/console';
    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
    import { Dependencies } from '$lib/constants';
-    import RecordsCard from './recordsCard.svelte';
+    import { Input, InteractiveText, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { consoleVariables } from '$routes/(console)/store';
+    import type { Domain } from '$lib/sdk/domains';

    export let show = false;
-    export let selectedDomain: Models.ProxyRule;
+    export let selectedDomain: Domain;
+    let nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',') ?? [
+        'ns1.appwrite.io',
+        'ns2.appwrite.io'
+    ];

    let error = null;
    async function retryDomain() {
        try {
-            await sdk.forProject.proxy.updateRuleVerification(selectedDomain.$id);
-            await invalidate(Dependencies.SITES_DOMAINS);
+            const domain = await sdk.forConsole.domains.updateNameservers(selectedDomain.$id);
            show = false;
-            addNotification({
-                type: 'success',
-                message: `${selectedDomain.domain} has been deleted`
-            });
-            trackEvent(Submit.DomainDelete);
+            if (domain.nameservers === 'Appwrite') {
+                addNotification({
+                    type: 'error',
+                    message: `${selectedDomain.domain} has been verified`
+                });
+            } else {
+                addNotification({
+                    type: 'error',
+                    message: `Domain verification failed. Please check your domain settings or try again later`
+                });
+            }
+            await invalidate(Dependencies.DOMAINS);
+            trackEvent(Submit.DomainUpdateVerification);
        } catch (e) {
            error = e;
-            trackError(e, Submit.DomainDelete);
+            trackError(e, Submit.DomainUpdateVerification);
        }
    }

@@ -35,10 +48,41 @@
 </script>

 <Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
-    {#if selectedDomain}
-        <RecordsCard domain={selectedDomain} />
-    {/if}
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary"
+                >{selectedDomain.domain}</Typography.Text>
+            \
+        </Layout.Stack>
+        <Typography.Text variant="m-400">
+            Add the following nameservers on your DNS provider. Note that DNS changes may take time
+            to propagate fully.
+        </Typography.Text>
+    </Layout.Stack>

+    <Table.Root>
+        <svelte:fragment slot="header">
+            <Table.Header.Cell>Type</Table.Header.Cell>
+            <Table.Header.Cell>Value</Table.Header.Cell>
+            <Table.Header.Cell />
+        </svelte:fragment>
+        {#each nameservers as nameserver}
+            <Table.Row>
+                <Table.Cell>NS</Table.Cell>
+                <Table.Cell>
+                    <InteractiveText variant="copy" isVisible text={nameserver}>
+                        {nameserver}</InteractiveText>
+                </Table.Cell>
+            </Table.Row>
+        {/each}
+    </Table.Root>
+    <Input.Helper state="default">
+        A list of all domain providers and their DNS setting is available <Link
+            variant="muted"
+            external
+            href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+        >.
+    </Input.Helper>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (show = false)}>Cancel</Button>
        <Button submit>Retry</Button>