diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 6531aee3..48b4a46f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -11,7 +11,6 @@ on: - main-Ex3 - main-Ex4 - main-Ex5 - # TODO: Add more main-ExN branches as we need for assignments jobs: # ----- Build & tests the CPP server ----- diff --git a/README.md b/README.md index 4d828648..9076d36d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # Gmail-AdvancedSystemProgramming Daily meeting summaries are uploaded to `Issues` tab -## Dear TA please check main-Ex1 for the final version of Ex1 -## Dear TA please check main-Ex2 for the final version of Ex2 -## Dear TA please check main-Ex3 for the final version of Ex3 +Roee's miluim service documents are uploaded to `Issues` tab if needed, Tzvika was informed about it. + +## Dear TA please check main-Ex4 for the final version of Ex4 --- @@ -10,10 +10,9 @@ Daily meeting summaries are uploaded to `Issues` tab - [Running server and client](#testing-and-running) - [Getting started](#getting-started) - [Testing bloom filter server and python client](#to-test-the-python-client-and-bloom-filter-server) - - [Running the web server](#running-the-servers) - -- [Screenshots & routes examples](#screenshots) - - [Ex3](#ex3-screenshots) + - [Running as web application project](#running-the-entire-web-app) + - [env variables](#env-variables) +- [Screenshots](#screenshots) - [Useful links](#useful-links) - [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/tree/main-Exe/server_cpp) - [Python client README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/python_client/README.md) @@ -38,11 +37,15 @@ This will build and run only the test related containers (CPP server, gtest, pyt ``` ### Running the entire web app -This will build and run only the web application related containers (react, Node.js, CPP server) +This will build and run only the web application related containers (React, Node.js, CPP server) ```bash docker-compose --profile web_app up --build ``` +### env variables +In Node.js and React root folders you can find .env files with default values to help you check the project.
+In a real world application these wouldn't be uploaded, we did it for easier set up for the checkers :) + ### Running the python client **NOTE: The instructions didn't ask to run the python client and express server together using the same command** ```bash @@ -57,26 +60,25 @@ control+c --- ### Screenshots -#### Ex3 screenshots
-Click to expand Ex3 screenshots +Click to expand Ex4 screenshots - - - - - +light_login +dark_inbox +light_compose +dark_reading +dark_signup
-For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex3/screenshots/ex3) +For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex4/screenshots/ex4) --- ## Useful links -- [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/tree/main-Exe/server_cpp) -- [Python client README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/python_client/README.md) -- [JavaScript server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex3/web_server/README.md) +- [CPP server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/server_cpp) +- [JavaScript server README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/web_server/README.md) +- [React frontend README](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/blob/main-Ex4/frontend/README.md) --- diff --git a/docker-compose.yml b/docker-compose.yml index 9f486734..450fd7ac 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,8 +8,10 @@ services: container_name: react_frontend depends_on: - web_server + env_file: + - ./frontend/.env ports: - - "3000:3000" + - "${REACT_APP_PORT:-3000}:3000" networks: - gmail-net @@ -20,10 +22,12 @@ services: context: ./web_server dockerfile: Dockerfile container_name: web_server - ports: - - "3001:3001" + env_file: + - ./web_server/.env depends_on: - run_server + ports: + - "${NODE_PORT:-3001}:3001" networks: - gmail-net diff --git a/frontend/.env b/frontend/.env new file mode 100644 index 00000000..f4a0c817 --- /dev/null +++ b/frontend/.env @@ -0,0 +1,5 @@ +REACT_APP_API_URL=http://localhost:3001/api +REACT_APP_PORT=3000 +REACT_APP_MAILS_PER_PAGE=10 +REACT_APP_NAME='Mail ASP' +REACT_APP_DEFAULT_AVATAR=/profile_default.png \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index 58beeacc..109ce6c2 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,70 +1,41 @@ -# Getting Started with Create React App +# React frontend -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +## Setup & Running -## Available Scripts +### Getting started +First clone the project +```bash +git clone https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming.git +cd Gmail-AdvancedSystemProgramming/python_client +``` +And build it +```bash + docker-compose build +``` -In the project directory, you can run: +### Running +Note that the Node.js and Bloom filter servers are needed for using the React frontend +```bash + docker-compose --profile web_app up +``` -### `npm start` +### env variables +In Node.js and React root folders you can find .env files with default values to help you check the project.
+In a real world application these wouldn't be uploaded, we did it for easier set up for the checkers :) -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. -The page will reload when you make changes.\ -You may also see any lint errors in the console. +## Screenshots +
+Click to expand Ex4 screenshots -### `npm test` +light_login +dark_inbox +light_compose +dark_reading +dark_signup -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +
-### `npm run build` +For more screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex4/screenshots/ex4) -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +--- diff --git a/frontend/src/api/labelsApi.js b/frontend/src/api/labelsApi.js index 25cc2251..0680a10c 100644 --- a/frontend/src/api/labelsApi.js +++ b/frontend/src/api/labelsApi.js @@ -1,7 +1,4 @@ -// src/api/labelsApi.js - -// Base URL — adjust port/host if needed -const API_BASE = "http://localhost:3001/api"; +const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:3001/api"; const ROOT = `${API_BASE}/labels`; /** diff --git a/frontend/src/api/mailApi.js b/frontend/src/api/mailApi.js index 0aaffca6..1ca907ae 100644 --- a/frontend/src/api/mailApi.js +++ b/frontend/src/api/mailApi.js @@ -1,7 +1,6 @@ -// Base URL — adjust port if needed import {MAILS_PER_PAGE} from "../utils/constants"; -const API_BASE = "http://localhost:3001/api"; +const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:3001/api"; /** * GET /api/mails/:id diff --git a/frontend/src/api/profileApi.js b/frontend/src/api/profileApi.js index 1f2c175b..e27fa84c 100644 --- a/frontend/src/api/profileApi.js +++ b/frontend/src/api/profileApi.js @@ -3,8 +3,7 @@ import {convertToBase64} from "../utils/files"; /** * File responsible on calls to the web server for profile related information. */ -// Base URL — adjust port if needed -const API_BASE = "http://localhost:3001/api"; +const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:3001/api"; /** * change the user's profile picture (doesn't save the image, only updates the path) diff --git a/frontend/src/api/userApi.js b/frontend/src/api/userApi.js index bc360ce0..3a83637a 100644 --- a/frontend/src/api/userApi.js +++ b/frontend/src/api/userApi.js @@ -1,5 +1,4 @@ -// Base URL — adjust port if needed -const API_BASE = "http://localhost:3001/api"; +const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:3001/api"; export async function registerUserWithJwt(user) { try { diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js index c78fca9a..b60398b1 100644 --- a/frontend/src/utils/constants.js +++ b/frontend/src/utils/constants.js @@ -1,5 +1,5 @@ -export const APP_NAME = 'Mail ASP' +export const APP_NAME = process.env.REACT_APP_NAME || 'BUG' // amount of mails per page to fetch -export const MAILS_PER_PAGE = 10; +export const MAILS_PER_PAGE = process.env.REACT_APP_MAILS_PER_PAGE || 10; // default profile picture placeholder -export const DEFAULT_AVATAR = "/profile_default.png"; \ No newline at end of file +export const DEFAULT_AVATAR = process.env.REACT_APP_DEFAULT_AVATAR || "/profile_default.png"; \ No newline at end of file diff --git a/screenshots/ex4/dark_compose.png b/screenshots/ex4/dark_compose.png new file mode 100644 index 00000000..7a1272db Binary files /dev/null and b/screenshots/ex4/dark_compose.png differ diff --git a/screenshots/ex4/dark_inbox.png b/screenshots/ex4/dark_inbox.png new file mode 100644 index 00000000..9d5e318b Binary files /dev/null and b/screenshots/ex4/dark_inbox.png differ diff --git a/screenshots/ex4/dark_labels.png b/screenshots/ex4/dark_labels.png new file mode 100644 index 00000000..cd9c81ed Binary files /dev/null and b/screenshots/ex4/dark_labels.png differ diff --git a/screenshots/ex4/dark_login.png b/screenshots/ex4/dark_login.png new file mode 100644 index 00000000..db312c72 Binary files /dev/null and b/screenshots/ex4/dark_login.png differ diff --git a/screenshots/ex4/dark_reading.png b/screenshots/ex4/dark_reading.png new file mode 100644 index 00000000..1573759a Binary files /dev/null and b/screenshots/ex4/dark_reading.png differ diff --git a/screenshots/ex4/dark_search.png b/screenshots/ex4/dark_search.png new file mode 100644 index 00000000..009951dc Binary files /dev/null and b/screenshots/ex4/dark_search.png differ diff --git a/screenshots/ex4/dark_signup.png b/screenshots/ex4/dark_signup.png new file mode 100644 index 00000000..a2a8fd44 Binary files /dev/null and b/screenshots/ex4/dark_signup.png differ diff --git a/screenshots/ex4/light_compose.png b/screenshots/ex4/light_compose.png new file mode 100644 index 00000000..3f7708f8 Binary files /dev/null and b/screenshots/ex4/light_compose.png differ diff --git a/screenshots/ex4/light_inbox.png b/screenshots/ex4/light_inbox.png new file mode 100644 index 00000000..9259e730 Binary files /dev/null and b/screenshots/ex4/light_inbox.png differ diff --git a/screenshots/ex4/light_login.png b/screenshots/ex4/light_login.png new file mode 100644 index 00000000..9f1fc2fd Binary files /dev/null and b/screenshots/ex4/light_login.png differ diff --git a/screenshots/ex4/light_reading.png b/screenshots/ex4/light_reading.png new file mode 100644 index 00000000..a95324ad Binary files /dev/null and b/screenshots/ex4/light_reading.png differ diff --git a/screenshots/ex4/light_reading_labels.png b/screenshots/ex4/light_reading_labels.png new file mode 100644 index 00000000..b822303f Binary files /dev/null and b/screenshots/ex4/light_reading_labels.png differ diff --git a/screenshots/ex4/light_signup.png b/screenshots/ex4/light_signup.png new file mode 100644 index 00000000..896894b1 Binary files /dev/null and b/screenshots/ex4/light_signup.png differ diff --git a/screenshots/ex4/light_wrong_password.png b/screenshots/ex4/light_wrong_password.png new file mode 100644 index 00000000..a4c76200 Binary files /dev/null and b/screenshots/ex4/light_wrong_password.png differ diff --git a/server_cpp/src/bloom/utils/command_code/CommandParser.cpp b/server_cpp/src/bloom/utils/command_code/CommandParser.cpp index 2a4720f1..df715f71 100644 --- a/server_cpp/src/bloom/utils/command_code/CommandParser.cpp +++ b/server_cpp/src/bloom/utils/command_code/CommandParser.cpp @@ -7,7 +7,6 @@ #include #include -///TODO create tests /** * Turns a line of input to a command request object. * @param line line of input from the user diff --git a/web_server/.env b/web_server/.env new file mode 100644 index 00000000..a344b204 --- /dev/null +++ b/web_server/.env @@ -0,0 +1,5 @@ +REACT_URL=http://localhost:3000 +NODE_PORT=3001 +JSON_LIMIT=10mb +JWT_SECRET=gradingMode +JWT_EXPIRATION_TIME=24h \ No newline at end of file diff --git a/web_server/README.md b/web_server/README.md index d7f2fe10..962d1a95 100644 --- a/web_server/README.md +++ b/web_server/README.md @@ -22,8 +22,7 @@ And build it #### Running the servers **Make sure you already cloned the project and built it using docker compose**
-In case you want to change any configuration value (port, bloom filter integers etc.) change the relevant dockerfile or docker compose file. -Changing the port and the name of the cpp server also requires changing models/blacklist.js global vars (since we shouldn't include .env files) +In case you want to change any configuration value related to the bloom filter (port, bloom filter integers etc.) change the relevant dockerfile or docker compose file. - To run the web server and bloom filter server ```bash @@ -36,4 +35,4 @@ control+c ``` ## Screenshots -For screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex3/screenshots/ex3) +For screenshots [click here](https://github.com/YuvalAnteby/Gmail-AdvancedSystemProgramming/main-Ex4/screenshots/ex4) diff --git a/web_server/app.js b/web_server/app.js index 7d45f2b7..eb7b5c1c 100644 --- a/web_server/app.js +++ b/web_server/app.js @@ -1,11 +1,17 @@ const express = require('express') const cors = require("cors"); +require('dotenv').config(); const app = express() -app.use(express.json({limit: '10mb'})); -app.use(cors({ origin: "http://localhost:3000" })); -//app.use(cors()); +// Use env variables, use defaults if none provided +const PORT = process.env.NODE_PORT || 3001; +const JSON_LIMIT = process.env.JSON_LIMIT || '10mb'; +const REACT_URL = process.env.REACT_URL || 'http://localhost:3000'; + + +app.use(express.json({limit: JSON_LIMIT})); +app.use(cors({origin: REACT_URL})); const inbox = require('./routes/mails'); const users = require('./routes/users'); @@ -17,5 +23,4 @@ app.use('/api', users); app.use('/api/labels', labels); app.use('/api/blacklist', blacklist); -const PORT = process.env.PORT || 3001; app.listen(PORT); diff --git a/web_server/package-lock.json b/web_server/package-lock.json index 1beb7f7b..0ad1fdb6 100644 --- a/web_server/package-lock.json +++ b/web_server/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "cors": "^2.8.5", + "dotenv": "^17.2.0", "express": "^5.1.0", "jsonwebtoken": "^9.0.2" } @@ -169,6 +170,18 @@ "node": ">= 0.8" } }, + "node_modules/dotenv": { + "version": "17.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.0.tgz", + "integrity": "sha512-Q4sgBT60gzd0BB0lSyYD3xM4YxrXA9y4uBDof1JNYGzOXrQdQ6yX+7XIAqoFOGQFOTK1D3Hts5OllpxMDZFONQ==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", diff --git a/web_server/package.json b/web_server/package.json index 2d0049ee..5090cf97 100644 --- a/web_server/package.json +++ b/web_server/package.json @@ -12,6 +12,7 @@ "type": "", "dependencies": { "cors": "^2.8.5", + "dotenv": "^17.2.0", "express": "^5.1.0", "jsonwebtoken": "^9.0.2" } diff --git a/web_server/utils/authentication.js b/web_server/utils/authentication.js index fa62ef97..c114c652 100644 --- a/web_server/utils/authentication.js +++ b/web_server/utils/authentication.js @@ -11,8 +11,7 @@ function authenticateToken(req, res, next) { if (!authHeader) return res.status(401).json({ error: 'Authorization header missing' }); const token = authHeader && authHeader.split(' ')[1]; // "Bearer " - - jwt.verify(token, process.env.JWT_SECRET || 'mySecretKey', (err, user) => { + jwt.verify(token, process.env.JWT_SECRET || 'gradingMode', (err, user) => { if (err) return res.status(403).json({ error: 'Invalid or expired token' }); req.user = user; // e.g., { id, fullName, mail, dateOfBirth } next(); @@ -25,13 +24,13 @@ function authenticateToken(req, res, next) { * @param expiresIn time for the token before expiring, default is 24 hours * @returns {*} JWT signed token */ -function signToken(user, expiresIn = '24h') { +function signToken(user, expiresIn = process.env.JWT_EXPIRATION_TIME || '24h') { return jwt.sign({ id: user.id, fullName: user.fullName, mail: user.mail, dateOfBirth: user.dateOfBirth - }, process.env.JWT_SECRET || 'mySecretKey', {expiresIn: expiresIn}); + }, process.env.JWT_SECRET || 'gradingMode', {expiresIn: expiresIn}); } diff --git a/web_server/utils/mails.js b/web_server/utils/mails.js index 059aea92..cafc2c4d 100644 --- a/web_server/utils/mails.js +++ b/web_server/utils/mails.js @@ -46,7 +46,6 @@ const inboxFilters = { mail.owner == userId && mail.isSpam === true && !mail.isTrashed, sortKey: (mail) => new Date(mail.sentAt).getTime(), } -/// TODO get by labels }; /**