diff --git a/src/app/actions/auth.ts b/src/app/actions/auth.ts index 8af2ee2..f9432f8 100644 --- a/src/app/actions/auth.ts +++ b/src/app/actions/auth.ts @@ -331,8 +331,8 @@ export async function tokenLifeExtension() { } export async function confirmEmail( - state: any | undefined, - formData: any + state: {error: string} | undefined, + formData: FormData ) { console.log('confirmEmail'); const emailConfirm = formData.get('emailConfirm') as string || ''; diff --git a/src/app/styles/module/login.module.scss b/src/app/styles/module/login.module.scss index 0f62492..a868274 100644 --- a/src/app/styles/module/login.module.scss +++ b/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 { diff --git a/src/app/ui/forms/confirm-mail-modal-window.tsx b/src/app/ui/forms/confirm-mail-modal-window.tsx index 81bb47e..427d02f 100644 --- a/src/app/ui/forms/confirm-mail-modal-window.tsx +++ b/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) { + 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 (
-

+ {t('enter-confirmation-code')} +
+

+

- {t('enter-confirmation-code')} - - + {email} +

{ + placeholder={t('confirmation-code')} + value={confirmCodeValue} + onChange={(e: ChangeEvent) => { + onChangeHandler(e) }} /> + {!stateEmailConfrim?.error && ( +

+ {t('entered-code-is-incorrect')} +

+ )}
{stateEmailConfrim?.error}
-
-
diff --git a/src/app/ui/forms/register-form.tsx b/src/app/ui/forms/register-form.tsx index d29fcf9..dd1c0f9 100644 --- a/src/app/ui/forms/register-form.tsx +++ b/src/app/ui/forms/register-form.tsx @@ -125,7 +125,7 @@ export default function RegisterForm() { setShowMailConfirmWindow(false); }} > - + )}
{ diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx index d6af85d..3eafd88 100644 --- a/src/app/ui/icons/icons.tsx +++ b/src/app/ui/icons/icons.tsx @@ -145,4 +145,10 @@ export function IconBurgerMenu() { return ( ) +} + +export function IconRefresh() { + return ( + + ) } \ No newline at end of file diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 9199f79..9479042 100644 --- a/src/i18n/messages/en.json +++ b/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" } } \ No newline at end of file diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 7ce8d55..5c5f60f 100644 --- a/src/i18n/messages/ru.json +++ b/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": "Выслать код заново" } } \ No newline at end of file