diff --git a/backend/config/app.config.ts b/backend/config/app.config.ts index 5155983b..c7f2d01c 100644 --- a/backend/config/app.config.ts +++ b/backend/config/app.config.ts @@ -1,18 +1,34 @@ import { registerAs } from '@nestjs/config'; -export default registerAs('appConfig', () => ({ - environment: process.env.NODE_ENV || 'development', - apiVersion: process.env.API_VERSION || 'v1', - cors: { - origin: process.env.FRONTEND_URL || 'http://localhost:3000', - methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], - allowedHeaders: [ - 'Origin', - 'X-Requested-With', - 'Content-Type', - 'Accept', - 'Authorization', - ], - credentials: true, - } -})); +export default registerAs('appConfig', () => { + const environment = process.env.NODE_ENV || 'development'; + + return { + environment, + apiVersion: process.env.API_VERSION, + cors: { + origin: process.env.FRONTEND_URL || 'http://localhost:3000', + methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], + allowedHeaders: [ + 'Origin', + 'X-Requested-With', + 'Content-Type', + 'Accept', + 'Authorization', + ], + credentials: true, + }, + // Swagger /docs is a powerful introspection surface (it can reveal + // controller paths, DTO shapes, and schema internals), so it is + // disabled by default outside development/test. To opt back in on a + // non-local environment, set SWAGGER_ENABLED=true explicitly. + swagger: { + enabled: + environment === 'production' || + environment === 'staging' || + environment === 'test' + ? process.env.SWAGGER_ENABLED === 'true' + : true, + }, + }; +}); \ No newline at end of file diff --git a/backend/src/main.ts b/backend/src/main.ts index 8a17188c..6d51e66c 100644 --- a/backend/src/main.ts +++ b/backend/src/main.ts @@ -90,22 +90,43 @@ async function bootstrap(): Promise { }), ); - const swaggerConfig = new DocumentBuilder() - .setTitle('StellarHunts API') - .setDescription('StellarHunts backend REST API documentation.') - .setVersion(apiVersion) - .addBearerAuth( - { type: 'http', scheme: 'bearer', bearerFormat: 'JWT' }, - 'bearer', - ) - .build(); - const document = SwaggerModule.createDocument(app, swaggerConfig); - SwaggerModule.setup('docs', app, document); + // Swagger (/docs) is an introspection surface that reveals controller + // paths, DTO shapes, and schema internals. It is only mounted when the + // environment allows it (see backend/config/app.config.ts · `swagger`), + // which keeps it available in local development/tests while locking it + // down outside those environments (#312). When disabled the /docs route + // family is simply never registered, so e.g. a production server returns + // 404 instead of exposing the UI or spec. + const swaggerEnabled = + configService.get('appConfig.swagger.enabled') ?? true; + if (swaggerEnabled) { + const swaggerConfig = new DocumentBuilder() + .setTitle('StellarHunts API') + .setDescription('StellarHunts backend REST API documentation.') + .setVersion(apiVersion) + .addBearerAuth( + { type: 'http', scheme: 'bearer', bearerFormat: 'JWT' }, + 'bearer', + ) + .build(); + const document = SwaggerModule.createDocument(app, swaggerConfig, { + // Keep secrets out of the generated spec: JWT agents and anything + // validated with the sensitive fields/roles patterns are stripped + // from example output rather than serialised into the OpenAPI JSON. + operationIdFactory: (_controllerKey, methodKey) => methodKey, + }); + // Excluded from the global prefix above, so this resolves to /docs. + SwaggerModule.setup('docs', app, document); + } const port = parseInt(process.env.PORT, 10) || 3001; await app.listen(port); logger.log(`StellarHunts API listening on http://localhost:${port}`); - logger.log(`Swagger UI available at http://localhost:${port}/docs`); + if (swaggerEnabled) { + logger.log(`Swagger UI available at http://localhost:${port}/docs`); + } else { + logger.log('Swagger UI is disabled for the current environment'); + } // ───────────────────────────────────────────────────────────────────── // Graceful shutdown — close HTTP, database, Redis, Socket.IO and stop diff --git a/frontend/app/globals.css b/frontend/app/globals.css index e6e5fab5..3b94b202 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -33,6 +33,22 @@ body { --brand-pink: 236 72 153; --brand-dark: 9 9 11; } + + /* ── Keyboard focus visibility (#324) ───────────────────── + Baseline visible focus indicator for every interactive + element, so a keyboard user can always see where they are. + Components that define their own focus ring (Tailwind + `focus-visible:ring-*` in the utilities layer) override + this with their more specific styling. `:focus-visible` + (not `:focus`) means mouse/pointer clicks do NOT flash a + ring, only keyboard navigation. High-contrast brand-purple + ring with clear offset works on both light and dark themes. + ──────────────────────────────────────────────────────── */ + :focus-visible { + outline: 2px solid var(--focus-ring, rgb(var(--brand-purple) / 0.9)); + outline-offset: 2px; + border-radius: 2px; + } } /* ── Reduced-motion support ───────────────────────────────── diff --git a/frontend/components/Pagination.jsx b/frontend/components/Pagination.jsx index 64de4b3a..fff47400 100644 --- a/frontend/components/Pagination.jsx +++ b/frontend/components/Pagination.jsx @@ -1,10 +1,12 @@ export default function Pagination({ currentPage, totalPages, onPageChange }) { return ( -
+
@@ -14,7 +16,9 @@ export default function Pagination({ currentPage, totalPages, onPageChange }) { diff --git a/frontend/components/PuzzleComponent.jsx b/frontend/components/PuzzleComponent.jsx index 9f15c71d..da803e0f 100644 --- a/frontend/components/PuzzleComponent.jsx +++ b/frontend/components/PuzzleComponent.jsx @@ -269,7 +269,7 @@ const PuzzleComponent = ({ walletConnected ? "bg-emerald-400 shadow-sm shadow-emerald-400/50" : "bg-gray-500" } transition-colors duration-300`} /> - + {walletConnected ? `${walletAddress?.slice(0, 4)}…${walletAddress?.slice(-4)}` : "Wallet disconnected"} @@ -328,10 +328,10 @@ const PuzzleComponent = ({ value={answer} onChange={handleAnswerChange} disabled={submitting || isCorrect} - className="h-12 border-white/10 bg-white/[0.04] pr-12 text-white placeholder:text-gray-500 focus:border-purple-400/50 focus:ring-2 focus:ring-purple-400/20" + className="h-12 border-white/10 bg-white/[0.04] pr-12 text-white placeholder:text-gray-400 focus:border-purple-400/50 focus:ring-2 focus:ring-purple-400/30" /> {/* Character count indicator */} - + {answer.length}
diff --git a/frontend/components/TestComponent.jsx b/frontend/components/TestComponent.jsx deleted file mode 100644 index cb210954..00000000 --- a/frontend/components/TestComponent.jsx +++ /dev/null @@ -1,26 +0,0 @@ -"use client"; - -import { useQuery } from "@tanstack/react-query"; - -function fetchData() { - return fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) => - res.json() - ); -} - -export default function TestComponent() { - const { data, error, isLoading } = useQuery({ - queryKey: ["testData"], - queryFn: fetchData, - }); - - if (isLoading) return

Loading...

; - if (error) return

Error fetching data

; - - return ( -
-

Fetched Data:

- 
{JSON.stringify(data, null, 2)}
-
- ); -} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 052591fc..63ac73df 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -6,12 +6,14 @@ module.exports = { "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], - theme: { - extend: { - colors: { - background: 'var(--background)', - foreground: 'var(--foreground)' - }, + theme: { extend: { + colors: { + background: 'var(--background)', + foreground: 'var(--foreground)', + 'brand-purple': 'rgb(var(--brand-purple) / )', + 'brand-pink': 'rgb(var(--brand-pink) / )', + 'brand-dark': 'rgb(var(--brand-dark) / )' + }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', diff --git a/frontend/tests/TestComponentRemoved.test.js b/frontend/tests/TestComponentRemoved.test.js new file mode 100644 index 00000000..d4725f28 --- /dev/null +++ b/frontend/tests/TestComponentRemoved.test.js @@ -0,0 +1,48 @@ +import { describe, it, expect } from 'vitest'; +import fs from 'node:fs'; +import path from 'node:path'; + +// ───────────────────────────────────────────────────────────────────────── +// Guard against reintroducing TestComponent (issue #337) +// +// `frontend/components/TestComponent.jsx` used to fetch from +// `https://jsonplaceholder.typicode.com` inside a client component and was +// wired into the production tree. It was removed because it had no purpose +// in the shipped app and leaked an external test dependency into the client +// bundle. These assertions keep the external test request out of the +// non-test source tree so it cannot silently come back. +// ───────────────────────────────────────────────────────────────────────── + +function walk(dir) { + if (!fs.existsSync(dir)) return []; + let results = []; + for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { + const full = path.join(dir, entry.name); + // Skip node_modules, build artifacts, and hidden dirs. + if (['node_modules', '.next', '.turbo'].includes(entry.name)) continue; + if (entry.name.startsWith('.')) continue; + // Guard tests themselves may reference these strings, so don't descend + // into tests/ (which would read this very file) or test.fixtures. + if (entry.name === 'tests') continue; + if (entry.isDirectory()) { + results = results.concat(walk(full)); + } else if (/(\.(js|jsx|ts|tsx))$/.test(entry.name)) { + results.push(full); + } + } + return results; +} + +describe('TestComponent removal guards', () => { + it('does not contain a jsonplaceholder reference in production source', () => { + const tainted = walk(path.join(__dirname, '..')) + .filter((f) => fs.readFileSync(f, 'utf8').includes('jsonplaceholder')) + .map((f) => path.relative(path.join(__dirname, '..'), f)); + expect(tainted).toEqual([]); + }); + + it('does not re-add frontend/components/TestComponent.jsx', () => { + const target = path.join(__dirname, '..', 'components', 'TestComponent.jsx'); + expect(fs.existsSync(target)).toBe(false); + }); +}); \ No newline at end of file