From 18a48236b569029e9526fc9a60fa90813353a1a8 Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 14 Jan 2026 18:15:52 +0700 Subject: [PATCH] add confirm email modal window --- src/app/actions/auth.ts | 34 +- src/app/styles/module/login.module.scss | 9 + src/app/ui/forms/register-form.tsx | 493 +++++++++++++----------- src/i18n/messages/en.json | 4 +- src/i18n/messages/ru.json | 4 +- 5 files changed, 320 insertions(+), 224 deletions(-) diff --git a/src/app/actions/auth.ts b/src/app/actions/auth.ts index 037df63..01ff3dd 100644 --- a/src/app/actions/auth.ts +++ b/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 + }, + mailConfirm?: boolean, + error: Record | 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); } \ No newline at end of file diff --git a/src/app/styles/module/login.module.scss b/src/app/styles/module/login.module.scss index ae5288e..0f62492 100644 --- a/src/app/styles/module/login.module.scss +++ b/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; diff --git a/src/app/ui/forms/register-form.tsx b/src/app/ui/forms/register-form.tsx index a03fd11..5897fa6 100644 --- a/src/app/ui/forms/register-form.tsx +++ b/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(undefined); + const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false); const passwordRef = useRef(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 ( -
{ - formAction(e); - }}> -
- - - {formState?.error?.fullName && ( -

- { - formState?.error?.fullName.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
- -
- - { - e.target.value = e.target.value.toLocaleLowerCase(); - onChangeHandler(e) - }} - /> - {formState?.error?.email && ( -

- { - formState?.error?.email.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
-
- - - {formState?.error?.phone && ( -

- { - formState?.error?.phone.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
- -
- - - {formState?.error?.companyName && ( -

- { - formState?.error?.companyName.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
- -
- + <> + {showMailConfirmWindow && (
{ + setShowMailConfirmWindow(false); + }} > +
e.stopPropagation()} + > +
+ { + formActionEmailConfrim(e); + }}> +
+

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

+ + { + }} + /> +
+ + +
+
+
+ )} +
{ + formAction(e); + }}> +
+ - + {formState?.error?.fullName && ( +

+ { + formState?.error?.fullName.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )}
- {formState?.error?.password && ( -

- { - formState?.error?.password.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
-
- -
- - -
- {formState?.error?.confirm_password && ( -

- {t(formState?.error?.confirm_password)} -

- )} -
-
- -
+
+ + + {formState?.error?.phone && ( +

+ { + formState?.error?.phone.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )} +
+ +
+
+ +
+ +
- {t('privacy-policy')} - - -
- {formState?.error?.agree && ( -

- {t(formState?.error?.agree)} -

- )} - {formState?.error?.server && ( -

- {t(formState?.error?.server)} -

- )} - - + + +
+ {formState?.error?.password && ( +

+ { + formState?.error?.password.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )} + +
+ +
+ + +
+ {formState?.error?.confirm_password && ( +

+ {t(formState?.error?.confirm_password)} +

+ )} +
+ +
+ + +
+ {formState?.error?.agree && ( +

+ {t(formState?.error?.agree)} +

+ )} + {formState?.error?.server && ( +

+ {t(formState?.error?.server)} +

+ )} + + + ) } \ No newline at end of file diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index cdd4560..6125f2f 100644 --- a/src/i18n/messages/en.json +++ b/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" } } \ No newline at end of file diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index ffcaa34..4f071a5 100644 --- a/src/i18n/messages/ru.json +++ b/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": "Введите код подтверждения" } } \ No newline at end of file