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 {create_account} from "$shared/lib/api/user";
import {is_email} from "$shared/lib/helpers";
import Alert from "$shared/components/alert.svelte";
import Button from "$shared/components/button.svelte";
import {link} from "svelte-spa-router";
import Layout from "./_layout.svelte";
const signupForm = {
loading: false,
values: {
username: "",
password: "",
},
alert: {
title: "",
type: "",
message: "",
isVisible: false,
show(type, obj) {
signupForm.alert.title = obj.title;
signupForm.alert.message = obj.text;
signupForm.alert.type = type;
signupForm.alert.isVisible = true;
signupForm.loading = false;
},
hide() {
signupForm.alert.isVisible = false;
signupForm.alert.title = "";
signupForm.alert.message = "";
signupForm.alert.type = "";
},
},
is_valid() {
return (
is_email(signupForm.values.username) &&
signupForm.values.password.length > 0
);
},
async submit_form() {
if (signupForm.loading) {
return;
}
if (signupForm.is_valid()) {
signupForm.alert.hide();
signupForm.loading = true;
try {
const response = await create_account(signupForm.values);
if (response.ok) {
location.reload();
} else {
if (response.data.title || response.data.text) {
signupForm.alert.show("error", {
title: response.data.title ?? "",
text: response.data.text ?? "",
});
} else {
signupForm.alert.show("error", {
title: "An unknown error occured",
text: "Try again soon",
});
}
}
} catch (e) {
console.error(e);
signupForm.alert.show("error", {
title: "An error occured",
text: "Could not connect to server, please check your internet connection",
});
}
} else {
signupForm.alert.show("error", {
title: "Invalid form",
});
}
},
};
</script>
<Layout>
<form
on:submit|preventDefault={signupForm.submit_form}
class="margin-bottom-md max-width-xxs"
>
<fieldset>
<legend class="form-legend">
<span class="margin-bottom-xs">Create your account</span> <br/>
<span class="text-sm"
>... or <a href="/login"
use:link>log in</a></span
>
</legend>
<div class="margin-bottom-xxs max-width-xxs">
<Alert
visible={signupForm.alert.isVisible}
title={signupForm.alert.title}
message={signupForm.alert.message}
type={signupForm.alert.type}
/>
</div>
<div class="margin-bottom-xxs">
<input
type="email"
placeholder="Email address"
class="form-control width-100%"
id="email-address"
bind:value={signupForm.values.username}
/>
</div>
<div class="margin-bottom-xxs">
<input
type="password"
placeholder="Password"
class="form-control width-100%"
bind:value={signupForm.values.password}
/>
</div>
<div class="flex justify-end">
<Button
class="margin-bottom-xs"
text="Submit"
type="primary"
loading={signupForm.loading}
/>
</div>
</fieldset>
</form>
</Layout>
|
