fix mail confirm work

src/app/actions/auth.ts

@@ -409,14 +409,8 @@ export async function tokenLifeExtension() {
 	}
 }
 
-export async function confirmEmail(
-	state: { error: string } | undefined,
-	formData: FormData
-) {
+export async function confirmEmail(userId: number, verifyToken: string) {
 	console.log('confirmEmail');
-	const emailConfirm = formData.get('emailConfirm') as string || '';
-	console.log(emailConfirm);
-	const userId = formData.get('userId') as string || '';
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
@@ -431,7 +425,7 @@ export async function confirmEmail(
 				message_body: {
 					resend: 0,
 					user_id: userId,
-					verify_token: emailConfirm
+					verify_token: verifyToken
 				}
 			}),
 		});
@@ -442,12 +436,23 @@ export async function confirmEmail(
 
 			if (parsed.message_code === 0) {
 				await createSession(parsed.message_body.token, parsed.message_body.email as string);
+			} else {
+				return {
+					success: false,
+					error: 'entered-code-is-incorrect'
+				};
 			}
+		} else {
+			return {
+				success: false,
+				error: 'server-error'
+			};
 		}
 	} catch (error) {
 		return {
-			error: 'error'
-		}
+			success: false,
+			error: 'network-error'
+		};
 	}
 
 	redirect('/pages/dashboard');

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

