btc, btb registration

src/app/actions/auth.ts

@@ -135,7 +135,7 @@ export type FormState = {
 		password: string;
 		confirm_password: string;
 		phone: string;
-		companyName: string;
+		companyName?: string;
 		agree: string;
 	},
 	mailConfirm?: boolean,
@@ -146,6 +146,10 @@ export async function registration(
 	state: FormState | undefined,
 	formData: FormData,
 ): Promise<FormState> {
+	const registrationType = formData.get('accoutType') as string || '';
+
+	console.log(registrationType);
+
 	const fullName = formData.get('fullName') as string || '';
 	const email = formData.get('email') as string || '';
 	const password = formData.get('password') as string || '';
@@ -163,7 +167,7 @@ export async function registration(
 		password,
 		confirm_password,
 		agree,
-		companyName
+		...(registrationType === 'btb' && { companyName })
 	};
 
 	const validatedFields = SignupFormSchema.safeParse(dataToValidate);
@@ -188,8 +192,8 @@ export async function registration(
 				password,
 				confirm_password,
 				phone,
-				companyName,
-				agree
+				agree,
+				...(registrationType === 'btb' && { companyName })
 			},
 			error: errors
 		};
@@ -207,7 +211,7 @@ export async function registration(
 					email,
 					phone: phone,
 					password,
-					companyName: companyName,
+					...(registrationType === 'btb' && { companyName: companyName })
 				}
 			}),
 			headers: {

src/app/actions/definitions.ts

@@ -50,7 +50,6 @@ async function loadConfigFromBackend(): Promise<any> {
 }
 
 export async function getSignupFormSchema() {
-	console.log('get scheme');
 	if (cachedSignupSchema) {
 		return cachedSignupSchema;
 	}

src/app/lib/validation-config-parser.ts

@@ -38,6 +38,22 @@ export function createValidationSchema(config: ValidationConfig) {
 			.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
 	if (config.email) {
 		let emailSchema = z
@@ -147,8 +163,8 @@ export function createValidationSchema(config: ValidationConfig) {
 		schema.password = passwordSchema;
 	}
 
-	// companyName (опциональное поле)
-	if (config.companyName) {
+	// companyName (опциональное поле), надо будет удалить потом
+	/* if (config.companyName) {
 		let companySchema = z.string();
 
 		// Если поле опциональное, добавляем .optional().nullable()
@@ -214,7 +230,7 @@ export function createValidationSchema(config: ValidationConfig) {
 		companySchema = companySchema.transform((val) => val?.trim() || '') as unknown as z.ZodString;
 
 		schema.companyName = companySchema;
-	}
+	} */
 
 	// Дополнительные поля для формы регистрации
 	schema.confirm_password = z.string();

src/app/lib/validation-config.json

@@ -70,7 +70,7 @@
 			"message": "register-error-company-name-min"
 		},
 		"allowedSymbols": {
-			"value": "^[a-zA-Zа-яА-ЯёЁ0-9\\s\\-&.,'\"()]+$",
+			"value": "^[a-zA-Zа-яА-ЯёЁ0-9\\s\\-&.,'\"()]*$",
 			"message": "register-error-company-name-not-allowed-symbols"
 		}
 	},

src/app/styles/module/login.module.scss

@@ -41,8 +41,35 @@
 
 .form-group {
 	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;
 	background: #f9fafb;
 
+	&-hidden {
+		display: none;
+	}
+
 	&[type="password"]::-ms-reveal {
 		display: none;
 	}
@@ -140,6 +171,14 @@
 	transition: all 0.3s;
 	margin-bottom: 18px;
 	margin: 20px 0 0 0;
+
+	&:disabled {
+		opacity: 0.5;
+	}
+
+	&:hover:not(:disabled) {
+		transform: translateY(-2px);
+	}
 }
 
 .form-group-confrim-window {

src/app/ui/forms/register-form.tsx

@@ -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')}