feat: implement submitting domains

Author: xynydev

src/app.d.ts

@@ -4,13 +4,15 @@ declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			status:
+			loginStatus:
 				| 'assumeLoggedIn'
 				| 'assumeLoggedOut'
 				| 'accountError'
 				| 'accountCreated'
 				| 'accountDeleted';
 			accountMessage: string;
+
+			actionResult: string;
 		}
 		// interface PageData {}
 		// interface PageState {}

src/lib/components/custom/MobileMenu.svelte

@@ -18,7 +18,7 @@
 		open = false;
 	});
 
-	let { status } = $props();
+	let { loginStatus: status } = $props();
 </script>
 
 <Sheet.Root bind:open>
@@ -49,7 +49,7 @@
 					{/if}
 				</span>
 				<div class="min-[400px]:justify-self-end">
-					<SignInButton {status} />
+					<SignInButton loginStatus={status} />
 				</div>
 			</div>
 			<div class="grid gap-4 min-[400px]:grid-cols-2">

src/lib/components/custom/SignInButton.svelte

@@ -3,7 +3,7 @@
 
 	import RiUserLine from '~icons/ri/user-line';
 
-	let { status } = $props();
+	let { loginStatus: status } = $props();
 </script>
 
 {#if status !== 'assumeLoggedIn'}

src/routes/(nosearch)/+layout.svelte

@@ -21,10 +21,10 @@
 	</a>
 	<div class="hidden md:contents">
 		<Button variant="link" href="https://opencollective.com/mwmbl" class="px-2">Donate</Button>
-		<SignInButton status={data.status} />
+		<SignInButton loginStatus={data.loginStatus} />
 	</div>
 	<div class="contents md:hidden">
-		<MobileMenu status={data.status} />
+		<MobileMenu loginStatus={data.loginStatus} />
 	</div>
 </header>
 

src/routes/(nosearch)/account/+page.server.ts

@@ -35,9 +35,9 @@ export const actions: Actions = {
 				maxAge: 60 * 60 * 24 * 30 // 30 days
 			});
 
-			locals.status = 'assumeLoggedIn';
+			locals.loginStatus = 'assumeLoggedIn';
 		} else {
-			locals.status = 'accountError';
+			locals.loginStatus = 'accountError';
 			locals.accountMessage = 'Error logging in.';
 		}
 	},
@@ -53,17 +53,17 @@ export const actions: Actions = {
 		});
 		const json = await res.json();
 		if (res.ok) {
-			locals.status = 'accountCreated';
+			locals.loginStatus = 'accountCreated';
 			locals.accountMessage = json.message;
 		} else {
-			locals.status = 'accountError';
+			locals.loginStatus = 'accountError';
 			locals.accountMessage = json.message;
 		}
 	},
 	logout: async ({ cookies, locals }) => {
 		cookies.delete('refreshToken', { path: '/' });
 		cookies.delete('accessToken', { path: '/' });
-		locals.status = 'assumeLoggedOut';
+		locals.loginStatus = 'assumeLoggedOut';
 		locals.accountMessage = 'Logged out.';
 	},
 	deleteUser: async ({ cookies, locals }) => {
@@ -80,10 +80,10 @@ export const actions: Actions = {
 			cookies.delete('refreshToken', { path: '/' });
 			cookies.delete('accessToken', { path: '/' });
 
-			locals.status = 'accountDeleted';
+			locals.loginStatus = 'accountDeleted';
 			locals.accountMessage = 'Your account has been deleted.';
 		} else {
-			locals.status = 'accountError';
+			locals.loginStatus = 'accountError';
 			locals.accountMessage = res.statusText;
 		}
 	}

src/routes/(nosearch)/account/+page.svelte

@@ -13,27 +13,27 @@
 
 <main class="flex w-full max-w-2xl flex-col gap-2 self-center px-6">
 	<h2 class="-mx-2 text-3xl">
