Merge branch 'dev' of https://github.com/JoaquinPar/2800-202510-BBY14 into feature/layoutPage

README.md

@@ -54,9 +54,12 @@ Example:
 retirementCalculator/
 ├── src/
 │   ├── views/
-|   ├── css/
+│   │   └── partials/
-|   ├── images/
+│   ├── css/
-|   └── scripts/
+│   ├── images/
+│   ├── scripts/
+│   └── utils/
+│
 ├── app.js
 ├── .env.example
 ├── .gitignore

app.js

@@ -25,6 +25,7 @@ app.set('view engine', 'ejs');
 app.set('views',path.join(__dirname, 'src/views'));
 app.use(express.urlencoded({ extended: true }));
 app.use("/static", express.static("./src/public"));
+app.use("/images", express.static("./src/public/images"));
 
 /*** Database ***/
 const { connectMongo, getCollection } = require("./src/database/connection");
@@ -37,26 +38,10 @@ async function initDatabase() {
     users = await getCollection(db, "users");
 }
 
-initDatabase().then(() => {
-    // Import authentication handler
-    app.use(require("./src/auth/authentication")(users));
-
-    // Import middleware
-    const middleware = require("./src/auth/middleware")(users);
-
-    // Apply middleware to protected user routes
-    app.use(require("./src/router/user")(middleware));
-});
-
 /*** ROUTINGS ***/
 
 app.get('/', (req, res) => {
     if (!req.session.errMessage) req.session.errMessage = "";
-    res.render('index');
-    return res.status(status.Ok);
-});
-
-app.get('/landing', (req, res) => {
     res.render('landing');
     return res.status(status.Ok);
 });
@@ -80,11 +65,26 @@ app.get('/aboutUs', (req, res) => {
     return res.status(status.Ok);
 });
 
-app.get('/*splat', (req, res) => {
-    res.send('404 Not Found');
-    return res.status(status.NotFound);
-});
 
