From 2841db349d41693f74fd111df29a15e43de0d492 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Mar 2022 00:10:11 +0100
Subject: [PATCH] add more pages

---
 src/lib/layout/navigation.svelte              | 10 ++++
 .../console/[project]/domains/index.svelte    | 54 +++++++++++++++++++
 .../console/[project]/keys/[key].svelte       |  8 +++
 .../console/[project]/keys/index.svelte       | 39 ++++++++++++++
 .../[project]/webhooks/[webhook].svelte       |  9 ++++
 .../console/[project]/webhooks/index.svelte   | 41 ++++++++++++++
 6 files changed, 161 insertions(+)
 create mode 100644 src/routes/console/[project]/domains/index.svelte
 create mode 100644 src/routes/console/[project]/keys/[key].svelte
 create mode 100644 src/routes/console/[project]/keys/index.svelte
 create mode 100644 src/routes/console/[project]/webhooks/[webhook].svelte
 create mode 100644 src/routes/console/[project]/webhooks/index.svelte

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 4440b2b63..5857625ed 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -94,6 +94,16 @@
 							<span class="text">API Keys</span>
 						</a>
 					</li>
+					<li class="side-nav-item">
+						<a
+							class="side-nav-link"
+							class:is-selected={$page.url.pathname.startsWith(`/console/${project}/domains`)}
+							href={`/console/${project}/domains`}
+						>
+							<span class="icon-info-circled" aria-hidden="true" />
+							<span class="text">Domains</span>
+						</a>
+					</li>
 				</ul>
 			</section>
 		</div>
diff --git a/src/routes/console/[project]/domains/index.svelte b/src/routes/console/[project]/domains/index.svelte
new file mode 100644
index 000000000..7e67b4e7a
--- /dev/null
+++ b/src/routes/console/[project]/domains/index.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import { Pill } from '$lib/elements';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listDomains(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>API Keys</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead width={80} />
+				<TableCellHead>Domain</TableCellHead>
+				<TableCellHead>TLS</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.domains as domain}
+					<TableCellText title="Scopes">
+						<Pill failed={!domain.verification} success={domain.verification}>
+							{domain.verification ? 'Unverified' : 'Verified'}
+						</Pill>
+					</TableCellText>
+					<TableCellLink href={`/console/${projectId}/keys/${domain.$id}`} title="Domain">
+						{domain.domain}
+					</TableCellLink>
+					<TableCellText title="Scopes">
+						{#if domain.certificateId}
+							Verified
+						{:else if domain.verification}
+							In Progress
+						{:else}
+							Pending Verification
+						{/if}
+					</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>
diff --git a/src/routes/console/[project]/keys/[key].svelte b/src/routes/console/[project]/keys/[key].svelte
new file mode 100644
index 000000000..646a2c75b
--- /dev/null
+++ b/src/routes/console/[project]/keys/[key].svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back } from '$lib/components';
+
+	const projectId = $page.params.project;
+</script>
+
+<Back href={`/console/${projectId}/keys`}>API Keys</Back>
diff --git a/src/routes/console/[project]/keys/index.svelte b/src/routes/console/[project]/keys/index.svelte
new file mode 100644
index 000000000..63cb07ca2
--- /dev/null
+++ b/src/routes/console/[project]/keys/index.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listKeys(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>API Keys</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead>Name</TableCellHead>
+				<TableCellHead>Scopes</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.keys as key}
+					<TableCellLink href={`/console/${projectId}/keys/${key.$id}`} title="Name"
+						>{key.name}</TableCellLink
+					>
+					<TableCellText title="Scopes">{key.scopes.length}</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>
diff --git a/src/routes/console/[project]/webhooks/[webhook].svelte b/src/routes/console/[project]/webhooks/[webhook].svelte
new file mode 100644
index 000000000..ffdf92eb8
--- /dev/null
+++ b/src/routes/console/[project]/webhooks/[webhook].svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import { Back } from '$lib/components';
+
+	const projectId = $page.params.project;
+</script>
+
+<Back href={`/console/${projectId}/webhooks`}>Webhooks</Back>
diff --git a/src/routes/console/[project]/webhooks/index.svelte b/src/routes/console/[project]/webhooks/index.svelte
new file mode 100644
index 000000000..4a6818961
--- /dev/null
+++ b/src/routes/console/[project]/webhooks/index.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listWebhooks(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>Webhooks</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead width={80}>Name</TableCellHead>
+				<TableCellHead>URL</TableCellHead>
+				<TableCellHead width={80}>Events</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.webhooks as webhook}
+					<TableCellLink href={`/console/${projectId}/webhooks/${webhook.$id}`} title="Name">
+						{webhook.name}
+					</TableCellLink>
+					<TableCellText title="URL">{webhook.url}</TableCellText>
+					<TableCellText title="Scopes">{webhook.events.length}</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>