More dependencies split from app.js. Home screen buttons are currently not working

docker-compose.yml

@@ -12,7 +12,7 @@ services:
       - "5432:5432"
     volumes:
       - users-database:/var/lib/postgresql/data
-      - src/init_data:/docker-entrypoint-initdb.d
+      - /src/database/init_data:/docker-entrypoint-initdb.d
   web:
     container_name: node-web-interface
     image: node:lts

public/assets/css/login-and-registration/login_and_registration.css

@@ -1,71 +1,71 @@
-
 /* Standardized Styling for Login, Registration, and Account Panes */
 .account-portal-container {
-    width: 400px;
+	width: 400px;
-    position: absolute;
+	position: absolute;
-    top: 150px; /* Adjust this value as needed */
+	top: 150px; /* Adjust this value as needed */
-    right: 20px; /* Adjust this value as needed */
+	right: 20px; /* Adjust this value as needed */
-    z-index: 5;
+	z-index: 5;
-    background: linear-gradient(to bottom, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+	background: linear-gradient(
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+		to bottom,
-    border: 1px solid gray;
+		white,
+		rgb(245, 245, 245),
+		rgb(227, 227, 227)
+	); /* Gradient from white to gray */
+	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+	border: 1px solid gray;
 }
 
 /* Set Login and Registration Panes to be same size */
-#login-pane, #register-pane {
+#login-pane,
-    height: 408px;
+#register-pane {
+	height: 408px;
 }
 
 /* */
 .form-container {
-    width: 70%; /* Adjust width as needed */
+	width: 70%; /* Adjust width as needed */
-    margin: 0 auto; /* Center horizontally */
+	margin: 0 auto; /* Center horizontally */
-    text-align: center; /* Center text horizontally */
+	text-align: center; /* Center text horizontally */
 }
 
 .account-portal-button {
-    text-decoration: none;
+	text-decoration: none;
 
-    padding: 5px 10px;
+	padding: 5px 10px;
-    background-color: red;
+	background-color: red;
-    border-color: red;
+	border-color: red;
 
-    border: 1px solid red;
+	border: 1px solid red;
-    border-radius: 8px;
+	border-radius: 8px;
-    color: white;
+	color: white;
 }
 
 .account-portal-button:hover {
-    background-color: darkred;
+	background-color: darkred;
-    border-color: darkred;
+	border-color: darkred;
-    color: white;
+	color: white;
-}
-
-body {
-    font-family: "Golos Text";
 }
 
 /* Apply modern styling to inputs and select elements */
 #form-control,
 select {
-    width: 70%; /* Make inputs and select elements same width */
+	width: 70%; /* Make inputs and select elements same width */
-    padding: 0.375rem 0.75rem; /* Example padding */
+	padding: 0.375rem 0.75rem; /* Example padding */
-    font-size: 1rem; /* Example font size */
+	font-size: 1rem; /* Example font size */
-    line-height: 1.5; /* Example line height */
+	line-height: 1.5; /* Example line height */
-    color: #495057; /* Example text color */
+	color: #495057; /* Example text color */
-    background-color: #fff; /* Example background color */
+	background-color: #fff; /* Example background color */
-    border: 1px solid #ced4da; /* Example border */
+	border: 1px solid #ced4da; /* Example border */
-    border-radius: 0.25rem; /* Example border radius */
+	border-radius: 0.25rem; /* Example border radius */
-    margin-bottom: 10px; /* Example margin */
+	margin-bottom: 10px; /* Example margin */
 }
 
 /* Adjust styling for form labels */
 .form-label {
-    font-weight: bold; /* Example font weight */
+	font-weight: bold; /* Example font weight */
 }
 
 /* Adjust styling for buttons */
 .btn {
-    margin-top: 30px; /* Example margin */
+	margin-top: 30px; /* Example margin */
 }
-

src/app.js

@@ -13,33 +13,35 @@ const bcrypt = require("bcryptjs"); //  To hash passwords
 const axios = require("axios"); // To make HTTP requests from our server. We'll learn more about it in Part C.
 const moment = require("moment"); // To extract current time data
 
