You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.4 KiB
121 lines
3.4 KiB
<script>
|
|
import Layout from "$/client/Layout.svelte";
|
|
import { push } from "svelte-spa-router";
|
|
import FormField from "$/client/components/FormField.svelte";
|
|
import api from "$/client/api.js";
|
|
|
|
let form = {_errors: {}};
|
|
|
|
let reset_sent = false;
|
|
let reset_complete = false;
|
|
|
|
const handle_error = (data) => {
|
|
if(data.message) {
|
|
form._errors.main = data.message;
|
|
} else {
|
|
form = Object.assign(form, data);
|
|
}
|
|
}
|
|
|
|
const request_reset = async () => {
|
|
let [status, data] = await api.post("/api/password_reset", form);
|
|
|
|
if(status == 200) {
|
|
reset_sent = true;
|
|
} else {
|
|
handle_error(data);
|
|
}
|
|
}
|
|
|
|
const finish_reset = async () => {
|
|
form.finalize = true;
|
|
let [status, data] = await api.post("/api/password_reset", form);
|
|
|
|
if(status == 200) {
|
|
reset_complete = true;
|
|
} else {
|
|
handle_error(data);
|
|
}
|
|
}
|
|
|
|
const login = () => push("/login/");
|
|
</script>
|
|
|
|
<style>
|
|
form buttons input {
|
|
width: 100%;
|
|
}
|
|
|
|
form section p {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
card {
|
|
max-width: 500px;
|
|
}
|
|
</style>
|
|
|
|
<Layout testid="page-password-reset" centered={ true }>
|
|
<form data-testid="login-form">
|
|
<card>
|
|
<top>
|
|
<h1>Password Reset</h1>
|
|
{#if form._errors.main}
|
|
<error data-testid="reset-error"> { form._errors.main }</error>
|
|
{/if}
|
|
</top>
|
|
|
|
{#if !reset_sent}
|
|
<middle>
|
|
<section><p>If your email exists we'll send you a reset link.</p></section>
|
|
<FormField form={ form } field="email" label="Your Email">
|
|
<input id="email" name="username" placeholder="Email" type="text" bind:value={ form.email}>
|
|
</FormField>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button-group>
|
|
<button data-testid="reset-button" on:click|preventDefault={ request_reset }>Request Reset Email</button>
|
|
</button-group>
|
|
</bottom>
|
|
{:else if reset_complete}
|
|
<middle>
|
|
<section>
|
|
<p data-testid="reset-complete-message">
|
|
Reset request submitted. It may take up to a minute to process
|
|
then you can log in with the new password. You'll receive an
|
|
email when it's ready, or you can try earlier if your email
|
|
isn't working.
|
|
</p>
|
|
</section>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button-group>
|
|
<button data-testid="login-button" on:click|preventDefault={ login }>Login</button>
|
|
</button-group>
|
|
</bottom>
|
|
{:else}
|
|
<middle>
|
|
<section><p data-testid="reset-email-sent">Email sent. Input the reset code.</p></section>
|
|
<FormField form={ form } field="code" label="Reset Code">
|
|
<input id="code" name="code" placeholder="Reset Code" type="text" bind:value={ form.code}>
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="password" label="Password">
|
|
<input id="password" name="password" placeholder="New Password" type="password" bind:value={ form.password}>
|
|
</FormField>
|
|
|
|
<FormField form={ form } field="password_repeat" label="Password (repeat)">
|
|
<input id="password_repeat" name="username" placeholder="New Password (Repeat)" type="password" bind:value={ form.password_repeat}>
|
|
</FormField>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button-group>
|
|
<button data-testid="reset-button" on:click|preventDefault={ finish_reset }>Change Your Password</button>
|
|
</button-group>
|
|
</bottom>
|
|
{/if}
|
|
</form>
|
|
</Layout>
|
|
|