Template
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { postWebhook } from "@/lib/n8n";
|
|
|
|
type HelloResponse = { message?: string };
|
|
|
|
// Pfad des eigenen Webhooks mit Kürzel, zum Beispiel "anna-hello" (ohne /webhook/).
|
|
// In der E&P-n8n gehört jeder Pfad genau einem Workflow. Ohne Angabe ruft die Seite nichts auf.
|
|
const HELLO_PATH = (process.env.NEXT_PUBLIC_HELLO_PATH || "").trim();
|
|
|
|
// Beispielseite im E&P-Layout. Kopf und Fuß kommen aus app/layout.tsx,
|
|
// Farben und Bausteine (ep-karte, ep-feld, ep-knopf, ep-cta, ep-hinweis, ep-fehler) aus app/globals.css.
|
|
export default function Home() {
|
|
const [name, setName] = useState("");
|
|
const [answer, setAnswer] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setAnswer(null);
|
|
if (!HELLO_PATH) {
|
|
setError(
|
|
"NEXT_PUBLIC_HELLO_PATH fehlt. Beim ersten Veröffentlichen den eigenen Pfad mitgeben, zum Beispiel anna-hello.",
|
|
);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const res = await postWebhook<HelloResponse>(HELLO_PATH, { name });
|
|
setAnswer(res.message ?? JSON.stringify(res));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="ep-ueberschrift text-3xl">Hallo aus n8n</h1>
|
|
<p className="mt-4 text-ink-muted">
|
|
Das Formular ruft einen n8n-Webhook deines eigenen Workflows auf (Vorlage <code>hello-webhook.json</code>,
|
|
Pfad <code>/webhook/{HELLO_PATH || "anna-hello"}</code>).
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit} className="ep-karte flex flex-col gap-3">
|
|
<label htmlFor="name" className="ep-label">
|
|
Dein Name
|
|
</label>
|
|
<input
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Max"
|
|
className="ep-feld"
|
|
required
|
|
/>
|
|
<button type="submit" disabled={loading} className="ep-knopf ep-cta self-start">
|
|
{loading ? "Sende …" : "An n8n senden"}
|
|
</button>
|
|
</form>
|
|
|
|
{answer && <div className="ep-hinweis">{answer}</div>}
|
|
{error && (
|
|
<div role="alert" className="ep-fehler">
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|