blob: e19a66040b3404a249f29573cc0083069776087f (
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
|
<script>
// Rendered outside the settings layout (+page@(app)) so this form isn't
// nested inside the settings save form.
import { enhance } from "$app/forms";
import { t } from "$lib/translations";
let { data, form } = $props();
let { user } = $derived(data);
let confirm = $state(form?.confirm || "");
let working = $state(false);
let matches = $derived(
confirm.trim().toLowerCase() === user.username.toLowerCase(),
);
</script>
<div class="container px-4 max-w-xl mx-auto space-y-5 mt-10">
<h1 class="text-3xl font-bold text-center">
{$t("user.settings.deleteAccount")}
</h1>
<div class="rounded-2xl border-2 border-error p-4 space-y-3">
<p class="flex gap-2">
<iconify-icon
noobserver
icon="ph:warning-bold"
width="24"
class="text-error shrink-0"
></iconify-icon>
<span>{$t("user.settings.deleteAccountWarning")}</span>
</p>
<p class="text-secondary">{$t("user.settings.deleteAccountBalance")}</p>
</div>
{#if form?.error}<p class="text-error">{form.error}</p>{/if}
<form
method="POST"
class="space-y-3"
use:enhance={() => {
working = true;
return async ({ update }) => {
await update({ reset: false });
working = false;
};
}}
>
<label class="block space-y-1">
<span class="font-bold">{$t("user.settings.deleteAccountConfirm")}</span>
<input
class="input input-bordered w-full"
name="confirm"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
placeholder={user.username}
bind:value={confirm}
/>
</label>
{#if user.haspin}
<input
class="input input-bordered w-full"
type="password"
inputmode="numeric"
name="pin"
placeholder={$t("user.settings.securityPIN")}
/>
{/if}
<button
class="btn btn-error w-full rounded-2xl"
disabled={!matches || working}
>
<iconify-icon noobserver icon="ph:trash-bold" width="24"></iconify-icon>
{$t("user.settings.deleteAccountButton")}
</button>
<a href="/settings/security" class="btn w-full rounded-2xl">
{$t("payments.cancel")}
</a>
</form>
</div>
|