-// Start the Database
-const db = require("../config/database"); // Import the db module
-
-// Export the app object to index.js
-module.exports = app;
-
 // *****************************************************
 // <!-- Section 2 : Connect to DB -->
 // *****************************************************
 
-// create `ExpressHandlebars` instance and configure the layouts and partials dir.
+// Start the Database
-const hbs = handlebars.create({
+const db = require("./database/db"); // Import the db module
-	extname: "hbs",
-	layoutsDir: __dirname + "/../public/views/layouts",
-	partialsDir: __dirname + "/../public/views/partials",
-});
 
 // *****************************************************
-// <!-- Section 3 : App Settings -->
+// <!-- Section 3 : Handlebars COnfiguration -->
 // *****************************************************
 
+// express-handlebars is a Handlebars view engine for Express. Handlebars.js is a popular templating engine that is powerful, flexible, and helps to create reusable HTML templates.
+const hbs = require("./config/handlebars"); // Import the hbs module
+
 // Register `hbs` as our view engine using its bound `engine()` function.
 app.engine("hbs", hbs.engine);
 app.set("view engine", "hbs");
-app.set("views", path.join(__dirname, "/../public/views"));
+app.set("views", path.join(__dirname, "../public/views"));
+app.use(express.static(path.join(__dirname, "../public/assets"))); // Serve asset files from the 'public/assets' directory
 app.use(bodyParser.json()); // specify the usage of JSON for parsing request body.
 
+// *****************************************************
+// <!-- Section 4 : Session Setup -->
+// *****************************************************
+
+// *****************************************************
+// <!-- Section 5 : Website Routes -->
+// *****************************************************
+
 // initialize session variables
 app.get("/welcome", (req, res) => {
 	res.json({ status: "success", message: "Welcome!" });
@@ -73,10 +75,6 @@ app.use(async function (req, res, next) {
 	next();
 });
 
-// Serve static files from the 'public' directory
-app.use(express.static(path.join(__dirname, "/../public/assets")));
-app.use(express.static(path.join(__dirname, "/")));
-
 // *****************************************************
 // <!-- Section 4 : Middleware -->
 // *****************************************************
@@ -380,3 +378,10 @@ async function getFavoriteTeamsForUser(userId) {
 		throw error; // Rethrow the error for handling at a higher level
 	}
 }
+
+// *****************************************************
+// <!-- Section 6 : Export the App Module to Index.js -->
+// *****************************************************
+
+// Export the app object to index.js
+module.exports = app;

src/config/handlebars.js

@@ -0,0 +1,8 @@
+// create `ExpressHandlebars` instance and configure the layouts and partials dir.
+const expressHandlebars = require("express-handlebars"); // express-handlebars is a Handlebars view engine for Express. Handlebars.js is a popular templating engine that is powerful, flexible, and helps to create reusable HTML templates.
+const hbs = expressHandlebars.create({
+	extname: "hbs",
+	layoutsDir: __dirname + "./../../public/views/layouts",
+	partialsDir: __dirname + "./../../public/views/partials",
+});
+module.exports = hbs;

src/config/session.js

@@ -0,0 +1,36 @@
+const session = require("express-session"); // express-session is a middleware for Express that enables session management. It allows you to store user data between HTTP requests.
+const bodyParser = require("body-parser"); // body-parser is a middleware that parses incoming request bodies in a middleware before your handlers. It's used to extract the entire body portion of an incoming request stream and exposes it on req.body.
+
+const sessionConfig = (app) => {
+	app.use(
+		session({
+			secret: process.env.SESSION_SECRET,
+			saveUninitialized: false,
+			resave: false,
+		})
+	);
+
+	app.use(
+		bodyParser.urlencoded({
+			extended: true,
+		})
+	);
+
+	// Check if user has any favorite teams in database
+	app.use(async function (req, res, next) {
+		res.locals.user = req.session.user;
+
+		if (res.locals.user) {
+			try {
+				res.locals.fav_teams = await getFavoriteTeamsForUser(
+					res.locals.user.userid
+				);
+			} catch (error) {
+				console.error("Error fetching favorite teams:", error);
+			}
+		}
+		next();
+	});
+};
+
+module.exports = sessionConfig;