Merge branch 'master' of https://github.com/coinos/coinos-ui into notificationsnotifications

1 files changed, 37 insertions, 20 deletions

diff --git a/src/routes/(app)/support/+page.svelte b/src/routes/(app)/support/+page.svelte
index d00cc069..8dbfc1af 100644
--- a/src/routes/(app)/support/+page.svelte
+++ b/src/routes/(app)/support/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-	import { enhance } from '$app/forms';
+	import { fail, success, post } from '$lib/utils';
 	import { scale } from 'svelte/transition';
 	import { AppHeader, Icon } from '$comp';
 	import { t } from '$lib/translations';
 
-	export let data, form;
+	export let data;
 
 	let { user } = data;
 	$: if (user) {
@@ -13,41 +13,58 @@
 
 	let email;
 	let message;
+	let sent;
+
+	let submit = (e) => {
+		e.preventDefault();
+		grecaptcha.ready(() => {
+			grecaptcha
+				.execute('6LfCd8YkAAAAANmVJgzN3SQY3n3fv1RhiS5PgMYM', { action: 'submit' })
+				.then((token) =>
+					post('/support', { email, message, token })
+						.then(() => (sent = true))
+						.catch(() => fail('problem submitting'))
+				);
+		});
+	};
 </script>
 
+<svelte:head>
+	<script
+		src="https://www.google.com/recaptcha/api.js?render=6LfCd8YkAAAAANmVJgzN3SQY3n3fv1RhiS5PgMYM"
+	></script>
+</svelte:head>
+
 {#if user}
 	<AppHeader {data} />
 {/if}
 
-{#if form?.error}
-	<div class="text-red-600 text-center">
-		{form.error}
-	</div>
-{/if}
+<div class="container px-4 max-w-lg mx-auto mt-20 space-y-8">
+	{#if sent}
+		<h1 class="text-center text-3xl md:text-4xl font-semibold">Thank you!</h1>
+		<div class="text-center text-lg text-secondary">Someone will be in touch shortly.</div>
 
-<div class="container px-4 max-w-lg mx-auto mt-20 space-y-5">
-	{#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>
-
-		<a href={user ? `/${user.username}` : '/'}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-				>Done</button
-			>
-		</a>
+		<div>
+			<a href={user ? `/${user.username}` : '/'}>
+				<button
+					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full bg-black text-white"
+					>Ok</button
+				>
+			</a>
+		</div>
 	{:else}
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-8">
 			{$t('user.support.header')}
 		</h1>
 
-		<p class="text-secondary">
+		<p class="text-secondary text-lg">
 			Fill out this form or email us directly at <a
 				class="underline"
 				href="mailto:[email protected]">[email protected]</a
 			> and we'll do our best to get back to you in a timely manner.
 		</p>
 
-		<form method="POST" use:enhance>
+		<form on:submit={submit}>
 			<div class="mb-4">
 				<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
 				<input
@@ -79,7 +96,7 @@
 			<button
 				type="submit"
 				disabled={!email || !message}
-				class="{!email || !message
+				class="g-recaptcha {!email || !message
 					? 'opacity-50'
 					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
 				message