25 lines
1.3 KiB
TypeScript
25 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { FormEvent, useEffect, useState } from 'react';
|
|
|
|
export function VerifyEmailForm() {
|
|
const [token, setToken] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
useEffect(() => { setToken(new URLSearchParams(window.location.search).get('token') ?? ''); }, []);
|
|
|
|
async function submit(event: FormEvent) {
|
|
event.preventDefault(); setBusy(true); setMessage('');
|
|
try {
|
|
const response = await fetch('/api/auth/verify-email', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ token }) });
|
|
const body = await response.json().catch(() => ({}));
|
|
if (!response.ok) throw new Error(body.detail ?? 'Unable to verify email.');
|
|
setMessage('Email verified. You can return to your account.');
|
|
} catch (error) { setMessage(error instanceof Error ? error.message : 'Unable to verify email.'); }
|
|
finally { setBusy(false); }
|
|
}
|
|
|
|
return <form className="auth-form" onSubmit={submit}><label>Verification token<input required value={token} onChange={(event) => setToken(event.target.value)} /></label><button className="button" disabled={busy} type="submit">{busy ? 'Checking...' : 'Verify email'}</button>{message && <p className="form-message" role="status">{message}</p>}</form>;
|
|
}
|