bandolier-website/static/djenterator/form.svelte

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