Merge branch 'feat-pink-v2' of github.com:appwrite/console into chore-fix-backend-breaking-changes

2026-06-06 19:27:48 +00:00 · 2025-03-21 14:48:10 +01:00
parent 027075e509 a7c49c0d24
commit 205a829eaa
10 changed files with 114 additions and 107 deletions
@@ -17,8 +17,6 @@
    }[] = [];

    let showCustomId = false;
-
-    $: console.log(options);
 </script>

 <Fieldset legend="Details">
@@ -1,83 +1,74 @@
 <script lang="ts">
-    import Card from '$lib/components/card.svelte';
-    import { Button, InputText } from '$lib/elements/forms';
+    import { InputText } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
    import { debounce } from '$lib/helpers/debounce';
    import { sdk } from '$lib/stores/sdk';
    import { consoleVariables } from '$routes/(console)/store';
    import { ConsoleResourceType } from '@appwrite.io/console';
-    import { Fieldset, Layout, Divider, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';

    export let domain: string;
    export let domainIsValid = true;
-    const orginalDomain = domain.split('').join('');
-    let showConfig = false;
+    const originalDomain = domain;
+    let newDomain = domain;
+
+    let domainStatus: 'complete' | 'failed' | 'pending' = 'complete';
+
+    onMount(async () => {});
+
+    function setDomainLabel(status: typeof domainStatus) {
+        switch (status) {
+            case 'complete':
+                return 'Domain is available';
+            case 'failed':
+                return 'Domain is not available';
+            case 'pending':
+                return 'Checking domain availability';
+        }
+    }

    const checkDomain = debounce(async (value: string) => {
+        if (!value) {
+            domainStatus = 'failed';
+            return;
+        }
        try {
            await sdk.forConsole.console.getResource(
                `${value}.${$consoleVariables._APP_DOMAIN_SITES}`,
                ConsoleResourceType.Rules
            );
-
+            domainStatus = 'complete';
            domainIsValid = true;
        } catch {
+            domainStatus = 'failed';
            domainIsValid = false;
+        } finally {
+            domain = newDomain;
        }
-    }, 300);
+    }, 500);

