feature: add quickaction email verify page
This commit is contained in:
DeathKaioken
parent
54f946461c
commit
80d66300cd
207
src/app/quickaction-dashboard/register-email-verify/page.tsx
Normal file
207
src/app/quickaction-dashboard/register-email-verify/page.tsx
Normal file
@ -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<Array<HTMLInputElement | null>>([])
|
||||||
|
|
||||||
|
// 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<HTMLInputElement>) => {
|
||||||
|
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 (
|
||||||
|
<PageLayout>
|
||||||
|
<div className="relative min-h-screen w-full px-4 sm:px-6 py-20">
|
||||||
|
{/* Background Pattern */}
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute inset-0 -z-10 h-full w-full stroke-white/10"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern
|
||||||
|
x="50%"
|
||||||
|
y={-1}
|
||||||
|
id="affiliate-pattern"
|
||||||
|
width={200}
|
||||||
|
height={200}
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#affiliate-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||||
|
</svg>
|
||||||
|
{/* Colored Blur Effect */}
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)'
|
||||||
|
}}
|
||||||
|
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Gradient base */}
|
||||||
|
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
|
||||||
|
|
||||||
|
<div className="max-w-xl mx-auto">
|
||||||
|
<div className="text-center mb-10">
|
||||||
|
<h1 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">
|
||||||
|
E-Mail verifizieren
|
||||||
|
</h1>
|
||||||
|
<p className="mt-3 text-gray-300 text-sm sm:text-base">
|
||||||
|
Gib den 6-stelligen Code ein, den wir an
|
||||||
|
{' '}
|
||||||
|
<span className="text-indigo-300 font-medium">
|
||||||
|
{user?.email || 'deine E-Mail'}
|
||||||
|
</span>{' '}
|
||||||
|
gesendet haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card */}
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="bg-white/95 dark:bg-gray-900/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 dark:ring-white/10 px-6 py-8 sm:px-10 sm:py-10"
|
||||||
|
>
|
||||||
|
<fieldset disabled={submitting || success} className="space-y-8">
|
||||||
|
<div className="flex justify-center gap-2 sm:gap-3">
|
||||||
|
{code.map((v, i) => (
|
||||||
|
<input
|
||||||
|
key={i}
|
||||||
|
ref={el => { inputsRef.current[i] = el }}
|
||||||
|
inputMode="numeric"
|
||||||
|
aria-label={`Code Ziffer ${i + 1}`}
|
||||||
|
autoComplete="one-time-code"
|
||||||
|
maxLength={1}
|
||||||
|
value={v}
|
||||||
|
onChange={e => handleChange(i, e.target.value)}
|
||||||
|
onKeyDown={e => handleKeyDown(i, e)}
|
||||||
|
className={`w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl font-semibold rounded-lg border transition-colors outline-none
|
||||||
|
${v
|
||||||
|
? 'border-indigo-500 ring-2 ring-indigo-400/40 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
|
||||||
|
: 'border-gray-300 dark:border-gray-600 bg-white/80 dark:bg-gray-800/70 text-gray-700 dark:text-gray-200'}
|
||||||
|
focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{success && (
|
||||||
|
<div className="rounded-lg border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||||
|
Verifiziert! Weiterleitung in Kürze...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full sm:w-auto inline-flex justify-center items-center rounded-lg px-6 py-3 font-semibold text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
{submitting ? (
|
||||||
|
<>
|
||||||
|
<span className="size-4 mr-2 rounded-full border-2 border-white border-b-transparent animate-spin" />
|
||||||
|
Prüfe...
|
||||||
|
</>
|
||||||
|
) : success ? 'Verifiziert' : 'Code bestätigen'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleResend}
|
||||||
|
disabled={!!resendCooldown || submitting || success}
|
||||||
|
className="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline disabled:text-gray-400 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{resendCooldown
|
||||||
|
? `Erneut senden in ${resendCooldown}s`
|
||||||
|
: 'Code erneut senden'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div className="mt-8 text-center text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Probleme? Prüfe deinen Spam-Ordner oder{' '}
|
||||||
|
<span className="text-indigo-600 dark:text-indigo-400 font-medium">
|
||||||
|
kontaktiere den Support
|
||||||
|
</span>
|
||||||
|
.
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user