bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Display a message after successful submission of registration form
All checks were successful
Playwright Tests / test (pull_request) Has been skipped
Details
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m40s
Details
Add copyright notice / copyright_notice (pull_request) Successful in 2m9s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2024-12-07 19:06:24 +01:00
parent 4d576b07da
commit 054e1c6da0
1 changed files with 55 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/ui/components/registration-form.tsx
View File

@ -11,6 +11,7 @@ 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>("");
@ -36,54 +37,62 @@ export default function RegistrationForm() {
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' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
<label htmlFor="captcha">Captcha</label>
</FloatLabel>
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>
) : (
{errors.map((error, index) => (
<div key={index} className="text-red-500">{error}</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([]) },
onError: (errors) => { refreshCaptcha(); setErrors(errors) }
}
)}
>
Register
</button>
</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>
)
);
}