diff --git a/README.md b/README.md index 25fdd39..c0c8fc3 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,15 @@ by alyssa, ben, chris, lachlan, and osvaldo 1. `cd backend && pnpm i` 2. set the following value in `backend/.env`: + ```bash SESSION_SECRET= NODE_ENV= +ALLOWED_ORIGINS=/commaseparated/,/regexes/ ``` -NODE_ENV is usually either 'development' or 'production' -3. `cd ../frontend && pnpm i` -4. set the following values in `frontend/.env`: + +NODE_ENV is usually either 'development' or 'production' 3. `cd ../frontend && pnpm i` 4. set the following values in `frontend/.env`: + ```bash VITE_FIREBASE_API_KEY= VITE_FIREBASE_AUTH_DOMAIN= @@ -23,12 +25,15 @@ VITE_FIREBASE_STORAGE_BUCKET= VITE_FIREBASE_MESSAGING_SENDER_ID= VITE_FIREBASE_APP_ID= ``` -5. *optionally*, create a .env file at the root of the repository which contains a cloudflare deploy book endpoint. + +5. _optionally_, create a .env file at the root of the repository which contains a cloudflare deploy book endpoint. + ``` echo "https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/ENDPOINT_GOES_HERE" > .env ``` + you can now use the `rebuild` script in the root of the repository to initiate manual deployments without having to push changes to `main`. ## level editor -you can create your own yellowshirt levels (or, more precisely, *maps* composed of *levels*) using the [panoproc](https://github.com/lachlanshoesmith/panoproc) level editor. installation and usage instructions can be found in that repository's readme. +you can create your own yellowshirt levels (or, more precisely, _maps_ composed of _levels_) using the [panoproc](https://github.com/lachlanshoesmith/panoproc) level editor. installation and usage instructions can be found in that repository's readme. diff --git a/backend/.dockerignore b/backend/.dockerignore new file mode 100644 index 0000000..210c47a --- /dev/null +++ b/backend/.dockerignore @@ -0,0 +1,2 @@ +node_modules +Dockerfile diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..3b91797 --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,35 @@ +FROM node:22.10.0-alpine AS base +ENV PNPM_HOME="/pnpm" +ENV PATH="$PNPM_HOME:$PATH" +RUN corepack enable + +# install dependencies for compiling bcrypt +RUN apk --no-cache add --virtual builds-deps build-base python3 + +COPY . /yellowshirt-backend +WORKDIR /yellowshirt-backend + +FROM base AS prod-deps +RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod + +ENV NODE_ENV=production + +# envs to set for runtime +# if using fly, env vars can be specified in fly.toml + +#ENV ALLOWED_ORIGINS=/yellowshirt\.xyz$/,/trainee-woodelf-24t2\.pages\.dev$/,/yellowshirt-backend\.fly\.dev$/ + +# ⚠️ SESSION_SECRET should be, well, a secret! +# if using fly, use fly secrets +#ENV SESSION_SECRET=... + +FROM base AS build +RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install && pnpm rebuild bcrypt +RUN pnpm run build + +FROM base +COPY --from=prod-deps /yellowshirt-backend/node_modules /yellowshirt-backend/node_modules +COPY --from=build /yellowshirt-backend/dist /yellowshirt-backend/dist + +EXPOSE 3000 +CMD ["pnpm", "start"] diff --git a/backend/fly.toml b/backend/fly.toml new file mode 100644 index 0000000..5056cf0 --- /dev/null +++ b/backend/fly.toml @@ -0,0 +1,25 @@ +# fly.toml app configuration file generated for yellowshirt-backend on 2024-10-18T15:00:04+11:00 +# +# See https://fly.io/docs/reference/configuration/ for information about how to use this file. +# + +app = 'yellowshirt-backend' +primary_region = 'syd' + +[build] + +[http_service] + internal_port = 3000 + force_https = true + auto_stop_machines = 'stop' + auto_start_machines = true + min_machines_running = 0 + processes = ['app'] + +[[vm]] + memory = '1gb' + cpu_kind = 'shared' + cpus = 1 + +[env] + ALLOWED_ORIGINS = 'yellowshirt\.xyz$,trainee-woodelf-24t2\.pages\.dev$,yellowshirt-backend\.fly\.dev$' diff --git a/backend/package.json b/backend/package.json index 0ce85a5..5fadeec 100644 --- a/backend/package.json +++ b/backend/package.json @@ -14,6 +14,8 @@ "fs": "^0.0.1-security" }, "devDependencies": { + "@types/bcrypt": "^5.0.2", + "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/express-session": "^1.18.0", "@types/node": "^20.14.9", @@ -26,9 +28,8 @@ "dev_env": "tsx watch --env-file=.env ./src/index.ts", "dev": "tsx watch ./src/index.ts", "build": "tsc --build", - "start_env": "node --env-file=.env dist/src/index.js", - "start": "node dist/src/index.js", - "production": "node dist/src/index.js" + "start_env": "node --env-file=.env dist/index.js", + "start": "node dist/index.js" }, "prettier": { "singleQuote": false, diff --git a/backend/pnpm-lock.yaml b/backend/pnpm-lock.yaml index 6123144..277857d 100644 --- a/backend/pnpm-lock.yaml +++ b/backend/pnpm-lock.yaml @@ -27,6 +27,12 @@ importers: specifier: ^0.0.1-security version: 0.0.1-security devDependencies: + '@types/bcrypt': + specifier: ^5.0.2 + version: 5.0.2 + '@types/cors': + specifier: ^2.8.17 + version: 2.8.17 '@types/express': specifier: ^4.17.21 version: 4.17.21 @@ -448,12 +454,18 @@ packages: '@tsconfig/node16@1.0.4': resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==} + '@types/bcrypt@5.0.2': + resolution: {integrity: sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==} + '@types/body-parser@1.19.5': resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} '@types/connect@3.4.38': resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==} + '@types/cors@2.8.17': + resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==} + '@types/express-serve-static-core@4.19.5': resolution: {integrity: sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==} @@ -1578,6 +1590,10 @@ snapshots: '@tsconfig/node16@1.0.4': {} + '@types/bcrypt@5.0.2': + dependencies: + '@types/node': 20.14.9 + '@types/body-parser@1.19.5': dependencies: '@types/connect': 3.4.38 @@ -1587,6 +1603,10 @@ snapshots: dependencies: '@types/node': 20.14.9 + '@types/cors@2.8.17': + dependencies: + '@types/node': 20.14.9 + '@types/express-serve-static-core@4.19.5': dependencies: '@types/node': 20.14.9 diff --git a/backend/src/index.ts b/backend/src/index.ts index fe1d9b1..2bb040f 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -6,7 +6,15 @@ import { LoginBody, LeaderboardQuery, } from "./requestTypes"; -import { SessionStorage, User, LoginErrors, Level, Gamemode, Game, Hotspot } from "./interfaces"; +import { + SessionStorage, + User, + LoginErrors, + Level, + Gamemode, + Game, + Hotspot, +} from "./interfaces"; import bcrypt from "bcrypt"; import { collection, @@ -84,11 +92,25 @@ const sessionIdToUserId = async ( }; const app = express(); +let allowedOrigins: RegExp[]; +if (process.env.ALLOWED_ORIGINS) { + allowedOrigins = process.env.ALLOWED_ORIGINS.split(",").map( + (origin) => new RegExp(origin), + ); +} else { + allowedOrigins = []; +} + app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use( cors({ - origin: process.env.FRONTEND_LOCAL as string, + origin: (origin, callback) => { + if (!origin) return callback(null, true); + allowedOrigins.some((r) => r.test(origin as string)) + ? callback(null, true) + : callback(new Error(`Origin ${origin} not in ALLOWED_ORIGINS`)); + }, credentials: true, optionsSuccessStatus: 200, }), @@ -194,15 +216,18 @@ app.post("/login", async (req: TypedRequest, res: Response) => { bcrypt.compare( saltedPassword, details.docs[0].data().password, - async (err: Error | null, result: boolean) => { + async (err: Error | undefined, result: boolean) => { if (err) { - return res.status(500).send("Error processing password"); + errorCheck.passwordInvalid = true; + return res.status(401).json(errorCheck); } if (result) { req.session.regenerate(async (err: Error | null) => { if (err) { - return res.status(500).send("Error regenerating session."); + return res.status(500).json({ + error: "Error regenerating session", + }); } const expiryTime: Date = new Date(); expiryTime.setDate(expiryTime.getDate() + 7); @@ -234,7 +259,7 @@ app.get( ) => { const getDoc = await getDocs(collection(db, "levels")); - const { roundCount, gameMode } = req.query; + const { roundCount } = req.query; // array of level IDs const docIds = getDoc.docs.map((doc) => doc.id); @@ -252,8 +277,12 @@ app.get( app.post( "/endGame", async ( - req: TypedRequest<{ gameMode: Gamemode, levels: Level["id"][], score: number }>, - res: Response + req: TypedRequest<{ + gameMode: Gamemode; + levels: Level["id"][]; + score: number; + }>, + res: Response, ) => { const { gameMode, levels, score } = req.body; @@ -268,64 +297,74 @@ app.post( gamemode: gameMode, levels: levels, score: score, - userid: userId + userid: userId, }; addDoc(collection(db, "games"), game); - res.status(200).send("Game Ended Successfully"); - } -) + }, +); -app.get("/level", async (req: TypedRequestQuery<{ levelId: string }>, res: Response) => { - const levelId = req.query.levelId; - const docRef = doc(db, "levels", levelId); - const docSnap = await getDoc(docRef); +app.get("/ping", (req: Request, res: Response) => { + res.status(200).send("pong"); +}); - if (!docSnap.exists()) { - res.status(404).json({ error: "Level not found" }); - return; - } +app.get( + "/level", + async (req: TypedRequestQuery<{ levelId: string }>, res: Response) => { + const levelId = req.query.levelId; + const docRef = doc(db, "levels", levelId); + const docSnap = await getDoc(docRef); + + if (!docSnap.exists()) { + res.status(404).json({ error: "Level not found" }); + return; + } - const levelData = docSnap.data(); - - const floorMap = { - LG: 0, - G: 1, - L1: 2, - L2: 3, - L3: 4, - L4: 5, - L5: 6, - L6: 7, - }; + const levelData = docSnap.data(); + + const floorMap = { + LG: 0, + G: 1, + L1: 2, + L2: 3, + L3: 4, + L4: 5, + L5: 6, + L6: 7, + }; - const hotspots: Hotspot[] = [] - levelData.hotspots.forEach((h) => { - hotspots.push( - { + const hotspots: Hotspot[] = []; + levelData.hotspots.forEach((h: Hotspot) => { + hotspots.push({ levelId: h.levelId, pitch: h.pitch, yaw: h.yaw, targetPitch: h.targetPitch, targetYaw: h.targetYaw, - } - ) - }) + }); + }); + const level: Level = { + photoLink: levelData.panorama, + locationName: levelData.title, + latitude: levelData.latitude, + longitude: levelData.longitude, + zPosition: undefined, + hotspots: hotspots, + }; - const level: Level = { - photoLink: levelData.panorama, - locationName: levelData.title, - latitude: levelData.latitude, - longitude: levelData.longitude, - zPosition: floorMap[levelData.floor] ?? 1, // if floor is undefined, then location must be G (eg. a lawn) - hotspots: hotspots, - } + // if floor is undefined, then location must be G (eg. a lawn) + if (levelData.floor in floorMap) { + level.zPosition = levelData.floor; + } else { + level.zPosition = 1; + } - res.status(200).json(level); -}); + res.status(200).json(level); + }, +); app.get( "/leaderboard/data", @@ -354,7 +393,7 @@ app.get( } }); - const ids = Object.values(highestScores).map(user => user.id); + const ids = Object.values(highestScores).map((user) => user.id); if (ids.length == 0) { return res.status(400).send("error"); @@ -376,7 +415,11 @@ app.get( for (let i = start; i < end; i++) { // if username is undefined, don't add to leaderboard let username: string; - if (!(username = await getUsername(queryScoreSnapshot.docs[i].data().userid))) { + if ( + !(username = await getUsername( + queryScoreSnapshot.docs[i].data().userid, + )) + ) { return res.status(500).send("invalid userId in game database"); } const dataEntry: ScoreEntry = { diff --git a/backend/src/requestTypes.ts b/backend/src/requestTypes.ts index aef3cd7..44bac4d 100644 --- a/backend/src/requestTypes.ts +++ b/backend/src/requestTypes.ts @@ -1,5 +1,3 @@ -import { Gamemode } from "./interfaces"; - export interface TypedRequest extends Express.Request { body: T; } diff --git a/backend/tsconfig.json b/backend/tsconfig.json new file mode 100644 index 0000000..4a01831 --- /dev/null +++ b/backend/tsconfig.json @@ -0,0 +1,111 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs" /* Specify what module code is generated. */, + // "rootDir": "./", /* Specify the root folder within your source files. */ + "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */, + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist" /* Specify an output folder for all emitted files. */, + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, + + /* Type Checking */ + "strict": true /* Enable all strict type-checking options. */, + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + }, + "exclude": ["node_modules", "dist"], + "include": ["src/**/*.ts", "tests/**/*.spec.ts"], + "files": ["src/index.ts"] +} diff --git a/frontend/public/_redirects b/frontend/public/_redirects new file mode 100644 index 0000000..0819415 --- /dev/null +++ b/frontend/public/_redirects @@ -0,0 +1 @@ +/api/* https://yellowshirt-backend.fly.dev/:splat diff --git a/frontend/src/components/Forms/Login/Login.tsx b/frontend/src/components/Forms/Login/Login.tsx index 0347bbe..43e04c8 100644 --- a/frontend/src/components/Forms/Login/Login.tsx +++ b/frontend/src/components/Forms/Login/Login.tsx @@ -57,30 +57,26 @@ function LoginPage() { setIsProcessing(true); // formData.username = formData.username.trim(); - try { - const resp = await fetch("/api/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formData), - credentials: "include", - }); + const resp = await fetch("/api/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formData), + credentials: "include", + }); + + setIsProcessing(false); - if (resp.ok) { - navigate("/gamemodes"); - } else { - const errorCheck = await resp.json(); - if (errorCheck.usernameNotFound) { - return setUsernameFound(false); - } else if (errorCheck.passwordInvalid) { - return setPasswordMatch(false); - } + if (resp.ok) { + navigate("/gamemodes"); + } else { + const errorCheck = await resp.json(); + if (errorCheck.usernameNotFound) { + return setUsernameFound(false); + } else if (errorCheck.passwordInvalid) { + return setPasswordMatch(false); } - } catch (err) { - console.log("Error: ", err); - } finally { - setIsProcessing(false); } }; diff --git a/frontend/src/components/Forms/Register/Register.tsx b/frontend/src/components/Forms/Register/Register.tsx index 2ec784b..297966a 100644 --- a/frontend/src/components/Forms/Register/Register.tsx +++ b/frontend/src/components/Forms/Register/Register.tsx @@ -93,26 +93,21 @@ function Register() { if (isProcessing) return; setIsProcessing(true); - try { - const resp = await fetch("/api/register", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formData), - }); + const resp = await fetch("/api/register", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formData), + }); - if (resp.ok) { - navigate("/login", { replace: true }); - } else { - const errorCheck = await resp.json(); - if (!errorCheck.usernameNotFound) setUsernameAvailable(false); - } - } catch (err) { - console.log("Error: ", err); - } finally { - setIsProcessing(false); + if (resp.ok) { + navigate("/login", { replace: true }); + } else { + const errorCheck = await resp.json(); + if (!errorCheck.usernameNotFound) setUsernameAvailable(false); } + setIsProcessing(false); }; return ( diff --git a/frontend/src/components/Leaderboard/Leaderboard.tsx b/frontend/src/components/Leaderboard/Leaderboard.tsx index 64f1106..6e34e4b 100644 --- a/frontend/src/components/Leaderboard/Leaderboard.tsx +++ b/frontend/src/components/Leaderboard/Leaderboard.tsx @@ -37,33 +37,27 @@ function Leaderboard() { if (leaderboardPage != 0 && (pageNum <= 0 || pageNum > pageCount)) { return; } - try { - const resp = await fetch( - `/api/leaderboard/data?pagenum=${pageNum}&gamemode=${leaderboardType}&increments=6`, - { - method: "GET", - headers: { - "Content-Type": "application/json", - }, + const resp = await fetch( + `/api/leaderboard/data?pagenum=${pageNum}&gamemode=${leaderboardType}&increments=6`, + { + method: "GET", + headers: { + "Content-Type": "application/json", }, - ); + }, + ); - if (resp.status === 200) { - const data = (await resp.json()) as fetchedData; - setUsers(data.leaderboardData); - if (data.pageCount != pageCount) { - setPageCount(data.pageCount); - } - setLeaderboardPage(pageNum); - } else if (resp.status === 204) { - setUsers([]); - setLeaderboardPage(1); - setPageCount(1); - } else { - console.error("Error: ", resp.status); + if (resp.status === 200) { + const data = (await resp.json()) as fetchedData; + setUsers(data.leaderboardData); + if (data.pageCount != pageCount) { + setPageCount(data.pageCount); } - } catch (err) { - console.log("error ", err); + setLeaderboardPage(pageNum); + } else if (resp.status === 204) { + setUsers([]); + setLeaderboardPage(1); + setPageCount(1); } }; diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx index fcf083e..98933f1 100644 --- a/frontend/src/components/Navbar/Navbar.tsx +++ b/frontend/src/components/Navbar/Navbar.tsx @@ -5,7 +5,7 @@ import ProfileIcon from "../ProfileIcon/ProfileIcon"; import ProfileDropdown from "../ProfileDropdown/ProfileDropdown"; import { useEffect, useState } from "react"; import Credits from "../Credits/Credits"; -import Help from "../Help/Help" +import Help from "../Help/Help"; import { useNavigate } from "react-router-dom"; import { Menu, X } from "lucide-react"; import Sheet from "../Sheet/Sheet"; @@ -16,7 +16,7 @@ function Navbar() { const [showHelp, setShowHelp] = useState(false); const [showDropDown, setShowDropDown] = useState(false); const [showProfileDropDown, setShowProfileDropDown] = useState(false); - const [username, setUsername] = useState('') + const [username, setUsername] = useState(""); const navigate = useNavigate(); const toggleCredits = () => { @@ -44,27 +44,22 @@ function Navbar() { useEffect(() => { const getUsername = async () => { - try { - const resp = await fetch("/api/user", { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - credentials: "include", - }); + const resp = await fetch("/api/user", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); - if (resp.ok) { - return resp.json().then((r) => {setUsername(r.username)}) - } else { - console.log(resp); - } - } catch (e) { - console.log("Error: ", e); + if (resp.ok) { + return resp.json().then((r) => { + setUsername(r.username); + }); } - } - getUsername() - .catch(console.error) - }, []) + }; + getUsername(); + }, []); return (
@@ -129,9 +124,7 @@ function Navbar() { [classes.slide_out]: !showDropDown, })} > - + diff --git a/frontend/src/components/ProfileDropdown/ProfileDropdown.tsx b/frontend/src/components/ProfileDropdown/ProfileDropdown.tsx index 9aba2fe..1493edd 100644 --- a/frontend/src/components/ProfileDropdown/ProfileDropdown.tsx +++ b/frontend/src/components/ProfileDropdown/ProfileDropdown.tsx @@ -6,26 +6,17 @@ import { useNavigate } from "react-router-dom"; function ProfileDropdown(props: { username: string }) { const navigate = useNavigate(); - const handleClick = async () => { - try { - const resp = await fetch("/api/logout", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - credentials: "include", - }); + const resp = await fetch("/api/logout", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); - if (resp.ok) { - // here for testing change later - console.log("Log out success"); - navigate("/login", { replace: true }); - } else { - console.log(resp); - } - } catch (e) { - console.log("Error: ", e); + if (resp.ok) { + navigate("/login", { replace: true }); } }; @@ -33,8 +24,13 @@ function ProfileDropdown(props: { username: string }) {

{props.username}

- {navigate('/profile')}}> - {/* {}}> */} + { + navigate("/profile"); + }} + > + {/* {}}> */} diff --git a/frontend/src/pages/ProfilePage/ProfilePage.tsx b/frontend/src/pages/ProfilePage/ProfilePage.tsx index a6843be..e650a12 100644 --- a/frontend/src/pages/ProfilePage/ProfilePage.tsx +++ b/frontend/src/pages/ProfilePage/ProfilePage.tsx @@ -14,7 +14,6 @@ const ProfilePage = () => { async function getData() { let dataPromise = await fetch("/api/user", { method: "GET" }); let dataJson = await dataPromise.json(); - console.log(dataJson); setUsername(dataJson.username); setHighScore(dataJson.highScore); setCumulativeScore(dataJson.cumulativeScore); @@ -31,7 +30,6 @@ const ProfilePage = () => { let date2 = new Date(); let msDay = 1000 * 3600 * 24; // milliseconds per day let days = Math.round((date2.getTime() - date1.getTime()) / msDay); - console.log(days); setActiveDays(days); } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index c005b5d..4c2397d 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -7,7 +7,8 @@ export default defineConfig({ server: { proxy: { "/api": { - target: "http://localhost:3000", + target: "https://yellowshirt-backend.fly.dev", + // target: "http://localhost:3000", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), },