NCFRONT-81 #5

Merged
frontdev merged 4 commits from NCFRONT-81 into main 2026-01-29 22:34:35 +08:00
6 changed files with 147 additions and 42 deletions
Showing only changes of commit 8b68e37b89 - Show all commits
+9 -5
View File
@@ -135,7 +135,7 @@ export type FormState = {
password: string; password: string;
confirm_password: string; confirm_password: string;
phone: string; phone: string;
companyName: string; companyName?: string;
agree: string; agree: string;
}, },
mailConfirm?: boolean, mailConfirm?: boolean,
@@ -146,6 +146,10 @@ export async function registration(
state: FormState | undefined, state: FormState | undefined,
formData: FormData, formData: FormData,
): Promise<FormState> { ): Promise<FormState> {
const registrationType = formData.get('accoutType') as string || '';
console.log(registrationType);
const fullName = formData.get('fullName') as string || ''; const fullName = formData.get('fullName') as string || '';
const email = formData.get('email') as string || ''; const email = formData.get('email') as string || '';
const password = formData.get('password') as string || ''; const password = formData.get('password') as string || '';
@@ -163,7 +167,7 @@ export async function registration(
password, password,
confirm_password, confirm_password,
agree, agree,
companyName ...(registrationType === 'btb' && { companyName })
}; };
const validatedFields = SignupFormSchema.safeParse(dataToValidate); const validatedFields = SignupFormSchema.safeParse(dataToValidate);
@@ -188,8 +192,8 @@ export async function registration(
password, password,
confirm_password, confirm_password,
phone, phone,
companyName, agree,
agree ...(registrationType === 'btb' && { companyName })
}, },
error: errors error: errors
}; };
@@ -207,7 +211,7 @@ export async function registration(
email, email,
phone: phone, phone: phone,
password, password,
companyName: companyName, ...(registrationType === 'btb' && { companyName: companyName })
} }
}), }),
headers: { headers: {
-1
View File
@@ -50,7 +50,6 @@ async function loadConfigFromBackend(): Promise<any> {
} }
export async function getSignupFormSchema() { export async function getSignupFormSchema() {
console.log('get scheme');
if (cachedSignupSchema) { if (cachedSignupSchema) {
return cachedSignupSchema; return cachedSignupSchema;
} }
+19 -3
View File
@@ -38,6 +38,22 @@ export function createValidationSchema(config: ValidationConfig) {
.trim(); .trim();
} }
// fullName
if (config.companyName) {
schema.companyName = z
.string()
.trim()
.min(config.companyName.minSize?.value || 1, {
error: config.companyName.minSize?.message || 'register-error-company-name-min'
})
.max(config.companyName.maxSize?.value || 100, {
error: config.companyName.maxSize?.message || 'register-error-company-name-max'
})
.regex(new RegExp(config.companyName.allowedSymbols?.value || '.*'), {
message: config.companyName.allowedSymbols?.message || 'register-error-company-name-not-allowed-symbols'
});
}
// email // email
if (config.email) { if (config.email) {
let emailSchema = z let emailSchema = z
@@ -147,8 +163,8 @@ export function createValidationSchema(config: ValidationConfig) {
schema.password = passwordSchema; schema.password = passwordSchema;
} }
// companyName (опциональное поле) // companyName (опциональное поле), надо будет удалить потом
if (config.companyName) { /* if (config.companyName) {
let companySchema = z.string(); let companySchema = z.string();
// Если поле опциональное, добавляем .optional().nullable() // Если поле опциональное, добавляем .optional().nullable()
@@ -214,7 +230,7 @@ export function createValidationSchema(config: ValidationConfig) {
companySchema = companySchema.transform((val) => val?.trim() || '') as unknown as z.ZodString; companySchema = companySchema.transform((val) => val?.trim() || '') as unknown as z.ZodString;
schema.companyName = companySchema; schema.companyName = companySchema;
} } */
// Дополнительные поля для формы регистрации // Дополнительные поля для формы регистрации
schema.confirm_password = z.string(); schema.confirm_password = z.string();
+1 -1
View File
@@ -70,7 +70,7 @@
"message": "register-error-company-name-min" "message": "register-error-company-name-min"
}, },
"allowedSymbols": { "allowedSymbols": {
"value": "^[a-zA-Zа-яА-ЯёЁ0-9\\s\\-&.,'\"()]+$", "value": "^[a-zA-Zа-яА-ЯёЁ0-9\\s\\-&.,'\"()]*$",
"message": "register-error-company-name-not-allowed-symbols" "message": "register-error-company-name-not-allowed-symbols"
} }
}, },
+40 -1
View File
@@ -41,8 +41,35 @@
.form-group { .form-group {
margin-bottom: 18px; margin-bottom: 18px;
}
&-confrim-window { .form-switcher {
display: flex;
justify-content: center;
gap: 10px;
&-button {
padding: 3px 15px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 10px;
transition: all 0.3s;
opacity: 0.6;
text-transform: uppercase;
cursor: pointer;
&.active {
opacity: 1;
}
&:disabled {
opacity: 0.5;
}
&:hover:not(:disabled) {
transform: translateY(-2px);
}
} }
} }
@@ -74,6 +101,10 @@
transition: all 0.3s; transition: all 0.3s;
background: #f9fafb; background: #f9fafb;
&-hidden {
display: none;
}
&[type="password"]::-ms-reveal { &[type="password"]::-ms-reveal {
display: none; display: none;
} }
@@ -140,6 +171,14 @@
transition: all 0.3s; transition: all 0.3s;
margin-bottom: 18px; margin-bottom: 18px;
margin: 20px 0 0 0; margin: 20px 0 0 0;
&:disabled {
opacity: 0.5;
}
&:hover:not(:disabled) {
transform: translateY(-2px);
}
} }
.form-group-confrim-window { .form-group-confrim-window {
+78 -31
View File
@@ -27,6 +27,7 @@ export default function RegisterForm() {
const [formState, setFormState] = useState<FormState | undefined>(undefined); const [formState, setFormState] = useState<FormState | undefined>(undefined);
const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false); const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false);
const passwordRef = useRef<HTMLInputElement>(null); const passwordRef = useRef<HTMLInputElement>(null);
const [accountType, setAccountType] = useState<'btc' | 'btb'>('btc');
useEffect(() => { useEffect(() => {
setFormState(state); 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 ( return (
<> <>
{showMailConfirmWindow && ( {showMailConfirmWindow && (
@@ -163,6 +182,32 @@ export default function RegisterForm() {
<form action={(e) => { <form action={(e) => {
formAction(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']}`}> <div className={`${styles['form-group']}`}>
<label <label
className={`${styles['form-label']} ${styles['required']}`} className={`${styles['form-label']} ${styles['required']}`}
@@ -194,6 +239,39 @@ export default function RegisterForm() {
)} )}
</div> </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']}`}> <div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}> <label className={`${styles['form-label']} ${styles['required']}`}>
{t('email-adress')} {t('email-adress')}
@@ -246,37 +324,6 @@ export default function RegisterForm() {
)} )}
</div> </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']}`}> <div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}> <label className={`${styles['form-label']} ${styles['required']}`}>
{t('password')} {t('password')}