blob: b2f82e8970ec94d82016d36592313087aae4c2c3 (
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<script>
import { onDestroy } from 'svelte';
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 recaptchaSiteKey = '6LfCd8YkAAAAANmVJgzN3SQY3n3fv1RhiS5PgMYM';
let submit = (e) => {
e.preventDefault();
grecaptcha.ready(() => {
grecaptcha.execute(recaptchaSiteKey, { action: 'submit' }).then((token) =>
post('/support', { username: user?.username, email, message, token })
.then(() => (sent = true))
.catch(() => fail('problem submitting'))
);
});
};
onDestroy(() => {
const nodeBadge = document.querySelector('.grecaptcha-badge');
if (nodeBadge) {
document.body.removeChild(nodeBadge.parentNode);
}
const scriptSelector =
"script[src='https://www.google.com/recaptcha/api.js?render=" + recaptchaSiteKey + "']";
const script = document.querySelector(scriptSelector);
if (script) {
script.remove();
}
});
</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>
|
