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 {querystring, link} from "svelte-spa-router";
import {check_forgot_password_request, fulfill_forgot_password_request} from "$shared/lib/api/user";
import Alert from "$shared/components/alert.svelte";
import Button from "$shared/components/button.svelte";
import Layout from "./_layout.svelte";
const requestId = new URLSearchParams($querystring).get("id");
let isLoading = false;
let newPassword;
let newPasswordError;
let 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() {
let isValid = true;
if (!newPassword.length > 5) {
newPasswordError = "The new password must be at least 5 characters";
isValid = false;
}
return isValid;
}
async function submit() {
if (isLoading) {
return;
}
if (is_valid()) {
isLoading = true;
const response = await fulfill_forgot_password_request(requestId, newPassword);
if (response.ok) {
alert.show("success", {
title: "Your new password is set",
text: "<a href='/#/login'>Click here to log in</a>",
});
} else {
console.error(response.data);
alert.show("error", {
title: response.data?.title ?? "An error occured",
text: response.data?.text ?? "Please try again soon",
});
}
}
}
async function is_valid_password_reset_request() {
const response = await check_forgot_password_request(requestId);
if (response.ok) {
return response.data === true;
}
return false;
}
</script>
<Layout>
<form on:submit|preventDefault={submit}
class="margin-bottom-md max-width-xxs {isLoading ? 'c-disabled loading' : ''}">
{#if requestId}
{#await is_valid_password_reset_request()}
<p>Checking your request...</p>
<a href="/login"
use:link>cancel</a>
{:then isActive}
{#if isActive === true}
<fieldset>
<legend class="form-legend">
<span class="margin-bottom-xs">Set your new password</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={alert.isVisible}
title={alert.title}
message={alert.message}
type={alert.type}/>
</div>
<div class="margin-bottom-xs">
<input
type="password"
id="new-password"
placeholder="New password"
class="form-control width-100%"
bind:value={newPassword}
/>
{#if newPasswordError}
<small class="color-danger">{newPasswordError}</small>
{/if}
</div>
<div class="flex justify-end">
<Button text="Set new password"
type="primary"
loading={isLoading}
on:click={submit}/>
</div>
</fieldset>
{:else}
<Alert title="This request is expired"
message="Please submit the forgot password form again"
type="warning"/>
<div class="flex justify-between width-100% margin-y-sm">
<a href="/forgot"
use:link>Go to forgot form</a>
<a href="/login"
use:link>Go to login form</a>
</div>
{/if}
{:catch _}
<Alert title="An error occured"
message="Please try again soon"
type="error"/>
{/await}
{/if}
</form>
</Layout>
|
