blob: 8dbfc1af50f81517c42f1c15e882ba6ed4056fc2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<script>
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;
let { user } = data;
$: if (user) {
data.subject = { ...user };
}
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}
<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>
<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 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 on:submit={submit}>
<div class="mb-4">
<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
<input
class="bg-primary"
type="text"
name="account"
required
value={user?.username || ''}
/>
</div>
<div class="mb-4">
<label for="email" class="font-semibold">{$t('user.support.email')}</label>
<input class="bg-primary" type="email" name="email" bind:value={email} required />
</div>
<div class="mb-4">
<label for="message" class="font-semibold">{$t('user.support.message')}</label>
<textarea
rows={5}
class="bg-primary"
type="text"
name="message"
bind:value={message}
required
/>
</div>
<button
type="submit"
disabled={!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
? 'hover:opacity-80'
: ''}">{$t('user.support.send')}</button
>
</form>
{/if}
</div>
|
