diff --git a/apps/frontend/src/pages/login/LoginPage.test.tsx b/apps/frontend/src/pages/login/LoginPage.test.tsx index 85bd7ec..94b23b1 100644 --- a/apps/frontend/src/pages/login/LoginPage.test.tsx +++ b/apps/frontend/src/pages/login/LoginPage.test.tsx @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { Routes, Route } from 'react-router-dom'; import userEvent from '@testing-library/user-event'; import { http, HttpResponse } from 'msw'; @@ -72,6 +72,8 @@ describe('LoginPage', () => { await user.type(screen.getByPlaceholderText('••••••••'), 'password'); await user.click(screen.getByRole('button', { name: 'Войти' })); - expect(await screen.findByText('Вход...')).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByRole('button', { name: 'Войти' })).toBeDisabled(); + }); }); }); diff --git a/apps/frontend/src/pages/login/ui/LoginPage.tsx b/apps/frontend/src/pages/login/ui/LoginPage.tsx index e189b32..98b4cb4 100644 --- a/apps/frontend/src/pages/login/ui/LoginPage.tsx +++ b/apps/frontend/src/pages/login/ui/LoginPage.tsx @@ -1,5 +1,7 @@ import { useState, type FormEvent } from 'react'; import { Link, useNavigate, useSearchParams } from 'react-router-dom'; +import { Box } from '@mui/material'; +import { Button, Heading, Text, TextField } from '@moex-vibe/design-system'; import { useSession } from '@/entities/session'; export function LoginPage() { @@ -28,84 +30,44 @@ export function LoginPage() { } return ( -
-

Вход

-
- {error &&
{error}
} -
- - setEmail(e.target.value)} - required - style={inputStyle} - placeholder="email@example.com" - /> -
-
- - setPassword(e.target.value)} - required - style={inputStyle} - placeholder="••••••••" - /> -
- -

+ + + Вход + + + {error && {error}} + setEmail(e.target.value)} + required + placeholder="email@example.com" + /> + setPassword(e.target.value)} + required + placeholder="••••••••" + /> + + Нет аккаунта?{' '} Зарегистрироваться -

-
-
+ + + ); } - -const inputStyle: React.CSSProperties = { - width: '100%', - padding: '10px 12px', - border: '1px solid #e0e0e0', - borderRadius: 'var(--border-radius)', - fontSize: 16, - outline: 'none', - boxSizing: 'border-box', -}; - -const buttonStyle: React.CSSProperties = { - padding: '12px 24px', - background: 'var(--color-primary)', - color: '#fff', - border: 'none', - borderRadius: 'var(--border-radius)', - fontSize: 16, - fontWeight: 600, - cursor: 'pointer', -}; diff --git a/apps/frontend/src/pages/profile/ProfilePage.test.tsx b/apps/frontend/src/pages/profile/ProfilePage.test.tsx index da3d8fe..907bc0c 100644 --- a/apps/frontend/src/pages/profile/ProfilePage.test.tsx +++ b/apps/frontend/src/pages/profile/ProfilePage.test.tsx @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { http, HttpResponse } from 'msw'; import { server } from '@/shared/lib/test/server'; @@ -57,6 +57,8 @@ describe('ProfilePage', () => { await user.type(input, 'New Name'); await user.click(screen.getByRole('button', { name: 'Сохранить' })); - expect(await screen.findByText('Сохранение...')).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByRole('button', { name: 'Сохранить' })).toBeDisabled(); + }); }); }); diff --git a/apps/frontend/src/pages/profile/ui/ProfilePage.tsx b/apps/frontend/src/pages/profile/ui/ProfilePage.tsx index a804be9..ddce145 100644 --- a/apps/frontend/src/pages/profile/ui/ProfilePage.tsx +++ b/apps/frontend/src/pages/profile/ui/ProfilePage.tsx @@ -1,4 +1,6 @@ import { useState, type FormEvent } from 'react'; +import { Box } from '@mui/material'; +import { Button, Heading, Surface, Text, TextField } from '@moex-vibe/design-system'; import { useSession } from '@/entities/session'; export function ProfilePage() { @@ -24,82 +26,37 @@ export function ProfilePage() { if (!user) return null; return ( -
-

Профиль

-
-
- Почта -

{user.email}

-
-
- Роль -

{user.role}

-
-
-
- - setName(e.target.value)} - style={{ - width: '100%', - padding: '10px 12px', - border: '1px solid #e0e0e0', - borderRadius: 'var(--border-radius)', - fontSize: 16, - outline: 'none', - boxSizing: 'border-box', - }} - /> -
+ + + Профиль + + + + + Почта + + {user.email} + + + + Роль + + {user.role} + + + setName(e.target.value)} /> {message && ( -
- {message} -
+ {message} )} - - -
-
+ + + + ); } diff --git a/apps/frontend/src/pages/register/ui/RegisterPage.tsx b/apps/frontend/src/pages/register/ui/RegisterPage.tsx index 77d3b7f..7811b12 100644 --- a/apps/frontend/src/pages/register/ui/RegisterPage.tsx +++ b/apps/frontend/src/pages/register/ui/RegisterPage.tsx @@ -1,5 +1,7 @@ import { useState, type FormEvent } from 'react'; import { Link, useNavigate, useSearchParams } from 'react-router-dom'; +import { Box } from '@mui/material'; +import { Button, Heading, Text, TextField } from '@moex-vibe/design-system'; import { useSession } from '@/entities/session'; export function RegisterPage() { @@ -36,124 +38,57 @@ export function RegisterPage() { } return ( -
-

Регистрация

-
- {error &&
{error}
} -
- - setName(e.target.value)} - style={inputStyle} - placeholder="Иван Иванов" - /> -
-
- - setEmail(e.target.value)} - required - style={inputStyle} - placeholder="email@example.com" - /> -
-
- - setPassword(e.target.value)} - required - minLength={6} - style={inputStyle} - placeholder="Минимум 6 символов" - /> -
-
- - setConfirmPassword(e.target.value)} - required - style={inputStyle} - placeholder="Повторите пароль" - /> -
- -

+ + + Регистрация + + + {error && {error}} + setName(e.target.value)} + placeholder="Иван Иванов" + /> + setEmail(e.target.value)} + required + placeholder="email@example.com" + /> + setPassword(e.target.value)} + required + placeholder="Минимум 6 символов" + slotProps={{ htmlInput: { minLength: 6 } }} + /> + setConfirmPassword(e.target.value)} + required + placeholder="Повторите пароль" + /> + + Уже есть аккаунт?{' '} - + Войти -

-
-
+ + + ); } - -const inputStyle: React.CSSProperties = { - width: '100%', - padding: '10px 12px', - border: '1px solid #e0e0e0', - borderRadius: 'var(--border-radius)', - fontSize: 16, - outline: 'none', - boxSizing: 'border-box', -}; - -const buttonStyle: React.CSSProperties = { - padding: '12px 24px', - background: 'var(--color-primary)', - color: '#fff', - border: 'none', - borderRadius: 'var(--border-radius)', - fontSize: 16, - fontWeight: 600, - cursor: 'pointer', -};