Initial commit: backend scaffold, auth, frontend login
- FastAPI + SQLAlchemy async + Alembic + Postgres backend - Auth: JWT access + rotating refresh tokens, argon2, roles, audit log - React 19 + Vite frontend: login page, protected route, auth context - Docker Compose: postgres, redis, migrate, api, worker (placeholder), frontend/nginx Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,34 @@
|
||||
import { apiFetch } from '@/api/client'
|
||||
import type { LoginResponse, TokenPair, User } from '@/api/types'
|
||||
|
||||
export function login(email: string, password: string): Promise<LoginResponse> {
|
||||
return apiFetch<LoginResponse>('/auth/login', {
|
||||
method: 'POST',
|
||||
body: { email, password },
|
||||
})
|
||||
}
|
||||
|
||||
export function refresh(refreshToken: string): Promise<TokenPair> {
|
||||
return apiFetch<TokenPair>('/auth/refresh', {
|
||||
method: 'POST',
|
||||
body: { refresh_token: refreshToken },
|
||||
})
|
||||
}
|
||||
|
||||
export function logout(refreshToken: string): Promise<void> {
|
||||
return apiFetch<void>('/auth/logout', {
|
||||
method: 'POST',
|
||||
body: { refresh_token: refreshToken },
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchMe(): Promise<User> {
|
||||
return apiFetch<User>('/auth/me')
|
||||
}
|
||||
|
||||
export function changePassword(currentPassword: string, newPassword: string): Promise<void> {
|
||||
return apiFetch<void>('/auth/change-password', {
|
||||
method: 'POST',
|
||||
body: { current_password: currentPassword, new_password: newPassword },
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { clearTokens, getAccessToken, getRefreshToken, setTokens } from '@/api/tokenStore'
|
||||
import type { ApiErrorBody, TokenPair } from '@/api/types'
|
||||
|
||||
const API_PREFIX = '/api/v1'
|
||||
|
||||
/** Эндпоинты, которые не должны получать Authorization и не должны запускать refresh. */
|
||||
const PUBLIC_PATHS = new Set(['/auth/login', '/auth/refresh'])
|
||||
|
||||
export class ApiError extends Error {
|
||||
readonly status: number
|
||||
|
||||
constructor(status: number, message: string) {
|
||||
super(message)
|
||||
this.name = 'ApiError'
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
async function readErrorMessage(response: Response): Promise<string> {
|
||||
try {
|
||||
const body = (await response.json()) as ApiErrorBody
|
||||
if (typeof body.detail === 'string') return body.detail
|
||||
if (Array.isArray(body.detail)) {
|
||||
return body.detail.map((item) => item.msg).join('; ')
|
||||
}
|
||||
} catch {
|
||||
// Тело не JSON или пустое — используем сообщение по статусу ниже.
|
||||
}
|
||||
|
||||
if (response.status === 401) return 'Требуется вход в систему'
|
||||
if (response.status === 403) return 'Недостаточно прав для этого действия'
|
||||
if (response.status >= 500) return 'Сервер временно недоступен, попробуйте позже'
|
||||
return `Ошибка запроса (${response.status})`
|
||||
}
|
||||
|
||||
// Параллельные 401 не должны порождать несколько запросов на refresh —
|
||||
// все ждут один и тот же промис.
|
||||
let refreshPromise: Promise<string> | null = null
|
||||
|
||||
async function refreshAccessToken(): Promise<string> {
|
||||
if (refreshPromise) return refreshPromise
|
||||
|
||||
const refreshToken = getRefreshToken()
|
||||
if (!refreshToken) {
|
||||
throw new ApiError(401, 'Сессия истекла, войдите снова')
|
||||
}
|
||||
|
||||
refreshPromise = (async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_PREFIX}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refresh_token: refreshToken }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
clearTokens()
|
||||
throw new ApiError(response.status, await readErrorMessage(response))
|
||||
}
|
||||
|
||||
const pair = (await response.json()) as TokenPair
|
||||
setTokens(pair.access_token, pair.refresh_token)
|
||||
return pair.access_token
|
||||
} finally {
|
||||
refreshPromise = null
|
||||
}
|
||||
})()
|
||||
|
||||
return refreshPromise
|
||||
}
|
||||
|
||||
export interface ApiFetchOptions extends Omit<RequestInit, 'body'> {
|
||||
body?: unknown
|
||||
}
|
||||
|
||||
/**
|
||||
* Обёртка над fetch: подставляет Authorization, при первом 401 на защищённом
|
||||
* эндпоинте один раз молча обновляет access-токен и повторяет запрос.
|
||||
*/
|
||||
export async function apiFetch<T = void>(path: string, options: ApiFetchOptions = {}): Promise<T> {
|
||||
const isPublic = PUBLIC_PATHS.has(path)
|
||||
const accessToken = getAccessToken()
|
||||
|
||||
const headers = new Headers(options.headers)
|
||||
headers.set('Content-Type', 'application/json')
|
||||
if (accessToken && !isPublic) {
|
||||
headers.set('Authorization', `Bearer ${accessToken}`)
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_PREFIX}${path}`, {
|
||||
...options,
|
||||
headers,
|
||||
body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
|
||||
})
|
||||
|
||||
if (response.status === 401 && !isPublic) {
|
||||
try {
|
||||
const newAccessToken = await refreshAccessToken()
|
||||
const retryHeaders = new Headers(options.headers)
|
||||
retryHeaders.set('Content-Type', 'application/json')
|
||||
retryHeaders.set('Authorization', `Bearer ${newAccessToken}`)
|
||||
|
||||
const retryResponse = await fetch(`${API_PREFIX}${path}`, {
|
||||
...options,
|
||||
headers: retryHeaders,
|
||||
body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
|
||||
})
|
||||
|
||||
if (!retryResponse.ok) {
|
||||
throw new ApiError(retryResponse.status, await readErrorMessage(retryResponse))
|
||||
}
|
||||
if (retryResponse.status === 204) return undefined as T
|
||||
return (await retryResponse.json()) as T
|
||||
} catch (err) {
|
||||
clearTokens()
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new ApiError(response.status, await readErrorMessage(response))
|
||||
}
|
||||
if (response.status === 204) return undefined as T
|
||||
return (await response.json()) as T
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Хранилище токенов вне React-дерева.
|
||||
*
|
||||
* `client.ts` должен уметь читать access-токен и молча обновлять его по 401
|
||||
* без импорта React-контекста (иначе получится цикл api -> auth-context ->
|
||||
* api). Поэтому токены живут в модульном синглтоне, а `AuthProvider`
|
||||
* подписывается на его изменения через `subscribe`.
|
||||
*
|
||||
* access-токен — только в памяти (переживает не дольше вкладки).
|
||||
* refresh-токен — в localStorage, иначе при обновлении страницы
|
||||
* пользователя выкидывало бы из системы каждый раз.
|
||||
*/
|
||||
|
||||
const REFRESH_TOKEN_KEY = 'lux_fiscal.refresh_token'
|
||||
|
||||
interface TokenState {
|
||||
accessToken: string | null
|
||||
refreshToken: string | null
|
||||
}
|
||||
|
||||
let state: TokenState = {
|
||||
accessToken: null,
|
||||
refreshToken: readRefreshTokenFromStorage(),
|
||||
}
|
||||
|
||||
type Listener = (state: TokenState) => void
|
||||
const listeners = new Set<Listener>()
|
||||
|
||||
function readRefreshTokenFromStorage(): string | null {
|
||||
try {
|
||||
return localStorage.getItem(REFRESH_TOKEN_KEY)
|
||||
} catch {
|
||||
// Приватный режим браузера может запрещать доступ к localStorage.
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function writeRefreshTokenToStorage(token: string | null): void {
|
||||
try {
|
||||
if (token) {
|
||||
localStorage.setItem(REFRESH_TOKEN_KEY, token)
|
||||
} else {
|
||||
localStorage.removeItem(REFRESH_TOKEN_KEY)
|
||||
}
|
||||
} catch {
|
||||
// Не критично: без localStorage просто не переживём перезагрузку страницы.
|
||||
}
|
||||
}
|
||||
|
||||
function notify(): void {
|
||||
for (const listener of listeners) listener(state)
|
||||
}
|
||||
|
||||
export function getAccessToken(): string | null {
|
||||
return state.accessToken
|
||||
}
|
||||
|
||||
export function getRefreshToken(): string | null {
|
||||
return state.refreshToken
|
||||
}
|
||||
|
||||
export function setTokens(accessToken: string, refreshToken: string): void {
|
||||
state = { accessToken, refreshToken }
|
||||
writeRefreshTokenToStorage(refreshToken)
|
||||
notify()
|
||||
}
|
||||
|
||||
export function setAccessToken(accessToken: string): void {
|
||||
state = { ...state, accessToken }
|
||||
notify()
|
||||
}
|
||||
|
||||
export function clearTokens(): void {
|
||||
state = { accessToken: null, refreshToken: null }
|
||||
writeRefreshTokenToStorage(null)
|
||||
notify()
|
||||
}
|
||||
|
||||
/** Вызывается при монтировании AuthProvider и при каждом изменении токенов. */
|
||||
export function subscribeToTokens(listener: Listener): () => void {
|
||||
listeners.add(listener)
|
||||
return () => listeners.delete(listener)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Типы, зеркалящие Pydantic-схемы бэкенда (backend/app/schemas/auth.py,
|
||||
* backend/app/db/models/user.py). Меняются синхронно с ними вручную —
|
||||
* генерация клиента из OpenAPI запланирована на более поздний этап.
|
||||
*/
|
||||
|
||||
// `erasableSyntaxOnly` в tsconfig запрещает TS-enum — используем union строк,
|
||||
// он полностью совпадает по значениям с UserRole на бэкенде.
|
||||
export type UserRole = 'admin' | 'cashier' | 'viewer'
|
||||
|
||||
export interface User {
|
||||
id: string
|
||||
email: string
|
||||
full_name: string
|
||||
role: UserRole
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
export interface TokenPair {
|
||||
access_token: string
|
||||
refresh_token: string
|
||||
token_type: string
|
||||
expires_in: number
|
||||
}
|
||||
|
||||
export interface LoginResponse extends TokenPair {
|
||||
user: User
|
||||
}
|
||||
|
||||
export interface ApiErrorBody {
|
||||
detail?: string | { msg: string }[]
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
|
||||
import { AppRoutes } from '@/app/routes'
|
||||
import { AuthProvider } from '@/features/auth/AuthContext'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
// Данные о заказах/чеках меняются постоянно и опрашиваются отдельно —
|
||||
// глобальный автоповтор через фокус окна тут не нужен.
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
|
||||
import { LoginPage } from '@/features/auth/LoginPage'
|
||||
import { ProtectedRoute } from '@/features/auth/ProtectedRoute'
|
||||
import { DashboardPage } from '@/pages/DashboardPage'
|
||||
|
||||
export function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
|
||||
<Route element={<ProtectedRoute />}>
|
||||
<Route path="/" element={<DashboardPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { createContext, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
import * as authApi from '@/api/auth'
|
||||
import { ApiError } from '@/api/client'
|
||||
import { clearTokens, getRefreshToken, setTokens } from '@/api/tokenStore'
|
||||
import type { User } from '@/api/types'
|
||||
|
||||
type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated'
|
||||
|
||||
interface AuthContextValue {
|
||||
status: AuthStatus
|
||||
user: User | null
|
||||
/** null, пока запрос не завершится (успехом или ошибкой). */
|
||||
error: string | null
|
||||
login: (email: string, password: string) => Promise<void>
|
||||
logout: () => Promise<void>
|
||||
}
|
||||
|
||||
// oxlint-disable-next-line react/only-export-components -- контекст и провайдер экспортируются вместе намеренно
|
||||
export const AuthContext = createContext<AuthContextValue | null>(null)
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
// Если refresh-токена нет, статус известен сразу же, без похода в сеть —
|
||||
// вычисляем его в инициализаторе, а не синхронным setState внутри эффекта.
|
||||
const [status, setStatus] = useState<AuthStatus>(() =>
|
||||
getRefreshToken() ? 'loading' : 'unauthenticated',
|
||||
)
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// При открытии приложения пытаемся восстановить сессию по refresh-токену
|
||||
// из localStorage — иначе каждая перезагрузка страницы требовала бы входа.
|
||||
useEffect(() => {
|
||||
const existingRefreshToken = getRefreshToken()
|
||||
if (!existingRefreshToken) return
|
||||
|
||||
let cancelled = false
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
const pair = await authApi.refresh(existingRefreshToken)
|
||||
setTokens(pair.access_token, pair.refresh_token)
|
||||
const me = await authApi.fetchMe()
|
||||
if (cancelled) return
|
||||
setUser(me)
|
||||
setStatus('authenticated')
|
||||
} catch {
|
||||
if (cancelled) return
|
||||
clearTokens()
|
||||
setStatus('unauthenticated')
|
||||
}
|
||||
})()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [])
|
||||
|
||||
const login = useCallback(async (email: string, password: string) => {
|
||||
setError(null)
|
||||
try {
|
||||
const result = await authApi.login(email, password)
|
||||
setTokens(result.access_token, result.refresh_token)
|
||||
setUser(result.user)
|
||||
setStatus('authenticated')
|
||||
} catch (err) {
|
||||
const message = err instanceof ApiError ? err.message : 'Не удалось подключиться к серверу'
|
||||
setError(message)
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
const refreshToken = getRefreshToken()
|
||||
if (refreshToken) {
|
||||
// Best-effort: даже если сервер недоступен, локально выходим всё равно.
|
||||
try {
|
||||
await authApi.logout(refreshToken)
|
||||
} catch {
|
||||
// Токен и так будет забыт локально ниже.
|
||||
}
|
||||
}
|
||||
clearTokens()
|
||||
setUser(null)
|
||||
setStatus('unauthenticated')
|
||||
}, [])
|
||||
|
||||
const value = useMemo<AuthContextValue>(
|
||||
() => ({ status, user, error, login, logout }),
|
||||
[status, user, error, login, logout],
|
||||
)
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.login-page {
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.login-field label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.login-field input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.login-field input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.login-field input:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
background: var(--color-danger-bg);
|
||||
border: 1px solid var(--color-danger-border);
|
||||
color: var(--color-danger);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
width: 100%;
|
||||
padding: 11px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.login-submit:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.login-submit:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-submit .spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 2px;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
border-top-color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useId, useState } from 'react'
|
||||
import type { FormEvent } from 'react'
|
||||
import { Navigate, useLocation } from 'react-router-dom'
|
||||
|
||||
import { ApiError } from '@/api/client'
|
||||
import '@/features/auth/LoginPage.css'
|
||||
import { useAuth } from '@/features/auth/useAuth'
|
||||
|
||||
interface LocationState {
|
||||
from?: { pathname: string }
|
||||
}
|
||||
|
||||
export function LoginPage() {
|
||||
const { status, login } = useAuth()
|
||||
const location = useLocation()
|
||||
|
||||
const emailId = useId()
|
||||
const passwordId = useId()
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [formError, setFormError] = useState<string | null>(null)
|
||||
|
||||
// Уже вошли — на странице входа делать нечего.
|
||||
if (status === 'authenticated') {
|
||||
const state = location.state as LocationState | null
|
||||
const redirectTo = state?.from?.pathname ?? '/'
|
||||
return <Navigate to={redirectTo} replace />
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
setFormError(null)
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await login(email, password)
|
||||
} catch (err) {
|
||||
const message = err instanceof ApiError ? err.message : 'Не удалось подключиться к серверу'
|
||||
setFormError(message)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className="login-card">
|
||||
<div className="login-header">
|
||||
<h1>lux_fiscal</h1>
|
||||
<p>Вход в систему фискализации заказов</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
{formError && (
|
||||
<div className="login-error" role="alert">
|
||||
{formError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="login-field">
|
||||
<label htmlFor={emailId}>Email</label>
|
||||
<input
|
||||
id={emailId}
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
required
|
||||
value={email}
|
||||
disabled={submitting}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="login-field">
|
||||
<label htmlFor={passwordId}>Пароль</label>
|
||||
<input
|
||||
id={passwordId}
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
disabled={submitting}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="login-submit" disabled={submitting}>
|
||||
{submitting && <span className="spinner" aria-hidden="true" />}
|
||||
{submitting ? 'Входим…' : 'Войти'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Navigate, Outlet, useLocation } from 'react-router-dom'
|
||||
|
||||
import { useAuth } from '@/features/auth/useAuth'
|
||||
|
||||
/** Пропускает дальше только аутентифицированных; остальных отправляет на /login. */
|
||||
export function ProtectedRoute() {
|
||||
const { status } = useAuth()
|
||||
const location = useLocation()
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="page-center">
|
||||
<span className="spinner" aria-label="Загрузка" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === 'unauthenticated') {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />
|
||||
}
|
||||
|
||||
return <Outlet />
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { useContext } from 'react'
|
||||
|
||||
import { AuthContext } from '@/features/auth/AuthContext'
|
||||
|
||||
export function useAuth() {
|
||||
const ctx = useContext(AuthContext)
|
||||
if (!ctx) {
|
||||
throw new Error('useAuth должен вызываться внутри <AuthProvider>')
|
||||
}
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
* Глобальные стили и дизайн-токены.
|
||||
* Внутренний рабочий инструмент, не маркетинговая страница — раскладка
|
||||
* на всю ширину, без фиксированной колонки.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-bg: #f6f7f9;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #e2e4e9;
|
||||
--color-text: #1f2430;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-hover: #1d4ed8;
|
||||
--color-danger: #dc2626;
|
||||
--color-danger-bg: #fef2f2;
|
||||
--color-danger-border: #fecaca;
|
||||
--shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.1);
|
||||
|
||||
--font-sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
color-scheme: light dark;
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg: #0f1115;
|
||||
--color-surface: #171a21;
|
||||
--color-border: #2a2e38;
|
||||
--color-text: #e5e7eb;
|
||||
--color-text-muted: #9ca3af;
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-hover: #60a5fa;
|
||||
--color-danger: #f87171;
|
||||
--color-danger-bg: rgba(248, 113, 113, 0.12);
|
||||
--color-danger-border: rgba(248, 113, 113, 0.35);
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* --- Общие утилиты, используются в нескольких экранах --- */
|
||||
|
||||
.page-center {
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 0.7s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
import { App } from '@/app/App'
|
||||
import '@/index.css'
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
if (!rootElement) {
|
||||
throw new Error('Элемент #root не найден в index.html')
|
||||
}
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,71 @@
|
||||
.dashboard-shell {
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 24px;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.dashboard-brand {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dashboard-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-role {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.dashboard-logout {
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboard-logout:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dashboard-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.dashboard-placeholder {
|
||||
text-align: center;
|
||||
max-width: 420px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-placeholder h2 {
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import '@/pages/DashboardPage.css'
|
||||
import { useAuth } from '@/features/auth/useAuth'
|
||||
|
||||
const ROLE_LABEL: Record<string, string> = {
|
||||
admin: 'Администратор',
|
||||
cashier: 'Кассир',
|
||||
viewer: 'Наблюдатель',
|
||||
}
|
||||
|
||||
/**
|
||||
* Временная заглушка. Очередь «получено, чек не пробит» — этап 6 плана,
|
||||
* пока здесь только подтверждение, что вход и защищённый роут работают.
|
||||
*/
|
||||
export function DashboardPage() {
|
||||
const { user, logout } = useAuth()
|
||||
|
||||
return (
|
||||
<div className="dashboard-shell">
|
||||
<header className="dashboard-topbar">
|
||||
<span className="dashboard-brand">lux_fiscal</span>
|
||||
<div className="dashboard-user">
|
||||
<span>{user?.full_name}</span>
|
||||
<span className="dashboard-role">{user ? (ROLE_LABEL[user.role] ?? user.role) : ''}</span>
|
||||
<button type="button" className="dashboard-logout" onClick={() => void logout()}>
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="dashboard-body">
|
||||
<div className="dashboard-placeholder">
|
||||
<h2>Очередь заказов появится здесь</h2>
|
||||
<p>
|
||||
Вход выполнен успешно. Экран «получено, чек не пробит» будет добавлен на следующих
|
||||
этапах — после интеграций с Новой Поштой и Checkbox.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user