diff --git a/src/app/quickaction-dashboard/register-email-verify/page.tsx b/src/app/quickaction-dashboard/register-email-verify/page.tsx new file mode 100644 index 0000000..3b74223 --- /dev/null +++ b/src/app/quickaction-dashboard/register-email-verify/page.tsx @@ -0,0 +1,207 @@ +'use client' + +import { useState, useEffect, useCallback, useRef } from 'react' +import PageLayout from '../../components/PageLayout' +import useAuthStore from '../../store/authStore' + +export default function EmailVerifyPage() { + const user = useAuthStore(s => s.user) + const [code, setCode] = useState(['', '', '', '', '', '']) + const [submitting, setSubmitting] = useState(false) + const [error, setError] = useState('') + const [success, setSuccess] = useState(false) + const [resendCooldown, setResendCooldown] = useState(0) + const inputsRef = useRef>([]) + + // Cooldown timer + useEffect(() => { + if (!resendCooldown) return + const t = setInterval(() => { + setResendCooldown(c => (c > 0 ? c - 1 : 0)) + }, 1000) + return () => clearInterval(t) + }, [resendCooldown]) + + const handleChange = (idx: number, val: string) => { + if (!/^\d?$/.test(val)) return + const next = [...code] + next[idx] = val + setCode(next) + setError('') + if (val && idx < 5) { + inputsRef.current[idx + 1]?.focus() + } + } + + const handleKeyDown = (idx: number, e: React.KeyboardEvent) => { + if (e.key === 'Backspace' && !code[idx] && idx > 0) { + const prev = idx - 1 + inputsRef.current[prev]?.focus() + } + if (e.key === 'ArrowLeft' && idx > 0) { + inputsRef.current[idx - 1]?.focus() + } + if (e.key === 'ArrowRight' && idx < 5) { + inputsRef.current[idx + 1]?.focus() + } + } + + const fullCode = code.join('') + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (fullCode.length !== 6) { + setError('Bitte 6-stelligen Code eingeben.') + return + } + setSubmitting(true) + setError('') + try { + // TODO: call backend verify endpoint + await new Promise(r => setTimeout(r, 1000)) + setSuccess(true) + } catch { + setError('Verifizierung fehlgeschlagen. Bitte erneut versuchen.') + } finally { + setSubmitting(false) + } + } + + const handleResend = useCallback(async () => { + if (resendCooldown) return + setError('') + // TODO: call resend endpoint + setResendCooldown(30) + }, [resendCooldown]) + + return ( + +
+ {/* Background Pattern */} + + {/* Colored Blur Effect */} +