| 'use client' |
|
|
| import { useState } from 'react' |
| import { useForm } from 'react-hook-form' |
| import { zodResolver } from '@hookform/resolvers/zod' |
| import { Button } from 'components/ui/button' |
| import { registerSchema, type RegisterForm as RegisterFormType } from 'lib/validations/auth' |
|
|
| export function RegisterForm() { |
| const [loading, setLoading] = useState(false) |
| const [error, setError] = useState<string | null>(null) |
| const [success, setSuccess] = useState(false) |
|
|
| const { |
| register, |
| handleSubmit, |
| formState: { errors } |
| } = useForm<RegisterFormType>({ |
| resolver: zodResolver(registerSchema) |
| }) |
|
|
| const onSubmit = async (data: RegisterFormType) => { |
| try { |
| setLoading(true) |
| setError(null) |
|
|
| const response = await fetch('/api/auth/register', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(data) |
| }) |
|
|
| const result = await response.json() |
|
|
| if (!response.ok) { |
| setError(result.error || 'Registrace se nezdařila') |
| return |
| } |
|
|
| setSuccess(true) |
| } catch { |
| setError('Došlo k neočekávané chybě') |
| } finally { |
| setLoading(false) |
| } |
| } |
|
|
| if (success) { |
| return ( |
| <div className="text-center space-y-4"> |
| <div className="p-4 bg-green-50 rounded-lg"> |
| <h3 className="text-lg font-medium text-green-800">Registrace úspěšná!</h3> |
| <p className="text-green-600 mt-2"> |
| Zkontrolujte svůj email a klikněte na ověřovací odkaz. |
| </p> |
| </div> |
| </div> |
| ) |
| } |
|
|
| return ( |
| <form id="form-registration" action="#" method="post" className="form" onSubmit={handleSubmit(onSubmit)}> |
| {error ? ( |
| <div |
| className="error" |
| style={{ |
| marginBottom: 12, |
| padding: '10px 12px', |
| background: '#FEE2E2', |
| color: '#991B1B', |
| borderRadius: 8, |
| fontWeight: 600 |
| }} |
| > |
| {error} |
| </div> |
| ) : null} |
| |
| <div className="input"> |
| <div className="text">Jméno</div> |
| <div className="insert"> |
| <input |
| {...register('fname')} |
| type="text" |
| maxLength={255} |
| placeholder="Tvoje jméno" |
| autoComplete="given-name" |
| /> |
| <div className="error">{errors.fname?.message}</div> |
| </div> |
| </div> |
| |
| <div className="input"> |
| <div className="text">Příjmení</div> |
| <div className="insert"> |
| <input |
| {...register('sname')} |
| type="text" |
| maxLength={255} |
| placeholder="Tvoje příjmení" |
| autoComplete="family-name" |
| /> |
| <div className="error">{errors.sname?.message}</div> |
| </div> |
| </div> |
| |
| <div className="input"> |
| <div className="text">E-mail</div> |
| <div className="insert"> |
| <input |
| {...register('email')} |
| type="email" |
| maxLength={255} |
| placeholder="E-mailová adresa" |
| autoComplete="email" |
| /> |
| <div className="error">{errors.email?.message}</div> |
| </div> |
| </div> |
| |
| <div className="input"> |
| <div className="text">Heslo</div> |
| <div className="insert"> |
| <input |
| {...register('password')} |
| type="password" |
| maxLength={255} |
| placeholder="Heslo k přihlášení" |
| autoComplete="new-password" |
| /> |
| <div className="error">{errors.password?.message}</div> |
| <div className="visible" data-input="password"></div> |
| </div> |
| </div> |
| |
| <div className="input"> |
| <div className="text">Heslo znovu</div> |
| <div className="insert"> |
| <input |
| {...register('confirmPassword')} |
| type="password" |
| maxLength={255} |
| placeholder="Heslo pro kontrolu" |
| autoComplete="new-password" |
| /> |
| <div className="error">{errors.confirmPassword?.message}</div> |
| <div className="visible" data-input="confirmPassword"></div> |
| </div> |
| </div> |
| |
| <div className="input"> |
| <div className="text">Pohlaví</div> |
| <div className="insert"> |
| <div className="line"> |
| <label className="radio"> |
| <input type="radio" {...register('sex')} value="female" /> |
| <span className="text">Žena</span> |
| </label> |
| <label className="radio"> |
| <input type="radio" {...register('sex')} value="male" /> |
| <span className="text">Muž</span> |
| </label> |
| </div> |
| <div className="error"></div> |
| </div> |
| </div> |
| |
| {error ? <div className="error" style={{ marginBottom: 12 }}>{error}</div> : null} |
| |
| <div className="input"> |
| <div className="text"></div> |
| <div className="insert"> |
| <input type="submit" value="Registrovat" disabled={loading} /> |
| </div> |
| </div> |
| </form> |
| ) |
| } |
|
|
