btc, btb registration
This commit is contained in:
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user