96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { use } from 'react'
|
||
|
||
export default function RegistrierungPage({ params }: { params: Promise<{ slug: string }> }) {
|
||
const { slug } = use(params)
|
||
const [name, setName] = useState('')
|
||
const [email, setEmail] = useState('')
|
||
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
|
||
const [errorMsg, setErrorMsg] = useState('')
|
||
|
||
async function handleSubmit(e: React.FormEvent) {
|
||
e.preventDefault()
|
||
setStatus('loading')
|
||
try {
|
||
const res = await fetch(`/api/registrierung/${slug}`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name, email }),
|
||
})
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => ({}))
|
||
setErrorMsg(data.error ?? 'Ein Fehler ist aufgetreten.')
|
||
setStatus('error')
|
||
return
|
||
}
|
||
setStatus('success')
|
||
} catch {
|
||
setErrorMsg('Netzwerkfehler. Bitte versuchen Sie es erneut.')
|
||
setStatus('error')
|
||
}
|
||
}
|
||
|
||
if (status === 'success') {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-sm border p-8 max-w-md w-full text-center">
|
||
<div className="text-4xl mb-4">✉️</div>
|
||
<h1 className="text-xl font-bold text-gray-900 mb-2">E-Mail wird gesendet</h1>
|
||
<p className="text-gray-600 text-sm">
|
||
Bitte prüfen Sie Ihr Postfach. Sie erhalten in Kürze einen Aktivierungslink.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-xl shadow-sm border p-8 max-w-md w-full">
|
||
<h1 className="text-xl font-bold text-gray-900 mb-1">Mitglied werden</h1>
|
||
<p className="text-sm text-gray-500 mb-6">
|
||
Registrieren Sie sich für die InnungsApp Ihres Verbandes.
|
||
</p>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
|
||
<input
|
||
required
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="Max Mustermann"
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">E-Mail *</label>
|
||
<input
|
||
required
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="max@musterfirma.de"
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
{status === 'error' && (
|
||
<p className="text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg">{errorMsg}</p>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={status === 'loading'}
|
||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-60 transition-colors"
|
||
>
|
||
{status === 'loading' ? 'Wird gesendet...' : 'Aktivierungslink anfordern'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|