Public Access
68 lines
3.5 KiB
Markdown
68 lines
3.5 KiB
Markdown
# To Be Played - Frontend
|
|
|
|
A modern web application to manage your game backlog, built with React and Vite.
|
|
|
|
## 🚀 Tech Stack
|
|
|
|
- **Framework:** [React](https://react.dev/)
|
|
- **Build Tool:** [Vite](https://vitejs.dev/)
|
|
- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/)
|
|
- **Icons:** [Material Design Icons (MDI)](https://materialdesignicons.com/)
|
|
|
|
## 📂 Project Structure
|
|
|
|
```text
|
|
├── public/ # Static assets (favicons, icons)
|
|
├── src/
|
|
│ ├── assets/ # Images and global media
|
|
│ ├── components/ # Reusable React components
|
|
│ ├── App.jsx # Main application layout and entry component
|
|
│ ├── main.jsx # App initialization (React DOM, Styles)
|
|
│ └── style.css # Global Tailwind and custom CSS
|
|
├── index.html # Entry HTML file
|
|
├── package.json # Dependencies and scripts
|
|
└── vite.config.js # Vite configuration
|
|
```
|
|
|
|
## 🛠️ Development
|
|
|
|
### Setup
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Start Development Server
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Build for Production
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## 🗺️ Roadmap / Open Topics
|
|
|
|
Tracking known work that is not yet implemented. Each item is independently actionable.
|
|
|
|
### Security
|
|
|
|
- **Move JWT out of `localStorage`.** Today the token is stored under `localStorage["tbp_jwt"]`, which makes it readable by any script running on the page — a single XSS in an npm dependency exfiltrates every session. Switch to an httpOnly `Secure` `SameSite=Lax` cookie set by `tbp-auth-service` on login. The SPA no longer touches the token directly; the browser attaches it automatically to requests to `*.tbp.andreas-dahm.eu`. Requires coordinated changes in Auth (set the cookie) and Deployment (cookie domain + CORS `allowCredentials=true`).
|
|
- **Add CSRF handling.** Once auth rides on a cookie, the SPA must echo a CSRF token in a header on state-changing requests. Spring Security's `CookieCsrfTokenRepository.withHttpOnlyFalse()` on the server pairs with a small `fetch` interceptor on the client that reads `XSRF-TOKEN` and sets `X-XSRF-TOKEN`.
|
|
- **Content Security Policy.** Add a CSP header in `nginx.conf` so XSS exfiltration paths are blocked even if a vulnerability slips in. Minimum starting point: `default-src 'self'; img-src 'self' data: https://*.steamstatic.com; object-src 'none'; base-uri 'self'; frame-ancestors 'none'`. Tighten further by replacing inline styles/scripts (Tailwind is already build-time, so this should be feasible).
|
|
|
|
### Testing
|
|
|
|
The project has no test runner today. Suggested setup:
|
|
|
|
- **Unit / component tests:** Vitest + React Testing Library. Tests live next to the component (`Component.test.jsx`).
|
|
- **API mocking:** MSW (Mock Service Worker) so component tests don't hit the real backend and the same handlers can drive Storybook later.
|
|
- **End-to-end tests:** Playwright, scoped to the golden paths (login → see library → log out, registration with invitation code, settings update). Run against the real `tbp-auth-service` + `tbp-core-service` via `docker-compose.dev.yml` in CI.
|
|
- **First test targets:** the auth context / token-handling code, the dark-mode toggle (`localStorage["tbp_dark_mode"]`), and i18n string resolution.
|
|
|
|
### Other
|
|
|
|
- **Audit `localStorage` usage.** Currently used for `tbp_jwt` (planned to move) and `tbp_dark_mode`. Document any other keys before they accumulate.
|
|
- **API base URL handling.** `VITE_API_URL` covers Auth; Core's base URL is implicit. Make both explicit (e.g. `VITE_AUTH_URL`, `VITE_API_URL`) so dev / prod / preview environments are unambiguous.
|
|
|