update confirm email code 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) {
-	const t = useTranslations('Login-register-form');
-
+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,
 	);
+	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')}
-						</h4>
-						<label
-							className={`${styles['form-label']}`}
-						>
-							{t('confirmation-code')}
-						</label>
+							{email}
+						</p>
 						<input
 							type="text"
 							id="emailConfirm"
 							name="emailConfirm"
 							className={`${styles['form-input']}`}
-							placeholder="mail-code"
-							defaultValue=""
-							onChange={(e) => {
+							placeholder={t('confirmation-code')}
+							value={confirmCodeValue}
+							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>