Skip to content

BER Webdev PT 012024 Nil Erden #2121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nil-e wants to merge 6 commits into
base: master
Choose a base branch
from
Open

BER Webdev PT 012024 Nil Erden #2121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d215e9
iteration 1 is done
nil-e Mar 30, 2024
2b0af60
i was redirecting twice i removed the unnecessary one
nil-e Mar 30, 2024
b444e04
iteration 1 is done, iteration 2 is in progress. i need to stop loggi…
nil-e Mar 31, 2024
1e19a8b
login works now session is not creating a cookie in the browser still…
nil-e Apr 5, 2024
1a2e85f
fixed the session but still need to test it again wip
nil-e Apr 5, 2024
b2ceda1
final
nil-e Apr 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
PORT=3000
PORT=3000
SESS_SECRET = 'super session secret'
2 changes: 1 addition & 1 deletion app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ const express = require('express');
const hbs = require('hbs');

const app = express();
require('./config/session.config')(app);

// ℹ️ This function is getting exported from the config folder. It runs most middlewares
require('./config')(app);

// default value for title local
const projectName = 'lab-express-basic-auth';
const capitalized = string => string[0].toUpperCase() + string.slice(1).toLowerCase();
Expand Down
39 changes: 39 additions & 0 deletions config/session.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// config/session.config.js

// require session
const session = require('express-session');
const MongoStore = require('connect-mongo');

// ADDED: require mongoose
const mongoose = require('mongoose');
// since we are going to USE this middleware in the app.js,
// let's export it and have it receive a parameter
module.exports = app => {
// <== app is just a placeholder here
// but will become a real "app" in the app.js
// when this file gets imported/required there

// required for the app when deployed to Heroku (in production)
app.set('trust proxy', 1);

// use session
app.use(
session({
secret: process.env.SESS_SECRET,
resave: true,
saveUninitialized: false,
cookie: {
sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
secure: process.env.NODE_ENV === 'production',
httpOnly: true,
maxAge: 60000
}, // ADDED code below !!!
store: MongoStore.create({
mongoUrl: process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/basic-auth'

// ttl => time to live
// ttl: 60 * 60 * 24 // 60sec * 60min * 24h => 1 day
})
})
);
};
24 changes: 24 additions & 0 deletions middleware/route-guard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// middleware/route-guard.js

// checks if the user is logged in when trying to access a specific page
const isLoggedIn = (req, res, next) => {
if (!req.session.currentUser) {
return res.redirect('/login');
}
next();
};

// if an already logged in user tries to access the login page it
// redirects the user to the home page
const isLoggedOut = (req, res, next) => {
if (req.session.currentUser) {
return res.redirect('/');
}
next();
};

module.exports = {
isLoggedIn,
isLoggedOut
};

8 changes: 6 additions & 2 deletions models/User.model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@ const { Schema, model } = require("mongoose");
const userSchema = new Schema({
username: {
type: String,
unique: true
unique: true,
required:true
},
password: String
password: {
type: String,
required:true
}
});

const User = model("User", userSchema);
Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@
"dev": "nodemon server.js"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"connect-mongo": "^5.1.0",
"cookie-parser": "^1.4.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-session": "^1.18.0",
"hbs": "^4.1.1",
"mongoose": "^6.1.2",
"morgan": "^1.10.0",
Expand Down
90 changes: 90 additions & 0 deletions routes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,98 @@
const router = require("express").Router();
const bcryptjs = require("bcryptjs");
const User = require("../models/User.model");
const saltRounds = 10;

const { isLoggedIn, isLoggedOut } = require('../middleware/route-guard.js');

/* GET home page */
router.get("/", (req, res, next) => {
res.render("index");
});

router.get("/signup", isLoggedOut, (req, res, next) => {
res.render("auth/signup");
});

