81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
|
/* 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 [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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(refreshCaptcha, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<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' onChange={(e) => setCaptchaAnswer(e.target.value)} />
|
||
|
|
<label htmlFor="captcha">Captcha</label>
|
||
|
|
</FloatLabel>
|
||
|
|
|
||
|
|
|
||
|
|
<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: () => { console.log("registered") }
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
Register
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|