Merge branch 'main' into NCFRONT-72

src/app/ui/forms/forgot-password-form.tsx

@@ -2,14 +2,12 @@
 
 import styles from '@/app/styles/module/login.module.scss'
 import { useActionState } from 'react';
-
 import { useTranslations } from 'next-intl';
+import { resetPassword } from '@/app/actions/auth';
 
 export default function ForgotPasswordForm() {
 	const [state, formAction, isPending] = useActionState(
-		() => {
-			console.log("test");
-		},
+		resetPassword,
 		undefined,
 	);
 	const t = useTranslations('Login-register-form');
@@ -27,26 +25,14 @@ export default function ForgotPasswordForm() {
 					className={`${styles['form-input']}`}
 					placeholder={t('enter-email')}
 				/>
-				{/* {state?.error?.email && (
+				{state?.error === 'error' && (
 					<p className={`${styles['form-error']}`}>
-						{t(state?.error?.email)}
+						{t('register-error-email-invalid')}
 					</p>
-				)} */}
-			</div>
-			{/* {state?.error.server && (
-				<p className={`${styles['form-error']}`}>
-					{t(state?.error.server)}
-				</p>
-			)} */}
-			<div className={`${styles['form-options']}`}>
-				<div className={`${styles['form-checkbox']}`}>
-					<small>
-						функционал не реализован
-					</small>
-				</div>
+				)}
 			</div>
 			<button type="submit" className={`${styles['btn']}`}>
-				{t('sign-in')}
+				{t('recover-password')}
 			</button>
 		</form>
 	)

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

@@ -96,8 +96,18 @@ export default function LoginForm() {
 					{t('forgot-password')}?
 				</a>
 			</div>
-			<button type="submit" className={`${styles['btn']}`}>
-				{t('sign-in')}
+			<button
+				type="submit"
+				className={`${styles['btn']}`}
+				disabled={isPending}
+			>
+				{isPending ? (
+					<div className="loading-animation">
+						<div className="global-spinner"></div>
+					</div>
+				) : (
+					t("sign-in")
+				)}
 			</button>
 		</form>
 	)

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

@@ -1,17 +1,26 @@
 'use client'
 
 import styles from '@/app/styles/module/login.module.scss';
-import { ChangeEvent, useActionState, useEffect, useRef, useState, MouseEvent } from 'react';
+import { ChangeEvent, useActionState, useEffect, useRef, useState } from 'react';
 import { registration, FormState } from '@/app/actions/auth';
+
+
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
-import { SignupFormSchema } from '@/app/actions/definitions';
+import { getSignupFormSchema } from '@/app/actions/definitions';
+import { useSearchParams } from 'next/navigation';
 import * as z from 'zod'
 import ConfirmMailModalWindow from '@/app/ui/forms/confirm-mail-modal-window';
