GA-136 finalize sprint

.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 -----

README.md

@@ -1,19 +1,18 @@
 # 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
 
 ---
 
 ## Table of Contents
 - [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.</br>
+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
 <details>
-<summary>Click to expand Ex3 screenshots</summary>
+<summary>Click to expand Ex4 screenshots</summary>
 
-<img src="screenshots/ex3/curl runexample1.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample2.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample3.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample4.png" height="50%" alt="">
-<img src="screenshots/ex3/curl runexample5.png" height="50%" alt="">
+<img src="screenshots/ex4/light_login.png" width="50%" alt="light_login">
+<img src="screenshots/ex4/dark_inbox.png" width="50%" alt="dark_inbox">
+<img src="screenshots/ex4/light_compose.png" width="50%" alt="light_compose">
+<img src="screenshots/ex4/dark_reading.png" width="50%" alt="dark_reading">
+<img src="screenshots/ex4/dark_signup.png" width="50%" alt="dark_signup">
 
 </details>
 
-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)
 
 ---
 

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
 

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

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.</br>
+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
+<details>
+<summary>Click to expand Ex4 screenshots</summary>
 
-### `npm test`
+<img src="screenshots/ex4/light_login.png" width="50%" alt="light_login">
+<img src="screenshots/ex4/dark_inbox.png" width="50%" alt="dark_inbox">
+<img src="screenshots/ex4/light_compose.png" width="50%" alt="light_compose">
+<img src="screenshots/ex4/dark_reading.png" width="50%" alt="dark_reading">
+<img src="screenshots/ex4/dark_signup.png" width="50%" alt="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.
+</details>
 
-### `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)
+---

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`;
 
 /**

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

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)

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 {

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";
+export const DEFAULT_AVATAR = process.env.REACT_APP_DEFAULT_AVATAR || "/profile_default.png";

server_cpp/src/bloom/utils/command_code/CommandParser.cpp

@@ -7,7 +7,6 @@
 #include <sstream>
 #include <string>
 
-///TODO create tests
 /**
 * Turns a line of input to a command request object.
 * @param line line of input from the user

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

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** </br>
-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)

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);

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"
   }

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 <token>"
-
-    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});
 }
 
 

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
     };
 
 /**