theis.gaedigk/mcs-lose
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add EJS as a dependency and implement form submission in MainForm component

Browse Source
This commit is contained in:
Theis Gaedigk
2025-08-11 18:42:15 +02:00
parent ba62beb90d
commit d92759a7c3
5 changed files with 101 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/MainForm.tsx
View File

@@ -1,4 +1,12 @@
import React from "react";
import { registerLos } from "../utils/register";
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const data = Object.fromEntries(formData.entries());
await registerLos(data);
};
const MainForm: React.FC = () => {
return (
@@ -8,7 +16,7 @@ const MainForm: React.FC = () => {
* alle Informationen werden benötigt
</p>
<form className="mt-5 space-y-4">
<form onSubmit={handleSubmit} className="mt-5 space-y-4">
<div className="space-y-1">
<label
htmlFor="losnummer"
@@ -19,6 +27,7 @@ const MainForm: React.FC = () => {
<input
type="text"
id="losnummer"
name="losnummer"
placeholder="XXXX-XXXX-XXXX-XXXX"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none ring-0 transition focus:border-black/40 focus:ring-2 focus:ring-black/10"
@@ -36,6 +45,7 @@ const MainForm: React.FC = () => {
<input
type="text"
id="vorname"
name="vorname"
placeholder="Max"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
@@ -52,6 +62,7 @@ const MainForm: React.FC = () => {
<input
type="text"
id="nachname"
name="nachname"
placeholder="Mustermann"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
@@ -69,6 +80,7 @@ const MainForm: React.FC = () => {
<input
type="text"
id="strasse"
name="strasse"
placeholder="Musterstraße 1"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
@@ -82,6 +94,7 @@ const MainForm: React.FC = () => {
<input
type="text"
id="plz"
name="plz"
placeholder="12345 Musterstadt"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
@@ -95,6 +108,7 @@ const MainForm: React.FC = () => {
<input
type="email"
id="email"
name="email"
placeholder="max@mustermann.de"
required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"