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

Create a registration form #135

Merged
bustikiller merged 4 commits from registration-form into main 2024-12-07 18:13:04 +00:00
Conversation 0 Commits 4 Files Changed 6 +55 -46
1 changed files with 55 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 054e1c6da0 - Show all commits

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>
)
);
}