fix(ui): replace checkbox in signup form with Mantine's Checkbox

- Replaced custom checkbox in `SignupForm` with Mantine's `Checkbox` for consistency
- Updated event handler to use `e.currentTarget.checked`
- Integrated label prop with translated terms and conditions text for improved readability

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
This commit is contained in:
Balázs Szücs 2025-11-12 22:51:46 +01:00
parent 4708f92145
commit 6d948adb4c

View File

@ -1,6 +1,7 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import '@app/routes/authShared/auth.css'; import '@app/routes/authShared/auth.css';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Checkbox } from '@mantine/core';
import { SignupFieldErrors } from '@app/routes/signup/SignupFormValidation'; import { SignupFieldErrors } from '@app/routes/signup/SignupFormValidation';
interface SignupFormProps { interface SignupFormProps {
@ -133,19 +134,20 @@ export default function SignupForm({
{/* Terms - only show if showTerms is true */} {/* Terms - only show if showTerms is true */}
{showTerms && ( {showTerms && (
<div className="auth-terms"> <div className="auth-terms">
<input <Checkbox
id="agree" id="agree"
type="checkbox"
checked={agree} checked={agree}
onChange={(e) => setAgree?.(e.target.checked)} onChange={(e) => setAgree?.(e.currentTarget.checked)}
className="auth-checkbox" className="auth-checkbox"
/> label={
<label htmlFor="agree" className="auth-terms-label"> <span className="auth-terms-label">
{t("legal.iAgreeToThe", 'I agree to all of the')} {" "} {t("legal.iAgreeToThe", 'I agree to all of the')}{' '}
<a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer"> <a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer">
{t('legal.terms', 'Terms and Conditions')} {t('legal.terms', 'Terms and Conditions')}
</a> </a>
</label> </span>
}
/>
</div> </div>
)} )}