Merge branch 'develop' into BETTERZON-78

* BETTERZON-100: Switching session handling to cookies

* BETTERZON-100: Some code reformatting

* BETTERZON-100: Some more code reformatting

Backend/package.json

@@ -11,7 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/cookie-parser": "^1.4.2",
     "bcrypt": "^5.0.1",
+    "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",

Backend/src/index.ts

@@ -14,6 +14,9 @@ import {vendorsRouter} from './models/vendors/vendors.router';
 import {errorHandler} from './middleware/error.middleware';
 import {notFoundHandler} from './middleware/notFound.middleware';
 import {usersRouter} from './models/users/users.router';
+import {pricealarmsRouter} from './models/pricealarms/pricealarms.router';
+
+const cookieParser = require('cookie-parser');
 
 dotenv.config();
 
@@ -38,12 +41,14 @@ const app = express();
 app.use(helmet());
 app.use(cors());
 app.use(express.json());
+app.use(cookieParser());
 app.use('/products', productsRouter);
 app.use('/categories', categoriesRouter);
 app.use('/manufacturers', manufacturersRouter);
 app.use('/prices', pricesRouter);
 app.use('/users', usersRouter);
 app.use('/vendors', vendorsRouter);
+app.use('/pricealarms', pricealarmsRouter);
 
 app.use(errorHandler);
 app.use(notFoundHandler);

Backend/src/middleware/error.middleware.ts

