NCFRONT-81 #5
@@ -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: {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
Reference in New Issue
Block a user