add confirm email modal window

src/app/actions/auth.ts

@@ -1,7 +1,7 @@
 'use server'
 
 import { loginFormSchema, API_BASE_URL, getSignupFormSchema } from '@/app/actions/definitions';
-import {createSession, deleteSession, getSessionData, updateSession} from '@/app/actions/session';
+import { createSession, deleteSession, getSessionData, updateSession } from '@/app/actions/session';
 import { redirect } from 'next/navigation';
 
 export async function logout() {
@@ -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() {
@@ -306,4 +323,13 @@ export async function tokenLifeExtension() {
 		redirect('/login');
 		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,231 +114,278 @@ export default function RegisterForm() {
 	}
 
 	return (
-		<form action={(e) => {
-			formAction(e);
-		}}>
-			<div className={`${styles['form-group']}`}>
-				<label
-					className={`${styles['form-label']} ${styles['required']}`}
-				>
-					{t('full-name')}
-				</label>
-				<input
-					type="text"
-					id="fullName"
-					name="fullName"
-					className={`${styles['form-input']}`}
-					placeholder={t('name-placeholder')}
-					defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
-					onChange={onChangeHandler}
-				/>
-				{formState?.error?.fullName && (
-					<p className="text-sm text-red-500">
-						{
-							formState?.error?.fullName.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')}
-				</label>
-				<input
-					type="text"
-					id="email"
-					name="email"
-					className={`${styles['form-input']}`}
-					placeholder="ivan@example.com"
-					defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
-					onChange={(e) => {
-						e.target.value = e.target.value.toLocaleLowerCase();
-						onChangeHandler(e)
-					}}
-				/>
-				{formState?.error?.email && (
-					<p className="text-sm text-red-500">
-						{
-							formState?.error?.email.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('phone')}
-				</label>
-				<PhoneInput phoneState={formState?.previousState?.phone} validateHandler={onChangeHandler} />
-				{formState?.error?.phone && (
-					<p className="text-sm text-red-500">
-						{
-							formState?.error?.phone.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('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')}
-				</label>
+		<>
+			{showMailConfirmWindow && (
 				<div
-					className={`${styles['password-wrapper']}`}
+					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);
+			}}>
+				<div className={`${styles['form-group']}`}>
+					<label
+						className={`${styles['form-label']} ${styles['required']}`}
+					>
+						{t('full-name')}
+					</label>
 					<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 : ''}
+						type="text"
+						id="fullName"
+						name="fullName"
+						className={`${styles['form-input']}`}
+						placeholder={t('name-placeholder')}
+						defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
 						onChange={onChangeHandler}
 					/>
-					<button
-						onClick={() => {
-							showPassowrd('password')
-						}}
-						type="button"
-						className={`show-password-button ${showPassword ? 'show' : ''}`}
-					>
-						<IconEye />
-					</button>
+					{formState?.error?.fullName && (
+						<p className="text-sm text-red-500">
+							{
+								formState?.error?.fullName.split('&').map((e, index) => {
+									return (
+										<span key={index}>
+											{t(e)}
+											<br />
+										</span>
+									)
+								})
+							}
+						</p>
+					)}
 				</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>
 
-			<div className={`${styles['form-checkbox']}`}>
-				<input
-					type="checkbox"
-					id="agree"
-					name="agree"
-					defaultChecked={formState?.previousState?.agree ? true : false}
-					onChange={onChangeHandler}
-				/>
-				<label htmlFor="agree">
-					{t('i-agree-to')} <Link
-						href="/terms-of-use"
-						target="_blank"
+				<div className={`${styles['form-group']}`}>
+					<label className={`${styles['form-label']} ${styles['required']}`}>
+						{t('email-adress')}
+					</label>
+					<input
+						type="text"
+						id="email"
+						name="email"
+						className={`${styles['form-input']}`}
+						placeholder="ivan@example.com"
+						defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
+						onChange={(e) => {
+							e.target.value = e.target.value.toLocaleLowerCase();
+							onChangeHandler(e)
+						}}
+					/>
+					{formState?.error?.email && (
+						<p className="text-sm text-red-500">
+							{
+								formState?.error?.email.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('phone')}
+					</label>
+					<PhoneInput phoneState={formState?.previousState?.phone} validateHandler={onChangeHandler} />
+					{formState?.error?.phone && (
+						<p className="text-sm text-red-500">
+							{
+								formState?.error?.phone.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('terms-of-use')}
-					</Link> {t('and')} <Link
-						href="/privacy-policy"
-						target="_blank"
+						{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')}
+					</label>
+					<div
+						className={`${styles['password-wrapper']}`}
 					>
-						{t('privacy-policy')}
-					</Link>
-				</label>
-			</div>
-			{formState?.error?.agree && (
-				<p className="text-sm text-red-500">
-					{t(formState?.error?.agree)}
-				</p>
-			)}
-			{formState?.error?.server && (
-				<p className="text-sm text-red-500 mt-4">
-					{t(formState?.error?.server)}
-				</p>
-			)}
-			<button type="submit" className={`${styles['btn']}`}>
-				{t('create-an-account')}
-			</button>
-		</form >
+						<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>
+
+				<div className={`${styles['form-checkbox']}`}>
+					<input
+						type="checkbox"
+						id="agree"
+						name="agree"
+						defaultChecked={formState?.previousState?.agree ? true : false}
+						onChange={onChangeHandler}
+					/>
+					<label htmlFor="agree">
+						{t('i-agree-to')} <Link
+							href="/terms-of-use"
+							target="_blank"
+						>
+							{t('terms-of-use')}
+						</Link> {t('and')} <Link
+							href="/privacy-policy"
+							target="_blank"
+						>
+							{t('privacy-policy')}
+						</Link>
+					</label>
+				</div>
+				{formState?.error?.agree && (
+					<p className="text-sm text-red-500">
+						{t(formState?.error?.agree)}
+					</p>
+				)}
+				{formState?.error?.server && (
+					<p className="text-sm text-red-500 mt-4">
+						{t(formState?.error?.server)}
+					</p>
+				)}
+				<button type="submit" className={`${styles['btn']}`}>
+					{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": "Введите код подтверждения"
 	}
 }