feature/completed getting geolocation data

feature/questionnaire page create + saving to MongoDb

app.js

@@ -28,6 +28,7 @@ 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"));
+app.use(express.json());
 
 /*** Database ***/
 const { connectMongo, getCollection } = require("./src/database/connection");
@@ -49,6 +50,8 @@ app.get('/', (req, res) => {
 });
 
 app.get('/signup', (req, res) => {
+    const ignore = ["User not found", "Incorrect password"];
+    if (ignore.includes(req.session.errMessage)) req.session.errMessage = "";
     res.render('signup', { errMessage: req.session.errMessage });
     return res.status(status.Ok);
 });
@@ -67,6 +70,15 @@ app.get('/aboutUs', (req, res) => {
     return res.status(status.Ok);
 });
 
+app.post('/api/location', async (req,res) => {
+    const { latitude, longitude } = req.body;
+
+    const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&result_type=country&key=${process.env.geolocation_api}`);
+
+    const data = await response.json();
+
+    res.json(data);
+});
 
 // Initialize database and start app
 initDatabase().then(() => {

src/auth/authentication.js

@@ -3,15 +3,11 @@ const bcrypt = require('bcrypt');
 const joi = require("joi");
 const salt = 12;
 
-const middleware = require("./middleware");
-
-
 module.exports = (users) => {
     const router = require("express").Router();
 
     router.get("/logout", (req, res) => {
         req.session.destroy();
-        // res.status(status.Unauthorized);
         return res.redirect('/login');
     });
     
@@ -43,8 +39,6 @@ module.exports = (users) => {
                 return res.redirect("/login");
             }
 
-            console.log("User logged in successfully");
-            console.log("User email: " + req.body.email);
             req.session.authenticated = true;
             req.session.email = req.body.email;
             req.session.errMessage = "";
@@ -56,7 +50,7 @@ module.exports = (users) => {
     router.post("/signup", async (req, res) => {
         const userSchema = joi.object({
             email: joi.string().email().required(),
-            // name: joi.string().alphanum().max(20).required(),
+            name: joi.string().alphanum().max(20).required(),
             password: joi.string().max(20).min(8).required(),
             repassword: joi.string().max(20).min(8).required(),
         });
@@ -79,21 +73,20 @@ module.exports = (users) => {
 
         users.insertOne({
             email: req.body.email,
-            // name: req.body.name,
+            name: req.body.name,
             password: hashedPassword,
         }).then((results, err) => {
             if (err) {
-                res.status(status.InternalServerError);
                 console.error(err);
-                return res.send("Internal server error");
+                res.session.errMessage = "Internal server error";
+                return res.status(status.InternalServerError).redirect("/signup");
             }
 
             req.session.authenticated = true;
             req.session.email = req.body.email;
 
             req.session.errMessage = "";
-            res.status(status.Ok);
+            return res.status(status.Ok).redirect("/home");
-            return res.redirect("/home");
         });
     });
 

src/database/connection.js

@@ -16,6 +16,7 @@ const connectMongo = async (mongoURI, databaseName) => {
  * getCollection object to interact with MongoDB
  * @param {MongoClient} dbo
  * @param {string} collection 
+ * @return {MongoClient.collection}
  */
 const getCollection = async (dbo, collection) => {
     return await dbo.collection(collection);

src/public/scripts/geolocation.js

@@ -0,0 +1,24 @@
+function getLocation() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(success, error);
+    }
+}
+
+function success(position) {
+    const { latitude, longitude } = position.coords;
+
+    fetch("api/location" , {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ latitude, longitude })
+    }).then(res => res.json())
+    .then(data => {
+        console.log(data.results[0].formatted_address);
+    })
+}
+
+function error(err) {
+    console.error("Geolocation error: ", err);
+}

src/public/scripts/profile.js

@@ -0,0 +1,75 @@
+/**
+ * lockAccount resets inputs and disabled inputs
+ */
+function lockAccount() {
+  // Clear unsaved inputs on page load (refresh doesnt clear them)
+  document.getElementById("account-form").reset();
+
+  document.getElementById("save-account").disabled = true;
+  document.getElementById("email").disabled = true;
+  document.getElementById("name").disabled = true;
+  document.getElementById("password").disabled = true;
+  document.getElementById("repassword").disabled = true;
+  document.getElementById("save-account").classList.add("cursor-not-allowed");
+
+  document.getElementById("edit-account").innerHTML = "Edit";
+  document.getElementById("edit-account").onclick = unlockAccount;
+}
+
+/**
+ * lockPersonal resets inputs and disabled inputs
+ */
+function lockPersonal() {
+  // Clear unsaved inputs on page load (refresh doesnt clear them)
+  document.getElementById("personal-form").reset();
+
+  document.getElementById("save-personal").disabled = true;
+  document.getElementById("dob").disabled = true;
+  document.getElementById("education").disabled = true;
+  document.getElementById("ms-single").disabled = true;
+  document.getElementById("ms-married").disabled = true;
+  document.getElementById("ms-divorced").disabled = true;
+  document.getElementById("ms-widowed").disabled = true;
+  document.getElementById("save-personal").classList.add("cursor-not-allowed");
+
+  document.getElementById("edit-personal").innerHTML = "Edit";
+  document.getElementById("edit-personal").onclick = unlockPersonal;
+}
+
+/**
+ * unlockAccount removes disabled from inputs and
+ * allows users to edit their profile.
+ */
+function unlockAccount() {
+  document.getElementById("save-account").disabled = false;
+  // document.getElementById("email").disabled = false;
+  document.getElementById("name").disabled = false;
+  document.getElementById("password").disabled = false;
+  document.getElementById("repassword").disabled = false;
+  document.getElementById("save-account").classList.remove("cursor-not-allowed");
+
+  document.getElementById("edit-account").innerHTML = "Cancel changes";
+  document.getElementById("edit-account").onclick = lockAccount;
+}
+
+/**
+ * unlocPersonal removes disabled from inputs and
+ * allows users to edit their personal information.
+ */
+function unlockPersonal() {
+  document.getElementById("save-personal").disabled = false;
+  document.getElementById("dob").disabled = false;
+  document.getElementById("education").disabled = false;
+  document.getElementById("ms-single").disabled = false;
+  document.getElementById("ms-married").disabled = false;
+  document.getElementById("ms-divorced").disabled = false;
+  document.getElementById("ms-widowed").disabled = false;
+  document.getElementById("save-personal").classList.remove("cursor-not-allowed");
+
+  document.getElementById("edit-personal").innerHTML = "Cancel changes";
+  document.getElementById("edit-personal").onclick = lockPersonal;
+}
+
+// On page load, ensure forms are locked and reset
+lockAccount();
+// lockPersonal();

src/router/user.js

@@ -1,5 +1,7 @@
 const status = require("../util/statuses");
+const bcrypt = require('bcrypt');
 const joi = require("joi");
+const salt = 12;
 
 module.exports = (middleware, users) => {
     const router = require("express").Router();
@@ -27,7 +29,7 @@ module.exports = (middleware, users) => {
     });
 
     router.get('/profile', (req, res) => {
-        res.render('profiles', { user: req.user });
+        res.render('profile', { user: req.user, errMessage: req.session.errMessage });
         return res.status(status.Ok);
     });
 
@@ -43,8 +45,6 @@ module.exports = (middleware, users) => {
     });
 
     router.post('/questionnaire', (req, res) => {
-        console.log("Questionnaire POST body:", req.body);
-    
         const questionnaireSchema = joi.object({
             dob: joi.date().required(),
             education: joi.string().valid('primary', 'secondary', 'tertiary', 'postgraduate').required(),
@@ -108,9 +108,57 @@ module.exports = (middleware, users) => {
         });
     });
 
-    router.get('/logout', (req, res) => {
+    router.post("/updateAccount", async (req, res) => {
-        req.session.destroy();
+        const accountSchema = joi.object({
-        return res.redirect('/login');
+            email: joi.string().email(),
+            name: joi.string().alphanum().max(20),
+            password: joi.string().max(20).min(8),
+            repassword: joi.string().max(20).min(8),
+        });
+
+        const valid = accountSchema.validate(req.body);
+
+        if (valid.err) {
+            req.session.errMessage = "Invalid input",
+            res.status(status.BadRequest);
+            return res.redirect("/profile");
+        }
+
+        let update = {
+            // email: req.body.email,
+            name: req.body.name,
+        };
+
+        if ((req.body.password != "") && (req.body.password != req.body.repassword)) {
+            req.session.errMessage = "New passwords must match";
+            res.status(status.BadRequest);
+            return res.redirect("/profile");
+        } else if (req.body.password != "") {
+            let hashedPassword = await bcrypt.hashSync(req.body.password, salt);
+            update.password = hashedPassword;
+        }
+
+        users.updateOne(
+            { email: req.session.email },
+            { $set: update }
+        ).then((result) => {
+            if (result.matchedCount === 0) {
+                console.log(`User not found during account update: ${req.session.email}`);
+                req.session.errMessage = "User session invalid. Please log in again."; 
+                res.status(status.NotFound).redirect("/login"); 
+                return;
+            }
+            if (result.modifiedCount === 0 && result.matchedCount === 1) {
+                console.log(`User account data unchanged (already up-to-date): ${req.session.email}`);
+            }
+        
+            req.session.errMessage = ""; 
+            return res.status(status.Ok).redirect("/profile"); 
+        }).catch(err => { 
+            console.error("Error updating account in database:", err);
+            req.session.errMessage = "An error occurred while saving your information. Please try again.";
+            return res.status(status.InternalServerError).redirect("/profile"); 
+        });
     });
 
     return router;

src/views/aboutUs.ejs

@@ -1,56 +1,39 @@
-<html>
+<%- include("./partials/fileHeader") %>
-    <head>
+<%- include("./partials/headerStart") %>
-        <title>RCalculator</title>
-        <link rel="icon" href="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/rekor.png">
-        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
-    </head>
-    <body class="bg-white dark:bg-gray-900">
-        <%- include("./partials/headerStart") %>
-        <main>
-            <section class="bg-white dark:bg-gray-900 py-12 md:py-20">
-                <div class="max-w-screen-lg mx-auto px-4 text-center">
-                    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">About RCalculator</h1>
-                    <p class="mb-12 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 dark:text-gray-400">Welcome to RCalculator, your partner in building a secure and fulfilling financial future.</p>
-                </div>
 
-                <div class="max-w-screen-md mx-auto px-4">
+<main>
-                    <h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white text-center">Our Mission</h2>
+    <section class="bg-white dark:bg-gray-900 py-12 md:py-20">
-                    <p class="mb-6 font-normal text-gray-600 dark:text-gray-400 text-lg text-center">
+        <div class="max-w-screen-lg mx-auto px-4 text-center">
-                        Our mission is to empower you with the tools and insights needed to take control of your long-term financial goals.
+            <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">About RCalculator</h1>
-                    </p>
+            <p class="mb-12 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 dark:text-gray-400">Welcome to RCalculator, your partner in building a secure and fulfilling financial future.</p>
-                    <div class="prose lg:prose-lg dark:prose-invert mx-auto text-gray-600 dark:text-gray-400">
+        </div>
-                        <p class="mb-4">
+
-                            We believe that planning for your desired future, especially retirement, shouldn't be daunting. It doesn't matter what your current age or career status is – starting now is what counts.
+        <div class="max-w-screen-md mx-auto px-4">
-                        </p>
+            <h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white text-center">Our Mission</h2>
-                        <p class="mb-4">
+            <p class="mb-6 font-normal text-gray-600 dark:text-gray-400 text-lg text-center">
-                            At RCalculator, we help you trace a personalized plan that suits your unique aspirations. We provide clear, actionable advice and projections to guide you on how to get there, whether you're just starting your career, mid-way through, or nearing retirement.
+                Our mission is to empower you with the tools and insights needed to take control of your long-term financial goals.
-                        </p>
+            </p>
-                        <p>
+            <div class="prose lg:prose-lg dark:prose-invert mx-auto text-gray-600 dark:text-gray-400">
-                            Let us help you navigate the path to financial independence and achieve the retirement lifestyle you envision.
+                <p class="mb-4">
-                        </p>
+                    We believe that planning for your desired future, especially retirement, shouldn't be daunting. It doesn't matter what your current age or career status is – starting now is what counts.
-                    </div>
+                </p>
-                </div>
+                <p class="mb-4">
-                <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+                    At RCalculator, we help you trace a personalized plan that suits your unique aspirations. We provide clear, actionable advice and projections to guide you on how to get there, whether you're just starting your career, mid-way through, or nearing retirement.
-                    <a href="/login" class="inline-flex justify-center items-center mt-4 py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
+                </p>
-                        Get started
+                <p>
-                        <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    Let us help you navigate the path to financial independence and achieve the retirement lifestyle you envision.
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </p>
-                        </svg>
-                    </a>
-                </div>
-            </section>
-        </main>
-        <footer>
-            <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-                <div class="container mx-auto">
-                    <p>&copy; 2025 RCalculator. All rights reserved.</p>
-                 </div>
             </div>
-        </footer>
+        </div>
-        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+        <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+            <a href="/signup" class="inline-flex justify-center items-center mt-4 py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
-    </body>
+                Get started
-</html>
+                <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
+        </div>
+    </section>
+</main>
 
-
+<%- include("./partials/footer") %>
-<!--fixed bottom-0 left-0 z-50 lg:hidden w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-400-->

src/views/assets.ejs

@@ -1,23 +1,9 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
-    <head>
+
-        <meta charset="UTF-8">
+<main>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    The Assets Page
-        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</main>
-        <title>Document</title>
+
-    </head>
+<%- include("./partials/navBar") %>
-    <body>
+<%- include("./partials/footer") %>
-        <%- include("./partials/header") %>
-        <main>
-            The Assets Page
-        </main>
-        <footer>
-            <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-                <div class="container mx-auto">
-                    <p>&copy; 2025 RCalculator. All rights reserved.</p>
-                </div>
-            </div>
-            <%- include("./partials/navBar") %>
-        </footer>
-    </body>
-</html>

src/views/home.ejs

@@ -1,30 +1,15 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
 
-<head>
+<main>
-    <meta charset="UTF-8">
+    <%- include("./partials/header") %>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    Welcome: <%= user.email %>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    The Dashboard Page
-    <title>Document</title>
+    <% if(user.authenticated) { %>
-</head>
+        <%= user.email %>
+        <%= user.errMessage %>
+    <% } %>
+</main>
 
-<body>
+<%- include("./partials/navBar") %>
-    <main>
+<%- include("./partials/footer") %>
-        <%- include("./partials/header") %>
-        Welcome: <%= user.email %>
-        The Dashboard Page
-        <% if(user.authenticated) { %>
-            <%= user.email %>
-            <%= user.errMessage %>
-        <% } %>
-    </main>
-    <footer>
-        <div class="fixed bottom-0 left-0 z-50 sm:hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-            <div class="container mx-auto">
-                <p>&copy; 2025 RCalculator. All rights reserved.</p>
-             </div>
-        </div>
-    </footer>
-</body>
-
-</html>

src/views/index.ejs

@@ -1,23 +1,9 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
 
-<head>
+<main>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <title>Document</title>
-</head>
-
-<body>
     The Index Page
-    <footer>
+</main>
-        <div class="fixed bottom-0 left-0 z-50 sm:hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-            <div class="container mx-auto">
-                <p>&copy; 2025 RCalculator. All rights reserved.</p>
-             </div>
-        </div>
-        <%- include("./partials/navBar") %>
-    </footer>
-</body>
 
-</html>
+<%- include("./partials/navBar") %>
+<%- include("./partials/footer") %>

src/views/landing.ejs

@@ -1,38 +1,24 @@
-<html>
+<%- include("./partials/fileHeader") %>
-    <head>
+<%- include("./partials/headerStart") %>
-        <title>RCalculator</title>
+
-        <link rel="icon" href="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/rekor.png">
+<main>
-        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
+    <section class="bg-center bg-no-repeat bg-cover bg-[url('/images/bg1.jpg')] bg-gray-400 bg-blend-multiply">
-    </head>
+        <div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
-    <body class="bg-white dark:bg-gray-900">
+            <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">Plan now, live better.</h1>
-        <%- include("./partials/headerStart") %>
+            <p class="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">Planning your retirement is a crucial step towards financial security and a happy future.</p>
-        <main>
+            <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
-            <section class="bg-center bg-no-repeat bg-cover bg-[url('/images/bg1.jpg')] bg-gray-400 bg-blend-multiply">
+                <a href="/signup" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
-                <div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
+                    Get started
-                    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">Plan now, live better.</h1>
+                    <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                    <p class="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">Planning your retirement is a crucial step towards financial security and a happy future.</p>
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-                    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+                    </svg>
-                        <a href="/login" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
+                </a>
-                            Get started
+                <a href="/aboutUs" class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ms-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400">
-                            <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    Learn more
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </a>  
-                            </svg>
-                        </a>
-                        <a href="/aboutUs" class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ms-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400">
-                            Learn more
-                        </a>  
-                    </div>
-                </div>
-            </section>
-        </main>
-        <footer>
-            <div class="fixed bottom-0 left-0 z-50 sm:hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-                <div class="container mx-auto">
-                    <p>&copy; 2025 RCalculator. All rights reserved.</p>
-                 </div>
             </div>
-        </footer>
+        </div>
-        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    </section>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+</main>
-    </body>
+
-</html>
+<%- include("./partials/footer") %>

src/views/login.ejs

@@ -1,19 +1,7 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
 
-<head>
+<main>
-    <meta charset="UTF-8">
+    <div class="flex justify-center items-center h-screen">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Page</title>
-    <link rel="stylesheet" href="/static/css/style.css" <link rel="stylesheet" href="/static/css/style.css">
-    <link rel="stylesheet" href="/static/css/style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
-</head>
-
-<body>
-    <div class="flex justify-center items-center h-screen bg-gray-700">
         <form action="/login" method="POST">
             <div class="w-96 p-6 shadow-1g bg-white rounded-md">
                 <h1 class="text-3xl block text-center font-semibold"> Login </h1>
@@ -51,7 +39,6 @@
             </div>
         </form>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</main>
-</body>
 
-</html>
+<%- include("./partials/footer") %>

src/views/more.ejs

@@ -1,25 +1,10 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <title>Document</title>
-</head>
 
-<body>
+<main>
-    <%- include("./partials/header") %>
+    The More Page
-    <main>
+</main>
-        The More Page
-    </main>
-    <footer>
-        <div class="fixed bottom-0 left-0 z-50 sm:hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-            <div class="container mx-auto">
-                <p>&copy; 2025 RCalculator. All rights reserved.</p>
-             </div>
-        </div>
-        <%- include("./partials/navBar") %>
-    </footer>
-</body>
 
-</html>
+<%- include("./partials/navBar") %>
+<%- include("./partials/footer") %>
+    

src/views/partials/fileHeader.ejs

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+        <title>RCalculator</title>
+    </head>
+    <body class="bg-white dark:bg-gray-900">

src/views/partials/footer.ejs

@@ -0,0 +1,11 @@
+
+<footer>
+    <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
+        <div class="container mx-auto">
+            <p>&copy; 2025 RCalculator. All rights reserved.</p>
+            </div>
+    </div>
+</footer>
+<script src="/static/scripts/geolocation.js"></script>
+</body>
+</html>

src/views/partials/headerStart.ejs

@@ -20,7 +20,7 @@
                         <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>
+                        <a href="/login" 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">Login</a>
                     </li>
                     <li>
                         <a href="mailto:rcalculator@gmail.com" 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">Contact us</a>

src/views/partials/navBar.ejs

@@ -26,5 +26,4 @@
             <span class="text-gray-500 dark:text-gray-400 text-sm">More</span>
         </a>
     </div>
-</div>
+</div>
-

src/views/plans.ejs

@@ -1,26 +1,9 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
 
-<head>
+<main>
-    <meta charset="UTF-8">
+    The Plans Page
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</main>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <title>Document</title>
-</head>
 
-<body>
+<%- include("./partials/navBar") %>
-    <%- include("./partials/header") %>
+<%- include("./partials/footer") %>
-    <main>
-        The Plans Page
-    </main>
-    <footer>
-        <div class="fixed bottom-0 left-0 z-50 sm:hidden lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-            <div class="container mx-auto">
-                <p>&copy; 2025 RCalculator. All rights reserved.</p>
-             </div>
-        </div>
-        <%- include("./partials/navBar") %>
-    </footer>
-</body>
-
-</html>

src/views/profile.ejs

@@ -0,0 +1,90 @@
+<%- include("./partials/fileHeader") %>
+<%- include("./partials/header") %>
+
+<main>
+    <h2 class="ml-11 mt-5 mb-6 text-xl font-semibold mb-4 text-white">Welcome <%= user.name %></h2>
+
+    <% if (errMessage != "") { %>
+        <div class="max-w-md mx-auto mb-10 rounded-lg shadow-md text-white font-bold bg-red-400 py-4 text-center"><%= errMessage %></div>
+    <% } %>
+
+    <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
+        <div class="flex flex-row justify-between">
+            <h3 class="pt-2 pr-2 pb-2">Account settings</h3>
+            <button id="edit-account" onclick="unlockAccount()" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Edit</button>
+        </div>
+        <form action="/updateAccount" method="post" class="space-y-4 mt-4" id="account-form">
+ 
+            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+            <input id="email" disabled type="text" name="email" value="<%= user.email %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+
+            <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
+            <input id="name" disabled type="text" name="name" value="<%= user.name %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+
+            <label for="password" class="block text-sm font-medium text-gray-700">New password</label>
+            <input id="password" disabled type="password" name="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+
+            <label for="repassword" class="block text-sm font-medium text-gray-700">Confirm new password</label>
+            <input id="repassword" disabled type="password" name="repassword" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+
+            <div>
+                <button id="save-account" disabled type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-not-allowed">Save</button>
+            </div>
+        </form>
+    </div>
+<!--     
+    <div class="mb-10 max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
+        <div class="flex flex-row justify-between">
+            <h3 class="pt-2 pr-2 pb-2">Personal information</h3>
+            <button onclick="unlockPersonal()" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Edit</button>
+        </div>
+        <form action="/updatePersonal" method="post" class="space-y-4" id="personal-form">
+            <div>
+                <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
+                <input id="dob" disabled type="date" name="dob" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+            </div>
+            <div>
+                <label for="education" class="block text-sm font-medium text-gray-700">Education</label>
+                <select disabled name="education" id="education" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <option value="primary">Primary (Elementary)</option>
+                    <option value="secondary">Secondary (High School)</option>
+                    <option value="tertiary">Tertiary (College/University)</option>
+                    <option value="postgraduate">Postgraduate (Master's/PhD)</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Marital Status</label>
+                <div class="mt-1 space-x-4">
+                    <label class="inline-flex items-center">
+                        <input disabled id="ms-single" type="radio" name="maritalStatus" value="single" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                        <span class="ml-2 text-sm text-gray-700">Single</span>
+                    </label>
+                    <label class="inline-flex items-center">
+                        <input disabled id="ms-married" type="radio" name="maritalStatus" value="married" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                        <span class="ml-2 text-sm text-gray-700">Married</span>
+                    </label>
+                    <label class="inline-flex items-center">
+                        <input disabled id="ms-divorced" type="radio" name="maritalStatus" value="divorced" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                        <span class="ml-2 text-sm text-gray-700">Divorced</span>
+                    </label>
+                        <label class="inline-flex items-center">
+                        <input disabled id="ms-widowed" type="radio" name="maritalStatus" value="widowed" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                        <span class="ml-2 text-sm text-gray-700">Widowed</span>
+                    </label>
+                </div>
+            </div>
+
+            <div>
+                <button id="save-personal" disabled type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-not-allowed">Save</button>
+            </div>
+        </form>
+    </div> -->
+
+    <div class="mt-24"></div>
+</main>
+
+<script src="/static/scripts/profile.js"></script>
+
+<%- include("./partials/navBar") %>
+<%- include("./partials/footer") %>

src/views/questionnaire.ejs

@@ -1,108 +1,91 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/header") %>
 
-<head>
+<main class="container mx-auto p-4">
-    <meta charset="UTF-8">
+    <h2 class="text-xl font-semibold mb-4">Welcome: <%= user.email %></h2>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+        <h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
-    <title>Document</title>
+        <form action="/questionnaire" method="post" class="space-y-4">
-</head>
+            <div>
-
+                <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
-<body>
+                <input type="date" name="dob" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-    <%- include("./partials/header") %>
+            </div>
-    <main class="container mx-auto p-4">
+            <div>
-        <h2 class="text-xl font-semibold mb-4">Welcome: <%= user.email %></h2>
+                <label for="education" class="block text-sm font-medium text-gray-700">Education</label>
-        <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
+                <select name="education" id="education" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-            <h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
+                    <option value="primary">Primary (Elementary)</option>
-            <form action="/questionnaire" method="post" class="space-y-4">
+                    <option value="secondary">Secondary (High School)</option>
-                <div>
+                    <option value="tertiary">Tertiary (College/University)</option>
-                    <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
+                    <option value="postgraduate">Postgraduate (Master's/PhD)</option>
-                    <input type="date" name="dob" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                </select>
-                </div>
+            </div>
-                <div>
+            <div>
-                    <label for="education" class="block text-sm font-medium text-gray-700">Education</label>
+                <label class="block text-sm font-medium text-gray-700">Marital Status</label>
-                    <select name="education" id="education" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                <div class="mt-1 space-x-4">
-                        <option value="primary">Primary (Elementary)</option>
+                    <label class="inline-flex items-center">
-                        <option value="secondary">Secondary (High School)</option>
+                        <input type="radio" name="maritalStatus" value="single" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                        <option value="tertiary">Tertiary (College/University)</option>
+                        <span class="ml-2 text-sm text-gray-700">Single</span>
-                        <option value="postgraduate">Postgraduate (Master's/PhD)</option>
+                    </label>
-                    </select>
+                    <label class="inline-flex items-center">
-                </div>
+                        <input type="radio" name="maritalStatus" value="married" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                <div>
+                            <span class="ml-2 text-sm text-gray-700">Married</span>
-                    <label class="block text-sm font-medium text-gray-700">Marital Status</label>
+                    </label>
-                    <div class="mt-1 space-x-4">
                         <label class="inline-flex items-center">
-                            <input type="radio" name="maritalStatus" value="single" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                        <input type="radio" name="maritalStatus" value="divorced" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                            <span class="ml-2 text-sm text-gray-700">Single</span>
+                            <span class="ml-2 text-sm text-gray-700">Divorced</span>
-                        </label>
+                    </label>
                         <label class="inline-flex items-center">
-                            <input type="radio" name="maritalStatus" value="married" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                        <input type="radio" name="maritalStatus" value="widowed" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                             <span class="ml-2 text-sm text-gray-700">Married</span>
+                            <span class="ml-2 text-sm text-gray-700">Widowed</span>
-                        </label>
+                    </label>
-                         <label class="inline-flex items-center">
-                            <input type="radio" name="maritalStatus" value="divorced" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                             <span class="ml-2 text-sm text-gray-700">Divorced</span>
-                        </label>
-                         <label class="inline-flex items-center">
-                            <input type="radio" name="maritalStatus" value="widowed" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
-                             <span class="ml-2 text-sm text-gray-700">Widowed</span>
-                        </label>
-                    </div>
-                </div>
-                
-                <div>
-                    <label for="income" class="block text-sm font-medium text-gray-700">Annual Gross Income</label>
-                    <input type="number" name="income" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
-                
-                <div>
-                    <label for="expenses" class="block text-sm font-medium text-gray-700">Monthly Expenses</label>
-                    <input type="number" name="expenses" min="0" placeholder="e.g., 2000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
-                
-                <div>
-                    <label for="assets" class="block text-sm font-medium text-gray-700">Net Worth</label>
-                    <input type="number" name="assets" min="0" placeholder="Estimated Net Worth" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
-                
-                <div>
-                    <label for="liabilities" class="block text-sm font-medium text-gray-700">Liabilities</label>
-                    <input type="number" name="liabilities" min="0" placeholder="Estimated Liabilities" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                 </div>
+            </div>
             
-                <div>
+            <div>
-                    <label for="retirementAge" class="block text-sm font-medium text-gray-700">Desired Retirement Age</label>
+                <label for="income" class="block text-sm font-medium text-gray-700">Annual Gross Income</label>
-                    <input type="number" name="retirementAge" placeholder="e.g., 65" min="18" max="120" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                <input type="number" name="income" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
+            </div>
+            
+            <div>
+                <label for="expenses" class="block text-sm font-medium text-gray-700">Monthly Expenses</label>
+                <input type="number" name="expenses" min="0" placeholder="e.g., 2000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            
+            <div>
+                <label for="assets" class="block text-sm font-medium text-gray-700">Net Worth</label>
+                <input type="number" name="assets" min="0" placeholder="Estimated Net Worth" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            
+            <div>
+                <label for="liabilities" class="block text-sm font-medium text-gray-700">Liabilities</label>
+                <input type="number" name="liabilities" min="0" placeholder="Estimated Liabilities" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+        
+            <div>
+                <label for="retirementAge" class="block text-sm font-medium text-gray-700">Desired Retirement Age</label>
+                <input type="number" name="retirementAge" placeholder="e.g., 65" min="18" max="120" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
 
-                <div>
+            <div>
-                    <label for="retirementExpenses" class="block text-sm font-medium text-gray-700">Estimated Monthly Retirement Expenses</label>
+                <label for="retirementExpenses" class="block text-sm font-medium text-gray-700">Estimated Monthly Retirement Expenses</label>
-                    <input type="number" name="retirementExpenses" min="0" placeholder="e.g., 3000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                <input type="number" name="retirementExpenses" min="0" placeholder="e.g., 3000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
+            </div>
 
-                <div>
+            <div>
-                    <label for="retirementAssets" class="block text-sm font-medium text-gray-700">Estimated Retirement Assets</label>
+                <label for="retirementAssets" class="block text-sm font-medium text-gray-700">Estimated Retirement Assets</label>
-                    <input type="number" name="retirementAssets" min="0" placeholder="e.g., 500000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                <input type="number" name="retirementAssets" min="0" placeholder="e.g., 500000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
+            </div>
 
-                <div>
+            <div>
-                    <label for="retirementLiabilities" class="block text-sm font-medium text-gray-700">Estimated Retirement Liabilities</label>
+                <label for="retirementLiabilities" class="block text-sm font-medium text-gray-700">Estimated Retirement Liabilities</label>
-                    <input type="number" name="retirementLiabilities" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                <input type="number" name="retirementLiabilities" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                </div>
+            </div>
-                
+            
-                <div>
+            <div>
-                    <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit Questionnaire</button>
+                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit Questionnaire</button>
-                </div>
+            </div>
-            </form>
+        </form>
-        </div>
+    </div>
-    </main>
+</main>
-    <footer>
-        <div class="fixed bottom-0 left-0 z-50 sm:hidden mt-5 lg:block w-full h-16 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500 dark:text-gray-400 text-sm">
-            <div class="container mx-auto">
-                <p>&copy; 2025 RCalculator. All rights reserved.</p>
-             </div>
-        </div>
-    </footer>
-</body>
 
-</html>
+<%- include("./partials/footer") %>

src/views/signup.ejs

@@ -1,19 +1,8 @@
-<!DOCTYPE html>
+<%- include("./partials/fileHeader") %>
-<html lang="en">
+<%- include("./partials/headerStart") %>
 
-<head>
+<main>
-    <meta charset="UTF-8">
+    <div class="flex justify-center items-center h-screen">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Signup</title>
-    <link rel="stylesheet" href="/static/css/style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
-        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
-</head>
-
-<body>
-    <div class="flex justify-center items-center h-screen bg-gray-700">
         <form action="/signup" method="POST">
             <div class="w-96 p-6 shadow-1g bg-white rounded-md">
                 <h1 class="text-3xl block text-center font-semibold"> Signup </h1>
@@ -24,6 +13,12 @@
                         class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
                         placeholder="Enter Email" />
                 </div>
+                <div class="mt-3">
+                    <label for="name" class="block text-base mb-2">Name</label>
+                    <input type="text" id="name" name="name"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Name" />
+                </div>
                 <div class="mt-3">
                     <label for="password" class="block text-base mb-2">Password</label>
                     <input type="password" id="password" name="password"
@@ -46,7 +41,6 @@
             </div>
         </form>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</main>
-</body>
 
-</html>
+<%- include("./partials/footer") %>

src/views/template.ejs

@@ -0,0 +1,9 @@
+<%- include("./partials/fileHeader") %>
+<%- include("./partials/header") %>
+
+<main>
+    <!-- Your content here -->
+</main>
+
+<%- include("./partials/navBar") %>
+<%- include("./partials/footer") %>