support endpoint

2 files changed, 78 insertions, 47 deletions

diff --git a/src/routes/[username]/support/+page.server.js b/src/routes/[username]/support/+page.server.js
new file mode 100644
index 00000000..a335ec96
--- /dev/null
+++ b/src/routes/[username]/support/+page.server.js
@@ -0,0 +1,13 @@
+export const actions = {
+	default: async ({ cookies, request }) => {
+		let form = Object.fromEntries(await request.formData());
+
+		try {
+			await post('/email', form);
+		} catch (e) {
+			return invalid(400, { failed: true });
+		}
+
+		return { success: true };
+	}
+};
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index 796f72ec..cd1cc69f 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -1,58 +1,76 @@
 <script>
+	import { enhance } from '$app/forms';
+	import { scale } from 'svelte/transition';
+	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
+
+	export let data, form;
+
+	let { user } = data;
 	let email;
 	let message;
 </script>
 
-<div class="mt-24 mb-20">
-	<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('user.support.header')}
-	</h1>
+<div class="container px-4 max-w-lg mx-auto mt-20">
+	{#if form?.success}
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-8">Thank you!</h1>
+		<p class="text-center mb-8">Someone will be in touch shortly.</p>
 
-	<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
-		<div>
-			<label for="email" class="font-semibold">{$t('user.support.email')}</label>
-			<input
-				class="block border rounded-xl p-2 w-full"
-				type="email"
-				name="email"
-				bind:value={email}
-				required
-			/>
-		</div>
+		<a href={`/${user.username}/dashboard`}>
+			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+				>Done</button
+			>
+		</a>
+	{:else}
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-8">
+			{$t('user.support.header')}
+		</h1>
+		<form method="POST" use:enhance>
+			<div class="mb-4">
+				<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={user.username}
+				/>
+			</div>
 
-		<div>
-			<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
-			<input
-				class="block border rounded-xl p-2 w-full"
-				type="text"
-				name="account"
-				required
-				disabled
-				value={user.username}
-			/>
-		</div>
+			<div class="mb-4">
+				<label for="email" class="font-semibold">{$t('user.support.email')}</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="email"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
 
-		<div>
-			<label for="message" class="font-semibold">{$t('user.support.message')}</label>
-			<textarea
-				rows={5}
-				class="block border rounded-xl p-2 w-full"
-				type="text"
-				name="message"
-				bind:value={message}
-				required
-			/>
-		</div>
+			<div class="mb-4">
+				<label for="message" class="font-semibold">{$t('user.support.message')}</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					bind:value={message}
+					required
+				/>
+			</div>
 
-		<button
-			disabled={!email || !message}
-			class="{!email || !message
-				? 'opacity-50'
-				: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
-			message
-				? 'hover:opacity-80'
-				: ''}">{$t('user.support.send')}</button
-		>
-	</form>
+			<button
+				type="submit"
+				disabled={!email || !message}
+				class="{!email || !message
+					? 'opacity-50'
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
+				message
+					? 'hover:opacity-80'
+					: ''}">{$t('user.support.send')}</button
+			>
+		</form>
+	{/if}
 </div>