backend/src/components/invitation/Invitation.tsx

import { createForm } from "@felte/solid";
import { Component } from "solid-js";
import { TextField, Button } from "@kobalte/core";

import "./style.css";

interface Props {}

const Invitation: Component<Props> = (props) => {
  const submitHandler = (values: any, context: any) => {
    console.log({
      caller: "Invitation / submitHandler",
      props,
      values,
      context,
    });
  };

  const { form } = createForm({ onSubmit: submitHandler });

  return (
    <form use:form>
      <TextField.Root>
        <TextField.Label>Database</TextField.Label>
        <TextField.Input
          type="url"
          name="database"
          required={true}
          placeholder="Database URL"
        />
        <TextField.ErrorMessage>
          Please provide a valid URL
        </TextField.ErrorMessage>
      </TextField.Root>
      <TextField.Root>
        <TextField.Label>Password</TextField.Label>
        <TextField.Input
          type="text"
          name="password"
          required={true}
          placeholder="Password"
          autocomplete="off"
        />
        <TextField.ErrorMessage>
          Please provide a valid password
        </TextField.ErrorMessage>
      </TextField.Root>
      <Button.Root type="submit">Create</Button.Root>
    </form>
  );
};

export default Invitation;