fix: fix login-page errors
This commit is contained in:
parent
b5b20b054d
commit
4f5e56f855
@ -98,9 +98,7 @@ export const LoginForm = ({ type }: LoginFormProps) => {
|
|||||||
type='submit'
|
type='submit'
|
||||||
className='w-full'
|
className='w-full'
|
||||||
disabled={isLoginLoading}
|
disabled={isLoginLoading}
|
||||||
>
|
/>
|
||||||
Войти
|
|
||||||
</SubmitButton>
|
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
"use client"
|
'use client';
|
||||||
|
|
||||||
import { Building2, Fuel, User } from 'lucide-react';
|
import { Building2, Fuel, User } from 'lucide-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
import { LoginForm } from '@/features/auth/login-form';
|
import { LoginForm } from '@/features/auth/login-form';
|
||||||
import { useLanguage } from '@/shared/language';
|
|
||||||
|
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
@ -20,6 +20,23 @@ import {
|
|||||||
TabsTrigger,
|
TabsTrigger,
|
||||||
} from '@/shared/shadcn-ui/tabs';
|
} from '@/shared/shadcn-ui/tabs';
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
label: 'auth.bonusClient',
|
||||||
|
type: 'bonus' as const,
|
||||||
|
title: 'auth.bonusLogin.title',
|
||||||
|
description: 'auth.bonusLogin.description',
|
||||||
|
Icon: User,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'auth.corporateClient',
|
||||||
|
type: 'corporate' as const,
|
||||||
|
title: 'auth.corporateLogin.title',
|
||||||
|
description: 'auth.corporateLogin.description',
|
||||||
|
Icon: Building2,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
|
|
||||||
@ -34,49 +51,40 @@ export default function LoginPage() {
|
|||||||
<h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
<h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
{t('auth.title')}
|
{t('auth.title')}
|
||||||
</h1>
|
</h1>
|
||||||
<p className='max-w-2xl text-gray-600'>
|
<p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
|
||||||
{t('auth.description')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mx-auto max-w-md'>
|
<div className='mx-auto max-w-lg'>
|
||||||
<Tabs defaultValue='bonus' className='w-full'>
|
<Tabs defaultValue='bonus' className='w-full'>
|
||||||
<TabsList className='mb-8 grid w-full grid-cols-2'>
|
<TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
|
||||||
<TabsTrigger value='bonus' className='text-base'>
|
{tabs.map((tab) => {
|
||||||
<User className='mr-2 h-4 w-4' /> {t('auth.bonusClient')}
|
return (
|
||||||
</TabsTrigger>
|
<TabsTrigger
|
||||||
<TabsTrigger value='corporate' className='text-base'>
|
key={tab.label}
|
||||||
<Building2 className='mr-2 h-4 w-4' /> {t('auth.corporateClient')}
|
value={tab.type}
|
||||||
</TabsTrigger>
|
className='w-full text-base'
|
||||||
|
>
|
||||||
|
<tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
|
||||||
|
</TabsTrigger>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value='bonus'>
|
{tabs.map((tab) => {
|
||||||
<Card>
|
return (
|
||||||
<CardHeader>
|
<TabsContent key={tab.label} value={tab.type}>
|
||||||
<CardTitle>{t('auth.bonusLogin.title')}</CardTitle>
|
<Card>
|
||||||
<CardDescription>
|
<CardHeader>
|
||||||
{t('auth.bonusLogin.description')}
|
<CardTitle>{t(tab.title)}</CardTitle>
|
||||||
</CardDescription>
|
<CardDescription>{t(tab.description)}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className='space-y-4'>
|
<CardContent className='space-y-4'>
|
||||||
<LoginForm />
|
<LoginForm type={tab.type} />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
);
|
||||||
<TabsContent value='corporate'>
|
})}
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>{t('auth.corporateLogin.title')}</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{t('auth.corporateLogin.description')}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='space-y-4'>
|
|
||||||
<LoginForm/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<div className='mt-8 text-center text-sm text-gray-500'>
|
<div className='mt-8 text-center text-sm text-gray-500'>
|
||||||
@ -92,4 +100,4 @@ export default function LoginPage() {
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,18 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
import { Loader2Icon } from 'lucide-react';
|
import { Loader2Icon } from 'lucide-react';
|
||||||
|
|
||||||
import { Button, type ButtonProps } from '@/shared/shadcn-ui/button';
|
import { Button, type ButtonProps } from '@/shared/shadcn-ui/button';
|
||||||
|
|
||||||
|
import { useLanguage } from '../language';
|
||||||
|
|
||||||
interface SubmitButtonProps extends ButtonProps {
|
interface SubmitButtonProps extends ButtonProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SubmitButton = ({
|
export const SubmitButton = ({
|
||||||
title = 'Отправить',
|
title = 'common.buttons.login',
|
||||||
size = 'default',
|
size = 'default',
|
||||||
type = 'submit',
|
type = 'submit',
|
||||||
className,
|
className,
|
||||||
@ -17,6 +21,8 @@ export const SubmitButton = ({
|
|||||||
onClick,
|
onClick,
|
||||||
...props
|
...props
|
||||||
}: SubmitButtonProps) => {
|
}: SubmitButtonProps) => {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
@ -29,7 +35,7 @@ export const SubmitButton = ({
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Loader2Icon className='animate-spin' />
|
<Loader2Icon className='animate-spin' />
|
||||||
) : (
|
) : (
|
||||||
(props.children ?? title)
|
(props.children ?? t(title))
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user