btc, btb registration

This commit is contained in:
smanylov
2026-01-29 14:34:04 +07:00
parent 832c4b0e76
commit 8b68e37b89
6 changed files with 147 additions and 42 deletions
+78 -31
View File
@@ -27,6 +27,7 @@ export default function RegisterForm() {
const [formState, setFormState] = useState<FormState | undefined>(undefined);
const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false);
const passwordRef = useRef<HTMLInputElement>(null);
const [accountType, setAccountType] = useState<'btc' | 'btb'>('btc');
useEffect(() => {
setFormState(state);
@@ -113,6 +114,24 @@ export default function RegisterForm() {
}
}
function switchRegistrationTypeHandler(e: React.MouseEvent<HTMLButtonElement>, type: 'btc' | 'btb') {
e.preventDefault();
setAccountType(type);
if (formState && type === 'btc') {
setFormState({
...formState,
previousState: {
...formState.previousState,
companyName: ''
},
error: {
...formState.error,
companyName: ''
}
});
}
}
return (
<>
{showMailConfirmWindow && (
@@ -163,6 +182,32 @@ export default function RegisterForm() {
<form action={(e) => {
formAction(e);
}}>
<div className={`${styles['form-switcher']}`}>
<button
className={`${styles['form-switcher-button']} ${accountType === 'btc' ? styles['active'] : ''}`}
onClick={(e) => {
switchRegistrationTypeHandler(e, 'btc');
}}
>
btc
</button>
<button
className={`${styles['form-switcher-button']} ${accountType === 'btb' ? styles['active'] : ''}`}
onClick={(e) => {
switchRegistrationTypeHandler(e, 'btb');
}}
>
btb
</button>
<input
type="hiden"
id="accoutType"
name="accoutType"
className={`${styles['form-input-hidden']}`}
defaultValue={accountType}
/>
</div>
<div className={`${styles['form-group']}`}>
<label
className={`${styles['form-label']} ${styles['required']}`}
@@ -194,6 +239,39 @@ export default function RegisterForm() {
)}
</div>
{accountType === 'btb' && (
<div className={`${styles['form-group']}`}>
<label
className={`${styles['form-label']} ${styles['required']}`}
>
{t('company')}
</label>
<input
type="text"
id="companyName"
name="companyName"
className={`${styles['form-input']}`}
placeholder={t('company-placeholder')}
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
onChange={onChangeHandler}
/>
{formState?.error?.companyName && (
<p className="text-sm text-red-500">
{
formState?.error?.companyName.split('&').map((e, index) => {
return (
<span key={index}>
{t(e)}
<br />
</span>
)
})
}
</p>
)}
</div>
)}
<div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('email-adress')}
@@ -246,37 +324,6 @@ export default function RegisterForm() {
)}
</div>
<div className={`${styles['form-group']}`}>
<label
className={`${styles['form-label']}`}
>
{t('company')}
</label>
<input
type="text"
id="companyName"
name="companyName"
className={`${styles['form-input']}`}
placeholder={t('company-placeholder')}
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
onChange={onChangeHandler}
/>
{formState?.error?.companyName && (
<p className="text-sm text-red-500">
{
formState?.error?.companyName.split('&').map((e, index) => {
return (
<span key={index}>
{t(e)}
<br />
</span>
)
})
}
</p>
)}
</div>
<div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('password')}