111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
type AuthFormProps = {
|
|
title: string;
|
|
description: string;
|
|
submitLabel: string;
|
|
fields: {
|
|
label: string;
|
|
type: string;
|
|
placeholder: string;
|
|
}[];
|
|
footerText: string;
|
|
footerLinkText: string;
|
|
footerLinkHref: string;
|
|
};
|
|
|
|
export default function AuthForm({
|
|
title,
|
|
description,
|
|
submitLabel,
|
|
fields,
|
|
footerText,
|
|
footerLinkText,
|
|
footerLinkHref,
|
|
}: AuthFormProps) {
|
|
// ✅ Hooks IMMER hier drin
|
|
const [formData, setFormData] = useState<Record<string, string>>({});
|
|
|
|
function handleSubmit(event: React.FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (Object.values(formData).some((value) => value.trim() === '')) {
|
|
alert('Bitte fülle alle Felder aus.');
|
|
return;
|
|
}
|
|
|
|
console.log('Formulardaten:', formData);
|
|
alert('Formular ist technisch bereit ✅ (Backend kommt später)');
|
|
}
|
|
|
|
return (
|
|
<section
|
|
style={{
|
|
maxWidth: '420px',
|
|
margin: '4rem auto',
|
|
padding: '2rem',
|
|
border: '1px solid #e5e5e5',
|
|
borderRadius: '16px',
|
|
display: 'grid',
|
|
gap: '1.5rem',
|
|
}}
|
|
>
|
|
<header>
|
|
<h1 style={{ marginBottom: '0.5rem' }}>{title}</h1>
|
|
<p style={{ margin: 0, color: '#555' }}>{description}</p>
|
|
</header>
|
|
|
|
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
|
|
{fields.map((field) => (
|
|
<label
|
|
key={field.label}
|
|
style={{ display: 'grid', gap: '0.3rem' }}
|
|
>
|
|
<span>{field.label}</span>
|
|
<input
|
|
type={field.type}
|
|
placeholder={field.placeholder}
|
|
value={formData[field.label] || ''}
|
|
onChange={(event) =>
|
|
setFormData({
|
|
...formData,
|
|
[field.label]: event.target.value,
|
|
})
|
|
}
|
|
style={{
|
|
padding: '0.6rem',
|
|
borderRadius: '8px',
|
|
border: '1px solid #ccc',
|
|
}}
|
|
/>
|
|
</label>
|
|
))}
|
|
|
|
<button
|
|
type="submit"
|
|
style={{
|
|
marginTop: '0.5rem',
|
|
padding: '0.7rem',
|
|
borderRadius: '10px',
|
|
border: 'none',
|
|
backgroundColor: '#2E7D32',
|
|
color: 'white',
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
{submitLabel}
|
|
</button>
|
|
</form>
|
|
|
|
<footer style={{ textAlign: 'center', fontSize: '0.9rem' }}>
|
|
{footerText}{' '}
|
|
<Link href={footerLinkHref}>{footerLinkText}</Link>
|
|
</footer>
|
|
</section>
|
|
);
|
|
}
|