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/actions/definitions.ts
+8
View File
@@ -24,6 +24,10 @@ export const SignupFormSchema = z
.string() .string()
.min(2, { error: 'register-error-name' }) .min(2, { error: 'register-error-name' })
.regex(/^[^0-9]*$/, { message: 'register-error-no-digits' }) .regex(/^[^0-9]*$/, { message: 'register-error-no-digits' })
.refine(
(value) => !/\p{Emoji}/u.test(value),
{ message: 'no-emoji-allowed' }
)
.trim(), .trim(),
email: z email: z
.string() .string()
@@ -44,6 +48,10 @@ export const SignupFormSchema = z
.min(8, { error: 'register-error-password-symbols' }) .min(8, { error: 'register-error-password-symbols' })
.regex(/[a-zA-Zа-яёА-ЯЁ]/, { error: 'register-error-password-one-letter' }) .regex(/[a-zA-Zа-яёА-ЯЁ]/, { error: 'register-error-password-one-letter' })
.regex(/[0-9]/, { error: 'register-error-password-one-digit' }) .regex(/[0-9]/, { error: 'register-error-password-one-digit' })
.refine(
(value) => !/\p{Emoji}/u.test(value),
{ message: 'no-emoji-allowed' }
)
.trim(), .trim(),
confirm_password: z confirm_password: z
.string(), .string(),
src/app/styles/global-styles.scss
+4 -3
View File
@@ -97,8 +97,9 @@
.show-password-button { .show-password-button {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 0px; top: 50%;
right: 6px; right: 10px;
transform: translateY(-50%);
svg { svg {
width: 16px; width: 16px;
@@ -108,7 +109,7 @@
&.show { &.show {
svg { svg {
color: black; color: #8b5cf6;
} }
} }
} }
src/app/styles/login.module.scss
+4
View File
@@ -75,6 +75,10 @@
&[type="password"]::-ms-reveal { &[type="password"]::-ms-reveal {
display: none; display: none;
} }
&.password {
padding-right: 32px;
}
} }
.form-options { .form-options {
src/app/ui/forms/login-form.tsx
+4 -1
View File
@@ -42,6 +42,9 @@ export default function LoginForm() {
className={`${styles['form-input']}`} className={`${styles['form-input']}`}
placeholder={t('enter-email')} placeholder={t('enter-email')}
defaultValue={state?.previousState?.email ? state?.previousState?.email : ''} defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
onChange={(e) => {
e.target.value = e.target.value.toLocaleLowerCase();
}}
/> />
{state?.error?.email && ( {state?.error?.email && (
<p className={`${styles['form-error']}`}> <p className={`${styles['form-error']}`}>
@@ -58,7 +61,7 @@ export default function LoginForm() {
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
id="password" id="password"
name="password" name="password"
className={`${styles['form-input']}`} className={`${styles['form-input']} ${styles['password']}`}
placeholder={t('enter-password')} placeholder={t('enter-password')}
/> />
<button <button
src/app/ui/forms/register-form.tsx
+107 -132
View File
@@ -26,28 +26,11 @@ export default function RegisterForm() {
setFormState(state); setFormState(state);
}, [state]) }, [state])
function handleMouseDown(target: 'password' | 'confirm-password') { function showPassowrd(target: 'password' | 'confirm-password') {
if (target === 'password') { if (target === 'password') {
setShowPassword(true); setShowPassword(!showPassword);
} else { } else {
setShowConfirmPassword(true); setShowConfirmPassword(!showConfirmPassword);
}
}
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);
} }
} }
@@ -145,42 +128,45 @@ export default function RegisterForm() {
</p> </p>
)} )}
</div> </div>
<div className={`${styles['form-row']}`}>
<div className={`${styles['form-group']}`}> <div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}> <label className={`${styles['form-label']} ${styles['required']}`}>
{t('email-adress')} {t('email-adress')}
</label> </label>
<input <input
type="text" type="text"
id="email" id="email"
name="email" name="email"
className={`${styles['form-input']}`} className={`${styles['form-input']}`}
placeholder="ivan@example.com" placeholder="ivan@example.com"
defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''} defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
onChange={onChangeHandler} onChange={(e) => {
/> e.target.value = e.target.value.toLocaleLowerCase();
{formState?.error?.email && ( onChangeHandler(e)
<p className="text-sm text-red-500"> }}
{ />
formState?.error?.email.split('&').map((e) => { {formState?.error?.email && (
return t(e) + " " <p className="text-sm text-red-500">
}) {
} formState?.error?.email.split('&').map((e) => {
</p> return t(e) + " "
)} })
</div> }
<div className={`${styles['form-group']}`}> </p>
<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> </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']}`}> <div className={`${styles['form-group']}`}>
<label <label
className={`${styles['form-label']}`} className={`${styles['form-label']}`}
@@ -196,86 +182,75 @@ export default function RegisterForm() {
defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''} defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
/> />
</div> </div>
<div className={`${styles['form-row']}`}>
<div className={`${styles['form-group']}`}> <div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']} ${styles['required']}`}> <label className={`${styles['form-label']} ${styles['required']}`}>
{t('password')} {t('password')}
</label> </label>
<div <div
className={`${styles['password-wrapper']}`} 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 <IconEye />
ref={passwordRef} </button>
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>
)}
</div> </div>
{formState?.error?.password && (
<p className="text-sm text-red-500">
{
formState?.error?.password.split('&').map((e) => {
return t(e)
})
}
</p>
)}
</div> </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']}`}> <div className={`${styles['form-checkbox']}`}>
<input <input
type="checkbox" type="checkbox"
src/i18n/messages/en.json
+2 -1
View File
@@ -170,6 +170,7 @@
"email-invalid": "Invalid email address", "email-invalid": "Invalid email address",
"email-too-long": "Email is too long", "email-too-long": "Email is too long",
"password-too-long": "Password must be less than 50 characters", "password-too-long": "Password must be less than 50 characters",
"email-no-uppercase": "Email must not contain capital letters" "email-no-uppercase": "Email must not contain capital letters.",
"no-emoji-allowed": "The use of emoji is prohibited."
} }
} }
src/i18n/messages/ru.json
+2 -1
View File
@@ -170,6 +170,7 @@
"email-invalid": "Неверный адрес электронной почты", "email-invalid": "Неверный адрес электронной почты",
"email-too-long": "Email слишком длинный.", "email-too-long": "Email слишком длинный.",
"password-too-long": "Пароль должен содержать менее 50 символов.", "password-too-long": "Пароль должен содержать менее 50 символов.",
"email-no-uppercase": "Email не должен содержать заглавных букв" "email-no-uppercase": "Email не должен содержать заглавных букв.",
"no-emoji-allowed": "Использование эмодзи запрещено."
} }
} }