@@ -186,11 +186,31 @@
 	}
 
 	&.refresh {
-		width: fit-content;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		gap: 3px;
 	}
 }
 
 .form-group-confrim-window {
+	min-width: 500px;
+
+	&-button-group {
+		display: flex;
+		justify-content: center;
+		gap: 10px;
+	}
+
+	@media (max-width: 550px) {
+		min-width: auto;
+
+		&-button-group {
+			flex-direction: column;
+			gap: 10px;
+		}
+	}
+
 	.btn {
 		margin: 0;
 	}

src/app/ui/forms/confirm-mail-modal-window.tsx

@@ -1,22 +1,51 @@
 import styles from '@/app/styles/module/login.module.scss';
 import { useTranslations } from 'next-intl';
-import { ChangeEvent, MouseEvent, useActionState, useState, useEffect } from 'react';
+import { ChangeEvent, MouseEvent, useState, useEffect } from 'react';
 import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
 import { IconRefresh } from '@/app/ui/icons/icons';
-export default function ConfirmMailModalWindow({ userId, email }: { userId: number | undefined, email: string | undefined }) {
-	const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
-		confirmEmail,
-		undefined,
-	);
+
+export default function ConfirmMailModalWindow({ userId, email, onClose }: { userId: number | undefined, email: string | undefined, onClose?: () => void }) {
+	const [error, setError] = useState<string | null>(null);
+	const [isPending, setIsPending] = useState(false);
 	const [confirmCodeValue, setConfirmCodeValue] = useState('');
 	const [isInputDisabled, setIsInputDisabled] = useState(true);
 	const [timer, setTimer] = useState(30);
 	const t = useTranslations('Login-register-form');
 
+	async function handleConfirmEmail(e: React.FormEvent) {
+		e.preventDefault();
+
+		if (!userId || confirmCodeValue.length !== 6) {
+			return;
+		}
+
+		setIsPending(true);
+		setError(null);
+
+		try {
+			const result = await confirmEmail(userId, confirmCodeValue);
+
+			if (result.error) {
+				setError(t(result.error));
+
+			} else {
+				if (onClose) {
+					setTimeout(() => onClose(), 1500);
+				}
+			}
+		} catch (err) {
+			setError(t('entered-code-is-incorrect'));
+		} finally {
+			setIsPending(false);
+		}
+	}
+
 	async function reSendEmailConfirmCode(e: MouseEvent) {
 		e.preventDefault();
 		if (userId) {
+			setIsInputDisabled(true);
 			await resendConfirmEmail(userId);
+			setTimer(30);
 		}
 	}
 
@@ -47,28 +76,19 @@ export default function ConfirmMailModalWindow({ userId, email }: { userId: numb
 		};
 	}, [timer, isInputDisabled]);
 
-	/* const resetTimer = () => {
-		setIsInputDisabled(true);
-		setTimer(30);
-	}; */
-
 	return (
 		<div
 			className="modal-window"
 			onClick={(e) => e.stopPropagation()}
 		>
 			<div className={`${styles['form-group']} ${styles['form-group-confrim-window']}`}>
-				<form action={(e) => {
-					formActionEmailConfrim(e);
-				}}>
+				<form onSubmit={handleConfirmEmail}>
 					<div className={`${styles['form-group']}`}>
 						<h4>
 							{t('enter-confirmation-code')}
 							<br />
 						</h4>
-						<p
-							className="mb-6"
-						>
+						<p className="mb-6">
 							{email}
 						</p>
 						<input
@@ -78,50 +98,42 @@ export default function ConfirmMailModalWindow({ userId, email }: { userId: numb
 							className={`${styles['form-input']}`}
 							placeholder={t('confirmation-code')}
 							value={confirmCodeValue}
-							onChange={(e: ChangeEvent<HTMLInputElement>) => {
-								onChangeHandler(e)
-							}}
+							onChange={onChangeHandler}
+							disabled={isPending}
 						/>
-						<input
-							type="hiden"
-							id="userId"
-							name="userId"
-							style={{ display: 'none' }}
-							defaultValue={userId ? userId : ''}
-						/>
-						{stateEmailConfrim?.error && (
-							<p
-								className="text-sm text-red-500"
-							>
-								{t('entered-code-is-incorrect')}
+
+						{error && (
+							<p className="text-sm text-red-500">
+								{error}
 							</p>
 						)}
 					</div>
-					<div>
-						{stateEmailConfrim?.error}
-					</div>
-					<div className="flex gap-2">
+
+					<div className={`${styles['form-group-confrim-window-button-group']}`}>
 						<button
 							type="submit"
 							className={`${styles['btn']}`}
-							disabled={confirmCodeValue.length !== 6}
+							disabled={confirmCodeValue.length !== 6 || isPending}
 						>
-							{t('confirm')}
+							{isPending ? t('confirming') : t('confirm')}
 						</button>
+
 						<button
-							className={`${styles['btn'] + ' ' + styles['refresh']} flex`}
-							disabled={isInputDisabled}
-							onClick={(e) => {
-								reSendEmailConfirmCode(e);
-							}}
+							className={`${styles['btn'] + ' ' + styles['refresh']}`}
+							disabled={isInputDisabled || isPending}
+							onClick={reSendEmailConfirmCode}
 							title={t('resend-code')}
+							type="button"
 						>
 							<IconRefresh />
+							<div>
+								{t('resend-code')}
+							</div>
 							{timer !== 0 ? timer : ''}
 						</button>
 					</div>
 				</form>
 			</div>
 		</div>
-	)
+	);
 }

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

@@ -253,7 +253,7 @@ export default function RegisterForm() {
 						setShowMailConfirmWindow(false);
 					}}
 				>
-					<ConfirmMailModalWindow userId={state?.userId} email={formState?.previousState?.email} />
+					<ConfirmMailModalWindow userId={state?.userId} email={formState?.previousState?.email} onClose={() => { setShowMailConfirmWindow(false) }} />
 				</div>
 			)}
 			<form action={(e) => {

src/i18n/messages/en.json

@@ -375,6 +375,9 @@
 		"INN": "INN",
 		"fullName-required": "Please fill in the field correctly.",
 		"fullName-too-short": "Name must be at least 2 characters long.",
-		"company-already-registered": "The company is already registered."
+		"company-already-registered": "The company is already registered.",
+		"confirming" : "Confirming",
+		"server-error": "Server error",
+		"network-error": "Network error"
 	}
 }

src/i18n/messages/ru.json

@@ -375,6 +375,9 @@
 		"INN": "ИНН",
 		"fullName-required": "Заполните поле корректно.",
 		"fullName-too-short": "Имя должно содержать не менее 2 символов.",
-		"company-already-registered": "Компания уже зарегистрирована."
+		"company-already-registered": "Компания уже зарегистрирована.",
+		"confirming": "Подтверждение",
+		"server-error": "Ошибка сервера",
+		"network-error": "Сетевая ошибка"
 	}
 }