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
|
<script>
import {onMount} from "svelte";
import {link} from "svelte-spa-router";
import {create_forgot_password_request} 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 Tile from "$shared/components/tile.svelte";
import Layout from "./_layout.svelte";
let isLoading = false;
let username;
const alert = {
title: "",
type: "",
message: "",
isVisible: false,
show(type, obj) {
alert.title = obj.title;
alert.message = obj.text;
alert.type = type;
alert.isVisible = true;
isLoading = false;
},
hide() {
alert.isVisible = false;
alert.title = "";
alert.message = "";
alert.type = "";
isLoading = false;
},
};
function is_valid() {
return is_email(username);
}
async function submit_form() {
if (isLoading) {
return;
}
if (is_valid()) {
isLoading = true;
const response = await create_forgot_password_request(username);
if (response.ok) {
alert.show("success", {
title: "Request is sent",
text: "If we find an account associated with this email address, you will receive an email with a reset link very soon.",
});
} else {
console.error(response.data);
alert.show("error", {
title: response.data?.title ?? "An error occured",
text: response.data?.text ?? "Please try again soon",
});
}
}
}
onMount(() => {
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("email-address").focus();
});
});
</script>
<Layout>
<Tile>
<form on:submit|preventDefault={submit_form}
class="max-width-xxs">
<fieldset>
<legend class="form-legend">
<span class="margin-bottom-xs">Send reset link</span> <br/>
<span class="text-sm">... or <a href="/login"
use:link>log in</a></span>
</legend>
<div class="margin-bottom-xs">
<p>Provide your email address, and we'll send you a link to set your new password.</p>
</div>
<div class="margin-bottom-xxs max-width-xxs">
<Alert visible={alert.isVisible}
title={alert.title}
message={alert.message}
type={alert.type}/>
</div>
<div class="margin-bottom-xs">
<input type="email"
id="email-address"
placeholder="Email address"
class="form-control width-100%"
bind:value={username}/>
</div>
<div class="flex justify-end">
<Button text="Send reset link"
type="primary"
loading={isLoading}/>
</div>
</fieldset>
</form>
</Tile>
</Layout>
|
