add confirm email modal window
This commit is contained in:
smanylov
+275
-218
@@ -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<FormState | undefined>(undefined);
|
||||
const [showMailConfirmWindow, setShowMailConfirmWindow] = useState(false);
|
||||
const passwordRef = useRef<HTMLInputElement>(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 (
|
||||
<form action={(e) => {
|
||||
formAction(e);
|
||||
}}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label
|
||||
className={`${styles['form-label']} ${styles['required']}`}
|
||||
>
|
||||
{t('full-name')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('name-placeholder')}
|
||||
defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
{formState?.error?.fullName && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.fullName.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('email-adress')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder="ivan@example.com"
|
||||
defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
|
||||
onChange={(e) => {
|
||||
e.target.value = e.target.value.toLocaleLowerCase();
|
||||
onChangeHandler(e)
|
||||
}}
|
||||
/>
|
||||
{formState?.error?.email && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.email.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('phone')}
|
||||
</label>
|
||||
<PhoneInput phoneState={formState?.previousState?.phone} validateHandler={onChangeHandler} />
|
||||
{formState?.error?.phone && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.phone.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label
|
||||
className={`${styles['form-label']}`}
|
||||
>
|
||||
{t('company')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="companyName"
|
||||
name="companyName"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('company-placeholder')}
|
||||
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
{formState?.error?.companyName && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.companyName.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('password')}
|
||||
</label>
|
||||
<>
|
||||
{showMailConfirmWindow && (
|
||||
<div
|
||||
className={`${styles['password-wrapper']}`}
|
||||
className="modal-wrapper"
|
||||
onClick={() => {
|
||||
setShowMailConfirmWindow(false);
|
||||
}}
|
||||
>
|
||||
<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) => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className={`${styles['btn']}`}>
|
||||
Проверить
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<form action={(e) => {
|
||||
formAction(e);
|
||||
}}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label
|
||||
className={`${styles['form-label']} ${styles['required']}`}
|
||||
>
|
||||
{t('full-name')}
|
||||
</label>
|
||||
<input
|
||||
ref={passwordRef}
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('password-placeholder')}
|
||||
defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('name-placeholder')}
|
||||
defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('password')
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
{formState?.error?.fullName && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.fullName.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{formState?.error?.password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.password.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('confirm-password')}
|
||||
</label>
|
||||
<div className={`${styles['password-wrapper']}`}>
|
||||
<input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('repeat-password')}
|
||||
defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('confirm-password');
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showConfirmPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{formState?.error?.confirm_password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(formState?.error?.confirm_password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-checkbox']}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agree"
|
||||
name="agree"
|
||||
defaultChecked={formState?.previousState?.agree ? true : false}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<label htmlFor="agree">
|
||||
{t('i-agree-to')} <Link
|
||||
href="/terms-of-use"
|
||||
target="_blank"
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('email-adress')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder="ivan@example.com"
|
||||
defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
|
||||
onChange={(e) => {
|
||||
e.target.value = e.target.value.toLocaleLowerCase();
|
||||
onChangeHandler(e)
|
||||
}}
|
||||
/>
|
||||
{formState?.error?.email && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.email.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('phone')}
|
||||
</label>
|
||||
<PhoneInput phoneState={formState?.previousState?.phone} validateHandler={onChangeHandler} />
|
||||
{formState?.error?.phone && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.phone.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label
|
||||
className={`${styles['form-label']}`}
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
</Link> {t('and')} <Link
|
||||
href="/privacy-policy"
|
||||
target="_blank"
|
||||
{t('company')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="companyName"
|
||||
name="companyName"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('company-placeholder')}
|
||||
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
{formState?.error?.companyName && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.companyName.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('password')}
|
||||
</label>
|
||||
<div
|
||||
className={`${styles['password-wrapper']}`}
|
||||
>
|
||||
{t('privacy-policy')}
|
||||
</Link>
|
||||
</label>
|
||||
</div>
|
||||
{formState?.error?.agree && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(formState?.error?.agree)}
|
||||
</p>
|
||||
)}
|
||||
{formState?.error?.server && (
|
||||
<p className="text-sm text-red-500 mt-4">
|
||||
{t(formState?.error?.server)}
|
||||
</p>
|
||||
)}
|
||||
<button type="submit" className={`${styles['btn']}`}>
|
||||
{t('create-an-account')}
|
||||
</button>
|
||||
</form >
|
||||
<input
|
||||
ref={passwordRef}
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('password-placeholder')}
|
||||
defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('password')
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{formState?.error?.password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.password.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('confirm-password')}
|
||||
</label>
|
||||
<div className={`${styles['password-wrapper']}`}>
|
||||
<input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('repeat-password')}
|
||||
defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('confirm-password');
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showConfirmPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{formState?.error?.confirm_password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(formState?.error?.confirm_password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${styles['form-checkbox']}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agree"
|
||||
name="agree"
|
||||
defaultChecked={formState?.previousState?.agree ? true : false}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<label htmlFor="agree">
|
||||
{t('i-agree-to')} <Link
|
||||
href="/terms-of-use"
|
||||
target="_blank"
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
</Link> {t('and')} <Link
|
||||
href="/privacy-policy"
|
||||
target="_blank"
|
||||
>
|
||||
{t('privacy-policy')}
|
||||
</Link>
|
||||
</label>
|
||||
</div>
|
||||
{formState?.error?.agree && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(formState?.error?.agree)}
|
||||
</p>
|
||||
)}
|
||||
{formState?.error?.server && (
|
||||
<p className="text-sm text-red-500 mt-4">
|
||||
{t(formState?.error?.server)}
|
||||
</p>
|
||||
)}
|
||||
<button type="submit" className={`${styles['btn']}`}>
|
||||
{t('create-an-account')}
|
||||
</button>
|
||||
</form >
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user