router.post("/signup", isLoggedOut, (req, res, next) => {
console.log("The form data: ", req.body);
const { username, password } = req.body;
console.log("username", username, "pwd", password);
if (!username || !password) {
throw new Error("Username and password cannot be empty!");
}

bcryptjs
.genSalt(saltRounds)
.then((salt) => bcryptjs.hash(password, salt))
.then((hashedPassword) => {
return User.create({
username,
password: hashedPassword,
});
})
.then((userFromDB) => {
console.log("Newly created user is: ", userFromDB);
res.redirect("/userProfile");
})
.catch((error) => next(error));
});

router.get("/userprofile",isLoggedIn, (req, res, next) => {
res.render('users/user-profile',
{ userInSession: req.session.currentUser });
});

router.get("/login", (req, res, next) => {
res.render("auth/login");
});

router.post("/login", (req, res, next) => {
console.log("SESSION =====> ", req.session);
const { username, password } = req.body;
console.log({ username, password });
if (!username || !password) {
throw new Error("Username and password cannot be empty!");
}
User.findOne({ username: username })
.then((userFromDB) => {
if (!userFromDB) {
throw new Error("User not found");
}
else {
bcryptjs.compare(password, userFromDB.password, function(err, result) {
if (err){
throw new Error("Invalid password");
}
if (result) {
console.log("Login successful");
req.session.currentUser = userFromDB;
res.redirect("/userProfile");
} else {
// response is OutgoingMessage object that server response http request
return res.json({success: false, message: 'passwords do not match'});
}
});
}
})
.catch((error) => next(error));
});

//might need a review
router.post('/logout', (req, res, next) => {
req.session.destroy(err => {
if (err) next(err);
res.redirect('/');
});
});

router.get("/main", (req, res, next) => {
res.render("main");
});

router.get("/private",isLoggedIn, (req, res, next) => {
res.render("private");
});


module.exports = router;
16 changes: 16 additions & 0 deletions views/auth/login.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div>
<h1>Log in to our website!</h1>
<form class="login" action="/login" method="POST">
<label class="login" for="username">Username
<input type="text" name="username" id="username"/>
</label>
<label class="login" for="password">Password
<input type="text" name="password" id="password"/>
</label>
<div class="login">
<input type="submit" value="Log in!" />
</div>
</form>
<h1>Are you still not a member? Sign up here</h1>
<a href="/signup">Sign up here</a>
</div>
16 changes: 16 additions & 0 deletions views/auth/signup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div>
<h1>Sign up to our website!</h1>
<form class="signup" action="/signup" method="POST">
<label class="signup" for="username">Username
<input type="text" name="username" id="username"/>
</label>
<label class="signup" for="password">Password
<input type="text" name="password" id="password"/>
</label>
<div class="signup">
<input type="submit" value="Sign Up!" />
</div>
</form>
<h1>Are you already a member?</h1>
<a href="/login">Log in here</a>
</div>
15 changes: 14 additions & 1 deletion views/layout.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,20 @@
</head>

<body>

<nav>
<ul>
<li id="to-left">
<p><a href="/"> Users - demo </a></p>
</li>
<li id="to-right">
<a href="/signup">Signup</a> <span> | </span>
<a href="/login">Login</a> <span> | </span>
<form id="logout-form" action="/logout" method="POST">
<button>Logout</button>
</form>
</li>
</ul>
</nav>
{{{body}}}

<script src="/js/script.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions views/main.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="cat">
<a href="/"><p>Back to homepage</p></a>
2 changes: 2 additions & 0 deletions views/private.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h1>Members Only Page</h1>
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExODNldTdtNjd2bHJtMnhyZ3NqanBhMjIyazZyZmhzaDl0Z295NWZzdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/k1OotwSnvPsre/giphy.gif" alt="funny gif">
11 changes: 11 additions & 0 deletions views/users/user-profile.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{{!-- views/users/user-profile.hbs--}}

{{#if userInSession}}
<h2>Welcome, {{ userInSession.username }}!</h2>
<p>This is your profile page my friend!</p>
<button>
<a href="/userProfile">Reload the page</a>
</button>
{{else}}
<p>Still no logged in user, sorry!</p>
{{/if}}