feat | login form

app.js

@@ -3,6 +3,7 @@ var express = require("express");
 var path = require("path");
 var cookieParser = require("cookie-parser");
 var logger = require("morgan");
+var session = require("express-session");
 
 var indexRouter = require("./routes/index");
 var usersRouter = require("./routes/users");
@@ -19,7 +20,32 @@ app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, "public")));
 
-app.use("/", indexRouter);
+// include bootstrap css
+app.use("/css", express.static(__dirname + "/node_modules/bootstrap/dist/css"));
+
+// set up the session
+app.use(
+  session({
+    secret: "app",
+    name: "app",
+    resave: true,
+    saveUninitialized: true,
+    cookie: { maxAge: 6000 }
+  })
+);
+
+var checkUser = function(req, res, next) {
+  if (req.session.loggedIn) {
+    next();
+  } else {
+    res.render("login", { title: "Login Here" });
+  }
+};
+
+// redirect to login form
+app.use("/", function(req, res, next) {
+  return checkUser(req, res, indexRouter);
+});
 app.use("/users", usersRouter);
 
 // catch 404 and forward to error handler

package.json

@@ -6,11 +6,17 @@
     "start": "node ./bin/www"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "cookie-parser": "~1.4.4",
     "debug": "~2.6.9",
     "express": "~4.16.1",
+    "express-session": "^1.16.2",
     "http-errors": "~1.6.3",
     "morgan": "~1.9.1",
     "pug": "^2.0.4"
+  },
+  "devDependencies": {
+    "jquery": "^3.4.1",
+    "popper.js": "^1.15.0"
   }
 }

public/stylesheets/style.css

@@ -1,8 +1,12 @@
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background: Gainsboro; /* full background lightest grey */
 }
-
-a {
-  color: #00B7FF;
+.wrapper {
+  margin: 10% 0; /* margin top and bottom */
+}
+.form-signin {
+  background: White; /* white background */
+  max-width: 30%; /* limit width */
+  margin: 0 auto; /* center */
+  padding: 2%;
 }

readme.md

@@ -10,7 +10,16 @@ Clone this repo or follow the steps below to learn about setting up a Node/expre
 | 0.3 | Install dependencies by executing `npm i` after moving into the directory using `cd login` |
 | 0.4 | You will see warnings, depending on how many vulnerabilities are found.<br> `npm notice created a lockfile as package-lock.json. You should commit this file. `<br>`added 118 packages from 174 contributors and audited 247 packages in 10.793s `<br>`found 1 low severity vulnerability run npm audit fix to fix them, or npm audit for details`<br> after running `npm audit` you will see recommendations to fix, you might want to run `npm ls` to see the dependency tree.<br>In this case you can fix it by running `npm i pug@latest`<br><br>After running this no vulnerabilities are reported and we can go ahead and start the app |
 | 0.5 | start the app by one of the following commands: <br> 1. `npm start` - *to start app on default port 3000*<br>2. `PORT=8080 npm start` - *to start on port 8080*<br>3. `DEBUG=login:* npm start` - *start with debug information*|
+| 0.6 | Point your browser to `localhost:3000` ![](./doc/images/boilerplate.png) <br> In our console we see:<br>`~/login$ DEBUG=login:* npm start`<br><br>`> login@0.0.0 start /home/gius/login`<br>`> node ./bin/www`<br><br>`  login:server Listening on port 3000 +0ms`<br>`GET / 304 719.979 ms - -`<br>`GET /stylesheets/style.css 304 7.148 ms - -`
+| create login form | After completing these steps we have a new page and route.|
+| 1.1 | run `npm i --save express-session bootstrap` to add the dependency<br>Note that bootstrap has 2 peer dependencies: jquery and popper.js. We don't need these, because we are just going to use the css. This is a list of ways to handle the `npm WARN`:<br>1. Ignore the warnings; *not desired because the team will ignore all npm output*<br>2. Install peer deps: `npm i --save jquery popper.js`; *not desired; packers will include jquery and popper.js and let the codebase grow significantly*<br>3. Install as dev deps: `npm i -D jquery popper.js`; *Unsure yet if it solves 2, but it shuts up the WARN*<br>4. Use [ignore-warings](https://github.com/codejamninja/ignore-warnings): *Unclear [how to use](https://github.com/codejamninja/ignore-warnings/issues/2) yet, but it seems like a legit way of avoiding 2 and still keep npm output clean*<br>5. use bootstrap cdn; *Preferred to install locally to allow offline dev*<br>6. manual install bootstrap; *deps should be in package.json for keeping all updatable and visable for npm audit*|
+| 1.2 | create `/views/login.pug` |
+| 1.3 | add the route to `app.js`<br> |
+| 1.4 | update styles `public/style.css` |
+| 1.5 | current result routes default route to login<br>![](./doc/images/login.png)<br>`~/login $ DEBUG=login:* npm start -s`<br>`  login:server Listening on port 3000 +0ms`<br>`GET / 304 737.652 ms - -`<br>`GET /css/bootstrap.min.css 304 `<br>`.766 ms - -`<br>`GET /stylesheets/style.css 304 1.070 ms - -`
+ |
 
 # Sources
 
 1. [original tutorial](http://projectsplaza.com/login-logout-nodejs-express/)
+2. [another tutor from Nima HKH](https://medium.com/@nima.2004hkh/create-your-first-login-page-with-exprerssjs-pug-f42250229486)

views/layout.pug

@@ -2,6 +2,7 @@ doctype html
 html
   head
     title= title
+    link(rel='stylesheet', href='/css/bootstrap.min.css')
     link(rel='stylesheet', href='/stylesheets/style.css')
   body
     block content

views/login.pug

@@ -0,0 +1,20 @@
+extends layout
+
+block content
+  div(class="wrapper")
+    div(class="form-signin")
+      h1= title
+      form(action="post",method="post")
+      div(class="form-group")
+        label(for="username") Username
+        input(class="form-control" type="text",name="username" placeholder="Username" autofocus)
+      div(class="form-group")    
+        label(for="password") Password
+        input(class="form-control" type="password",name="password" placeholder="Password")
+      div(class="form-group")  
+        div(class="text-right")
+          label(class="form-check-label") Remember me 
+            input(type="checkbox") 
+      div(class="form-group")
+        div(class="text-right")
+          button(class="btn btn-primary" type="submit") Sign in