bandolier-website/client/pages/UserProfile.svelte

<script>
  import FormField from "$/client/components/FormField.svelte";
  import Layout from "$/client/Layout.svelte";
  import api from "$/client/api.js";
  import { push } from "svelte-spa-router";
  import { user } from "$/client/stores.js";

  let notice = "";

  let form = {
    email: $user.email,
    initials: $user.initials,
    full_name: $user.full_name,
    password: "",
    password_repeat: "",
    unsubscribe: $user.unsubscribe,
    _valid: true,
    _errors: {}
  }

  const submit = async () => {
    let [status, data] = await api.post("/api/user/profile", form, api.logout_user);

    if(status == 200) {
      // TODO: update the internal user information from the server?
      Object.assign($user, {
        email: form.email,
        initials: form.initials,
        full_name: form.full_name,
        unsubscribe: form.unsubscribe
      });

      notice = "User profile updated.";
      form.password = "";
      form.password_repeat = "";
    } else if(status == 401) {
      push("/login/");
    } else {
      form._errors.main = data.message || data.error;
      form = Object.assign(form, data);
    }
  }
</script>

<style>
  input#unsubscribe {
    height: 2rem;
    width: 2rem;
  }
</style>

<Layout testid="page-user-profile" centered={ true } authenticated={ true }>
  <form action="/api/register" method="POST">
    <card>
      <top>
        <h1>Your Profile</h1>
        {#if form._errors.main}
          <error data-testid="update-error">{ form._errors.main }</error>
        {:else if notice}
          <notice data-testid="update-notice">{ notice }</notice>
        {/if}
      </top>

      <middle>
        <FormField form={ form } field="email" label="Email Address">
          <input type="email" id="email" bind:value={ form.email } name="email">
        </FormField>

        <FormField form={ form } field="full_name" label="Full Name (private)">
          <input type="text" id="full_name" bind:value={ form.full_name } name="full_name">
        </FormField>

        <FormField form={ form } field="initials" label="Initials (public)">
          <input type="text" id="initials" bind:value={ form.initials } name="initials">
        </FormField>

        <FormField form={ form } field="password" label="Password">
          <input type="password" id="password" bind:value={ form.password } name="password">
        </FormField>

        <FormField form={ form } field="password_repeat" label="Password (repeat)">
          <input type="password" id="password_repeat" bind:value={ form.password_repeat } name="password_repeat">
        </FormField>

        <FormField form={ form } field="unsubscribe" label="Unsubscribe Emails" inline={ true }>
          <input type="checkbox" id="unsubscribe" bind:checked={ form.unsubscribe } name="unsubscribe">
        </FormField>
      </middle>

      <bottom>
        <button-group>
          <button type="button" on:click|preventDefault={ () => push("/") }>Cancel</button>
          <button data-testid="update-button" on:click|preventDefault={ submit }>Update</button>
        </button-group>
      </bottom>
    </card>
  </form>
</Layout>