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

Reviewed-on: #5

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,8 @@ export async function registration(
 	state: FormState | undefined,
 	formData: FormData,
 ): Promise<FormState> {
+	const accountType = formData.get('accountType') as 'b2b' | 'b2c';
+
 	const fullName = formData.get('fullName') as string || '';
 	const email = formData.get('email') as string || '';
 	const password = formData.get('password') as string || '';
@@ -154,7 +156,7 @@ export async function registration(
 	const companyName = formData.get('companyName') as string || '';
 	const agree = formData.get('agree') as string || '';
 
-	const SignupFormSchema = await getSignupFormSchema();
+	const SignupFormSchema = await getSignupFormSchema(accountType);
 
 	const dataToValidate = {
 		fullName,
@@ -163,7 +165,7 @@ export async function registration(
 		password,
 		confirm_password,
 		agree,
-		companyName
+		...(accountType === 'b2b' && { companyName })
 	};
 
 	const validatedFields = SignupFormSchema.safeParse(dataToValidate);
@@ -188,8 +190,8 @@ export async function registration(
 				password,
 				confirm_password,
 				phone,
-				companyName,
-				agree
+				agree,
+				...(accountType === 'b2b' && { companyName })
 			},
 			error: errors
 		};
@@ -207,7 +209,8 @@ export async function registration(
 					email,
 					phone: phone,
 					password,
-					companyName: companyName,
+					accountType,
+					...(accountType === 'b2b' && { companyName: companyName })
 				}
 			}),
 			headers: {
@@ -222,7 +225,7 @@ export async function registration(
 				message_body: { token: string },
 				message_code: string
 			};
-			console.log(parsed);
+
 			if (parsed.message_desc === 'Operation successful') {
 				await createSession(parsed.message_body.token, email as string);
 			} else {

src/app/actions/definitions.ts

@@ -38,27 +38,28 @@ const defaultConfig = validationConfig as ValidationConfig;
 let cachedSignupSchema: any = null;
 let schemaPromise: Promise<any> | null = null;
 
-async function loadConfigFromBackend(): Promise<any> {
+async function loadConfigFromBackend(accountType: 'b2b' | 'b2c'): Promise<any> {
 	try {
 		const response = await fetch('/api/validation-config');
 		if (!response.ok) throw new Error('Failed to load config');
 		return await response.json();
 	} catch (error) {
+		//сейчас выполняем это пока бека нету
 		console.error('Using default validation config:', error);
 		return defaultConfig;
 	}
 }
 
-export async function getSignupFormSchema() {
-	console.log('get scheme');
+export async function getSignupFormSchema(accountType: 'b2b' | 'b2c') {
 	if (cachedSignupSchema) {
 		return cachedSignupSchema;
 	}
 
 	if (!schemaPromise) {
 		schemaPromise = (async () => {
-			const config = await loadConfigFromBackend();
-			cachedSignupSchema = createValidationSchema(config);
+			const config = await loadConfigFromBackend(accountType);
+			cachedSignupSchema = createValidationSchema(config, accountType);
+
 			return cachedSignupSchema;
 		})();
 	}
@@ -66,6 +67,7 @@ export async function getSignupFormSchema() {
 	return await schemaPromise;
 }
 
+// для валидации в реально времени на клиентской странице
 export const SignupFormSchema = createValidationSchema(defaultConfig);
 
 

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

@@ -19,7 +19,7 @@ interface ValidationConfig {
 
 /* const EMAIL_REGEX = /^([a-z0-9.\-_]+|[а-яё0-9.\-_]+)@(([a-z0-9.\-]+)\.([a-z]{2,})|([a-z0-9.\-]+)\.([а-яё]{2,})|([а-яё0-9.\-]+)\.([a-z]{2,})|([а-яё0-9.\-]+)\.([а-яё]{2,}))$/i; */
 
-export function createValidationSchema(config: ValidationConfig) {
+export function createValidationSchema(config: ValidationConfig, accountType?: 'b2b' | 'b2c') {
 	const schema: Record<string, any> = {};
 
 	// fullName
@@ -38,6 +38,22 @@ export function createValidationSchema(config: ValidationConfig) {
 			.trim();
 	}
 
+	// fullName
+	if (config.companyName && accountType !== 'b2c') {
+		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;
+	margin-bottom: 10px;
+
+	&-button {
+		padding: 5px 15px;
+		background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		color: white;
+		border: none;
+		border-radius: 10px;
+		transition: all 0.3s;
+		opacity: 0.6;
+		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<'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')}