-    $: if (domain) {
-        checkDomain(domain);
+    $: if (domain !== newDomain) {
+        domainStatus = 'pending';
+        checkDomain(newDomain);
    }
 </script>

-{#if showConfig}
-    <Fieldset legend="Domains">
-        <Layout.Stack>
-            <Layout.Stack gap="s">
-                <InputText id="domain" placeholder="my-domain" bind:value={domain}>
-                    <svelte:fragment slot="end">
-                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                            .{$consoleVariables._APP_DOMAIN_SITES}
-                        </Typography.Text>
-                    </svelte:fragment>
-                </InputText>
-                <Status
-                    status={domainIsValid ? 'complete' : 'failed'}
-                    label={domainIsValid ? 'Domain is available' : 'Domain is not available'}>
-                </Status>
-            </Layout.Stack>
-            <Divider />
-            <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
-                <Button
-                    text
-                    on:click={() => {
-                        domain = orginalDomain;
-                        showConfig = false;
-                    }}>Cancel</Button>
-
-                <Button secondary disabled={!domainIsValid} on:click={() => (showConfig = false)}>
-                    Update
-                </Button>
-            </Layout.Stack>
-        </Layout.Stack>
-    </Fieldset>
-{:else}
-    <Card padding="s" radius="s">
-        <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                <Layout.Stack direction="row" gap="s" alignItems="center">
-                    <span class="icon-globe-alt"></span>
-                    {domain}.{$consoleVariables._APP_DOMAIN_SITES}
-                </Layout.Stack>
-            </Typography.Text>
+<Fieldset legend="Domains">
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <InputText id="domain" placeholder="my-domain" bind:value={newDomain}>
+                <svelte:fragment slot="end">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        .{$consoleVariables._APP_DOMAIN_SITES}
+                    </Typography.Text>
+                </svelte:fragment>
+            </InputText>
            <Button
-                size="s"
                secondary
-                on:click={() => {
-                    showConfig = true;
-                }}>
-                Update
-            </Button>
+                disabled={originalDomain === newDomain}
+                on:click={() => (newDomain = originalDomain)}>Reset</Button>
        </Layout.Stack>
-    </Card>
-{/if}
+        <Status status={domainStatus} label={setDomainLabel(domainStatus)}></Status>
+    </Layout.Stack>
+</Fieldset>
@@ -42,7 +42,7 @@

    async function create() {
        try {
-            domain = await buildVerboseDomain(name, $project.name, $organization.name, id);
+            domain = await buildVerboseDomain(name, $organization.name, $project.name, id);

            const fr = Object.values(Framework).find((f) => f === framework.key);
            const buildRuntime = Object.values(BuildRuntime).find(
@@ -26,8 +26,7 @@
    import { onMount } from 'svelte';
    import Configuration from '../../configuration.svelte';
    import { consoleVariables } from '$routes/(console)/store';
-    import { buildVerboseDomain } from '../../store';
-    import { project } from '$routes/(console)/project-[project]/store';
+    import Domain from '../../domain.svelte';

    export let data;
    let showExitModal = false;
@@ -46,7 +45,8 @@
    let outputDirectory = adapter?.outputDirectory;
    let variables: Partial<Models.Variable>[] = [];
    let silentMode = false;
-    let domain = id;
+    let domain = data.domain;
+    let domainIsValid = true;

    onMount(async () => {
        installation.set(data.installation);
@@ -76,18 +76,18 @@
        } catch (error) {
            framework = data.frameworks.frameworks.find((f) => f.key === 'other');
            trackError(error, Submit.FrameworkDetect);
-            console.log(error);
        }
    }

    async function create() {
+        if (!domainIsValid) {
+            addNotification({
+                type: 'error',
+                message: 'Domain is not valid'
+            });
+            return;
+        }
        try {
-            domain = await buildVerboseDomain(
-                data.repository.name,
-                data.repository.organization,
-                $project.name,
-                id
-            );
            const fr = Object.values(Framework).find((f) => f === framework.key);
            const buildRuntime = Object.values(BuildRuntime).find(
                (f) => f === framework.buildRuntime
@@ -151,8 +151,6 @@
            trackError(e, Submit.SiteCreate);
        }
    }
-
-    $: console.log(framework);
 </script>

 <svelte:head>
@@ -204,6 +202,8 @@
                    bind:variables
                    frameworks={data.frameworks.frameworks} />
            {/key}
+
+            <Domain bind:domain bind:domainIsValid />
        </Layout.Stack>
    </Form>
    <svelte:fragment slot="aside">
@@ -1,18 +1,28 @@
 import { sdk } from '$lib/stores/sdk';
+import { ID } from '@appwrite.io/console';
+import { buildVerboseDomain } from '../../store';

 export const load = async ({ parent, params, url }) => {
-    const { installations, frameworks } = await parent();
-
+    const { installations, frameworks, project, organization, consoleVariables } = await parent();
    const [repository] = await Promise.all([
        sdk.forProject.vcs.getRepository(url.searchParams.get('installation'), params.repository)
    ]);

+    const domain = await buildVerboseDomain(
+        consoleVariables._APP_DOMAIN_SITES,
+        repository.name,
+        organization.name,
+        project.name,
+        ID.unique()
+    );
+
    return {
        installations,
        installation: installations.installations.find(
            (installation) => installation.$id === url.searchParams.get('installation')
        ),
        repository,
-        frameworks
+        frameworks,
+        domain
    };
 };
@@ -1,18 +1,13 @@
 import { sdk } from '$lib/stores/sdk';
-import { consoleVariables } from '$routes/(console)/store';
 import { ConsoleResourceType, ID } from '@appwrite.io/console';
-import { get } from 'svelte/store';

 function toURLSafe(s: string) {
    return s.replace(/[^a-zA-Z0-9-]/g, '-');
 }

-export async function checkDomain(domain: string) {
+export async function checkDomain(domain: string, apex: string) {
    try {
-        await sdk.forConsole.console.getResource(
-            `${domain}.${get(consoleVariables)._APP_DOMAIN_SITES}`,
-            ConsoleResourceType.Rules
-        );
+        await sdk.forConsole.console.getResource(`${domain}.${apex}`, ConsoleResourceType.Rules);
        return true;
    } catch {
        return false;
@@ -20,6 +15,7 @@ export async function checkDomain(domain: string) {
 }

 export async function buildVerboseDomain(
+    apex: string,
    name: string,
    specifier: string,
    secondarySpecifier?: string,
@@ -32,21 +28,21 @@ export async function buildVerboseDomain(
        : '';
    const safeUnique = unique ? toURLSafe(unique).toLowerCase() : ID.unique();
    let domain = `${safeName}`;
-    if (await checkDomain(domain)) {
+    if (await checkDomain(domain, apex)) {
        return domain;
    }
    domain += '-' + safeSpecifier;
-    if (await checkDomain(domain)) {
+    if (await checkDomain(domain, apex)) {
        return domain;
    }
    if (secondarySpecifier) {
        domain += '-' + safeSecondarySpecifier;
-        if (await checkDomain(domain)) {
+        if (await checkDomain(domain, apex)) {
            return domain;
        }
    }
    domain += '-' + safeUnique;
-    if (await checkDomain(domain)) {
+    if (await checkDomain(domain, apex)) {
        return domain;
    }
 }
@@ -15,8 +15,6 @@ export const load = async ({ url, route }) => {

    const siteTemplatesList = await sdk.forProject.sites.listTemplates(undefined, undefined, 100);

-    console.log(siteTemplatesList);
-
    const [frameworksSet, useCasesSet] = siteTemplatesList.templates.reduce(
        ([fr, uc], next) => {
            next.useCases.forEach((useCase) => uc.add(useCase));
@@ -35,10 +35,8 @@
    import { getFrameworkIcon } from '../../../store';
    import { app, iconPath } from '$lib/stores/app';
    import { consoleVariables } from '$routes/(console)/store';
-    import { project } from '$routes/(console)/project-[project]/store';
-    import { buildVerboseDomain } from '../../store';
-    import { organization } from '$lib/stores/organization';
    import { connectGitHub } from '$lib/stores/git';
+    import Domain from '../../domain.svelte';

    export let data;

@@ -51,7 +49,8 @@

    let name = data.template.name;
    let id = ID.unique();
-    let domain = id;
+    let domain = data.domain;
+    let domainIsValid = true;
    let framework = data?.template?.frameworks[0];
    let branch = 'main';
    let rootDir = './';
@@ -100,15 +99,14 @@
                message: 'Please select a repository'
            });
            return;
+        } else if (!domainIsValid) {
+            addNotification({
+                type: 'error',
+                message: 'Domain is not valid'
+            });
+            return;
        } else {
            try {
-                domain = await buildVerboseDomain(
-                    data.template.name,
-                    $project.name,
-                    $organization.name,
-                    id
-                );
-
                const fr = Object.values(Framework).find((f) => f === framework.key);
                const buildRuntime = Object.values(BuildRuntime).find(
                    (f) => f === framework.buildRuntime
@@ -186,11 +184,6 @@
    $: if (connectBehaviour === 'later') {
        selectedRepository = null;
    }
-
-    $: console.log(repositoryName);
-
-    $: console.log(data.template);
-    $: console.log(variables);
 </script>

 <svelte:head>
@@ -319,6 +312,9 @@
                    <Configuration bind:variables templateVariables={data.template.variables} />
                {/if}
            {/if}
+            {#if connectBehaviour === 'later' || selectedRepository}
+                <Domain bind:domain bind:domainIsValid />
+            {/if}
        </Layout.Stack>
    </Form>
    <svelte:fragment slot="aside">
@@ -1,12 +1,22 @@
 import { sdk } from '$lib/stores/sdk';
+import { buildVerboseDomain } from '../../store.js';
+import { ID } from '@appwrite.io/console';

 export const load = async ({ parent, params }) => {
-    const { installations, frameworks } = await parent();
+    const { installations, frameworks, project, organization, consoleVariables } = await parent();
    const template = await sdk.forProject.sites.getTemplate(params.template);
+    const domain = await buildVerboseDomain(
+        consoleVariables._APP_DOMAIN_SITES,
+        template.name,
+        organization.name,
+        project.name,
+        ID.unique()
+    );

    return {
        installations,
        frameworks,
-        template
+        template,
+        domain
    };
 };
@@ -1,6 +1,6 @@
 <script lang="ts">
    import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
-    import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Card, Divider, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
    import VerificationFieldset from './verificationFieldset.svelte';
    import { Button, Form } from '$lib/elements/forms';
    import { sdk } from '$lib/stores/sdk';
@@ -12,12 +12,15 @@
    import { page } from '$app/stores';
    import Wizard from '$lib/layout/wizard.svelte';
    import { base } from '$app/paths';
+    import { writable } from 'svelte/store';

    export let data;
    let selectedTab: 'cname' | 'nameserver';
    let domainData = data.domain;

    let routeBase = `${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains`;
+    let formComponent: Form;
+    let isSubmitting = writable(false);

    async function addDomain() {
        const isNewDomain =
@@ -79,6 +82,11 @@
                domain={$page.params.domain}
                verified={isVerified}
                bind:selectedTab />
+
+            <Divider />
+            <Layout.Stack>
+                <Button submit disabled={$isSubmitting}>Verify</Button>
+            </Layout.Stack>
        </Layout.Stack>
    </Form>
 </Wizard>