diff --git a/docker-compose.yml b/docker-compose.yml index 4668ea7..a4202b8 100644 --- a/docker-compose.yml +++ b/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 diff --git a/public/assets/css/login-and-registration/login_and_registration.css b/public/assets/css/login-and-registration/login_and_registration.css index 4ecdf60..c7bb82c 100644 --- a/public/assets/css/login-and-registration/login_and_registration.css +++ b/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; - position: absolute; - top: 150px; /* Adjust this value as needed */ - right: 20px; /* Adjust this value as needed */ - z-index: 5; - background: linear-gradient(to bottom, 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; + width: 400px; + position: absolute; + top: 150px; /* Adjust this value as needed */ + right: 20px; /* Adjust this value as needed */ + z-index: 5; + background: linear-gradient( + to bottom, + 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 { - height: 408px; +#login-pane, +#register-pane { + height: 408px; } /* */ .form-container { - width: 70%; /* Adjust width as needed */ - margin: 0 auto; /* Center horizontally */ - text-align: center; /* Center text horizontally */ + width: 70%; /* Adjust width as needed */ + margin: 0 auto; /* Center horizontally */ + text-align: center; /* Center text horizontally */ } .account-portal-button { - text-decoration: none; + text-decoration: none; - padding: 5px 10px; - background-color: red; - border-color: red; + padding: 5px 10px; + background-color: red; + border-color: red; - border: 1px solid red; - border-radius: 8px; - color: white; + border: 1px solid red; + border-radius: 8px; + color: white; } .account-portal-button:hover { - background-color: darkred; - border-color: darkred; - color: white; -} - -body { - font-family: "Golos Text"; + background-color: darkred; + border-color: darkred; + color: white; } /* Apply modern styling to inputs and select elements */ #form-control, select { - width: 70%; /* Make inputs and select elements same width */ - padding: 0.375rem 0.75rem; /* Example padding */ - font-size: 1rem; /* Example font size */ - line-height: 1.5; /* Example line height */ - color: #495057; /* Example text color */ - background-color: #fff; /* Example background color */ - border: 1px solid #ced4da; /* Example border */ - border-radius: 0.25rem; /* Example border radius */ - margin-bottom: 10px; /* Example margin */ + width: 70%; /* Make inputs and select elements same width */ + padding: 0.375rem 0.75rem; /* Example padding */ + font-size: 1rem; /* Example font size */ + line-height: 1.5; /* Example line height */ + color: #495057; /* Example text color */ + background-color: #fff; /* Example background color */ + border: 1px solid #ced4da; /* Example border */ + border-radius: 0.25rem; /* Example border radius */ + 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 */ } - diff --git a/src/app.js b/src/app.js index ba06693..d58a206 100644 --- a/src/app.js +++ b/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; - // ***************************************************** // // ***************************************************** -// create `ExpressHandlebars` instance and configure the layouts and partials dir. -const hbs = handlebars.create({ - extname: "hbs", - layoutsDir: __dirname + "/../public/views/layouts", - partialsDir: __dirname + "/../public/views/partials", -}); +// Start the Database +const db = require("./database/db"); // Import the db module // ***************************************************** -// +// // ***************************************************** +// 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. +// ***************************************************** +// +// ***************************************************** + +// ***************************************************** +// +// ***************************************************** + // 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, "/"))); - // ***************************************************** // // ***************************************************** @@ -380,3 +378,10 @@ async function getFavoriteTeamsForUser(userId) { throw error; // Rethrow the error for handling at a higher level } } + +// ***************************************************** +// +// ***************************************************** + +// Export the app object to index.js +module.exports = app; diff --git a/src/config/handlebars.js b/src/config/handlebars.js new file mode 100644 index 0000000..af539b8 --- /dev/null +++ b/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; diff --git a/src/config/session.js b/src/config/session.js new file mode 100644 index 0000000..cb62776 --- /dev/null +++ b/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; diff --git a/config/database.js b/src/database/db.js similarity index 100% rename from config/database.js rename to src/database/db.js diff --git a/src/init_data/create.sql b/src/database/init_data/create.sql similarity index 100% rename from src/init_data/create.sql rename to src/database/init_data/create.sql