blob: b47c5c1aebc723add993fd8c45b68457ac1a21ec (
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
123
124
125
126
127
128
|
<script>
import { run } from 'svelte/legacy';
import { browser } from "$app/environment";
import { onDestroy } from "svelte";
import { fail, success, post } from "$lib/utils";
import { scale } from "svelte/transition";
import Icon from "$comp/Icon.svelte";
import { t } from "$lib/translations";
let { data = $bindable() } = $props();
let { user } = data;
run(() => {
if (user) {
data.subject = { ...user };
}
});
let email = $state();
let message = $state();
let sent = $state();
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(() => {
if (!browser) return;
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
>
<div class="container max-w-lg mx-auto space-y-8 p-4 pb-20">
{#if sent}
<h1 class="text-center text-3xl lg: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 onsubmit={submit}>
<div class="mb-4">
<label for="account" class="font-semibold"
>{$t("user.support.accountName")}</label
>
<input
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 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}
type="text"
name="message"
bind:value={message}
required
></textarea>
</div>
<button
type="submit"
disabled={!email || !message}
class="g-recaptcha bg-black text-white font-bold rounded-xl py-3 w-full mx-auto hover:opacity-80"
>{$t("user.support.send")}</button
>
</form>
{/if}
</div>
|
