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

edit register form layout

Browse Source
This commit is contained in:
smanylov
2025-12-22 14:30:25 +07:00
parent e26a8c4742
commit 2bf6fcac2f
7 changed files with 131 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/forms/register-form.tsx
+107 -132
View File
@@ -26,28 +26,11 @@ export default function RegisterForm() {
setFormState(state);
}, [state])
function handleMouseDown(target: 'password' | 'confirm-password') {
function showPassowrd(target: 'password' | 'confirm-password') {
if (target === 'password') {
setShowPassword(true);
setShowPassword(!showPassword);
} 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);
setShowConfirmPassword(!showConfirmPassword);
}
}
@@ -145,42 +128,45 @@ export default function RegisterForm() {
</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={formState?.previousState?.email ? formState?.previousState?.email : ''}
onChange={onChangeHandler}
/>
{formState?.error?.email && (
<p className="text-sm text-red-500">
{
formState?.error?.email.split('&').map((e) => {
return t(e) + " "
})
}
</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">
{t(formState?.error?.phone)}
</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) => {
return t(e) + " "
})
}
</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">
{t(formState?.error?.phone)}
</p>
)}
</div>
<div className={`${styles['form-group']}`}>
<label
className={`${styles['form-label']}`}
@@ -196,86 +182,75 @@ export default function RegisterForm() {
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
/>
</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']}`}
<div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('password')}
</label>
<div
className={`${styles['password-wrapper']}`}
>
<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' : ''}`}
>
<input
ref={passwordRef}
type={showPassword ? "text" : "password"}
id="password" name="password"
className={`${styles['form-input']}`}
placeholder={t('password-placeholder')}
defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
onChange={onChangeHandler}
/>
<button
onMouseDown={() => {
handleMouseDown('password');
}}
onMouseUp={() => {
handleMouseUp('password');
}}
onMouseOut={() => {
handleMouseOut('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) => {
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={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
onChange={onChangeHandler}
/>
<button
onMouseDown={() => {
handleMouseDown('confirm-password');
}}
onMouseUp={() => {
handleMouseUp('confirm-password');
}}
onMouseOut={() => {
handleMouseOut('confirm-password');
}}
type="button"
className={`show-password-button ${showPassword ? 'show' : ''}`}
>
<IconEye />
</button>
</div>
{formState?.error?.confirm_password && (
<p className="text-sm text-red-500">
{t(formState?.error?.confirm_password)}
</p>
)}
<IconEye />
</button>
</div>
{formState?.error?.password && (
<p className="text-sm text-red-500">
{
formState?.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']} ${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"