127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
import styles from '@/app/styles/module/login.module.scss';
|
|
import { useTranslations } from 'next-intl';
|
|
import { ChangeEvent, MouseEvent, useActionState, useState, useEffect } from 'react';
|
|
import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
|
|
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();
|
|
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"
|
|
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>
|
|
{t('enter-confirmation-code')}
|
|
<br />
|
|
</h4>
|
|
<p
|
|
className="mb-6"
|
|
>
|
|
{email}
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="emailConfirm"
|
|
name="emailConfirm"
|
|
className={`${styles['form-input']}`}
|
|
placeholder={t('confirmation-code')}
|
|
value={confirmCodeValue}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
|
onChangeHandler(e)
|
|
}}
|
|
/>
|
|
<input
|
|
type="hiden"
|
|
id="userId"
|
|
name="userId"
|
|
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']}`}
|
|
disabled={confirmCodeValue.length !== 6}
|
|
>
|
|
{t('confirm')}
|
|
</button>
|
|
<button
|
|
className={`${styles['btn'] + ' ' + styles['refresh']} flex`}
|
|
disabled={isInputDisabled}
|
|
onClick={(e) => {
|
|
reSendEmailConfirmCode(e);
|
|
}}
|
|
title={t('resend-code')}
|
|
>
|
|
<IconRefresh />
|
|
{timer !== 0 ? timer : ''}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |