bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 7 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'; import { getCaptchaChallenge } from '@/app/api/captcha';
export default function RegistrationForm() { export default function RegistrationForm() {
const [submitted, setSubmitted] = useState<boolean>(false);
const [errors, setErrors] = useState<string[]>([]); const [errors, setErrors] = useState<string[]>([]);
const [email, setEmail] = useState<string>(""); const [email, setEmail] = useState<string>("");
@ -36,54 +37,62 @@ export default function RegistrationForm() {
useEffect(refreshCaptcha, []) useEffect(refreshCaptcha, [])
return ( return (
<div className="card flex justify-evenly py-5 flex-col"> submitted ? (
<FloatLabel className="my-4"> <div className="card flex justify-evenly py-5 flex-col">
<InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} /> <div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
<label htmlFor="email">Email</label> </div>
</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 className="card flex justify-evenly py-5 flex-col">
<div key={index} className="text-red-500">{error}</div> <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 <button
className={classNames('primary')} className={classNames('primary')}
disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)} disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
onClick={() => register( onClick={() => register(
{ {
slug: slug, slug: slug,
email: email, email: email,
password: password, password: password,
passwordConfirmation: passwordConfirmation, passwordConfirmation: passwordConfirmation,
captcha: { captcha: {
id: captchaId, id: captchaId,
answer: captchaAnswer answer: captchaAnswer
}, },
onRegister: () => { setErrors([]) }, onRegister: () => { setErrors([]); setSubmitted(true) },
onError: (errors) => { refreshCaptcha(); setErrors(errors) } onError: (errors) => { refreshCaptcha(); setErrors(errors) }
} }
)} )}
> >
Register Register
</button> </button>
</div> </div>
)
); );
} }