make translate for login, register pages
This commit is contained in:
smanylov
@@ -1,11 +1,13 @@
|
||||
import NotificationsButton from './notificationsButton';
|
||||
import UserMenuButton from './userMenuButton';
|
||||
import Link from 'next/link';
|
||||
import LanguageSwitcher from '@/app/components/LanguageSwitcher';
|
||||
|
||||
export default function HeaderPanel() {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="header-action">
|
||||
<LanguageSwitcher/>
|
||||
<Link
|
||||
href={'/pages/payment'}
|
||||
className="tokens-balance"
|
||||
|
||||
+28
-10
@@ -3,53 +3,71 @@
|
||||
import styles from '@/app/styles/login.module.scss'
|
||||
import { useActionState } from 'react';
|
||||
import { authorization } from '@/app/actions/auth';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function LoginForm() {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
authorization,
|
||||
undefined,
|
||||
);
|
||||
const t = useTranslations('Login-register-form');
|
||||
|
||||
return (
|
||||
<form action={formAction}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']}`}>Email адрес</label>
|
||||
<label className={`${styles['form-label']}`}>
|
||||
{t('email-adress')}
|
||||
</label>
|
||||
<input
|
||||
type="readOnly"
|
||||
id="email"
|
||||
name="email"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder="Введите ваш email"
|
||||
placeholder={t('enter-email')}
|
||||
defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
|
||||
/>
|
||||
{state?.error?.email && (
|
||||
<p className={`${styles['form-error']}`}>{state?.error?.email}</p>
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error?.email)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']}`}>Пароль</label>
|
||||
<label className={`${styles['form-label']}`}>
|
||||
{t('password')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder="Введите пароль"
|
||||
placeholder={t('enter-password')}
|
||||
/>
|
||||
{state?.error?.password && (
|
||||
<p className={`${styles['form-error']}`}>{state?.error?.password}</p>
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error?.password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{state?.error.server && (
|
||||
<p className={`${styles['form-error']}`}>{state?.error.server}</p>
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error.server)}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${styles['form-options']}`}>
|
||||
<div className={`${styles['form-checkbox']}`}>
|
||||
<input type="checkbox" id="remember" name="remember" />
|
||||
<label>Запомнить меня</label>
|
||||
<label>
|
||||
{t('remember-me')}
|
||||
</label>
|
||||
</div>
|
||||
<a href="forgot-password" className={`${styles['forgot-password']}`} >Забыли пароль?</a>
|
||||
<a href="forgot-password" className={`${styles['forgot-password']}`} >
|
||||
{t('forgot-password')}?
|
||||
</a>
|
||||
</div>
|
||||
<button type="submit" className={`${styles['btn']}`}>Войти в систему</button>
|
||||
<button type="submit" className={`${styles['btn']}`}>
|
||||
{t('sign-in')}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -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 >
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user