-app.listen(port, () => {
+// Initialize database and start app
-    console.log(`Server listening on port ${port}`);
+initDatabase().then(() => {
+    console.log("Successfully connected to MongoDB");
+
+    // Import authentication handler
+    app.use(require("./src/auth/authentication")(users));
+
+    // Import middleware & apply to user routes
+    const middleware = require("./src/auth/middleware")(users);
+    app.use(require('./src/router/user')(middleware));
+
+    // 404 handler
+    app.get('/*splat', (req, res) => {
+        res.send('404 Not Found');
+        return res.status(status.NotFound);
+    });    
+
+    // Start app
+    app.listen(port, () => {
+        console.log(`Server listening on port ${port}`);
+    });    
 });

src/auth/authentication.js

@@ -5,8 +5,20 @@ const salt = 12;
 
 module.exports = (users) => {
     const router = require("express").Router();
+
+    router.get("/logout", (req, res) => {
+        req.session.destroy();
+        // res.status(status.Unauthorized);
+        return res.redirect('/login');
+    });
     
     router.post("/login", async (req, res) => {
+
+        if (req.session.authenticated) {
+            res.redirect("/home");
+            return res.status(status.Ok);        
+        }
+
         const credentialSchema = joi.object({
             email: joi.string().email().required(),
             password: joi.string().max(20).required(),
@@ -27,7 +39,7 @@ module.exports = (users) => {
                 return res.redirect("/login");
             }
 
-            if (!bcrypt.compare(req.body.password, user.password)) {
+            if (!bcrypt.compareSync(req.body.password, user.password)) {
                 req.session.errMessage = "Incorrect password";
                 res.status(status.Unauthorized);
                 return res.redirect("/login");
@@ -64,7 +76,7 @@ module.exports = (users) => {
             return res.redirect("/signup");
         }
 
-        let hashedPassword = await bcrypt.hash(req.body.password, salt);
+        let hashedPassword = await bcrypt.hashSync(req.body.password, salt);
 
         users.insertOne({
             email: req.body.email,
@@ -86,11 +98,5 @@ module.exports = (users) => {
         });
     });
 
-    router.get("/logout", (req, res) => {
-        req.session.destroy();
-        // res.status(status.Unauthorized);
-        return res.redirect('/login');
-    });
-
     return router;
 }

src/auth/middleware.js

@@ -1,6 +1,11 @@
 const status = require("../util/statuses");
 
-module.exports = (users) => {
+/**
+ * createMiddleware returns a middleware function for express.
+ * @param {MongoClient.collection} users
+ * @return {async function} 
+ */
+const createMiddleware = (users) => {
     return async (req, res, next) => {
         if (!req.session.authenticated || !req.session.email) {
             req.session.errMessage = "Please login to view that resource";
@@ -18,5 +23,7 @@ module.exports = (users) => {
     
         req.user = user;
         next();
-    }
+    };
-};
+}
+
+module.exports = createMiddleware;

src/database/connection.js

@@ -3,7 +3,8 @@ const MongoClient = require("mongodb").MongoClient;
 /**
  * connectMongo returns a database connection to MongoDB
  * @param {string} mongoURI 
- * @param {string} databaseName 
+ * @param {string} databaseName
+ * @return {MongoClient}
  */
 const connectMongo = async (mongoURI, databaseName) => {
     const database = await MongoClient.connect(mongoURI, { connectTimeoutMS: 1000 });

src/router/user.js

@@ -1,35 +1,44 @@
+const status = require("../util/statuses");
+
 module.exports = (middleware) => {
     const router = require("express").Router();
+    
+    router.use(middleware);
 
-    router.get('/home', middleware, async (req, res) => {
+    router.get('/home', async (req, res) => {
         res.render('home', { user: req.user });
         return res.status(status.Ok);
     });
 
-    router.get('/assets', middleware, (req, res) => {
+    router.get('/assets', (req, res) => {
         res.render('assets', { user: req.user });
         return res.status(status.Ok);
     });
 
-    router.get('/plans', middleware, (req, res) => {
+    router.get('/plans', (req, res) => {
         res.render('plans', { user: req.user });
         return res.status(status.Ok);
     });
 
-    router.get('/more', middleware, (req, res) => {
+    router.get('/more', (req, res) => {
         res.render('more', { user: req.user });
         return res.status(status.Ok);
     });
 
-    router.get('/profile', middleware, (req, res) => {
+    router.get('/profile', (req, res) => {
         res.render('profiles', { user: req.user });
         return res.status(status.Ok);
     });
 
-    router.get('/settings', middleware, (req, res) => {
+    router.get('/settings', (req, res) => {
         res.render('settings', { user: req.user });
         return res.status(status.Ok);
     });
 
+    router.get('/logout', (req, res) => {
+        req.session.destroy();
+        return res.redirect('/login');
+    });
+
     return router;
 };

src/views/home.ejs

@@ -1,8 +1,9 @@
 <%- include("./partials/fileHeader", {title: "RCalculator"}) %>
 
 <body>
-    <%- include("./partials/header") %>
     <main>
+        <%- include("./partials/header") %>
+        Welcome: <%= user.email %>
         The Dashboard Page
     </main>
     <footer>
@@ -11,7 +12,6 @@
                 <p>&copy; 2025 RCalculator. All rights reserved.</p>
              </div>
         </div>
-        <%- include("./partials/navBar") %>
     </footer>
 </body>
 

src/views/login.ejs

@@ -32,6 +32,10 @@
                     <button type="submit"
                         class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
                 </div>
+                <div class="mt-5 block justify-between items-center">
+                    <label>Don't have an account?</label>
+                    <a href="/signup" class="text-indigo-600 font-semibold">Register</a>
+                </div>
             </div>
         </form>
     </div>

src/views/partials/header.ejs

@@ -1,7 +1,7 @@
 <header>
     <nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-            <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
+            <a href="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
                 <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/rekor.png" class="h-8" alt="Flowbite Logo" />
                 <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">RCalculator</span>
             </a>
@@ -18,7 +18,10 @@
                     </li>
                     <li>
                         <a href="/more" class="block py-2 px-3 lg:p-0 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent">More</a>
-                    </li>                        
+                    </li>
+                    <li>
+                        <a href="/logout" class="block py-2 px-3 lg:p-0 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent">Logout</a>
+                    </li>
                 </ul>
             </div>
         </div>

src/views/partials/headerStart.ejs

@@ -1,7 +1,7 @@
 <header>
     <nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-            <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
+            <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
                 <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/rekor.png" class="h-8" alt="Flowbite Logo" />
                 <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">RCalculator</span>
             </a>
@@ -17,7 +17,7 @@
             <div class="hidden w-full lg:block lg:w-auto" id="navbar-solid-bg">
                 <ul class="flex flex-col font-medium mt-4 rounded-lg bg-gray-50 lg:space-x-8 rtl:space-x-reverse lg:flex-row lg:mt-0 lg:border-0 lg:bg-transparent dark:bg-gray-800 lg:dark:bg-transparent dark:border-gray-700">
                     <li>
-                        <a href="/landing" class="block py-2 px-3 lg:p-0 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent">Home</a>
+                        <a href="/" class="block py-2 px-3 lg:p-0 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent">Home</a>
                     </li>
                     <li>
                         <a href="/aboutUs" class="block py-2 px-3 lg:p-0 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent">About Us</a>

src/views/signup.ejs

@@ -35,6 +35,10 @@
                     <button type="submit"
                         class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Signup</button>
                 </div>
+                <div class="mt-5 block justify-between items-center">
+                    <label>Already have an account?</label>
+                    <a href="/login" class="text-indigo-600 font-semibold">Login</a>
+                </div>
             </div>
         </form>
     </div>