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/Register.svelte

215 lines
5.4 KiB

<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>Bandolier Template Project</h1>
<h4>Welcome To Your Project</h4>
<p>After you register go back to the window you're running <code>./bando.js init</code> in and hit <code>ENTER</code> to continue.
</p>
<p>If you want to change this message it is in <code>client/pages/Register.svelte</code>
</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}