frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor confirm window

Browse Source
This commit is contained in:
smanylov
2026-01-23 18:06:08 +07:00
parent 396d3888db
commit 4166cb1d80
2 changed files with 83 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/forms/confirm-mail-modal-window.tsx
+80
View File
@@ -0,0 +1,80 @@
import styles from '@/app/styles/module/login.module.scss';
import { useTranslations } from 'next-intl';
import { MouseEvent, useActionState } from 'react';
import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
export default function ConfirmMailModalWindow({ userId }: any) {
const t = useTranslations('Login-register-form');
const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
confirmEmail,
undefined,
);
async function reSendEmailConfirmCode(e: MouseEvent) {
e.preventDefault();
console.log(userId ? userId : '');
if (userId) {
await resendConfirmEmail(userId);
}
}
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
className="mb-6"
>
{t('enter-confirmation-code')}
</h4>
<label
className={`${styles['form-label']}`}
>
{t('confirmation-code')}
</label>
<input
type="text"
id="emailConfirm"
name="emailConfirm"
className={`${styles['form-input']}`}
placeholder="mail-code"
defaultValue=""
onChange={(e) => {
}}
/>
<input
type="hiden"
id="userId"
name="userId"
style={{ display: 'none' }}
defaultValue={userId ? userId : ''}
/>
</div>
<div>
{stateEmailConfrim?.error}
</div>
<div className="flex gap-2">
<button type="submit" className={`${styles['btn']}`}>
Проверить
</button>
<button
className={`${styles['btn']}`}
onClick={(e) => {
reSendEmailConfirmCode(e);
}}
>
test
</button>
</div>
</form>
</div>
</div>
)
}
src/app/ui/forms/register-form.tsx
+3 -71
View File
@@ -2,13 +2,14 @@
import styles from '@/app/styles/module/login.module.scss'; import styles from '@/app/styles/module/login.module.scss';
import { ChangeEvent, useActionState, useEffect, useRef, useState, MouseEvent } from 'react'; import { ChangeEvent, useActionState, useEffect, useRef, useState, MouseEvent } from 'react';
import { registration, FormState, confirmEmail, resendConfirmEmail } from '@/app/actions/auth'; import { registration, FormState } from '@/app/actions/auth';
import PhoneInput from '@/app/ui/inputs/phone-input'; import PhoneInput from '@/app/ui/inputs/phone-input';
import Link from 'next/link'; import Link from 'next/link';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { IconEye } from '@/app/ui/icons/icons'; import { IconEye } from '@/app/ui/icons/icons';
import { SignupFormSchema } from '@/app/actions/definitions'; import { SignupFormSchema } from '@/app/actions/definitions';
import * as z from 'zod' import * as z from 'zod'
import ConfirmMailModalWindow from '@/app/ui/forms/confirm-mail-modal-window';
export default function RegisterForm() { export default function RegisterForm() {
const [state, formAction, isPending] = useActionState( const [state, formAction, isPending] = useActionState(
@@ -16,11 +17,6 @@ export default function RegisterForm() {
undefined, undefined,
); );
const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
confirmEmail,
undefined,
);
const t = useTranslations('Login-register-form'); const t = useTranslations('Login-register-form');
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false);
@@ -113,14 +109,6 @@ export default function RegisterForm() {
} }
} }
async function reSendEmailConfirmCode(e: MouseEvent) {
e.preventDefault();
console.log(state?.userId ? state?.userId : '');
if (state?.userId) {
await resendConfirmEmail(state?.userId);
}
}
return ( return (
<> <>
<button <button
@@ -137,63 +125,7 @@ export default function RegisterForm() {
setShowMailConfirmWindow(false); setShowMailConfirmWindow(false);
}} }}
> >
<div <ConfirmMailModalWindow userId={state?.userId}/>
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
className="mb-6"
>
{t('enter-confirmation-code')}
</h4>
<label
className={`${styles['form-label']}`}
>
{t('confirmation-code')}
</label>
<input
type="text"
id="emailConfirm"
name="emailConfirm"
className={`${styles['form-input']}`}
placeholder="mail-code"
defaultValue=""
onChange={(e) => {
}}
/>
<input
type="hiden"
id="userId"
name="userId"
style={{ display: 'none' }}
defaultValue={state?.userId ? state?.userId : ''}
/>
</div>
<div>
{stateEmailConfrim?.error}
</div>
<div className="flex gap-2">
<button type="submit" className={`${styles['btn']}`}>
Проверить
</button>
<button
className={`${styles['btn']}`}
onClick={(e) => {
reSendEmailConfirmCode(e);
}}
>
test
</button>
</div>
</form>
</div>
</div>
</div> </div>
)} )}
<form action={(e) => { <form action={(e) => {