-		{#if data.status !== 'assumeLoggedIn'}
+		{#if data.loginStatus !== 'assumeLoggedIn'}
 			Sign in
 		{:else}
 			Logged in as {data.username}
 		{/if}
 	</h2>
 	<hr class="my-2" />
-	{#if data.status === 'accountError'}
+	{#if data.loginStatus === 'accountError'}
 		<Card.Root class="p-4 outline outline-red-100 dark:outline-red-900">
 			{data.accountMessage.replaceAll('%20', ' ')}
 		</Card.Root>
-	{:else if data.status === 'accountCreated'}
+	{:else if data.loginStatus === 'accountCreated'}
 		<Card.Root class="p-4 outline outline-green-100 dark:outline-green-900">
 			{data.accountMessage.replaceAll('%20', ' ')}
 		</Card.Root>
-	{:else if data.status === 'accountDeleted'}
+	{:else if data.loginStatus === 'accountDeleted'}
 		<Card.Root class="p-4 outline outline-green-100 dark:outline-green-900">
 			{data.accountMessage.replaceAll('%20', ' ')}
 		</Card.Root>
 	{/if}
-	{#if data.status !== 'assumeLoggedIn'}
+	{#if data.loginStatus !== 'assumeLoggedIn'}
 		<Tabs.Root value="Log in" class="Log in">
 			<Tabs.List class="w-full rounded-2xl">
 				<Tabs.Trigger value="Log in" class="w-full rounded-xl">Log in</Tabs.Trigger>

src/routes/(nosearch)/domain-submissions/+page.server.ts

@@ -0,0 +1,51 @@
+import type { Actions } from '@sveltejs/kit';
+
+const pageSize = 500;
+
+export type SubmissionsResult = {
+	items: Array<{
+		id: number;
+		name: string;
+		submitted_by: number;
+		submitted_on: string;
+		status: string;
+		rejection_reason: string;
+		rejection_detail: string;
+	}>;
+	count: number;
+};
+
+export async function load({ fetch, url, locals }) {
+	const page = Number(url.searchParams.get('page'));
+	const offset = page * pageSize;
+	const response = await fetch(
+		`https://api.mwmbl.org/api/v1/platform/domain-submissions?limit=${pageSize}&offset=${offset}`
+	);
+	const submissions: SubmissionsResult = await response.json();
+
+	return {
+		submissions,
+		page,
+		maxPage: Math.floor(submissions.count / pageSize),
+		status: locals.actionResult
+	};
+}
+export const actions: Actions = {
+	submitDomain: async ({ request, cookies, locals }) => {
+		const data = await request.formData();
+		const res = await fetch(
+			'https://api.mwmbl.org/api/v1/platform/domain-submissions/?domain=' + data.get('domain'),
+			{
+				method: 'POST',
+				headers: {
+					Authorization: 'Bearer ' + cookies.get('accessToken')
+				}
+			}
+		);
+		if (res.ok) {
+			locals.actionResult = 'domainSubmitted';
+		} else {
+			locals.actionResult = 'domainSubmissionError';
+		}
+	}
+};

src/routes/(nosearch)/domain-submissions/+page.svelte

@@ -6,7 +6,9 @@
 	import RiArrowDropRightLine from '~icons/ri/arrow-drop-right-line';
 	import RiLinksLine from '~icons/ri/links-line';
 	import RiLoader2Line from '~icons/ri/loader-2-line';
-	import type { SubmissionsResult } from './+page.js';
+	import type { SubmissionsResult } from './+page.server.js';
+	import SignInButton from '@/components/custom/SignInButton.svelte';
+	import * as Card from '@/components/ui/card';
 
 	let { data } = $props();
 
@@ -35,9 +37,6 @@
 		clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(callback, ms);
 	}
-
-	// TODO implement domain submission (server actions)
-	function submitDomain() {}
 </script>
 
 {#snippet submissions(submissions: SubmissionsResult)}
@@ -74,6 +73,15 @@
 <main class="flex w-full max-w-4xl flex-col gap-2 self-center px-6">
 	<h2 class="-mx-2 text-3xl">Domain submissions</h2>
 	<hr class="my-2" />
+	{#if data.status === 'domainSubmissionError'}
+		<Card.Root class="p-4 outline outline-red-100 dark:outline-red-900">
+			Error submitting domain. Please try again and file an issue if it does not work.
+		</Card.Root>
+	{:else if data.status === 'domainSubmitted'}
+		<Card.Root class="p-4 outline outline-green-100 dark:outline-green-900">
+			Domain submitted successfully!
+		</Card.Root>
+	{/if}
 	<div class="w-full rounded-2xl bg-white p-4">
 		<h3 class="text-2xl">Submit domain</h3>
 		<hr class="my-2" />
@@ -91,31 +99,34 @@
 			{#await submissionsForInput}
 				<RiLoader2Line class="h-8 w-8 animate-spin" />
 			{:then submissionsForInput}
-				{#if submissionsForInput.count > 0}
-					<div class="mb-4">Found {submissionsForInput.count} pre-existing submission(s)</div>
-					{@render submissions(submissionsForInput)}
-					{#if domainInput.length > 0}
-						<Button
-							title="unimplemented"
-							variant="secondary"
-							class="mt-6 flex w-full flex-row items-center gap-2 dark:bg-muted"
-						>
-							<RiLinksLine class="min-h-5 min-w-5 text-black dark:text-white" />
-							Resubmit Domain
-						</Button>
-					{/if}
-				{:else}
-					Found no pre-existing submission(s)
-					{#if domainInput.length > 0}
-						<Button
-							title="unimplemented"
-							variant="secondary"
-							class="mt-6 flex w-full flex-row items-center gap-2 dark:bg-muted"
-						>
-							<RiLinksLine class="min-h-5 min-w-5 text-black dark:text-white" />
-							Submit Domain
-						</Button>
+				{#if domainInput.length > 0}
+					{#if submissionsForInput.count > 0}
+						<div class="mb-4">Found {submissionsForInput.count} pre-existing submission(s)</div>
+						{@render submissions(submissionsForInput)}
+					{:else}
+						Found no pre-existing submission(s)
 					{/if}
+					<form method="POST" action="?/submitDomain">
+						{#if data.loginStatus == 'assumeLoggedIn'}
+							<Button
+								variant="secondary"
+								class="mt-6 flex w-full flex-row items-center gap-2 dark:bg-muted"
+								type="submit"
+							>
+								<RiLinksLine class="min-h-5 min-w-5 text-black dark:text-white" />
+								{#if submissionsForInput.count > 0}
+									Resubmit Domain
+								{:else}
+									Submit Domain
+								{/if}
+							</Button>
+						{:else}
+							<div class="mt-6 flex w-full flex-row items-center gap-2 dark:bg-muted">
+								Authenticate to submit
+								<SignInButton loginStatus={data.loginStatus} />
+							</div>
+						{/if}
+					</form>
 				{/if}
 			{/await}
 		</div>

src/routes/(nosearch)/domain-submissions/+page.ts

@@ -1,5 +1,5 @@
 export async function load({ locals }) {
 	return {
-		status: locals.status
+		loginStatus: locals.loginStatus
 	};
 }