function AuthShell({ title, subtitle, children, wide }) { return (
Zurück zur Startseite

{title}

{subtitle}

{children}
); } function LoginPage() { const { go } = useRouter(); const { sendLoginCode, showToast } = useApp(); const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); const valid = /\S+@\S+\.\S+/.test(email); const submit = async (e) => { e.preventDefault(); if (!valid || loading) return; setLoading(true); const { error } = await sendLoginCode(email); setLoading(false); if (error) { showToast(error.message || 'Anmeldung fehlgeschlagen.'); return; } sessionStorage.setItem('cg.authEmail', email); sessionStorage.removeItem('cg.pendingProfile'); go('/verify'); }; return (
setEmail(e.target.value)} placeholder="kontakt@firma.de" />
Kein Passwort nötig — Sie melden sich mit einem einmaligen 6-stelligen Code an, den wir per E-Mail senden.
Noch kein Konto? Jetzt registrieren
); } function RegisterPage() { const { go } = useRouter(); const { registerCompany, showToast } = useApp(); const [d, setD] = useState({ companyName: '', form: 'GmbH', vat: '', street: '', zip: '', city: '', country: 'Deutschland', first: '', last: '', email: '', phone: '', agree: false, }); const [loading, setLoading] = useState(false); const [step, setStep] = useState(1); const set = (k, v) => setD((p) => ({ ...p, [k]: v })); const step1ok = !!d.companyName.trim(); const step3ok = d.first.trim() && d.last.trim() && /\S+@\S+\.\S+/.test(d.email) && d.agree; const valid = step1ok && step3ok; const submit = async (e) => { e.preventDefault(); if (!valid || loading) return; setLoading(true); const { error } = await registerCompany(d); setLoading(false); if (error) { showToast(error.message || 'Registrierung fehlgeschlagen.'); return; } go('/verify'); }; const stepLabels = ['Firma', 'Anschrift', 'Zugang']; return (
{/* Schritt-Anzeige */}
{stepLabels.map((label, i) => { const n = i + 1; const active = step === n; const done = step > n; return (
{done ? '✓' : n} {label}
); })}
{step === 1 ? (
Firmendaten
set('companyName', e.target.value)} placeholder="z. B. Muster Handels GmbH" />
set('vat', e.target.value)} placeholder="DE123456789" />
) : null} {step === 2 ? (
Firmenanschrift
set('street', e.target.value)} placeholder="Hauptstraße 24" />
set('zip', e.target.value)} placeholder="10115" />
set('city', e.target.value)} placeholder="Berlin" />
) : null} {step === 3 ? (
Ansprechpartner & Zugang
set('first', e.target.value)} placeholder="Vorname" />
set('last', e.target.value)} placeholder="Nachname" />
set('email', e.target.value)} placeholder="kontakt@firma.de" />
set('phone', e.target.value)} placeholder="+49 …" />
) : null} {/* Navigation */}
{step > 1 ? : } {step < 3 ? : }
Bereits registriert? Anmelden
); } function ForgotPage() { const [sent, setSent] = useState(false); return ( {sent ? (
E-Mail wurde versendet. Bitte prüfen Sie Ihren Posteingang.
) : (
{ e.preventDefault(); setSent(true); }}>
)}
Zurück zum Login
); } function VerifyPage() { const { go } = useRouter(); const { verifyCode, resendCode, showToast } = useApp(); const email = (typeof sessionStorage !== 'undefined' && sessionStorage.getItem('cg.authEmail')) || ''; const [vals, setVals] = useState(['', '', '', '', '', '']); const [loading, setLoading] = useState(false); const [seconds, setSeconds] = useState(120); const refs = useRef([]); useEffect(() => { if (!email) go('/login'); }, []); // Countdown (2 Minuten), bis ein neuer Code angefordert werden kann useEffect(() => { if (seconds <= 0) return undefined; const t = setTimeout(() => setSeconds((s) => s - 1), 1000); return () => clearTimeout(t); }, [seconds]); const resend = async () => { if (seconds > 0) return; const { error } = await resendCode(email); if (error) { showToast(error.message || 'Code konnte nicht gesendet werden.'); return; } setSeconds(120); setVals(['', '', '', '', '', '']); showToast('Neuer Code gesendet.'); }; const submitCode = async () => { const token = vals.join(''); if (token.length !== 6 || loading) return; setLoading(true); const { error } = await verifyCode(email, token); setLoading(false); if (error) { showToast(error.message || 'Code ungültig oder abgelaufen.'); return; } go('/dashboard'); }; const maskEmail = (e) => { if (!e || !e.includes('@')) return e || ''; const [name, dom] = e.split('@'); return `${name.slice(0, 1)}••••@${dom}`; }; const setAt = (i, v) => { if (v.length > 1) v = v.slice(-1); const next = [...vals]; next[i] = v.replace(/[^0-9]/g, ''); setVals(next); if (v && i < 5) refs.current[i + 1]?.focus(); }; const handleKey = (i, e) => { if (e.key === 'Backspace' && !vals[i] && i > 0) refs.current[i - 1]?.focus(); }; const complete = vals.every((v) => v !== ''); return (
Code gesendet an {maskEmail(email)}
Bitte den 6-stelligen Code aus der E-Mail eingeben.
{vals.map((v, i) => ( (refs.current[i] = el)} className="otp-box" value={v} onChange={(e) => setAt(i, e.target.value)} onKeyDown={(e) => handleKey(i, e)} inputMode="numeric" maxLength={1} /> ))}
{seconds > 0 ? Neuen Code anfordern in {Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, '0')} : Keine E-Mail erhalten? { e.preventDefault(); resend(); }}>Neuen Code anfordern}
); } window.LoginPage = LoginPage; window.RegisterPage = RegisterPage; window.ForgotPage = ForgotPage; window.VerifyPage = VerifyPage;