reafactor + show password button for confirm password
This commit is contained in:
smanylov
@@ -0,0 +1,229 @@
|
||||
'use client'
|
||||
|
||||
import styles from '@/app/styles/login.module.scss';
|
||||
import { useActionState, useState } from 'react';
|
||||
import { registration } from '@/app/actions/auth';
|
||||
import PhoneInput from '@/app/ui/inputs/phone-input';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { IconEye } from '@/app/ui/icons/icons';
|
||||
|
||||
export default function RegisterForm() {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
registration,
|
||||
undefined,
|
||||
);
|
||||
const t = useTranslations('Login-register-form');
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
function handleMouseDown(target: 'password' | 'confirm-password') {
|
||||
if (target === 'password') {
|
||||
setShowPassword(true);
|
||||
} else {
|
||||
setShowConfirmPassword(true);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp(target: 'password' | 'confirm-password') {
|
||||
if (target === 'password') {
|
||||
setShowPassword(false);
|
||||
} else {
|
||||
setShowConfirmPassword(false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function handleMouseOut(target: 'password' | 'confirm-password') {
|
||||
if (target === 'password') {
|
||||
setShowPassword(false);
|
||||
} else {
|
||||
setShowConfirmPassword(false);
|
||||
}
|
||||
}
|
||||
|
||||
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="full_name"
|
||||
name="full_name"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('name-placeholder')}
|
||||
defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
|
||||
/>
|
||||
{state?.error?.full_name && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.full_name)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-row']}`}>
|
||||
<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={state?.previousState?.email ? state?.previousState?.email : ''}
|
||||
/>
|
||||
{state?.error?.email && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.email)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('phone')}
|
||||
</label>
|
||||
<PhoneInput phoneState={state?.previousState?.phone} />
|
||||
{state?.error?.phone && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.phone)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label
|
||||
className={`${styles['form-label']}`}
|
||||
>
|
||||
{t('company')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('company-placeholder')}
|
||||
defaultValue={state?.previousState?.company ? state?.previousState?.company : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles['form-row']}`}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('password')}
|
||||
</label>
|
||||
<div
|
||||
className={`${styles['password-wrapper']}`}
|
||||
>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password" name="password"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('password-placeholder')}
|
||||
defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
|
||||
/>
|
||||
<button
|
||||
onMouseDown={() => {
|
||||
handleMouseDown('password');
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
handleMouseUp('password');
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
handleMouseOut('password')
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{state?.error?.password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
state?.error?.password.split('&').map((e) => {
|
||||
return t(e)
|
||||
})
|
||||
}
|
||||
</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']}`}
|
||||
placeholder={t('repeat-password')}
|
||||
defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
|
||||
/>
|
||||
<button
|
||||
onMouseDown={() => {
|
||||
handleMouseDown('confirm-password');
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
handleMouseUp('confirm-password');
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
handleMouseOut('confirm-password')
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{state?.error?.confirm_password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.confirm_password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles['form-checkbox']}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agree"
|
||||
name="agree"
|
||||
defaultChecked={state?.previousState?.agree ? true : false}
|
||||
/>
|
||||
<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>
|
||||
{state?.error?.agree && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.agree)}
|
||||
</p>
|
||||
)}
|
||||
{state?.error?.server && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(state?.error?.server)}
|
||||
</p>
|
||||
)}
|
||||
<button type="submit" className={`${styles['btn']}`}>
|
||||
{t('create-an-account')}
|
||||
</button>
|
||||
</form >
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user