dorfteich/apps/web/src/pages/auth/SignupPage.tsx

import { zodResolver } from '@hookform/resolvers/zod';
import { SignupFormInput, signupInputSchema } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { Resolver, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

import { Field, FormError, applyFieldErrors } from '../../components/forms';
import { apiGet, apiPost } from '../../lib/api';

import { useDocumentTitle } from '../../lib/use-document-title';
export function SignupPage(): React.JSX.Element {
  const { t, i18n } = useTranslation();
  useDocumentTitle(t('auth:signup.title'));
  const [error, setError] = useState<unknown>(null);
  const [registered, setRegistered] = useState<string | null>(null);

  const registration = useQuery({
    queryKey: ['auth', 'registration'],
    queryFn: () => apiGet<{ mode: 'open' | 'closed' }>('/auth/registration'),
  });

  type SignupFormValues = SignupFormInput;
  // One confined cast: RHF cannot express Zod's input/output split
  // (locale is optional on input, defaulted on output) without it.
  const form = useForm<SignupFormValues>({
    resolver: zodResolver(signupInputSchema) as Resolver<SignupFormValues>,
    defaultValues: { locale: i18n.language === 'de' ? 'de' : 'en' },
  });

  const onSubmit = form.handleSubmit(async (input) => {
    setError(null);
    try {
      await apiPost('/auth/signup', input);
      setRegistered(input.email);
    } catch (err) {
      setError(err);
      applyFieldErrors(err, (name, fieldError) =>
        form.setError(name as keyof SignupFormValues, fieldError),
      );
    }
  });

  if (registration.data?.mode === 'closed') {
    return (
      <div className="auth-card">
        <h1>{t('auth:signup.title')}</h1>
        <p className="form-banner">{t('auth:signup.closed')}</p>
        <p className="auth-card__links">
          <Link to="/login">{t('auth:signup.loginLink')}</Link>
        </p>
      </div>
    );
  }

  if (registered) {
    return (
      <div className="auth-card">
        <h1>{t('auth:signup.success.title')}</h1>
        <p>{t('auth:signup.success.body', { email: registered })}</p>
        <button
          type="button"
          className="linklike"
          onClick={() => void apiPost('/auth/resend-verification', { email: registered })}
        >
          {t('auth:signup.success.resend')}
        </button>
      </div>
    );
  }

  return (
    <div className="auth-card">
      <h1>{t('auth:signup.title')}</h1>
      <form onSubmit={onSubmit} noValidate>
        <FormError error={error} />
        <Field
          label={t('auth:signup.username')}
          hint={t('auth:signup.usernameHint')}
          error={form.formState.errors.username?.message}
        >
          <input type="text" autoComplete="username" {...form.register('username')} />
        </Field>
        <Field label={t('auth:signup.email')} error={form.formState.errors.email?.message}>
          <input type="email" autoComplete="email" {...form.register('email')} />
        </Field>
        <Field
          label={t('auth:signup.displayName')}
          error={form.formState.errors.displayName?.message}
        >
          <input type="text" autoComplete="name" {...form.register('displayName')} />
        </Field>
        <Field
          label={t('auth:signup.password')}
          hint={t('auth:signup.passwordHint')}
          error={form.formState.errors.password?.message}
        >
          <input type="password" autoComplete="new-password" {...form.register('password')} />
        </Field>
        <button type="submit" className="button" disabled={form.formState.isSubmitting}>
          {t('auth:signup.submit')}
        </button>
      </form>
      <p className="auth-card__links">
        {t('auth:signup.haveAccount')} <Link to="/login">{t('auth:signup.loginLink')}</Link>
      </p>
    </div>
  );
}