domains flow, fixes to sites

This commit is contained in:
Arman
2025-02-28 11:55:01 +01:00
parent fb0944fc73
commit 1dd15b17cb
10 changed files with 62 additions and 95 deletions
@@ -7,7 +7,6 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import Container from '$lib/layout/container.svelte';
import { protocol } from '$routes/(console)/store.js';
import type { Models } from '@appwrite.io/console';
import {
IconDotsHorizontal,
IconExternalLink,
@@ -17,7 +16,6 @@
} from '@appwrite.io/pink-icons-svelte';
import {
ActionMenu,
Badge,
Card,
Empty,
Icon,
@@ -30,20 +28,15 @@
import { queries } from '$lib/components/filters';
import SearchQuery from '$lib/components/searchQuery.svelte';
import { app } from '$lib/stores/app';
import type { Domain } from '$lib/sdk/domains';
export let data;
let showDelete = false;
let showRetry = false;
let selectedDomain: Models.Domain = null;
let selectedDomain: Domain = null;
$: console.log(data.domains);
// TODO: replace status once backend is fixed
// created - Verification Failed
// verified - Verification OK , Certificate OK
// verifying - Verifiacitok OK
// unverified - Verificaiton OK , Certificate Failed
</script>
<Container>
@@ -81,24 +74,12 @@
<Icon icon={IconExternalLink} size="s" />
</Layout.Stack>
</Link>
{#if !domain.verified}
<Badge
size="s"
variant="secondary"
content="Verification failed"
type="error" />
{:else if domain.status === 'veryfing'}
<Badge
size="s"
variant="secondary"
content="Pending verification"
type="warning" />
{/if}
</Layout.Stack>
</Table.Cell>
<Table.Cell>{domain?.registrar || '-'}</Table.Cell>
<Table.Cell>{domain?.nameservers || '-'}</Table.Cell>
<Table.Cell>{domain?.expiry || '-'}</Table.Cell>
<Table.Cell>
{domain?.expiry ? toLocaleDateTime(domain.expiry) : '-'}</Table.Cell>
<Table.Cell>
{domain.renewal ? toLocaleDateTime(domain.renewal) : '-'}
</Table.Cell>
@@ -199,6 +180,6 @@
<DeleteDomainModal show={showDelete} {selectedDomain} />
{/if}
{#if showRetry}
<!-- {#if showRetry}
<RetryDomainModal show={showRetry} {selectedDomain} />
{/if}
{/if} -->
@@ -1,35 +1,27 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/stores';
import Card from '$lib/components/card.svelte';
import { Button, Form } from '$lib/elements/forms';
import { InputDomain } from '$lib/elements/forms/index.js';
import { Wizard } from '$lib/layout';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import { type Models } from '@appwrite.io/console';
import {
Badge,
Divider,
Fieldset,
Layout,
Typography,
Spinner
} from '@appwrite.io/pink-svelte';
import { Divider, Fieldset, Layout } from '@appwrite.io/pink-svelte';
import RecordsCard from '../recordsCard.svelte';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import type { Domain } from '$lib/sdk/domains';
const backPage = `${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains`;
const backPage = `${base}/project-${$page.params.organization}/domains`;
let domain = '';
let domainData: Models.Domain;
let domainData: Domain;
async function addDomain() {
try {
domainData = await sdk.forConsole.domains.create($page.params.organization, domain);
console.log(domainData);
invalidate(Dependencies.SITES_DOMAINS);
invalidate(Dependencies.DOMAINS);
} catch (error) {
addNotification({
type: 'error',
@@ -65,35 +57,13 @@
<Wizard title="Add domain" href={backPage} column columnSize="s" hideFooter={!domainData}>
{#if domainData}
{#if domainData.status === 'created'}
<RecordsCard domain={domainData}>
<Divider />
<Layout.Stack direction="row" justifyContent="flex-end">
<Button text on:click={back}>Back</Button>
<Button secondary on:click={verifyStatus}>Verify</Button>
</Layout.Stack>
</RecordsCard>
{:else if domainData.status === 'verifying'}
<Card radius="s">
<Layout.Stack gap="s" direction="row" alignItems="center">
<Typography.Text variant="l-500">{domainData.domain}</Typography.Text>
<Badge variant="secondary" type="success" content="Verified" />
<Badge variant="secondary" content="Generating certificate...">
<svelte:fragment slot="start">
<Spinner size="s" />
</svelte:fragment>
</Badge>
</Layout.Stack>
</Card>
{:else if domainData.status === 'verified'}
<Card radius="s">
<Layout.Stack gap="s" direction="row" alignItems="center">
<Typography.Text variant="l-500">{domainData.domain}</Typography.Text>
<Badge variant="secondary" type="success" content="Verified" />
<Badge variant="secondary" type="success" content="Generated certificate" />
</Layout.Stack>
</Card>
{/if}
<RecordsCard domain={domainData}>
<Divider />
<Layout.Stack direction="row" justifyContent="flex-end">
<Button text on:click={back}>Back</Button>
<Button secondary on:click={verifyStatus}>Verify</Button>
</Layout.Stack>
</RecordsCard>
{:else}
<Fieldset legend="Configuration">
<Form onSubmit={addDomain}>
@@ -104,7 +74,7 @@
name="domain"
bind:value={domain}
required
placeholder="appwrite.example.com" />
placeholder="example.com" />
<Divider />
<Layout.Stack alignItems="flex-end">
@@ -14,11 +14,11 @@
title: 'DNS records',
event: 'dns-records'
},
{
href: `${path}/certificates`,
title: 'Certificates',
event: 'certificates'
},
// {
// href: `${path}/certificates`,
// title: 'Certificates',
// event: 'certificates'
// },
{
href: `${path}/settings`,
title: 'Settings',
@@ -1,6 +1,5 @@
<script lang="ts">
import { PaginationWithLimit } from '$lib/components';
import {
ActionMenu,
Button,
@@ -14,16 +13,16 @@
import { IconDotsHorizontal, IconPencil, IconTrash } from '@appwrite.io/pink-icons-svelte';
import { columns } from './store';
import { timeFromNow } from '$lib/helpers/date';
import type { Models } from '@appwrite.io/console';
import DeleteRecordModal from './deleteRecordModal.svelte';
import { capitalize } from '$lib/helpers/string';
import EditRecordModal from './editRecordModal.svelte';
import type { DnsRecord } from '$lib/sdk/domains';
export let data;
let showEdit = false;
let showDelete = false;
let selectedRecord: Models.DnsRecord = null;
let selectedRecord: DnsRecord = null;
</script>
<Layout.Stack>
@@ -57,12 +56,7 @@
</Table.Cell>
{:else if column.id === 'value'}
<Table.Cell>
<div>
<InteractiveText
variant="secret"
text={record.value}
isVisible />
</div>
<InteractiveText variant="secret" text={record.value} isVisible />
</Table.Cell>
{:else if column.id === 'ttl'}
<Table.Cell>
@@ -1,11 +1,22 @@
<script lang="ts">
import { Copy } from '$lib/components';
import { Link } from '$lib/elements';
import type { Models } from '@appwrite.io/console';
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
import type { Domain } from '$lib/sdk/domains';
import { consoleVariables } from '$routes/(console)/store';
import { IconDuplicate, IconInfo } from '@appwrite.io/pink-icons-svelte';
import { Badge, Layout, Typography, Table, Fieldset, Icon } from '@appwrite.io/pink-svelte';
export let domain: Models.ProxyRule;
export let domain: Domain;
$: console.log($consoleVariables._APP_DOMAINS_NAMESERVERS);
// TODO: split _APP_DOMAINS_NAMESERVERS?
let nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS ?? [
'ns1.appwrite.io',
'ns2.appwrite.io'
];
$: verified = domain.nameservers === nameservers;
</script>
<Fieldset legend="Verification">
@@ -14,6 +25,7 @@
<Layout.Stack gap="s">
<Layout.Stack gap="s" direction="row" alignItems="center">
<Typography.Text variant="l-500">{domain.domain}</Typography.Text>
<Badge variant="secondary" type="warning" content="Pending verification" />
</Layout.Stack>
<Typography.Text variant="m-400">
@@ -25,17 +37,22 @@
<Table.Root>
<svelte:fragment slot="header">
<Table.Header.Cell>Type</Table.Header.Cell>
<Table.Header.Cell>Name</Table.Header.Cell>
<Table.Header.Cell>Value</Table.Header.Cell>
<Table.Header.Cell />
</svelte:fragment>
<Table.Row>
<Table.Cell>CNAME</Table.Cell>
<Table.Cell>{domain.domain}</Table.Cell>
<Table.Cell>
<Copy value={globalThis?.location?.origin}
>{globalThis?.location?.origin}</Copy>
</Table.Cell>
</Table.Row>
{#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>
<Layout.Stack gap="s" direction="row" alignItems="center">
<Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
@@ -1,5 +1,7 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { goto, invalidate } from '$app/navigation';
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import Confirm from '$lib/components/confirm.svelte';
import { Dependencies } from '$lib/constants';
@@ -17,6 +19,9 @@
selectedDeployment.$id
);
await invalidate(Dependencies.SITE);
await goto(
`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments`
);
showDelete = false;
addNotification({
type: 'success',