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.
79 lines
2.0 KiB
79 lines
2.0 KiB
2 years ago
|
<script>
|
||
|
|
import FormField from '$/client/components/FormField.svelte';
|
||
|
|
import api from "$/client/api.js";
|
||
|
|
|
||
|
|
let form = {
|
||
|
|
full_name: "",
|
||
|
|
password: "",
|
||
|
|
subscribe: '0',
|
||
|
|
email: "",
|
||
|
|
notes: "",
|
||
|
|
_valid: false,
|
||
|
|
_errors: {main: ""},
|
||
|
|
}
|
||
|
|
|
||
|
|
// normally the rules are maintained on the /api/ and then added to the
|
||
|
|
// form when there's an error. See client/pages/Register.svelte for a good example
|
||
|
|
form._rules = {
|
||
|
|
full_name: "required",
|
||
|
|
password: "required",
|
||
|
|
subscribe: "required",
|
||
|
|
email: "required|email",
|
||
|
|
notes: "",
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 3rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<form action="/api/user/profile" method="POST">
|
||
|
|
<card>
|
||
|
|
<top>
|
||
|
|
<h1>Register</h1>
|
||
|
|
<error>{ form._errors.main }</error>
|
||
|
|
</top>
|
||
|
|
|
||
|
|
|
||
|
|
<middle>
|
||
|
|
<FormField form={ form } field="full_name" label="Full Name">
|
||
|
|
<input type="text" id="full_name" bind:value={ form.full_name } name="full_name">
|
||
|
|
</FormField>
|
||
|
|
|
||
|
|
|
||
|
|
<FormField form={ form } field="password" label="Password">
|
||
|
|
<input type="password" id="password" bind:value={ form.password } name="password">
|
||
|
|
</FormField>
|
||
|
|
|
||
|
|
|
||
|
|
<FormField form={ form } field="email" label="Email">
|
||
|
|
<input type="email" id="email" bind:value={ form.email } name="email">
|
||
|
|
</FormField>
|
||
|
|
|
||
|
|
|
||
|
|
<FormField form={ form } field="notes" label="Notes">
|
||
|
|
<textarea bind:value={ form.notes } name="notes" id="notes"></textarea>
|
||
|
|
</FormField>
|
||
|
|
|
||
|
|
<FormField form={ form } field="subscribe" label="Want Notifications?">
|
||
|
|
<input type="checkbox" id="subscribe" name="subscribe" bind:checked={ form.subscribe }>
|
||
|
|
</FormField>
|
||
|
|
</middle>
|
||
|
|
|
||
|
|
<bottom>
|
||
|
|
<button-group>
|
||
|
|
<button data-testid="register-button"
|
||
|
|
on:click|preventDefault={ () => form = api.validate(form) }>Register</button>
|
||
|
|
</button-group>
|
||
|
|
</bottom>
|
||
|
|
</card>
|
||
|
|
</form>
|
||
|
|
</main>
|