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

make translate for login, register pages

Browse Source
This commit is contained in:
smanylov
2025-12-10 16:39:13 +07:00
parent d9c26b079d
commit f281c13f87
31 changed files with 830 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/register-form.tsx
+52 -22
View File
@@ -5,12 +5,14 @@ import { useActionState } 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';
export default function RegisterForm() {
const [state, formAction, isPending] = useActionState(
registration,
undefined,
);
const t = useTranslations('Login-register-form');
return (
<form action={(e) => {
@@ -20,23 +22,27 @@ export default function RegisterForm() {
<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="Иванов Иван Иванович"
placeholder={t('name-placeholder')}
defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
/>
{state?.error?.full_name && (
<p className="text-sm text-red-500">{state?.error?.full_name}</p>
<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']}`}>Email адрес</label>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('email-adress')}
</label>
<input
type="text"
id="email"
@@ -46,14 +52,20 @@ export default function RegisterForm() {
defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
/>
{state?.error?.email && (
<p className="text-sm text-red-500">{state?.error?.email}</p>
<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']}`}>Телефон</label>
<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">{state?.error?.phone}</p>
<p className="text-sm text-red-500">
{t(state?.error?.phone)}
</p>
)}
</div>
</div>
@@ -61,43 +73,55 @@ export default function RegisterForm() {
<label
className={`${styles['form-label']}`}
>
Компания
{t('company')}
</label>
<input
type="text"
id="company"
name="company"
className={`${styles['form-input']}`}
placeholder="ООО «Ваша компания»"
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']}`}>Пароль</label>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('password')}
</label>
<input
type="password"
id="password" name="password"
className={`${styles['form-input']}`}
placeholder="Минимум 8 символов"
placeholder={t('password-placeholder')}
defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
/>
{state?.error?.password && (
<p className="text-sm text-red-500">{state?.error?.password}</p>
<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']}`}>Подтвердите пароль</label>
<label className={`${styles['form-label']} ${styles['required']}`}>
{t('confirm-password')}
</label>
<input
type="password"
id="confirm_password"
name="confirm_password"
className={`${styles['form-input']}`}
placeholder="Повторите пароль"
placeholder={t('repeat-password')}
defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
/>
{state?.error?.confirm_password && (
<p className="text-sm text-red-500">{state?.error?.confirm_password}</p>
<p className="text-sm text-red-500">
{t(state?.error?.confirm_password)}
</p>
)}
</div>
</div>
@@ -108,22 +132,28 @@ export default function RegisterForm() {
name="agree"
defaultChecked={state?.previousState?.agree ? true : false}
/>
<label htmlFor="agree">Я соглашаюсь с
<Link
<label htmlFor="agree">
{t('i-agree-to')} <Link
href="/terms-and-privacy-policy"
target="_blank"
>
условиями использования и политикой конфиденциальности
>
{t('terms-of-use')}
</Link>
</label>
</div>
{state?.error?.agree && (
<p className="text-sm text-red-500">{state?.error?.agree}</p>
<p className="text-sm text-red-500">
{t(state?.error?.agree)}
</p>
)}
{state?.error?.server && (
<p className="text-sm text-red-500">{state?.error?.server}</p>
<p className="text-sm text-red-500">
{t(state?.error?.server)}
</p>
)}
<button type="submit" className={`${styles['btn']}`}>Создать аккаунт</button>
<button type="submit" className={`${styles['btn']}`}>
{t('create-an-account')}
</button>
</form >
)
}