bandolier-template/client/pages/ResetPassword.svelte

<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>