wedding-planner-frontend/app/ui/components/registration-form.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { FloatLabel } from 'primereact/floatlabel';
import { InputText } from 'primereact/inputtext';
import { useState, useEffect } from 'react';
import { classNames } from './button';
import { getSlug } from '@/app/lib/utils';
import { register } from '@/app/api/authentication';
import { getCaptchaChallenge } from '@/app/api/captcha';

export default function RegistrationForm() {
  const [submitted, setSubmitted] = useState<boolean>(false);
  const [errors, setErrors] = useState<string[]>([]);

  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
  const [slug, setSlug] = useState<string>(getSlug());

  const [captchaId, setCaptchaId] = useState<string>("");
  const [captchaUrl, setCaptchaUrl] = useState<string>("");
  const [captchaAnswer, setCaptchaAnswer] = useState<string>("");

  const refreshCaptcha = () => {
    getCaptchaChallenge({
      onRetrieve: (id, url) => {
        console.log(id, url);
        setCaptchaId(id);
        setCaptchaUrl(url);
        setCaptchaAnswer("");
      }
    });
  }

  useEffect(refreshCaptcha, [])

  return (
    submitted ? (
      <div className="card flex justify-evenly py-5 flex-col">
        <div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
      </div>
    ) : (

      <div className="card flex justify-evenly py-5 flex-col">
        <FloatLabel className="my-4">
          <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
          <label htmlFor="email">Email</label>
        </FloatLabel>
        <FloatLabel className="my-4">
          <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
          <label htmlFor="password">Password</label>
        </FloatLabel>
        <FloatLabel className="my-4">
          <InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
          <label htmlFor="passwordConfirmation">Confirm Password</label>
        </FloatLabel>
        <FloatLabel className="my-4">
          <InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
          <label htmlFor="slug">Slug</label>
        </FloatLabel>
        <img className="w-96" src={captchaUrl} alt="captcha" />
        <FloatLabel className="my-4">
          <InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
          <label htmlFor="captcha">Captcha</label>
        </FloatLabel>

        {errors.map((error, index) => (
          <div key={index} className="text-red-500">{error}</div>
        ))}


        <button
          className={classNames('primary')}
          disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
          onClick={() => register(
            {
              slug: slug,
              email: email,
              password: password,
              passwordConfirmation: passwordConfirmation,
              captcha: {
                id: captchaId,
                answer: captchaAnswer
              },
              onRegister: () => { setErrors([]); setSubmitted(true) },
              onError: (errors) => { refreshCaptcha(); setErrors(errors) }
            }
          )}
        >
          Register
        </button>
      </div>
    )

  );
}