feat(web): базовый клиент Фазы 1 — вход, серверы, комнаты, настройки

Клиент React 19 + TanStack Query + Zustand:

- вход (поле TOTP появляется на `auth.2fa_required`), регистрация с проверками
  и учётом `registration_enabled`, онбординг первого входа с возможностью
  пропустить, редирект `/` и страница `/status`;
- защита маршрутов: неавторизованных — на `/login`, без онбординга — на
  `/onboarding`;
- оболочка `/app`: рейка серверов, сайдбар категорий и комнат, шапка сервера,
  панель пользователя, модалки создания сервера и комнаты, экран «нет серверов»
  со вступлением в главный сервер, заглушка комнаты до Фазы 2;
- настройки: профиль, безопасность (step-up, сессии, logout-all, 2FA с
  локальным QR и кодами восстановления), внешний вид, админ-раздел инстанса;
- Gateway-клиент: HELLO/IDENTIFY/RESUME, heartbeat с ожиданием ACK,
  экспоненциальное переподключение, разбор `INVALID_SESSION {reason,resumable}`;
- диспетчер событий: READY/RESUMED/USER_UPDATE/GUILD_UPDATE/GUILD_DELETE/
  CHANNEL_* применяются к стору, GUILD_CREATE догружается по REST,
  MEMBER_*/ROLE_* инвалидируют запросы участников, ролей и карточки сервера;
- i18n ru/en, 66 тестов Vitest, `check`/`lint`/`test`/`build` зелёные.

Серверные правки под клиент:

- `totp_enabled` в профиле (`GET /users/@me`, вход, регистрация) — клиенту
  нужно знать, требовать ли код при step-up;
- `POST /auth/2fa/setup` отдаёт `otpauth_url` и `qr_png` (data-URI): QR-код
  рисуется локально, внешние сервисы генерации QR не используются;
- права в ответах — имена (`VIEW_CHANNEL|SEND_MESSAGES`), клиент сверяет имена.
This commit is contained in:
2026-09-19 22:03:46 +03:00
parent d6ca8e420f
commit 9c001fedfe
28 changed files with 1827 additions and 217 deletions
+24 -43
View File
@@ -1,10 +1,8 @@
import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { describe, expect, it, vi } from 'vitest';
import { describe, expect, it } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import { App } from '@/App';
import { installFetch, installFailingFetch, json, renderApp } from './helpers';
import type { InstanceMeta } from '@/api/meta';
import '@/i18n';
const meta: InstanceMeta = {
name: 'glchat',
@@ -22,42 +20,22 @@ const meta: InstanceMeta = {
anti_bot_enabled: false,
voice_enabled: false,
web_push_enabled: false,
oauth_enabled: false,
passkeys_enabled: false,
oauth_enabled: false,
},
};
const readyBody = { status: 'ready', version: 'test', checks: { database: 'ok' } };
function json(body: unknown, status = 200): Response {
return new Response(JSON.stringify(body), {
status,
headers: { 'Content-Type': 'application/json' },
});
}
/** Страница состояния — бывший лендинг Фазы 0, перенесён на маршрут /status. */
describe('страница /status', () => {
it('рендерит мету инстанса из API', async () => {
installFetch([
{ match: '/api/v1/meta', response: () => json(meta) },
{ match: '/api/v1/readyz', response: () => json(readyBody) },
]);
function renderApp() {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
);
}
describe('App', () => {
it('renders instance metadata from the API', async () => {
vi.stubGlobal(
'fetch',
vi.fn((input: RequestInfo | URL) => {
const url = input instanceof Request ? input.url : String(input);
return Promise.resolve(url.endsWith('/api/v1/meta') ? json(meta) : json(readyBody));
}),
);
renderApp();
renderApp('/status');
await waitFor(() => {
expect(screen.getByText('v0.1.0-test')).toBeInTheDocument();
@@ -67,13 +45,16 @@ describe('App', () => {
expect(screen.getByTestId('connection-state')).toHaveTextContent('Сервер доступен');
});
it('localizes a server error by its code and offers a retry', async () => {
const fetchMock = vi.fn(() =>
json({ error: { code: 'internal.error', message: 'boom' } }, 500),
);
vi.stubGlobal('fetch', fetchMock);
it('локализует ошибку сервера по коду и предлагает повтор', async () => {
installFetch([
{
match: '/api/v1/meta',
response: () => json({ error: { code: 'internal.error', message: 'boom' } }, 500),
},
{ match: '/api/v1/readyz', response: () => json(readyBody) },
]);
renderApp();
renderApp('/status');
await waitFor(
() => {
@@ -84,10 +65,10 @@ describe('App', () => {
expect(screen.getByRole('button', { name: 'Повторить' })).toBeInTheDocument();
});
it('falls back to a network message when the server is unreachable', async () => {
vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('Failed to fetch')));
it('показывает сообщение о недоступном сервере', async () => {
installFailingFetch();
renderApp();
renderApp('/status');
await waitFor(
() => {