This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/client/pages/ResetPassword.svelte

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>