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/static/djenterator/form.svelte

102 lines
3.1 KiB

<script>
import Validator from 'Validator';
import { push } from 'svelte-spa-router';
import api from '../api.js';
import FormField from '../components/FormField.svelte';
<% if(schema) { %>
const form = {
<% for(let field in schema._columns) { %> <%- field %>: <%= schema._columns[field].defaultValue || '""' %>,
<% } %>
valid: false,
errors: []
}
const rules = {
<% for(let field in schema._columns) { %> <%- field %>: "required",
<% } %>
}
<% } else { %>
const form = {
email: "",
valid: false,
errors: []
}
const rules = {
email: 'required|email',
}
<% } %>
const validate = async () => {
let validation = Validator.make(form, rules);
form.valid = validation.passes();
form.errors = validation.getErrors();
if(form.valid) {
let result = {
email: form.email,
}
let [status, data] = await api.post("/api<%- api_url %>", result);
if(status !== 200) {
form.errors.main = data.message || data.error || "<%- post_error %>";
}
} else {
console.error(form.errors);
}
}
</script>
<style>
main {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3rem;
}
</style>
<main>
<form action="/api<%- api_url %>" method="POST">
<header>
<h1><%- form_name %></h1>
{#if form.errors.main}
<error>{ form.errors.main }</error>
{/if}
</header>
<% if(schema) { %>
<% for(let field in schema._columns) { %>
<% let info = schema._columns[field] %>
<FormField form={ form } field="<%- field %>" label="<%- field %>">
<% if(field.includes("password")) { %>
<input type="password" id="<%- field %>" bind:value={ form.<%- field %> } name="<%- field %>">
<% } else if(field.includes("email")) { %>
<input type="email" id="<%- field %>" bind:value={ form.<%- field %> } name="<%- field %>">
<% } else if(info.type === "boolean") { %>
<input type="checkbox" id="<%- field %>" name="<%- field %>" bind:value={ form.<%- field %> }>
<% } else if(info.type === "datetime" || info.type === "date") { %>
<input type="text" id="<%- field %>" bind:value={ form.<%- field %> } name="<%- field %>">
<% } else if(info.type === "text") { %>
<textarea bind:value={ form.<%- field %> } name="<%- field %>" id="<%- field %>"></textarea>
<% } else if(info.type === "varchar") { %>
<input type="text" id="<%- field %>" bind:value={ form.<%- field %> } name="<%- field %>">
<% } else { %>
<input type="text" id="<%- field %>" bind:value={ form.<%- field %> } name="<%- field %>">
<% } %>
</FormField>
<% } %>
<% } else { %>
<FormField form={ form } field="<%- field %>" label="<%- field %>">
<input type="email" id="email" bind:value={ form.email } name="email">
</FormField>
<% } %>
<input type="submit" data-testid="<%- form_name %>-button"
on:click|preventDefault={ validate }
value="<%- submit_text %>">
</form>
</main>