frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'NCFRONT-81' (#5) from NCFRONT-81 into main

Browse Source 
Reviewed-on: #5
This commit was merged in pull request #5.
This commit is contained in:
frontdev
2026-01-29 22:34:35 +08:00
parent 55e0b0723e 8b04485533
commit c65314e7cd
8 changed files with 163 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/forms/register-form.tsx
+81 -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<'b2c' | 'b2b'>('b2c');
useEffect(() => {
setFormState(state);
@@ -83,6 +84,9 @@ export default function RegisterForm() {
if (fieldName === 'phone') {
return schema.safeParse(value.replace(/[-\(\)\s]/g, ''));
}
if (fieldName === 'companyName' && accountType === 'b2c') {
return { success: true, data: value };
}
return schema.safeParse(value);
default:
@@ -113,6 +117,24 @@ export default function RegisterForm() {
}
}
function switchRegistrationTypeHandler(e: React.MouseEvent<HTMLButtonElement>, type: 'b2c' | 'b2b') {
e.preventDefault();
setAccountType(type);
if (formState && type === 'b2c') {
setFormState({
...formState,
previousState: {
...formState.previousState,
companyName: ''
},
error: {
...formState.error,
companyName: ''
}
});
}
}
return (
<>
{showMailConfirmWindow && (
@@ -163,6 +185,32 @@ export default function RegisterForm() {
<form action={(e) => {
formAction(e);
}}>
<div className={`${styles['form-switcher']}`}>
<button
className={`${styles['form-switcher-button']} ${accountType === 'b2c' ? styles['active'] : ''}`}
onClick={(e) => {
switchRegistrationTypeHandler(e, 'b2c');
}}
>
{t('personal')}
</button>
<button
className={`${styles['form-switcher-button']} ${accountType === 'b2b' ? styles['active'] : ''}`}
onClick={(e) => {
switchRegistrationTypeHandler(e, 'b2b');
}}
>
{t('company')}
</button>
<input
type="hiden"
id="accountType"
name="accountType"
className={`${styles['form-input-hidden']}`}
defaultValue={accountType}
/>
</div>
<div className={`${styles['form-group']}`}>
<label
className={`${styles['form-label']} ${styles['required']}`}
@@ -194,6 +242,39 @@ export default function RegisterForm() {
)}
</div>
{accountType === 'b2b' && (
<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 +327,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')}