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.
103 lines
3.1 KiB
103 lines
3.1 KiB
2 years ago
|
<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>
|
||
|
|
|