This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
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.
pixelperfectionist/admin/bando/demos/Form.svelte

79 lines
2.0 KiB

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