add confirm email modal window

src/app/actions/auth.ts

@@ -138,8 +138,9 @@ export type FormState = {
 		phone: string;
 		companyName: string;
 		agree: string;
-	}
+	},
-	error: Record<string, string>
+	mailConfirm?: boolean,
+	error: Record<string, string> | null
 };
 
 export async function registration(
@@ -230,6 +231,20 @@ export async function registration(
 		} else {
 			throw (`${response.status}`);
 		}
+		console.log('/v1');
+		return {
+			previousState: {
+				fullName,
+				email,
+				password,
+				confirm_password,
+				phone,
+				companyName,
+				agree
+			},
+			mailConfirm: true,
+			error: null
+		};
 	} catch (error: unknown) {
 		if (error) {
 			const typedError = error as any;
@@ -275,7 +290,9 @@ export async function registration(
 		throw error;
 	}
 
-	redirect('/pages/dashboard');
+	/* redirect('/pages/dashboard'); */
+	/* console.log('/v2');
+	redirect('/v2'); */
 }
 
 export async function tokenLifeExtension() {
@@ -307,3 +324,12 @@ export async function tokenLifeExtension() {
 		throw error;
 	}
 }
+
+export async function confirmEmail(
+	state: any | undefined,
+	formData: any,
+) {
+	console.log('confirmEmail');
+	const emailConfirm = formData.get('emailConfirm') as string || '';
+	console.log(emailConfirm);
+}

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

@@ -41,6 +41,9 @@
 
 .form-group {
 	margin-bottom: 18px;
+
+	&-confrim-window {
+	}
 }
 
 .form-row {
@@ -139,6 +142,12 @@
 	margin: 20px 0 0 0;
 }
 
+.form-group-confrim-window {
+	.btn {
+		margin: 0;
+	}
+}
+
 .register-link {
 	text-align: center;
 	margin-top: 18px;

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

@@ -2,7 +2,7 @@
 
 import styles from '@/app/styles/module/login.module.scss';
 import { ChangeEvent, useActionState, useEffect, useRef, useState } from 'react';
-import { registration, FormState } from '@/app/actions/auth';
+import { registration, FormState, confirmEmail } from '@/app/actions/auth';
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
@@ -16,14 +16,24 @@ 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);
 	const [formState, setFormState] = useState<FormState | undefined>(undefined);
+	const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false);
 	const passwordRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		setFormState(state);
+		if (state?.mailConfirm) {
+			setShowMailConfirmWindow(true);
+		}
+
 	}, [state])
 
 	function showPassowrd(target: 'password' | 'confirm-password') {
@@ -104,6 +114,52 @@ export default function RegisterForm() {
 	}
 
 	return (
+		<>
+			{showMailConfirmWindow && (
+				<div
+					className="modal-wrapper"
+					onClick={() => {
+						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) => {
+										}}
+									/>
+								</div>
+								<button type="submit" className={`${styles['btn']}`}>
+									Проверить
+								</button>
+							</form>
+						</div>
+					</div>
+				</div>
+			)}
 			<form action={(e) => {
 				formAction(e);
 			}}>
@@ -330,5 +386,6 @@ export default function RegisterForm() {
 					{t('create-an-account')}
 				</button>
 			</form >
+		</>
 	)
 }

src/i18n/messages/en.json

@@ -235,6 +235,8 @@
 		"password-too-common": "This password is too common, please choose another.",
 		"register-error-email-min": "Email length must be at least 7 characters.",
 		"register-error-phone-not-allowed-symbols": "",
-		"register-error-password-not-allowed-symbols": "Password contains invalid characters."
+		"register-error-password-not-allowed-symbols": "Password contains invalid characters.",
+		"confirmation-code": "Confirmation code",
+		"enter-confirmation-code": "Enter the confirmation code"
 	}
 }

src/i18n/messages/ru.json

@@ -235,6 +235,8 @@
 		"password-too-common": "Этот пароль слишком простой, пожалуйста, выберите другой.",
 		"register-error-email-min": "Длина Email не должна быть меньше 7 символов.",
 		"register-error-phone-not-allowed-symbols": "",
-		"register-error-password-not-allowed-symbols": "Пароль содержит недопустимые символы."
+		"register-error-password-not-allowed-symbols": "Пароль содержит недопустимые символы.",
+		"confirmation-code": "Код подтверждения",
+		"enter-confirmation-code": "Введите код подтверждения"
 	}
 }