Get login and session-handling working and begin work on dashboard.

.env.example

@@ -59,7 +59,7 @@ API_RATE_REQUESTS=1000
 API_RATE_WINDOW=60000
 
 # --- Google ReCaptcha ---
-# TechnicFlux comes with Google ReCaptcha support.
+# TechnicFlux comes with optional Google ReCaptcha support.
 # When configured, this will enable captcha protection on your login page.
 
 # (Optional) Google ReCaptcha Credentials

package.json

@@ -48,6 +48,7 @@
     "express-rate-limit": "^7.0.2",
     "express-recaptcha": "^5.1.0",
     "express-session": "^1.17.3",
+    "express-validator": "^7.0.1",
     "hbs": "~4.2.0",
     "http-errors": "~1.6.3",
     "mongoose": "^7.5.3",

public/js/common-script.js

@@ -0,0 +1,17 @@
+window.addEventListener('DOMContentLoaded', event => {
+
+  // Toggle the side navigation
+  const sidebarToggle = document.body.querySelector('#sidebarToggle');
+  if (sidebarToggle) {
+    // Uncomment Below to persist sidebar toggle between refreshes
+    // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
+    //     document.body.classList.toggle('sb-sidenav-toggled');
+    // }
+    sidebarToggle.addEventListener('click', event => {
+      event.preventDefault();
+      document.body.classList.toggle('sb-sidenav-toggled');
+      localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
+    });
+  }
+
+});

public/js/datatables-simple.js

@@ -0,0 +1,9 @@
+window.addEventListener('DOMContentLoaded', event => {
+    // Simple-DataTables
+    // https://github.com/fiduswriter/Simple-DataTables/wiki
+
+    const datatablesSimple = document.getElementById('datatablesSimple');
+    if (datatablesSimple) {
+        new simpleDatatables.DataTable(datatablesSimple);
+    }
+});

public/stylesheets/style.css

@@ -2,14 +2,15 @@ body {
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
-.pageContent {
-  padding: 50px;
-}
-
 a {
   color: #00B7FF;
 }
 
+.pageContent {
+  position: relative;
+  min-height: 100vh;
+}
+
 .grecaptcha-badge {
   margin-bottom: 65px;
 }

public/stylesheets/styles.css

@@ -10961,7 +10961,7 @@ body {
   margin-left: 1.5rem;
   flex-direction: column;
 }
-.sb-sidenav .sb-sidenav-footer {
+.sb-sidenav .sb-sidenav-header {
   padding: 0.75rem;
   flex-shrink: 0;
 }

routes/index.js

@@ -1,6 +1,9 @@
 const express = require('express')
-const router = express.Router()
+const database = require('../database/database')
+const { body, validationResult } = require('express-validator')
 const { RecaptchaV3 } = require('express-recaptcha')
+const router = express.Router()
+
 
 // --- Google ReCaptcha
 const site_key = process.env?.CAPTCHA_SITE_KEY
@@ -12,25 +15,82 @@ const recaptcha = captcha_enabled ? new RecaptchaV3(site_key, site_secret, {
 
 /* GET home page. */
 router.get('/', captcha_enabled ? recaptcha.middleware.render : (req, res, next) => {next()}, function (req, res) {
-  res.render('index', {
-    title: 'TechnicFlux',
-    captcha: captcha_enabled ? res.recaptcha : false
-  })
+  if (!req.session.user) {
+    return res.render('index', {
+      title: 'TechnicFlux',
+      captcha: captcha_enabled ? res.recaptcha : false
+    })
+  } else {
+    return res.render('dashboard', {
+      title: 'TechnicFlux',
+      user: req.session.user
+    })
+  }
 })
 
 /* POST home page (login info w/ captcha) */
-router.post('/', captcha_enabled ? recaptcha.middleware.verify : (req, res, next) => {next()}, function (req, res) {
+router.post('/', [
+  captcha_enabled ? recaptcha.middleware.verify : (req, res, next) => {next()},
+  captcha_enabled ? recaptcha.middleware.render : (req, res, next) => {next()},
+  body('username').notEmpty().isLength({min: 4, max: 50}).escape(),
+  body('password').notEmpty().isLength({min: 4, max: 50}).escape(),
+], function (req, res) {
+  const result = validationResult(req)
+
   // Validate captcha, if enabled.
   if (captcha_enabled && req.recaptcha.error) {
+    console.log(captcha_enabled)
     return res.render('index', {
       title: 'TechnicFlux',
       captcha: captcha_enabled ? res.recaptcha : false,
-      error: "Captcha validation failed! Ensure that javascript is enabled!"
+      error: "Captcha validation failed! Ensure javascript is enabled!"
     })
   }
 
-  // Check login info
-  res.json({success: "yay"})
+  // Check that login details pass validation
+  if (result.isEmpty()) {
+    if (req.body.username === process.env.ADMIN_USER && req.body.password === process.env.ADMIN_PASS) {
+      req.session.user = {
+        _id: 0,
+        username: process.env.ADMIN_USER,
+        display_name: `${process.env.ADMIN_USER} (Admin)`,
+        admin: true
+      }
+      return res.redirect('/')
+    }
+
+    // Check login info
+    return database.user.authUser(`${req.body.username}`,
+      `${req.body.password}`,
+      true,
+      req.get('User-Agent') || 'Unknown'
+      ).then((user) => {
+      if (user[0] === true) {
+        // User login successful.
+        req.session.user = user[1]
+        res.redirect('/')
+      } else {
+        // User login failed.
+        return res.render('index', {
+          title: 'TechnicFlux',
+          captcha: captcha_enabled ? res.recaptcha : false,
+          error: "Invalid username or password! Please try again."
+        })
+      }
+    })
+  } else {
+    return res.render('index', {
+      title: 'TechnicFlux',
+      captcha: captcha_enabled ? res.recaptcha : false,
+      error: "Error: Malformed login data submitted."
+    })
+  }
+})
+
+router.get('/logout', (req, res) => {
+  req.session.destroy(() => {
+    res.redirect('/')
+  } )
 })
 
 module.exports = router