@@ -1,5 +1,5 @@
-import HttpException from "../common/http-exception";
-import { Request, Response, NextFunction } from "express";
+import HttpException from '../common/http-exception';
+import {Request, Response, NextFunction} from 'express';
 
 export const errorHandler = (
     error: HttpException,
@@ -9,7 +9,7 @@ export const errorHandler = (
 ) => {
     const status = error.statusCode || 500;
     const message =
-        error.message || "It's not you. It's us. We are having some problems.";
+        error.message || 'It\'s not you. It\'s us. We are having some problems.';
 
     response.status(status).send(message);
 };

Backend/src/middleware/notFound.middleware.ts

@@ -1,4 +1,4 @@
-import { Request, Response, NextFunction } from "express";
+import {Request, Response, NextFunction} from 'express';
 
 export const notFoundHandler = (
     request: Request,
@@ -6,7 +6,7 @@ export const notFoundHandler = (
     next: NextFunction
 ) => {
 
-    const message = "Resource not found";
+    const message = 'Resource not found';
 
     response.status(404).send(message);
 };

Backend/src/models/categories/categories.router.ts

@@ -27,7 +27,7 @@ categoriesRouter.get('/', async (req: Request, res: Response) => {
         res.status(200).send(categories);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -46,7 +46,7 @@ categoriesRouter.get('/:id', async (req: Request, res: Response) => {
         res.status(200).send(category);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -65,6 +65,6 @@ categoriesRouter.get('/search/:term', async (req: Request, res: Response) => {
         res.status(200).send(categories);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/src/models/manufacturers/manufacturers.router.ts

@@ -27,7 +27,7 @@ manufacturersRouter.get('/', async (req: Request, res: Response) => {
         res.status(200).send(manufacturers);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -46,7 +46,7 @@ manufacturersRouter.get('/:id', async (req: Request, res: Response) => {
         res.status(200).send(manufacturer);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -65,6 +65,6 @@ manufacturersRouter.get('/search/:term', async (req: Request, res: Response) =>
         res.status(200).send(manufacturer);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/src/models/pricealarms/pricealarm.interface.ts

@@ -0,0 +1,6 @@
+export interface PriceAlarm {
+    alarm_id: number;
+    user_id: number;
+    product_id: number;
+    defined_price: number;
+}

Backend/src/models/pricealarms/pricealarms.interface.ts

@@ -0,0 +1,5 @@
+import {PriceAlarm} from './pricealarm.interface';
+
+export interface PriceAlarms {
+    [key: number]: PriceAlarm;
+}

Backend/src/models/pricealarms/pricealarms.router.ts

@@ -0,0 +1,102 @@
+/**
+ * Required External Modules and Interfaces
+ */
+
+import express, {Request, Response} from 'express';
+import * as PriceAlarmsService from './pricealarms.service';
+import {PriceAlarm} from './pricealarm.interface';
+import {PriceAlarms} from './pricealarms.interface';
+import * as UserService from '../users/users.service';
+
+
+/**
+ * Router Definition
+ */
+export const pricealarmsRouter = express.Router();
+
+
+/**
+ * Controller Definitions
+ */
+
+//GET pricealarms/
+pricealarmsRouter.get('/', async (req: Request, res: Response) => {
+    try {
+        // Authenticate user
+        const user_ip = req.connection.remoteAddress ?? '';
+        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+
+        const priceAlarms = await PriceAlarmsService.getPriceAlarms(user.user_id);
+
+        res.status(200).send(priceAlarms);
+    } catch (e) {
+        console.log('Error handling a request: ' + e.message);
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
+    }
+});
+
+// POST pricealarms/create
+pricealarmsRouter.post('/create', async (req: Request, res: Response) => {
+    try {
+        // Authenticate user
+        const user_ip = req.connection.remoteAddress ?? '';
+        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+
+        // Get info for price alarm creation
+        const product_id = req.body.product_id;
+        const defined_price = req.body.defined_price;
+
+        if (!product_id || !defined_price) {
+            // Missing
+            res.status(400).send(JSON.stringify({message: 'Missing parameters'}));
+            return;
+        }
+
+        // Create price alarm
+        const success = await PriceAlarmsService.createPriceAlarm(user.user_id, product_id, defined_price);
+
+        if (success) {
+            res.status(201).send(JSON.stringify({success: true}));
+            return;
+        } else {
+            res.status(500).send(JSON.stringify({success: false}));
+            return;
+        }
+    } catch (e) {
+        console.log('Error handling a request: ' + e.message);
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
+    }
+});
+
+// PUT pricealarms/update
+pricealarmsRouter.put('/update', async (req: Request, res: Response) => {
+    try {
+        // Authenticate user
+        const user_ip = req.connection.remoteAddress ?? '';
+        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+
+        // Get info for price alarm creation
+        const alarm_id = req.body.alarm_id;
+        const defined_price = req.body.defined_price;
+
+        if (!alarm_id || !defined_price) {
+            // Missing
+            res.status(400).send(JSON.stringify({message: 'Missing parameters'}));
+            return;
+        }
+
+        // Create price alarm
+        const success = await PriceAlarmsService.updatePriceAlarm(alarm_id, user.user_id, defined_price);
+
+        if (success) {
+            res.status(201).send(JSON.stringify({success: true}));
+            return;
+        } else {
+            res.status(500).send(JSON.stringify({success: false}));
+            return;
+        }
+    } catch (e) {
+        console.log('Error handling a request: ' + e.message);
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
+    }
+});

Backend/src/models/pricealarms/pricealarms.service.ts

@@ -0,0 +1,106 @@
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+const mariadb = require('mariadb');
+const pool = mariadb.createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_DATABASE,
+    connectionLimit: 5
+});
+
+/**
+ * Data Model Interfaces
+ */
+
+import {PriceAlarm} from './pricealarm.interface';
+import {PriceAlarms} from './pricealarms.interface';
+
+
+/**
+ * Service Methods
+ */
+
+/**
+ * Creates a price alarm for the given user for the product with the defined price
+ * @param user_id The id of the user to create the price alarm for
+ * @param product_id The id of the product to create the price alarm for
+ * @param defined_price The defined price for the price alarm
+ */
+export const createPriceAlarm = async (user_id: number, product_id: number, defined_price: number): Promise<Boolean> => {
+    let conn;
+    try {
+        conn = await pool.getConnection();
+        const res = await conn.query('INSERT INTO price_alarms (user_id, product_id, defined_price) VALUES (?, ?, ?)', [user_id, product_id, defined_price]);
+
+        if (res.affectedRows === 1) {
+            return true;
+        } else {
+            return false;
+        }
+    } catch (err) {
+        throw err;
+    } finally {
+        if (conn) {
+            conn.end();
+        }
+    }
+
+    return false;
+};
+
+/**
+ * Fetches and returns all price alarms for the given user
+ * @param user_id
+ */
+export const getPriceAlarms = async (user_id: number): Promise<PriceAlarms> => {
+    let conn;
+    let priceAlarms = [];
+    try {
+        conn = await pool.getConnection();
+        const rows = await conn.query('SELECT alarm_id, user_id, product_id, defined_price FROM price_alarms WHERE user_id = ?', user_id);
+        for (let row in rows) {
+            if (row !== 'meta') {
+                priceAlarms.push(rows[row]);
+            }
+        }
+
+        return priceAlarms;
+    } catch (err) {
+        throw err;
+    } finally {
+        if (conn) {
+            conn.end();
+        }
+    }
+};
+
+/**
+ * Updates the given price alarm with the given fields
+ * @param alarm_id The id of the price alarm to update
+ * @param user_id The id of the user that wants to update the price alarm
+ * @param defined_price The defined price for the price alarm
+ */
+export const updatePriceAlarm = async (alarm_id: number, user_id: number, defined_price: number): Promise<Boolean> => {
+    let conn;
+    try {
+        conn = await pool.getConnection();
+        const res = await conn.query('UPDATE price_alarms SET defined_price = ? WHERE alarm_id = ? AND user_id = ?', [defined_price, alarm_id, user_id]);
+
+        if (res.affectedRows === 1) {
+            return true;
+        } else {
+            return false;
+        }
+    } catch (err) {
+        throw err;
+    } finally {
+        if (conn) {
+            conn.end();
+        }
+    }
+
+    return false;
+};

Backend/src/models/prices/prices.router.ts

@@ -40,7 +40,7 @@ pricesRouter.get('/', async (req: Request, res: Response) => {
         res.status(200).send(prices);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -59,7 +59,7 @@ pricesRouter.get('/:id', async (req: Request, res: Response) => {
         res.status(200).send(price);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -78,7 +78,7 @@ pricesRouter.get('/bestDeals/:amount', async (req: Request, res: Response) => {
         res.status(200).send(prices);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -97,6 +97,6 @@ pricesRouter.get('/byProduct/list/:ids', async (req: Request, res: Response) =>
         res.status(200).send(prices);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/src/models/products/products.router.ts

@@ -27,7 +27,7 @@ productsRouter.get('/', async (req: Request, res: Response) => {
         res.status(200).send(products);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -46,7 +46,7 @@ productsRouter.get('/:id', async (req: Request, res: Response) => {
         res.status(200).send(product);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -65,7 +65,7 @@ productsRouter.get('/search/:term', async (req: Request, res: Response) => {
         res.status(200).send(products);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -84,6 +84,6 @@ productsRouter.get('/list/:ids', async (req: Request, res: Response) => {
         res.status(200).send(products);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/src/models/users/users.router.ts

@@ -47,10 +47,13 @@ usersRouter.post('/register', async (req: Request, res: Response) => {
         const session: Session = await UserService.createUser(username, password, email, ip);
 
         // Send the session details back to the user
-        res.status(201).send(session);
+        res.cookie('betterauth', JSON.stringify({
+            id: session.session_id,
+            key: session.session_key
+        }), {expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30)}).sendStatus(201);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -70,39 +73,34 @@ usersRouter.post('/login', async (req: Request, res: Response) => {
         // Update the user entry and create a session
         const session: Session = await UserService.login(username, password, ip);
 
-        if(!session.session_id) {
+        if (!session.session_id) {
             // Error logging in, probably wrong username / password
-            res.status(401).send(JSON.stringify({messages: ["Wrong username and / or password"], codes: [1, 4]}));
+            res.status(401).send(JSON.stringify({messages: ['Wrong username and / or password'], codes: [1, 4]}));
             return;
         }
 
         // Send the session details back to the user
-        res.status(201).send(session);
+        res.cookie('betterauth', JSON.stringify({
+            id: session.session_id,
+            key: session.session_key
+        }), {expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30)}).sendStatus(200);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
 // POST users/checkSessionValid
 usersRouter.post('/checkSessionValid', async (req: Request, res: Response) => {
     try {
-        const sessionId: string = req.body.sessionId;
-        const sessionKey: string = req.body.sessionKey;
         const ip: string = req.connection.remoteAddress ?? '';
 
-        if (!sessionId || !sessionKey) {
-            // Missing
-            res.status(400).send(JSON.stringify({message: 'Missing parameters'}));
-            return;
-        }
-
         // Update the user entry and create a session
-        const user: User = await UserService.checkSession(sessionId, sessionKey, ip);
+        const user: User = await UserService.checkSessionWithCookie(req.cookies.betterauth, ip);
 
-        if(!user.user_id) {
+        if (!user.user_id) {
             // Error logging in, probably wrong username / password
-            res.status(401).send(JSON.stringify({messages: ["Invalid session"], codes: [5]}));
+            res.status(401).send(JSON.stringify({messages: ['Invalid session'], codes: [5]}));
             return;
         }
 
@@ -110,6 +108,6 @@ usersRouter.post('/checkSessionValid', async (req: Request, res: Response) => {
         res.status(201).send(user);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/src/models/users/users.service.ts

@@ -68,7 +68,7 @@ export const createUser = async (username: string, password: string, email: stri
         return {
             session_id: sessionId,
             session_key: sessionKey,
-            session_key_hash: '',
+            session_key_hash: 'HIDDEN',
             last_IP: ip
         };
 
@@ -135,7 +135,7 @@ export const login = async (username: string, password: string, ip: string): Pro
         return {
             session_id: sessionId,
             session_key: sessionKey,
-            session_key_hash: '',
+            session_key_hash: 'HIDDEN',
             last_IP: ip
         };
 
@@ -179,7 +179,7 @@ export const checkSession = async (sessionId: string, sessionKey: string, ip: st
         // Key is valid, continue
 
         // Check if the session is still valid
-        if(validUntil <= new Date()) {
+        if (validUntil <= new Date()) {
             // Session expired, return invalid
             return {} as User;
         }
@@ -193,7 +193,7 @@ export const checkSession = async (sessionId: string, sessionKey: string, ip: st
         await conn.commit();
 
         // Get the other required user information and update the user
-        const userQuery = "SELECT user_id, username, email, registration_date, last_login_date FROM users WHERE user_id = ?";
+        const userQuery = 'SELECT user_id, username, email, registration_date, last_login_date FROM users WHERE user_id = ?';
         const userRows = await conn.query(userQuery, userId);
         let username = '';
         let email = '';
@@ -213,7 +213,7 @@ export const checkSession = async (sessionId: string, sessionKey: string, ip: st
             user_id: userId,
             username: username,
             email: email,
-            password_hash: '',
+            password_hash: 'HIDDEN',
             registration_date: registrationDate,
             last_login_date: lastLoginDate
         };
@@ -229,6 +229,20 @@ export const checkSession = async (sessionId: string, sessionKey: string, ip: st
     return {} as User;
 };
 
+/**
+ * Calls the checkSession method after extracting the required information from the authentication cookie
+ * @param cookie The betterauth cookie
+ * @param ip The users IP address
+ */
+export const checkSessionWithCookie = async (cookie: any, ip: string): Promise<User> => {
+    const parsedCookie = JSON.parse(cookie);
+    const session_id = parsedCookie.id;
+    const session_key = parsedCookie.key;
+
+
+    return checkSession(session_id, session_key, '');
+};
+
 /**
  * Used in the checkUsernameAndEmail method as return value
  */

Backend/src/models/vendors/vendors.router.ts

@@ -27,7 +27,7 @@ vendorsRouter.get('/', async (req: Request, res: Response) => {
         res.status(200).send(vendors);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -46,7 +46,7 @@ vendorsRouter.get('/:id', async (req: Request, res: Response) => {
         res.status(200).send(vendor);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });
 
@@ -65,6 +65,6 @@ vendorsRouter.get('/search/:term', async (req: Request, res: Response) => {
         res.status(200).send(vendors);
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
-        res.status(500).send(JSON.stringify({"message": "Internal Server Error. Try again later."}));
+        res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
     }
 });

Backend/webpack.config.ts

@@ -1,32 +1,32 @@
-const webpack = require("webpack");
-const path = require("path");
-const nodeExternals = require("webpack-node-externals");
+const webpack = require('webpack');
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
-    entry: ["webpack/hot/poll?100", "./src/index.ts"],
+    entry: ['webpack/hot/poll?100', './src/index.ts'],
     watch: false,
-    target: "node",
+    target: 'node',
     externals: [
         nodeExternals({
-            whitelist: ["webpack/hot/poll?100"]
+            whitelist: ['webpack/hot/poll?100']
         })
     ],
     module: {
         rules: [
             {
                 test: /.tsx?$/,
-                use: "ts-loader",
+                use: 'ts-loader',
                 exclude: /node_modules/
             }
         ]
     },
-    mode: "development",
+    mode: 'development',
     resolve: {
-        extensions: [".tsx", ".ts", ".js"]
+        extensions: ['.tsx', '.ts', '.js']
     },
     plugins: [new webpack.HotModuleReplacementPlugin()],
     output: {
-        path: path.join(__dirname, "dist"),
-        filename: "index.js"
+        path: path.join(__dirname, 'dist'),
+        filename: 'index.js'
     }
 };

CucumberTests/CucumberTests.iml

@@ -10,17 +10,24 @@
       <sourceFolder url="file://$MODULE_DIR$/src/test/resource" type="java-resource" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="openjdk-16" jdkType="JavaSDK" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:cucumber-java:2.3.1" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:cucumber-core:2.3.1" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: info.cukes:cucumber-html:0.2.6" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:cucumber-jvm-deps:1.0.6" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:gherkin:5.0.0" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:tag-expressions:1.1.1" level="project" />
-    <orderEntry type="library" scope="TEST" name="Maven: io.cucumber:cucumber-junit:2.3.1" level="project" />
     <orderEntry type="library" scope="TEST" name="Maven: junit:junit:4.12" level="project" />
     <orderEntry type="library" scope="TEST" name="Maven: org.hamcrest:hamcrest-core:1.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-java:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-core:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-gherkin:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-gherkin-messages:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:messages:15.0.0" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:tag-expressions:3.0.1" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-expressions:10.3.0" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:datatable:3.5.0" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-plugin:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:docstring:6.10.3" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:html-formatter:13.0.0" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:create-meta:4.0.0" level="project" />
+    <orderEntry type="library" name="Maven: org.apiguardian:apiguardian-api:1.1.1" level="project" />
+    <orderEntry type="library" name="Maven: io.cucumber:cucumber-junit:6.10.3" level="project" />
     <orderEntry type="library" name="Maven: org.apache.maven.plugins:maven-compiler-plugin:3.8.1" level="project" />
     <orderEntry type="library" name="Maven: org.apache.maven:maven-plugin-api:3.0" level="project" />
     <orderEntry type="library" name="Maven: org.apache.maven:maven-model:3.0" level="project" />
@@ -53,5 +60,25 @@
     <orderEntry type="library" name="Maven: org.codehaus.plexus:plexus-compiler-api:2.8.4" level="project" />
     <orderEntry type="library" name="Maven: org.codehaus.plexus:plexus-compiler-manager:2.8.4" level="project" />
     <orderEntry type="library" scope="RUNTIME" name="Maven: org.codehaus.plexus:plexus-compiler-javac:2.8.4" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-java:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-api:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-chrome-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-edge-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-firefox-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-ie-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-opera-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-remote-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-safari-driver:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: org.seleniumhq.selenium:selenium-support:3.141.59" level="project" />
+    <orderEntry type="library" name="Maven: net.bytebuddy:byte-buddy:1.8.15" level="project" />
+    <orderEntry type="library" name="Maven: org.apache.commons:commons-exec:1.3" level="project" />
+    <orderEntry type="library" name="Maven: com.google.guava:guava:25.0-jre" level="project" />
+    <orderEntry type="library" name="Maven: com.google.code.findbugs:jsr305:1.3.9" level="project" />
+    <orderEntry type="library" name="Maven: org.checkerframework:checker-compat-qual:2.0.0" level="project" />
+    <orderEntry type="library" name="Maven: com.google.errorprone:error_prone_annotations:2.1.3" level="project" />
+    <orderEntry type="library" name="Maven: com.google.j2objc:j2objc-annotations:1.1" level="project" />
+    <orderEntry type="library" name="Maven: org.codehaus.mojo:animal-sniffer-annotations:1.14" level="project" />
+    <orderEntry type="library" name="Maven: com.squareup.okhttp3:okhttp:3.11.0" level="project" />
+    <orderEntry type="library" name="Maven: com.squareup.okio:okio:1.14.0" level="project" />
   </component>
 </module>

CucumberTests/pom.xml

@@ -4,7 +4,7 @@
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
 
-    <groupId>de.taskhub</groupId>
+    <groupId>xyz.betterzon</groupId>
     <artifactId>CucumberTests</artifactId>
     <version>1.0-SNAPSHOT</version>
     <properties>
@@ -13,21 +13,30 @@
     </properties>
     <dependencies>
         <dependency>
-            <groupId>io.cucumber</groupId>
-            <artifactId>cucumber-java</artifactId>
-            <version>2.3.1</version>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <version>4.12</version>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>io.cucumber</groupId>
+            <artifactId>cucumber-java</artifactId>
+            <version>6.10.3</version>
+        </dependency>
         <dependency>
             <groupId>io.cucumber</groupId>
             <artifactId>cucumber-junit</artifactId>
-            <version>2.3.1</version>
-            <scope>test</scope>
+            <version>6.10.3</version>
         </dependency>
         <dependency>
             <groupId>org.apache.maven.plugins</groupId>
             <artifactId>maven-compiler-plugin</artifactId>
             <version>3.8.1</version>
         </dependency>
+        <dependency>
+            <groupId>org.seleniumhq.selenium</groupId>
+            <artifactId>selenium-java</artifactId>
+            <version>3.141.59</version>
+        </dependency>
     </dependencies>
 </project>

CucumberTests/src/test/java/RunTest.java

@@ -1,6 +1,10 @@
-import cucumber.api.CucumberOptions;
-import cucumber.api.junit.Cucumber;
+import io.cucumber.junit.Cucumber;
+import io.cucumber.junit.CucumberOptions;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
 import org.junit.runner.RunWith;
+import org.openqa.selenium.firefox.FirefoxDriver;
+import stepdefs.Preconditions;
 
 @RunWith(Cucumber.class)
 @CucumberOptions(
@@ -9,4 +13,13 @@ import org.junit.runner.RunWith;
 )
 
 public class RunTest {
+    @BeforeClass
+    public static void setup() {
+        Preconditions.driver= new FirefoxDriver();
+    }
+
+    @AfterClass
+    public static void teardown() {
+        Preconditions.driver.close();
+    }
 }

CucumberTests/src/test/java/stepdefs/Preconditions.java

@@ -0,0 +1,7 @@
+package stepdefs;
+
+import org.openqa.selenium.WebDriver;
+
+public class Preconditions {
+    public static WebDriver driver;
+}

CucumberTests/src/test/java/stepdefs/PriceAlarm.java

@@ -1,67 +1,68 @@
 package stepdefs;
 
-import cucumber.api.java.en.Given;
-import cucumber.api.java.en.Then;
-import cucumber.api.java.en.When;
+import io.cucumber.java.PendingException;
+import io.cucumber.java.en.Given;
+import io.cucumber.java.en.Then;
+import io.cucumber.java.en.When;
 
 public class PriceAlarm {
-  @Given("^the user has at least (\\d+) price alarm set$")
-  public void the_user_has_at_least_price_alarm_set(int arg1) throws Exception {
-  }
+    @Given("^the user has at least (\\d+) price alarm set$")
+    public void the_user_has_at_least_price_alarm_set(int arg1) throws Exception {
+    }
 
-  @When("^the user clicks on the profile icon$")
-  public void the_user_clicks_on_the_profile_icon() throws Exception {
-  }
+    @When("^the user clicks on the profile icon$")
+    public void the_user_clicks_on_the_profile_icon() throws Exception {
+    }
 
-  @Then("^the profile details popup should open$")
-  public void the_profile_details_popup_should_open() throws Exception {
-  }
+    @Then("^the profile details popup should open$")
+    public void the_profile_details_popup_should_open() throws Exception {
+    }
 
-  @When("^the user clicks on price alarms$")
-  public void the_user_clicks_on_price_alarms() throws Exception {
-  }
+    @When("^the user clicks on price alarms$")
+    public void the_user_clicks_on_price_alarms() throws Exception {
+    }
 
-  @Then("^the price alarm list should open$")
-  public void the_price_alarm_list_should_open() throws Exception {
-  }
+    @Then("^the price alarm list should open$")
+    public void the_price_alarm_list_should_open() throws Exception {
+    }
 
-  @Then("^the price alarm list should contain at least (\\d+) entry$")
-  public void the_price_alarm_list_should_contain_at_least_entry(int arg1) throws Exception {
-  }
+    @Then("^the price alarm list should contain at least (\\d+) entry$")
+    public void the_price_alarm_list_should_contain_at_least_entry(int arg1) throws Exception {
+    }
 
-  @Then("^the price alarm list should contain a maximum of (\\d+) entries per page$")
-  public void the_price_alarm_list_should_contain_a_maximum_of_entries_per_page(int arg1) throws Exception {
-  }
+    @Then("^the price alarm list should contain a maximum of (\\d+) entries per page$")
+    public void the_price_alarm_list_should_contain_a_maximum_of_entries_per_page(int arg1) throws Exception {
+    }
 
-  @Given("^the user is on the price alarm list page$")
-  public void the_user_is_on_the_price_alarm_list_page() throws Exception {
-  }
+    @Given("^the user is on the price alarm list page$")
+    public void the_user_is_on_the_price_alarm_list_page() throws Exception {
+    }
 
-  @When("^the user clicks on the \"([^\"]*)\" button next to a price alarm$")
-  public void the_user_clicks_on_the_button_next_to_a_price_alarm(String arg1) throws Exception {
-  }
+    @When("^the user clicks on the \"([^\"]*)\" button next to a price alarm$")
+    public void the_user_clicks_on_the_button_next_to_a_price_alarm(String arg1) throws Exception {
+    }
 
-  @Then("^a popup should open asking the user to confirm the removal$")
-  public void a_popup_should_open_asking_the_user_to_confirm_the_removal() throws Exception {
-  }
+    @Then("^a popup should open asking the user to confirm the removal$")
+    public void a_popup_should_open_asking_the_user_to_confirm_the_removal() throws Exception {
+    }
 
-  @When("^the user confirms the removal of the price alarm$")
-  public void the_user_confirms_the_removal_of_the_price_alarm() throws Exception {
-  }
+    @When("^the user confirms the removal of the price alarm$")
+    public void the_user_confirms_the_removal_of_the_price_alarm() throws Exception {
+    }
 
-  @Then("^the price alarm should be removed from the database$")
-  public void the_price_alarm_should_be_removed_from_the_database() throws Exception {
-  }
+    @Then("^the price alarm should be removed from the database$")
+    public void the_price_alarm_should_be_removed_from_the_database() throws Exception {
+    }
 
-  @Then("^a popup should open where the user can edit the alarm$")
-  public void a_popup_should_open_where_the_user_can_edit_the_alarm() throws Exception {
-  }
+    @Then("^a popup should open where the user can edit the alarm$")
+    public void a_popup_should_open_where_the_user_can_edit_the_alarm() throws Exception {
+    }
 
-  @When("^the user clicks on the \"([^\"]*)\" button$")
-  public void the_user_clicks_on_the_button(String arg1) throws Exception {
-  }
+    @When("^the user clicks on the \"([^\"]*)\" button$")
+    public void the_user_clicks_on_the_button(String arg1) throws Exception {
+    }
 
-  @Then("^the price alarm should be updated in the database$")
-  public void the_price_alarm_should_be_updated_in_the_database() throws Exception {
-  }
+    @Then("^the price alarm should be updated in the database$")
+    public void the_price_alarm_should_be_updated_in_the_database() throws Exception {
+    }
 }

CucumberTests/src/test/java/stepdefs/SearchProduct.java

@@ -1,52 +1,72 @@
 package stepdefs;
 
-import cucumber.api.PendingException;
-import cucumber.api.java.en.Given;
-import cucumber.api.java.en.Then;
-import cucumber.api.java.en.When;
+import io.cucumber.java.PendingException;
+import io.cucumber.java.en.Given;
+import io.cucumber.java.en.Then;
+import io.cucumber.java.en.When;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.support.ui.WebDriverWait;
 
 public class SearchProduct {
-  @Given("^the user is on the landing page$")
-  public void the_user_is_on_the_landing_page() throws Exception {
-  }
+    @Given("^the user is on the landing page$")
+    public void the_user_is_on_the_landing_page() throws Exception {
+        //throw new PendingException();
+        Preconditions.driver.get("https://betterzon.xyz");
+        WebElement logo = (new WebDriverWait(Preconditions.driver, 10))
+                .until(ExpectedConditions.elementToBeClickable(By.cssSelector(".logo")));
+    }
 
-  @When("^the user enters the search term \"([^\"]*)\" and clicks search$")
-  public void the_user_enters_the_search_term_and_clicks_search(String arg0) throws Exception {
-  }
+    @When("^the user enters the search term \"([^\"]*)\" and clicks search$")
+    public void the_user_enters_the_search_term_and_clicks_search(String searchTerm) throws Exception {
+        WebElement searchField = Preconditions.driver.findElement(By.cssSelector(".ng-untouched.ng-pristine.ng-valid"));
+        searchField.sendKeys(searchTerm);
+        searchField.sendKeys(Keys.ENTER);
+        WebElement logo = (new WebDriverWait(Preconditions.driver, 10))
+                .until(ExpectedConditions.elementToBeClickable(By.cssSelector(".logo")));
+    }
 
-  @Then("^the user should see the error page \"([^\"]*)\"$")
-  public void the_user_should_see_the_error_page(String arg0) throws Exception {
-  }
+    @Then("^the user should see the error page \"([^\"]*)\"$")
+    public void the_user_should_see_the_error_page(String arg0) throws Exception {
+        WebElement noProdsFoundMsg = (new WebDriverWait(Preconditions.driver, 10))
+                .until(ExpectedConditions.elementToBeClickable(By.cssSelector(".ng-star-inserted")));
+        assert(noProdsFoundMsg.getText().contains("No Products found!"));
+    }
 
-  @Given("^the user is not logged in$")
-  public void the_user_is_not_logged_in() throws Exception {
-  }
+    @Given("^the user is not logged in$")
+    public void the_user_is_not_logged_in() throws Exception {
+    }
 
-  @Given("^the user is logged in$")
-  public void the_user_is_logged_in() throws Exception {
-  }
+    @Given("^the user is logged in$")
+    public void the_user_is_logged_in() throws Exception {
+    }
 
-  @Then("^the user should see a list of products$")
-  public void the_user_should_see_a_list_of_products() throws Exception {
-  }
+    @Then("^the user should see a list of products$")
+    public void the_user_should_see_a_list_of_products() throws Exception {
+        WebElement product = (new WebDriverWait(Preconditions.driver, 10))
+                .until(ExpectedConditions.elementToBeClickable(By.cssSelector(".productItem.ng-star-inserted")));
+        assert(product.isDisplayed());
+    }
 
-  @When("^the user clicks on the first product$")
-  public void the_user_clicks_on_the_first_product() throws Exception {
-  }
+    @When("^the user clicks on the first product$")
+    public void the_user_clicks_on_the_first_product() throws Exception {
+    }
 
-  @Then("^the user should see the product detail page$")
-  public void the_user_should_see_the_product_detail_page() throws Exception {
-  }
+    @Then("^the user should see the product detail page$")
+    public void the_user_should_see_the_product_detail_page() throws Exception {
+    }
 
-  @Then("^the set price alarm box should show \"([^\"]*)\"$")
-  public void the_set_price_alarm_box_should_show(String arg0) throws Exception {
-  }
+    @Then("^the set price alarm box should show \"([^\"]*)\"$")
+    public void the_set_price_alarm_box_should_show(String arg0) throws Exception {
+    }
 
-  @When("^the user sets a price alarm$")
-  public void the_user_sets_a_price_alarm() throws Exception {
-  }
+    @When("^the user sets a price alarm$")
+    public void the_user_sets_a_price_alarm() throws Exception {
+    }
 
-  @Then("^the user should receive an email confirming the price alarm$")
-  public void the_user_should_receive_an_email_confirming_the_price_alarm() throws Exception {
-  }
+    @Then("^the user should receive an email confirming the price alarm$")
+    public void the_user_should_receive_an_email_confirming_the_price_alarm() throws Exception {
+    }
 }

CucumberTests/src/test/resource/priceAlarms.feature

@@ -1,28 +1,28 @@
 Feature: Price Alarms
 
-  Scenario: Show a list of price alarms
-    Given the user is on the landing page
-    And the user is logged in
-    And the user has at least 1 price alarm set
-    When the user clicks on the profile icon
-    Then the profile details popup should open
-    When the user clicks on price alarms
-    Then the price alarm list should open
-    And the price alarm list should contain at least 1 entry
-    And the price alarm list should contain a maximum of 20 entries per page
+    Scenario: Show a list of price alarms
+        Given the user is on the landing page
+        And the user is logged in
+        And the user has at least 1 price alarm set
+        When the user clicks on the profile icon
+        Then the profile details popup should open
+        When the user clicks on price alarms
+        Then the price alarm list should open
+        And the price alarm list should contain at least 1 entry
+        And the price alarm list should contain a maximum of 20 entries per page
 
-  Scenario: Remove a price alarm
-    Given the user is on the price alarm list page
-    And the user is logged in
-    When the user clicks on the "remove" button next to a price alarm
-    Then a popup should open asking the user to confirm the removal
-    When the user confirms the removal of the price alarm
-    Then the price alarm should be removed from the database
+    Scenario: Remove a price alarm
+        Given the user is on the price alarm list page
+        And the user is logged in
+        When the user clicks on the "remove" button next to a price alarm
+        Then a popup should open asking the user to confirm the removal
+        When the user confirms the removal of the price alarm
+        Then the price alarm should be removed from the database
 
-  Scenario: Edit a price alarm
-    Given the user is on the price alarm list page
-    And the user is logged in
-    When the user clicks on the "edit" button next to a price alarm
-    Then a popup should open where the user can edit the alarm
-    When the user clicks on the "save changes" button
-    Then the price alarm should be updated in the database
+    Scenario: Edit a price alarm
+        Given the user is on the price alarm list page
+        And the user is logged in
+        When the user clicks on the "edit" button next to a price alarm
+        Then a popup should open where the user can edit the alarm
+        When the user clicks on the "save changes" button
+        Then the price alarm should be updated in the database

CucumberTests/src/test/resource/searchProduct.feature

@@ -1,26 +1,26 @@
 Feature: Search a Product
 
-  Scenario: User searches for unknown product
-    Given the user is on the landing page
-    When the user enters the search term "iPhone 13" and clicks search
-    Then the user should see the error page "No products found"
+    Scenario: User searches for unknown product
+        Given the user is on the landing page
+        When the user enters the search term "iPhone 13" and clicks search
+        Then the user should see the error page "No products found"
 
-  Scenario: User is not logged in, searches for known product
-    Given the user is on the landing page
-    And the user is not logged in
-    When the user enters the search term "iPhone 12" and clicks search
-    Then the user should see a list of products
-    When the user clicks on the first product
-    Then the user should see the product detail page
-    And the set price alarm box should show "Log in to continue"
+    Scenario: User is not logged in, searches for known product
+        Given the user is on the landing page
+        And the user is not logged in
+        When the user enters the search term "iPhone 12" and clicks search
+        Then the user should see a list of products
+        When the user clicks on the first product
+        Then the user should see the product detail page
+        And the set price alarm box should show "Log in to continue"
 
-  Scenario: User is logged in, searches for known product
-    Given the user is on the landing page
-    And the user is logged in
-    When the user enters the search term "iPhone 12" and clicks search
-    Then the user should see a list of products
-    When the user clicks on the first product
-    Then the user should see the product detail page
-    And the set price alarm box should show "Set price alarm"
-    When the user sets a price alarm
-    Then the user should receive an email confirming the price alarm
+    Scenario: User is logged in, searches for known product
+        Given the user is on the landing page
+        And the user is logged in
+        When the user enters the search term "iPhone 12" and clicks search
+        Then the user should see a list of products
+        When the user clicks on the first product
+        Then the user should see the product detail page
+        And the set price alarm box should show "Set price alarm"
+        When the user sets a price alarm
+        Then the user should receive an email confirming the price alarm

Frontend/package-lock.json

@@ -4210,6 +4210,12 @@
             "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
             "dev": true
         },
+        "node_modules/cookieconsent": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
+            "integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag==",
+            "peer": true
+        },
         "node_modules/copy-concurrently": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -9270,7 +9276,12 @@
         "node_modules/ngx-cookieconsent": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/ngx-cookieconsent/-/ngx-cookieconsent-2.2.3.tgz",
-            "integrity": "sha512-vg7M4XZSTFRAQq20M0YVJdz5OkXIu0t0MSYos0vvu7oblaEivQstA1Mg5bO7OJYp+oFoTEefWhvO2nCiyHn9SQ=="
+            "integrity": "sha512-vg7M4XZSTFRAQq20M0YVJdz5OkXIu0t0MSYos0vvu7oblaEivQstA1Mg5bO7OJYp+oFoTEefWhvO2nCiyHn9SQ==",
+            "peerDependencies": {
+                "@angular/common": ">=6.0.0",
+                "@angular/core": ">=6.0.0",
+                "cookieconsent": ">=3.1.0"
+            }
         },
         "node_modules/nice-try": {
             "version": "1.0.5",
@@ -19817,6 +19828,12 @@
             "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
             "dev": true
         },
+        "cookieconsent": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
+            "integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag==",
+            "peer": true
+        },
         "copy-concurrently": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -24023,7 +24040,8 @@
         "ngx-cookieconsent": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/ngx-cookieconsent/-/ngx-cookieconsent-2.2.3.tgz",
-            "integrity": "sha512-vg7M4XZSTFRAQq20M0YVJdz5OkXIu0t0MSYos0vvu7oblaEivQstA1Mg5bO7OJYp+oFoTEefWhvO2nCiyHn9SQ=="
+            "integrity": "sha512-vg7M4XZSTFRAQq20M0YVJdz5OkXIu0t0MSYos0vvu7oblaEivQstA1Mg5bO7OJYp+oFoTEefWhvO2nCiyHn9SQ==",
+            "requires": {}
         },
         "nice-try": {
             "version": "1.0.5",

Frontend/src/app/app.component.html

@@ -1,7 +1,7 @@
 <app-top-bar></app-top-bar>
-
-<router-outlet></router-outlet>
-
+<div class="page-content">
+    <router-outlet></router-outlet>
+</div>
 <app-bottom-bar></app-bottom-bar>
 
 

Frontend/src/app/components/bottom-bar/bottom-bar.component.css

@@ -1,28 +1,63 @@
-.bottom-bar-container {
-    background-color: black
-;
-    width: 100%;
-    height: 68px;
-    position: fixed;
-    padding: 16px;
-    align-items: center;
-    bottom: 0;
+.bottom-bar-wrapper {
     display: grid;
-    grid-template-columns: 100px auto 100px;
+    grid-template-columns: 546px 546px 546px;
+    grid-template-rows: 70px 70px 70px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
 }
 
-.betterzonlogo {
-    grid-column-start: 1;
-    grid-column-end: 2;
+.folge-uns-item {
+    grid-column: 2; grid-row: 1;
+    justify-self: center;
 }
 
-.references {
-    grid-column-start: 2;
-    grid-column-end: 3;
-    align-items: center;
+.link-items {
+    grid-column: 2; grid-row: 2;
+    justify-self: center;
 }
 
-.copyright {
-    grid-column-start: 3;
-    grid-column-end: 4;
+.footer-links li {
+    display: inline;
+    margin-right: 60px;
+}
+
+#footer-line {
+    grid-area: 3/1/3/4;
+    width: 100%;
+    background-color: #000000;
+    height: 2px;
+}
+
+.bottom-logo {
+    grid-column: 1; grid-row: 3;
+}
+
+.bottom-info {
+    grid-column: 3; grid-row: 3;
+    justify-self: right;
+}
+
+#folge {
+    font-size: 46px;
+    font-weight: bold;
+    color: #E53167;
+    margin-right: 10px;
+}
+
+#uns {
+    font-size: 32px;
+    font-weight: bold;
+    color: #000000;
+}
+
+#better {
+    font-size: 28px;
+    font-weight: bold;
+    color: #3480E3;
+}
+
+#zon {
+    font-size: 28px;
+    font-weight: bold;
+    color: #E53167;
 }

Frontend/src/app/components/bottom-bar/bottom-bar.component.html

@@ -1,14 +1,26 @@
-<div class="bottom-bar-container">
-    <div class="betterzonlogo">
-        <a>
-            <img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
-        </a>
+<div class="bottom-bar-wrapper">
+    <div class="folge-uns-item">
+        <p><span id="folge">FOLGE</span><span id="uns">UNS</span></p>
     </div>
-    <div class="references">
-        <mat-icon aria-hidden="false" aria-label="Example home icon" [routerLink]="''">home</mat-icon>
+    <div class="link-items">
+        <ul style="list-style-type:none" class="footer-links">
+            <li><a href="https://github.com/Mueller-Patrick/Betterzon">GiT</a></li>
+            <li><a href="https://blog.betterzon.xyz/">BLOG</a></li>
+            <li><a href="https://github.com/Mueller-Patrick/Betterzon/wiki">Wiki</a></li>
+        </ul>
     </div>
-    <div class="copyright">
-        Betterzon ©2020
+    <div id="footer-line">
+
+    </div>
+    <div class="bottom-logo">
+        <p><span id="better">BETTER</span><span id="zon">ZON</span></p>
+    </div>
+    <div class="bottom-info">
+        <ul style="list-style-type:none" class="footer-links">
+            <li><a>DATENSCHUTZERKLÄRUNG</a></li>
+            <li><a>IMPRESSUM</a></li>
+        </ul>
     </div>
 </div>
 
+

Frontend/src/app/components/top-bar/top-bar.component.css

@@ -1,3 +1 @@
-.column {
-    width: 33.33%;
-}
+

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,4 +1,3 @@
-
 <div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
@@ -15,4 +14,3 @@
         </div>
     </div>
 </div>
-<app-footer></app-footer>

Frontend/src/styles.css

@@ -1,22 +1,13 @@
+/* general settings */
+
 * {
-    font-family: 'Roboto', Arial, sans-serif;
-    color: #616161;
     box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
 
-body {
+html, body {
+    height: 100%;
     margin: 0;
-}
-
-.container {
-    display: flex;
-    flex-direction: row;
-}
-
-router-outlet + *  {
-    padding: 0 16px;
+    background-color: #FFFFFF;
 }
 
 /* Text */
@@ -33,6 +24,10 @@ h1, h2 {
     font-weight: lighter;
 }
 
+h3 {
+    font-size: 18px;
+}
+
 p {
     font-size: 14px;
 }
@@ -41,14 +36,21 @@ p {
 
 a {
     cursor: pointer;
-    color: #1976d2;
+    color: #000000;
     text-decoration: none;
 }
 
 a:hover {
     opacity: 0.8;
+    color: #3480E3;
 }
 
+a, p{
+    font-size: 16px;
+}
+
+/* links */
+
 /* Input */
 
 input {
@@ -107,7 +109,7 @@ label {
 app-top-bar {
     width: 100%;
     height: 68px;
-    background-color: #1976d2;
+    background-color: #f2f2f2;
     padding: 16px;
     display: flex;
     flex-direction: row;
@@ -116,9 +118,22 @@ app-top-bar {
     box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
 }
 
-app-top-bar, app-bottom-bar h1 {
+app-top-bar h1 {
     color: white;
     margin: 0;
 }
 
+/* Bottom Bar */
+app-bottom-bar{
+    background-color: #F8F8F8;
+    width: 1640px;
+    height: 210px;
+    position: fixed;
+    margin-top: 90px;
+    bottom: 0;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+