update confirm email code window

src/app/actions/auth.ts

@@ -331,8 +331,8 @@ export async function tokenLifeExtension() {
 }
 
 export async function confirmEmail(
-	state: any | undefined,
+	state: {error: string} | undefined,
-	formData: any
+	formData: FormData
 ) {
 	console.log('confirmEmail');
 	const emailConfirm = formData.get('emailConfirm') as string || '';

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

@@ -140,6 +140,22 @@
 	transition: all 0.3s;
 	margin-bottom: 18px;
 	margin: 20px 0 0 0;
+
+	&:hover {
+		transform: translateY(-2px);
+	}
+
+	&:disabled {
+		background: linear-gradient(135deg, #414291, #4b3975);
+
+		&:hover {
+			transform: none;
+		}
+	}
+
+	&.refresh {
+		width: fit-content;
+	}
 }
 
 .form-group-confrim-window {

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

@@ -1,23 +1,57 @@
 import styles from '@/app/styles/module/login.module.scss';
 import { useTranslations } from 'next-intl';
-import { MouseEvent, useActionState } from 'react';
+import { ChangeEvent, MouseEvent, useActionState, useState, useEffect } from 'react';
 import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
-export default function ConfirmMailModalWindow({ userId }: any) {
+import { IconRefresh } from '@/app/ui/icons/icons';
-	const t = useTranslations('Login-register-form');
+export default function ConfirmMailModalWindow({ userId, email }: { userId: number | undefined, email: string | undefined }) {
-
 	const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
 		confirmEmail,
 		undefined,
 	);
+	const [confirmCodeValue, setConfirmCodeValue] = useState('');
+	const [isInputDisabled, setIsInputDisabled] = useState(true);
+	const [timer, setTimer] = useState(30);
+	const t = useTranslations('Login-register-form');
 
 	async function reSendEmailConfirmCode(e: MouseEvent) {
 		e.preventDefault();
-		console.log(userId ? userId : '');
 		if (userId) {
 			await resendConfirmEmail(userId);
 		}
 	}
 
+	function onChangeHandler(e: ChangeEvent<HTMLInputElement>) {
+		const newValue = e.target.value.replace(/([^0-9])/g, '');
+		if (newValue.length <= 6) {
+			setConfirmCodeValue(newValue);
+		}
+	}
+
+	useEffect(() => {
+		let interval: NodeJS.Timeout;
+
+		if (timer > 0 && isInputDisabled) {
+			interval = setInterval(() => {
+				setTimer(prev => {
+					if (prev <= 1) {
+						setIsInputDisabled(false);
+						return 0;
+					}
+					return prev - 1;
+				});
+			}, 1000);
+		}
+
+		return () => {
+			if (interval) clearInterval(interval);
+		};
+	}, [timer, isInputDisabled]);
+
+	/* const resetTimer = () => {
+		setIsInputDisabled(true);
+		setTimer(30);
+	}; */
+
 	return (
 		<div
 			className="modal-window"
@@ -28,24 +62,24 @@ export default function ConfirmMailModalWindow({ userId }: any) {
 					formActionEmailConfrim(e);
 				}}>
 					<div className={`${styles['form-group']}`}>
-						<h4
+						<h4>
+							{t('enter-confirmation-code')}
+							<br />
+						</h4>
+						<p
 							className="mb-6"
 						>
-							{t('enter-confirmation-code')}
+							{email}
-						</h4>
+						</p>
-						<label
-							className={`${styles['form-label']}`}
-						>
-							{t('confirmation-code')}
-						</label>
 						<input
 							type="text"
 							id="emailConfirm"
 							name="emailConfirm"
 							className={`${styles['form-input']}`}
-							placeholder="mail-code"
+							placeholder={t('confirmation-code')}
-							defaultValue=""
+							value={confirmCodeValue}
-							onChange={(e) => {
+							onChange={(e: ChangeEvent<HTMLInputElement>) => {
+								onChangeHandler(e)
 							}}
 						/>
 						<input
@@ -55,24 +89,37 @@ export default function ConfirmMailModalWindow({ userId }: any) {
 							style={{ display: 'none' }}
 							defaultValue={userId ? userId : ''}
 						/>
+						{!stateEmailConfrim?.error && (
+							<p
+								className="text-sm text-red-500"
+							>
+								{t('entered-code-is-incorrect')}
+							</p>
+						)}
 					</div>
 					<div>
 						{stateEmailConfrim?.error}
 					</div>
 					<div className="flex gap-2">
-						<button type="submit" className={`${styles['btn']}`}>
+						<button
-							Проверить
+							type="submit"
+							className={`${styles['btn']}`}
+							disabled={confirmCodeValue.length !== 6}
+						>
+							{t('confirm')}
 						</button>
 						<button
-							className={`${styles['btn']}`}
+							className={`${styles['btn'] + ' ' + styles['refresh']} flex`}
+							disabled={isInputDisabled}
 							onClick={(e) => {
 								reSendEmailConfirmCode(e);
 							}}
+							title={t('resend-code')}
 						>
-							test
+							<IconRefresh />
+							{timer !== 0 ? timer : ''}
 						</button>
 					</div>
-
 				</form>
 			</div>
 		</div>

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

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

src/app/ui/icons/icons.tsx

@@ -145,4 +145,10 @@ export function IconBurgerMenu() {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" /></svg>
 	)
+}
+
+export function IconRefresh() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V4h2v7h-7V9h4.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.925 0 3.475-1.1T17.65 14h2.1q-.7 2.65-2.85 4.325T12 20" /></svg>
+	)
 }

src/i18n/messages/en.json

@@ -263,6 +263,9 @@
 		"register-error-phone-not-allowed-symbols": "",
 		"register-error-password-not-allowed-symbols": "Password contains invalid characters.",
 		"confirmation-code": "Confirmation code",
-		"enter-confirmation-code": "Enter the confirmation code"
+		"enter-confirmation-code": "Enter the confirmation code sent to your email:",
+		"confirm": "Confirm",
+		"entered-code-is-incorrect": "The code you entered is incorrect.",
+		"resend-code": "Resend code"
 	}
 }

src/i18n/messages/ru.json

@@ -263,6 +263,9 @@
 		"register-error-phone-not-allowed-symbols": "",
 		"register-error-password-not-allowed-symbols": "Пароль содержит недопустимые символы.",
 		"confirmation-code": "Код подтверждения",
-		"enter-confirmation-code": "Введите код подтверждения"
+		"enter-confirmation-code": "Введите код подтверждения высланный на почту:",
+		"confirm": "Подтвердить",
+		"entered-code-is-incorrect": "Введенный код не верен.",
+		"resend-code": "Выслать код заново"
 	}
 }