+import { fetchINN } from '@/app/actions/action';
+import { useDebouncedCallback } from 'use-debounce';
+
 
 export default function RegisterForm() {
+	const searchParams = useSearchParams();
+	const referralCode = searchParams.get('ref');
+
 	const [state, formAction, isPending] = useActionState(
 		registration,
 		undefined,
@@ -23,6 +32,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);
@@ -30,7 +40,40 @@ export default function RegisterForm() {
 			setShowMailConfirmWindow(true);
 		}
 
-	}, [state])
+	}, [state]);
+
+	const debouncedFetchINN = useDebouncedCallback(
+		async (value) => {
+			const response = await fetchINN(value);
+
+			if (response.companyName) {
+				setFormState({
+					...formState,
+					previousState: {
+						...formState?.previousState,
+						companyName: response.companyName
+					},
+					error: {
+						...formState?.error,
+						companyName: ''
+					}
+				});
+			} else {
+				setFormState({
+					...formState,
+					previousState: {
+						companyName: response.companyName
+					},
+					error: {
+						...formState?.error,
+						companyName: '',
+						inn: 'inn-invalid'
+					}
+				});
+			}
+		},
+		500
+	);
 
 	function showPassowrd(target: 'password' | 'confirm-password') {
 		if (target === 'password') {
@@ -40,13 +83,38 @@ export default function RegisterForm() {
 		}
 	}
 
-	function validateField(
+	type SignupFormSchema = Awaited<ReturnType<typeof getSignupFormSchema>>;
+	const [signupFormSchema, setSignupFormSchema] = useState<SignupFormSchema | null>(null);;
+
+	useEffect(() => {
+		let isMounted = true;
+
+		const loadSchema = async () => {
+			const result = await getSignupFormSchema(accountType);
+			if (isMounted) {
+				setSignupFormSchema(result);
+			}
+		};
+
+		loadSchema();
+
+		return () => {
+			isMounted = false;
+		};
+	}, [accountType]);
+
+	async function validateField(
 		fieldName: string,
 		value: string,
 	) {
 		switch (fieldName) {
 			case 'confirm_password':
-				const baseSchema = SignupFormSchema.shape.confirm_password;
+				const baseSchema = signupFormSchema?.shape.confirm_password;
+
+				if (!baseSchema) {
+					return { success: true, data: value };
+				}
+
 				const baseResult = baseSchema.safeParse(value);
 
 				if (!baseResult.success) {
@@ -72,13 +140,25 @@ export default function RegisterForm() {
 			case 'email':
 			case 'fullName':
 			case 'phone':
+			case 'referralCode':
 			case 'password':
 			case 'companyName':
 			case 'agree':
-				const schema = SignupFormSchema.shape[fieldName];
+			case 'inn':
+				const schema = signupFormSchema?.shape[fieldName];
+				if (!schema) {
+					return { success: true, data: value };
+				}
+
 				if (fieldName === 'phone') {
 					return schema.safeParse(value.replace(/[-\(\)\s]/g, ''));
 				}
+				if (fieldName === 'companyName' && accountType === 'b2c') {
+					return { success: true, data: value };
+				}
+				if (fieldName === 'referralCode') {
+					return { success: true, data: value };
+				}
 				return schema.safeParse(value);
 
 			default:
@@ -86,12 +166,45 @@ export default function RegisterForm() {
 		}
 	}
 
-	function onChangeHandler(e: ChangeEvent<HTMLInputElement>): void {
+	async function onChangeHandler(e: ChangeEvent<HTMLInputElement>): Promise<void> {
 		const fieldName = e.target.name;
 		if (fieldName !== 'phone') {
 			e.target.value = e.target.value.replace(/([^a-zA-Zа-яёА-ЯЁ0-9@.!#$%&"'*+/=?^_{|}~\-\s])/g, '');
 		}
-		const validatedField = validateField(fieldName, e.target.value);
+
+		if (fieldName === 'inn') {
+			const currentValue = e.target.value;
+
+			const cleanedValue = currentValue.replace(/([^0-9])/g, '');
+
+			if (cleanedValue.length > 10) {
+				e.target.value = cleanedValue.slice(0, 10);
+				debouncedFetchINN(e.target.value);
+			} else {
+				e.target.value = cleanedValue;
+			}
+
+			if (cleanedValue.length === 10) {
+				debouncedFetchINN(cleanedValue);
+			} else {
+				if (formState) {
+					setFormState({
+						...formState,
+						previousState: {
+							...formState?.previousState,
+							companyName: ''
+						},
+						error: {
+							...formState?.error,
+							companyName: '',
+							inn: ''
+						}
+					});
+				}
+			}
+		}
+
+		const validatedField = await validateField(fieldName, e.target.value);
 
 		if (validatedField.success) {
 			setFormState(prevState => {
@@ -109,6 +222,26 @@ export default function RegisterForm() {
 		}
 	}
 
+	function switchRegistrationTypeHandler(e: React.MouseEvent<HTMLButtonElement>, type: 'b2c' | 'b2b') {
+		e.preventDefault();
+		setAccountType(type);
+		if (formState?.previousState) {
+			setFormState({
+				...formState,
+				previousState: {
+					...formState.previousState,
+					companyName: '',
+					inn: ''
+				},
+				error: {
+					...formState.error,
+					companyName: '',
+					inn: ''
+				}
+			});
+		}
+	}
+
 	return (
 		<>
 			<button
@@ -131,6 +264,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="hidden"
+						id="accountType"
+						name="accountType"
+						className={`${styles['form-input-hidden']}`}
+						value={accountType}
+					/>
+				</div>
+
 				<div className={`${styles['form-group']}`}>
 					<label
 						className={`${styles['form-label']} ${styles['required']}`}
@@ -162,6 +321,107 @@ export default function RegisterForm() {
 					)}
 				</div>
 
+				{accountType === 'b2b' ? (
+					<>
+						<div className={`${styles['form-group']}`}>
+							<label
+								className={`${styles['form-label']}  ${styles['required']}`}
+							>
+								{t('INN')}
+							</label>
+							<input
+								type="text"
+								id="inn"
+								name="inn"
+								className={`${styles['form-input']}`}
+								placeholder={t('inn-placeholder')}
+								defaultValue={formState?.previousState?.inn ? formState?.previousState?.inn : ''}
+								onChange={onChangeHandler}
+							/>
+							{formState?.error?.inn && (
+								<p className="text-sm text-red-500">
+									{
+										formState?.error?.inn.split('&').map((e, index) => {
+											return (
+												<span key={index}>
+													{t(e)}
+													<br />
+												</span>
+											)
+										})
+									}
+								</p>
+							)}
+						</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('field-filled-automatically')}
+								value={formState?.previousState?.companyName ?? ''}
+								readOnly={true}
+								/* 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']}`}>
+							{t('referal-code')}
+						</label>
+						<input
+							type="text"
+							id="referralCode"
+							name="referralCode"
+							className={`${styles['form-input']}`}
+							placeholder={t('referal-code')}
+							defaultValue={referralCode ? referralCode : ''}
+							onChange={(e) => {
+								e.target.value = e.target.value.toLocaleLowerCase();
+								onChangeHandler(e)
+							}}
+						/>
+						{formState?.error?.referralCode && (
+							<p className="text-sm text-red-500">
+								{
+									formState?.error?.referralCode.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')}
@@ -193,6 +453,7 @@ export default function RegisterForm() {
 						</p>
 					)}
 				</div>
+
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('phone')}
@@ -214,37 +475,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')}
@@ -287,6 +517,7 @@ export default function RegisterForm() {
 						</p>
 					)}
 				</div>
+
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('confirm-password')}
@@ -350,8 +581,18 @@ export default function RegisterForm() {
 						{t(formState?.error?.server)}
 					</p>
 				)}
-				<button type="submit" className={`${styles['btn']}`}>
-					{t('create-an-account')}
+				<button
+					type="submit"
+					className={`${styles['btn']}`}
+					disabled={isPending}
+				>
+					{isPending ? (
+						<div className="loading-animation">
+							<div className="global-spinner"></div>
+						</div>
+					) : (
+						t("create-an-account")
+					)}
 				</button>
 			</form >
 		</>

src/app/ui/forms/reset-password-form.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import styles from '@/app/styles/module/login.module.scss'
+import { useActionState, useEffect, useRef, useState, ChangeEvent } from 'react';
+
+import { useTranslations } from 'next-intl';
+import { confirmPassword, FormStateConfirmPassword } from '@/app/actions/auth';
+import { useSearchParams } from 'next/navigation';
+import { IconEye } from '@/app/ui/icons/icons';
+import { SignupFormSchema } from '@/app/actions/definitions';
+import * as z from 'zod';
+
+export default function ResetPasswordForm() {
+	const [state, formAction, isPending] = useActionState(
+		confirmPassword,
+		undefined,
+	);
+	const passwordRef = useRef<HTMLInputElement>(null);
+	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+	const [formState, setFormState] = useState<FormStateConfirmPassword | undefined>(undefined);
+	const t = useTranslations('Login-register-form');
+	const searchParams = useSearchParams();
+	const email = searchParams.get('email');
+
+	useEffect(() => {
+		if (state) {
+			setFormState(state);
+		}
+	}, [state])
+
+	function showPassowrd(target: 'password' | 'confirm-password') {
+		if (target === 'password') {
+			setShowPassword(!showPassword);
+		} else {
+			setShowConfirmPassword(!showConfirmPassword);
+		}
+	}
+
+	function validateField(
+		fieldName: string,
+		value: string,
+	) {
+		switch (fieldName) {
+			case 'confirm_password':
+				const baseSchema = SignupFormSchema.shape.confirm_password;
+				const baseResult = baseSchema.safeParse(value);
+
+				if (!baseResult.success) {
+					return baseResult;
+				}
+
+				const currentPassword = passwordRef.current?.value || '';
+				if (value !== currentPassword) {
+					return {
+						success: false,
+						error: new z.ZodError([
+							{
+								code: z.ZodIssueCode.custom,
+								message: 'repeat-password',
+								path: ['confirm_password']
+							}
+						])
+					};
+				}
+
+				return { success: true, data: value };
+			case 'password':
+				const schema = SignupFormSchema.shape[fieldName];
+				return schema.safeParse(value);
+
+			default:
+				throw new Error(`Unknown field: ${fieldName}`);
+		}
+	}
+
+	function onChangeHandler(e: ChangeEvent<HTMLInputElement>): void {
+		const fieldName = e.target.name;
+		if (fieldName !== 'phone') {
+			e.target.value = e.target.value.replace(/([^a-zA-Zа-яёА-ЯЁ0-9@.!#$%&"'*+/=?^_{|}~\-\s])/g, '');
+		}
+		const validatedField = validateField(fieldName, e.target.value);
+
+		if (validatedField.success) {
+			setFormState(prevState => {
+				if (!prevState?.error || !prevState?.error[fieldName]) {
+					return prevState;
+				}
+
+				const { [fieldName]: _, ...newError } = prevState.error;
+
+				return {
+					...prevState,
+					error: newError
+				};
+			});
+		}
+	}
+
+	return (
+		<form action={formAction}>
+			<div className={`${styles['form-group']}`}>
+				<input
+					type="hidden"
+					id="email"
+					name="email"
+					className={`${styles['form-input']}`}
+					placeholder={t('enter-email')}
+					defaultValue={email ? email : ''}
+				/>
+			</div>
+			<div className={`${styles['form-group']}`}>
+				<label className={`${styles['form-label']} ${styles['required']}`}>
+					{t('recovery-code')}
+				</label>
+				<input
+					type="readOnly"
+					id="verify-token"
+					name="verify-token"
+					className={`${styles['form-input']}`}
+					placeholder={t('recovery-code')}
+					defaultValue={formState?.previousState?.verifyToken ? formState?.previousState?.verifyToken : ''}
+				/>
+			</div>
+			<div className={`${styles['form-group']}`}>
+				<label className={`${styles['form-label']} ${styles['required']}`}>
+					{t('password')}
+				</label>
+				<div
+					className={`${styles['password-wrapper']}`}
+				>
+					<input
+						ref={passwordRef}
+						type={showPassword ? "text" : "password"}
+						id="password"
+						name="password"
+						className={`${styles['form-input']} ${styles['password']}`}
+						placeholder={t('password-placeholder')}
+						defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
+						onChange={onChangeHandler}
+					/>
+					<button
+						onClick={() => {
+							showPassowrd('password')
+						}}
+						type="button"
+						className={`show-password-button ${showPassword ? 'show' : ''}`}
+					>
+						<IconEye />
+					</button>
+				</div>
+				{formState?.error?.password && (
+					<p className="text-sm text-red-500">
+						{
+							formState?.error?.password.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('confirm-password')}
+				</label>
+				<div className={`${styles['password-wrapper']}`}>
+					<input
+						type={showConfirmPassword ? "text" : "password"}
+						id="confirm_password"
+						name="confirm_password"
+						className={`${styles['form-input']} ${styles['password']}`}
+						placeholder={t('repeat-password')}
+						defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
+						onChange={onChangeHandler}
+					/>
+					<button
+						onClick={() => {
+							showPassowrd('confirm-password');
+						}}
+						type="button"
+						className={`show-password-button ${showConfirmPassword ? 'show' : ''}`}
+					>
+						<IconEye />
+					</button>
+				</div>
+				{formState?.error?.confirm_password && (
+					<p className="text-sm text-red-500">
+						{t(formState?.error?.confirm_password)}
+					</p>
+				)}
+			</div>
+			{/* {state?.error.server && (
+				<p className={`${styles['form-error']}`}>
+					{t(state?.error.server)}
+				</p>
+			)} */}
+			<button type="submit" className={`${styles['btn']}`}>
+				{t('change-password')}
+			</button>
+		</form>
+	)
+}