blob: 7560175b6faa9817357e2ee82c3d507a0e58e15b (
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<script>
import {update_profile} from "$shared/lib/api/user";
import Modal from "$shared/components/modal.svelte";
import Alert from "$shared/components/alert.svelte";
import Button from "$shared/components/button.svelte";
import {is_email} from "$shared/lib/helpers";
import {api_base} from "$shared/lib/configuration";
import {get_session_data} from "$shared/lib/session";
const archiveLink = api_base("_/api/account/archive");
let modal;
let understands = false;
let formIsLoading = false;
let formError;
let username = get_session_data()?.profile.username;
let usernameFieldMessage;
let usernameFieldMessageClass = "color-error";
let password;
let passwordFieldMessage;
let passwordFieldMessageClass = "color-error";
async function submit_form(e) {
e.preventDefault();
if (!username && !password) {
console.error("Not submitting becuase both values is empty");
return;
}
usernameFieldMessage = "";
passwordFieldMessage = "";
if (username && !is_email(username)) {
usernameFieldMessage = "Username has to be a valid email";
return;
}
if (password && password?.length < 6) {
passwordFieldMessage = "The new password must contain at least 6 characters";
return;
}
formIsLoading = true;
const response = await update_profile({
username,
password,
});
formIsLoading = false;
if (response.ok) {
if (password) {
passwordFieldMessage = "Successfully updated";
passwordFieldMessageClass = "color-success";
password = "";
}
if (username) {
usernameFieldMessage = "Successfully updated";
usernameFieldMessageClass = "color-success";
password = "";
}
} else {
formError = response.data.title ?? "An unknown error occured";
}
}
async function handle_delete_account_button_click() {
alert("Not implemented");
return;
if (understands && confirm("Are you absolutely sure that you want to delete your account?")) {
}
}
export const functions = {
open() {
modal.open();
},
close() {
// modal.close();
},
};
</script>
<Modal title="Profile"
bind:functions={modal}>
<section class="margin-bottom-md">
<p class="text-md margin-bottom-sm">Update your information</p>
<form on:submit={submit_form}
autocomplete="new-password">
{#if formError}
<small class="color-danger">{formError}</small>
{/if}
<div class="margin-bottom-sm">
<label for="email"
class="form-label margin-bottom-xxs">New username</label>
<input type="email"
class="form-control width-100%"
id="email"
placeholder={username}
bind:value={username}/>
{#if usernameFieldMessage}
<small class={usernameFieldMessageClass}>{usernameFieldMessage}</small>
{/if}
</div>
<div class="margin-bottom-sm">
<label for="password"
class="form-label margin-bottom-xxs">New password</label>
<input type="password"
class="form-control width-100%"
id="password"
bind:value={password}/>
{#if passwordFieldMessage}
<small class={passwordFieldMessageClass}>{passwordFieldMessage}</small>
{/if}
</div>
<div class="flex justify-end">
<Button text="Save"
on:click={submit_form}
variant="primary"
loading={formIsLoading}/>
</div>
</form>
</section>
<section class="margin-bottom-md">
<p class="text-md margin-bottom-sm">Download your data</p>
<a class="btn btn--subtle"
href={archiveLink}
download>Click here to download your data</a>
</section>
<section>
<p class="text-md margin-bottom-sm">Delete account</p>
<div class="margin-bottom-sm">
<Alert
message="Deleting your account and data means that all of your data (entries, categories, etc.) will be unrecoverable forever.<br>You should probably download your data before continuing."
type="info"
/>
</div>
<div class="form-check margin-bottom-sm">
<input type="checkbox"
class="checkbox"
id="the-consequences"
bind:checked={understands}/>
<label for="the-consequences">I understand the consequences of deleting my account and data.</label>
</div>
<div class="flex justify-end">
<Button text="Delete everything"
variant="accent"
disabled={!understands}
on:click={handle_delete_account_button_click}/>
</div>
</section>
</Modal>
|
