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
129
130
131
132
133
134
135
|
<script>
import { PUBLIC_RECAPTCHA_SITE_KEY } from "$env/static/public";
import { browser } from "$app/environment";
import { onDestroy, onMount } 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 } = $props();
let { user } = data;
let username = $state(user?.username);
let email = $state();
let message = $state();
let sent = $state();
let recaptchaSiteKey = PUBLIC_RECAPTCHA_SITE_KEY;
let isTor = browser && location.hostname.endsWith(".onion");
onMount(() => {
if (!isTor && recaptchaSiteKey) {
let s = document.createElement("script");
s.src = "https://www.google.com/recaptcha/api.js?render=" + recaptchaSiteKey;
document.head.appendChild(s);
}
});
let submit = (e) => {
e.preventDefault();
if (isTor) {
post("/post/email", {
username: user?.username || `${username} (unverified)`,
email,
message,
token: "",
})
.then(() => (sent = true))
.catch(() => fail("problem submitting"));
return;
}
grecaptcha.ready(() => {
grecaptcha.execute(recaptchaSiteKey, { action: "submit" }).then((token) =>
post("/post/email", {
username: user?.username || `${username} (unverified)`,
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>
<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">
{$t("user.support.fillForm")}
<a class="underline" href="mailto:[email protected]">[email protected]</a>
{$t("user.support.doOurBest")}
</p>
<form onsubmit={submit}>
<div class="mb-4">
<label for="username" class="font-semibold"
>{$t("user.support.accountName")}</label
>
<input type="text" name="username" required bind:value={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>
|
