Skip to content

Commit

Permalink
Add some feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@BhavikaPachauri
BhavikaPachauri committed Nov 1, 2024
1 parent 74e75a2 commit 7addc1a
Show file tree
Hide file tree
Showing 9 changed files with 572 additions and 526 deletions.
27 changes: 3 additions & 24 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
const multer = require('multer');
Expand All @@ -11,36 +10,16 @@ const MongoStore = require('connect-mongo');
const bcrypt = require('bcrypt');
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');
const rateLimit = require('express-rate-limit');
const helmet = require('helmet');
const mongoSanitize = require('express-mongo-sanitize');

const app = express();

// Import the database models
// Import the database.js file
const { User, Food, House, Market } = require('./database'); // Adjust path as needed

// Middleware to parse JSON and form data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public'))); // Serve static files from 'public' directory

// Use CORS for cross-origin requests
app.use(cors());

// Prevent NoSQL injection with express-mongo-sanitize
app.use(mongoSanitize());

// Set secure HTTP headers with Helmet
app.use(helmet());

// Set up rate limiting
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // limit each IP to 100 requests per window
});
app.use(limiter);

app.use(express.static('public')); // Serve static files from 'public' directory
app.use(express.urlencoded({ extended: true })); // For parsing application/x-www-form-urlencoded

