bandolier-template/client/pages/Register.svelte

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

  let tos_open = false;

  let form = {
    email: "",
    full_name: "",
    initials: "",
    password: "",
    password_repeat: "",
    tos_agree: false,
    _valid: false,
    _errors: {}
  }

  const register = async () => {
    let [status, data] = await api.post("/api/register", form);
    log.debug("Registration returned", status, data);

    if(status === 200) {
      $user.new_registration = true;
      push('/');
    } else {
      form = Object.assign(form, data);
    }
  }

  const tos_close_agree = () => {
    tos_open = false;
    form.tos_agree = true;
  }

  const open_tos = () => {
    tos_open = true;
    window.scrollTo(0, 0);
  }
</script>

<style>
  span#tos_agree_link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1 1 auto;
  }

  span#tos_agree_link a {
    font-size: 1.3em;
    font-weight: bold;
  }

  span#tos_agree_link input {
    border: 1px solid red;
    transform: scale(1.5);
  }

  div#tos_modal {
    margin-right: 2rem;
    margin-left: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    height: 80vh;
    overflow-y: auto;
  }

  form {
    font-size: 0.8em;
  }

  payment {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
  }

  payment > left,
  payment > right {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 1rem;
    padding-top: 1.3rem;
  }

  payment > right {
    background-color: var(--color-bg-tertiary);
    border-left: 1px solid var(--color-bg-secondary);
  }

  payment > right info {
    max-width: calc(var(--width-content) / 2);
  }

  payment > left {
    flex-direction: row-reverse;
  }

  payment > left register {
    display: inline-block;
  }

  @media only screen and (max-width: 800px) {
    payment {
      width: 100%;
      flex-direction: column;
    }

    payment > right {
      width: 100%;
      align-content: center;
      justify-content: center;
    }

    payment > right div {
      align-self: center;
      width: min(95vw, calc(var(--width-card) * 1.5));
      min-width: min(95vw, calc(var(--width-card) * 1.5));
      max-width: min(95vw, calc(var(--width-card) * 1.5));
    }

    payment > left {
      width: 100%;
      max-width: unset;
      min-width: unset;
      box-shadow: unset;
      align-content: center;
      justify-content: center;
    }
  }
</style>

<Layout horizontal={true} fullwidth={true}>
  <payment>
    <left>
    <register>
        <h1>Register an Account</h1>
          {#if form._errors.main}
            <callout style="font-size: 0.9em" class="info">
            {form._errors.main}
            </callout>
          {/if}
        <form action="/api/register" method="POST">
          <FormField field="email" form={ form } label="Email Address">
            <input type="email" id="email" bind:value={ form.email } name="email">
          </FormField>

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

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

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

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

          <FormField field="tos_agree" form={ form } label="Accept Terms of Service">
            <span id="tos_agree_link">
              <input type="checkbox" id="tos_agree" bind:checked={ form.tos_agree } name="tos_agree"> <a href="/client/#/tos/" on:click|preventDefault={ open_tos }> Read the TOS</a>
            </span>
          </FormField>

          <button type="button" data-testid="register-button"
                  on:click|preventDefault={ register }>Register and Continue to Payment</button>
        </form>
      </register>
    </left>

    <right>
      <info>
        <h1>Learn JavaScript the Hard Way</h1>
        <h4>Beginner Basics</h4>
        <p>The first part of the entire course--<b>Beginner Basics</b>--is available now.  After you register
          and pay you'll have access to all of these great features:
        </p>

        <ol>
          <li><b>61 lessons</b> just for Beginner Basics with 2 more modules in development.</li>
          <li><b>37 hours of high quality video</b> demonstrations of almost every lesson.</li>
          <li>Fully <b>written explanations</b> to go with the videos.</li>
          <li>A Discord server where you can get direct help from Zed.</li>
          <li>Access to all of the code used in the course <b>and this website</b> for you to study.</li>
          <li><b>30 day refund policy.</b> If you don't like the course, you can request a refund!</li>
        </ol>

        <p>If you want to see the current and planned lessons you can review the <a href="/curriculum/">curriculum list</a>.
        </p>
      </info>
    </right>
  </payment>
</Layout>

{#if tos_open}
  <Modal on:close={ () => tos_open = false } full_screen={ true }>
    <div id="tos_modal">
      <TOS />
      <button-group>
      <button type="button" on:click={ () => tos_open = false }>
        Close
      </button>
      <button on:click={ tos_close_agree }>
        Agree to TOS
      </button>
      </button-group>
    </div>
</Modal>
{/if}