refactor confirm window

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

@@ -2,13 +2,14 @@
 
 import styles from '@/app/styles/module/login.module.scss';
 import { ChangeEvent, useActionState, useEffect, useRef, useState, MouseEvent } from 'react';
-import { registration, FormState, confirmEmail, resendConfirmEmail } from '@/app/actions/auth';
+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 * as z from 'zod'
+import ConfirmMailModalWindow from '@/app/ui/forms/confirm-mail-modal-window';
 
 export default function RegisterForm() {
 	const [state, formAction, isPending] = useActionState(
@@ -16,11 +17,6 @@ export default function RegisterForm() {
 		undefined,
 	);
 
-	const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
-		confirmEmail,
-		undefined,
-	);
-
 	const t = useTranslations('Login-register-form');
 	const [showPassword, setShowPassword] = useState(false);
 	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
@@ -113,14 +109,6 @@ export default function RegisterForm() {
 		}
 	}
 
-	async function reSendEmailConfirmCode(e: MouseEvent) {
-		e.preventDefault();
-		console.log(state?.userId ? state?.userId : '');
-		if (state?.userId) {
-			await resendConfirmEmail(state?.userId);
-		}
-	}
-
 	return (
 		<>
 			<button
@@ -137,63 +125,7 @@ export default function RegisterForm() {
 						setShowMailConfirmWindow(false);
 					}}
 				>
-					<div
-						className="modal-window"
-						onClick={(e) => e.stopPropagation()}
-					>
-						<div className={`${styles['form-group']} ${styles['form-group-confrim-window']}`}>
-							<form action={(e) => {
-								formActionEmailConfrim(e);
-							}}>
-								<div className={`${styles['form-group']}`}>
-									<h4
-										className="mb-6"
-									>
-										{t('enter-confirmation-code')}
-									</h4>
-									<label
-										className={`${styles['form-label']}`}
-									>
-										{t('confirmation-code')}
-									</label>
-									<input
-										type="text"
-										id="emailConfirm"
-										name="emailConfirm"
-										className={`${styles['form-input']}`}
-										placeholder="mail-code"
-										defaultValue=""
-										onChange={(e) => {
-										}}
-									/>
-									<input
-										type="hiden"
-										id="userId"
-										name="userId"
-										style={{ display: 'none' }}
-										defaultValue={state?.userId ? state?.userId : ''}
-									/>
-								</div>
-								<div>
-									{stateEmailConfrim?.error}
-								</div>
-								<div className="flex gap-2">
-									<button type="submit" className={`${styles['btn']}`}>
-										Проверить
-									</button>
-									<button
-										className={`${styles['btn']}`}
-										onClick={(e) => {
-											reSendEmailConfirmCode(e);
-										}}
-									>
-										test
-									</button>
-								</div>
-
-							</form>
-						</div>
-					</div>
+					<ConfirmMailModalWindow userId={state?.userId}/>
 				</div>
 			)}
 			<form action={(e) => {