ejs login and signup with tailwind

.env.example

@@ -1,2 +1,4 @@
 mongoURI='mongodb://localhost:27017/'
 database='nameOfDatabase'
+PORT=8000
+

README.md

@@ -24,11 +24,27 @@ Example:
 
 ## Usage
 
-***Please check back later.***
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/JoaquinPar/2800-202510-BBY14.git
+   cd 2800-202510-BBY14
+   ```
 
-1. ...
+2. **Install dependencies:**
-2. ...
+   ```bash
-3. ...
+   npm install
+   ```
+   This will install Express, express-session, EJS, dotenv, and any other required packages listed in `package.json`.
+
+3. **Create and configure the environment file:**
+   - Create a file named `.env` in the root directory of the project.
+   - Add the necessary environment variables to this file.
+
+4. **Run the application:**
+   ```bash
+   node app.js
+   ```
+   The application should now be running, typically on `http://localhost:3000` (or the port specified in your `.env` file).
 
 ---
 
@@ -37,7 +53,6 @@ Example:
 ```
 retirementCalculator/
 ├── src/
-|   ├── app.js
 │   ├── views/
 │   ├── public/
 |   |    ├── css/
@@ -45,6 +60,7 @@ retirementCalculator/
 |   |    ├── images/
 |   |    └── scripts/
 │   └── util/
+├── app.js
 ├── .env.example
 ├── .gitignore
 ├── LICENSE

app.js

@@ -0,0 +1,76 @@
+const express = require('express');
+const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+const app = express();
+
+const port = process.env.PORT || 3000;
+
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, '/src/views'));
+
+/*
+ROUTINGS
+*/
+
+app.get('/', (req, res) => {
+    res.render('index');
+});
+
+app.get('/signup', (req, res) => {
+    res.render('signup');
+});
+
+app.get('/login', (req, res) => {
+    res.render('login');
+});
+
+app.get('/home', (req, res) => {
+    res.render('home');
+});
+
+app.get('/assets', (req, res) => {
+    res.render('assets');
+});
+
+app.get('/plans', (req, res) => {
+    res.render('plans');
+});
+
+app.get('/more', (req, res) => {
+    res.render('more');
+});
+
+app.get('/profile', (req, res) => {
+    res.render('profiles');
+});
+
+app.get('/settings', (req, res) => {
+    res.render('settings');
+});
+
+app.get('/aboutUs', (req, res) => {
+    res.render('aboutUs');
+});
+
+
+app.post('/signup', (req, res) => {
+    res.status(200);
+    res.send('200 status code');
+});
+
+app.post('/login', (req, res) => {
+    res.status(200);
+    res.send('200 status code');
+});
+
+app.get('/*splat', (req, res) => {
+    res.status(404);
+    res.send('404 Not Found');
+});
+
+app.listen(port, () => {
+    console.log(`Server listening on port ${port}`);
+});

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
+        "dotenv": "^16.5.0",
+        "ejs": "^3.1.10",
         "express": "^5.1.0"
       },
       "devDependencies": {
@@ -28,6 +30,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -42,11 +59,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/binary-extensions": {
@@ -86,7 +108,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -144,6 +165,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -169,11 +227,28 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/content-disposition": {
@@ -241,6 +316,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -261,6 +347,20 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -357,6 +457,36 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -627,6 +757,24 @@
       "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
       "license": "MIT"
     },
+    "node_modules/jake": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
+      "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -682,7 +830,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"

package.json

@@ -2,10 +2,10 @@
   "name": "retirementcalculator",
   "version": "0.1.0",
   "description": "Retirement Calculator",
-  "main": "./src/app.js",
+  "main": "app.js",
   "scripts": {
-    "start": "node ./src/app.js",
+    "start": "node app.js",
-    "dev": "nodemon ./src/app.js"
+    "dev": "nodemon app.js"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,8 @@
   },
   "homepage": "https://github.com/JoaquinPar/2800-202510-BBY14#readme",
   "dependencies": {
+    "dotenv": "^16.5.0",
+    "ejs": "^3.1.10",
     "express": "^5.1.0"
   },
   "devDependencies": {

src/app.js

@@ -1,9 +0,0 @@
-const express = require("express");
-const path = require("path");
-
-const app = express();
-const port = 8000;
-
-app.listen(port, () => {
-  console.log(`Server listening on port ${port}`);
-});

src/views/index.ejs

@@ -0,0 +1,53 @@
+<!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">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="../public/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>
+                <hr class="mt-3">
+                <div class="mt-3">
+                    <label for="email" class="block text-base mb-2">Email</label>
+                    <input type="text" id="email" name="email"
+                        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="password" class="block text-base mb-2">Password</label>
+                    <input type="password" id="password" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                </div>
+                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
+                <div class="mt-3 flex justify-between items-center">
+                    <div>
+                        <input type="checkbox">
+                        <label>Remember me</label>
+                    </div>
+                    <div>
+                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <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>
+        </form>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</body>
+
+</html>

src/views/signup.ejs

@@ -0,0 +1,58 @@
+<!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">
+    <title>Signup</title>
+    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="../public/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="/login" 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>
+                <hr class="mt-3">
+                <div class="mt-3">
+                    <label for="email" class="block text-base mb-2">Email</label>
+                    <input type="text" id="email" name="email"
+                        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="password" class="block text-base mb-2">Password</label>
+                    <input type="password" id="password" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                    <label for="password" class="block text-base mb-2 mt-3">Re-type Password</label>
+                    <input type="password" id="repassword" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                </div>
+                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
+                <div class="mt-3 flex justify-between items-center">
+                    <div>
+                        <input type="checkbox">
+                        <label>Remember me</label>
+                    </div>
+                    <div>
+                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <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>
+        </form>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</body>
+
+</html>