// Session setup
app.use(
Expand Down
4 changes: 1 addition & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
"start": "node app.js",
"lint": "eslint .",
"lint:ejs": "npx ejs-lint views/**/*.ejs",
"format": "prettier --write .",
"build": "webpack",
"serve": "webpack serve --open"
"format": "prettier --write ."
},
"author": "",
"license": "ISC",
Expand Down
26 changes: 19 additions & 7 deletions views/auth.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head') %>
Expand All @@ -7,7 +7,7 @@
<script src="js/client-validation.js" defer></script>
<style>
body {
overflow-y: auto; // Changed from hidden to auto to allow scrolling
overflow-y: auto;
}
.input-submit {
display: flex;
Expand Down Expand Up @@ -63,7 +63,7 @@
</div>
<div class="input-box">
<label for="phone">Phone</label>
<input type="phone" class="input-field" id="phone" name="phone" placeholder="Enter Phone" required>
<input type="tel" class="input-field" id="phone" name="phone" placeholder="Enter Phone" required>
<i class="bx bx-phone"></i>
</div>
<div class="input-box">
Expand Down Expand Up @@ -106,15 +106,13 @@
<% if (action === 'login') { %>
<span><a href="#">Forgot Password?</a></span>
<% } %>
</div>
</div>
</div>
</div>
<%- include('partials/bottom_nav') %>
<script>
// /preloader js styling
// Preloader JS styling
let preloader = document.querySelector("#preloader");
window.addEventListener("load",function(e){
preloader.style.display = "none";
Expand Down Expand Up @@ -150,6 +148,20 @@
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
// Validate email format
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return;
}
// Validate phone number (basic check)
const phonePattern = /^[0-9]{10}$/; // Adjust according to your phone number format
if (!phonePattern.test(phone)) {
alert('Please enter a valid 10-digit phone number.');
return;
}
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
Expand Down
2 changes: 1 addition & 1 deletion views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
</head>

<body>
<button class="scroll-button">Back to Top</button>
<button class="scroll-button mb-5">Back to Top</button>
<div id="progress-bar"></div>
<%- include('partials/navbar') %>
<!-- Carousel Section -->
Expand Down
185 changes: 151 additions & 34 deletions views/partials/bottom_nav.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,153 @@
<nav class="navbar navbar-b fixed-bottom navbar-light bg-light d-block d-md-none">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
<title>Responsive Navbar with Dark/Light Mode</title>
<style>
/* Base colors */
:root {
--bg-light: #ffffff;
--bg-dark: #1c1c1c;
--text-light: #000000; /* Black text for light mode */
--text-dark: #ffffff; /* White text for dark mode */
}
body {
margin: 0;
transition: background-color 0.3s ease;
}
/* Navbar styles */
.navbar-light {
background-color: var(--bg-light) !important;
}
.navbar-dark {
background-color: var(--bg-dark) !important;
}
/* Icon color */
.nav-link i {
transition: color 0.3s ease; /* Smooth transition for color */
}
.text-dark {
color: var(--text-light) !important; /* Black for light mode */
}
.text-light {
color: var(--text-dark) !important; /* White for dark mode */
}
/* Ensure icons have visible color based on the theme */
.dark-mode .nav-link i {
color: var(--text-dark); /* White icons for dark mode */
}
.light-mode .nav-link i {
color: var(--text-light); /* Black icons for light mode */
}
</style>
</head>
<body class="bg-light light-mode">

<nav class="navbar navbar-b fixed-bottom navbar-light bg-light d-block d-md-none" id="navbar">
<div class="container-fluid">
<ul class="nav justify-content-around w-100">
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'home' ? 'active' : '' %>" href="/"><i class="fa-solid fa-right-from-bracket"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'house' ? 'active' : '' %>" href="/house"><i class="fa-solid fa-house"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'food' ? 'active' : '' %>" href="/food"><i class="fa-solid fa-utensils"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'market' ? 'active' : '' %>" href="/market"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
<li class="nav-item dropup">
<a class="nav-link nav-link-b dropdown-toggle " href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-b" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/house/form">House Ad</a></li>
<li><a class="dropdown-item" href="/food/form">Food Ad</a></li>
<li><a class="dropdown-item" href="/market/form">For Sale Ad</a></li>
<li>
<% if (user) { %>
<a class="dropdown-item" href="/logout">Logout</a>
<% } else { %>
<a class="dropdown-item" href="/auth?action=login">Login</a>
<a class="dropdown-item" href="/auth?action=signup">Signup</a>
<% } %>
</li>
</ul>
</li>
</ul>
<ul class="nav justify-content-around w-100">
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'home' ? 'active' : '' %>" href="/">
<i class="fa-solid fa-right-from-bracket"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'house' ? 'active' : '' %>" href="/house">
<i class="fa-solid fa-house"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'food' ? 'active' : '' %>" href="/food">
<i class="fa-solid fa-utensils"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-b text-dark <%= activeLink === 'market' ? 'active' : '' %>" href="/market">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
<li class="nav-item dropup">
<a class="nav-link nav-link-b dropdown-toggle" href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/house/form">House Ad</a></li>
<li><a class="dropdown-item" href="/food/form">Food Ad</a></li>
<li><a class="dropdown-item" href="/market/form">For Sale Ad</a></li>
<li>
<% if (user) { %>
<a class="dropdown-item" href="/logout">Logout</a>
<% } else { %>
<a class="dropdown-item" href="/auth?action=login">Login</a>
<a class="dropdown-item" href="/auth?action=signup">Signup</a>
<% } %>
</li>
</ul>
</li>
<!-- Toggle switch for dark/light mode -->
<!-- <li class="nav-item">
<a id="darkModeToggle" class="nav-link nav-link-b" href="#">
<i class="fa-solid fa-moon"></i>
<span id="toggleText">Switch to Dark Mode</span>
</a>
</li> -->
</ul>
</div>
</nav>
</nav>

<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButton = document.getElementById("darkModeToggle");
const body = document.body;
const navbar = document.getElementById("navbar");
const toggleText = document.getElementById("toggleText");
let mode = localStorage.getItem("theme") || "light";
// Set initial theme based on saved preference
if (mode === "dark") {
body.classList.replace("light-mode", "dark-mode");
navbar.classList.replace("navbar-light", "navbar-dark");
toggleText.textContent = "Switch to Light Mode"; // Button text change
toggleButton.querySelector('i').classList.remove('fa-moon');
toggleButton.querySelector('i').classList.add('fa-sun'); // Sun icon for light mode
} else {
toggleText.textContent = "Switch to Dark Mode"; // Button text change
}
// Toggle dark/light mode on button click
toggleButton.addEventListener("click", function (e) {
e.preventDefault(); // Prevent default anchor behavior
if (mode === "light") {
body.classList.replace("light-mode", "dark-mode");
navbar.classList.replace("navbar-light", "navbar-dark");
mode = "dark";
toggleText.textContent = "Switch to Light Mode"; // Button text change
toggleButton.querySelector('i').classList.remove('fa-moon');
toggleButton.querySelector('i').classList.add('fa-sun'); // Sun icon for light mode
} else {
body.classList.replace("dark-mode", "light-mode");
navbar.classList.replace("navbar-dark", "navbar-light");
mode = "light";
toggleText.textContent = "Switch to Dark Mode"; // Button text change
toggleButton.querySelector('i').classList.remove('fa-sun');
toggleButton.querySelector('i').classList.add('fa-moon'); // Moon icon for dark mode
}
localStorage.setItem("theme", mode);
});
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion views/partials/footer.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
</div>
<hr />
<!-- Copyright -->
<div class="row">
<div class="row mb-5">
<div class="col-12 mt-4">
<p class="copyright-text">Made with ❤️ by Team Scruter.</p>
</div>
Expand Down
Loading

0 comments on commit 7addc1a

Please sign in to comment.