Added user model; added pages to register a new account, login and logout; added middleware to process whether a user is logged in or not

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+    "env": {
+        "es2021": true,
+        "node": true
+    },
+    "extends": "google",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -1,7 +1,12 @@
-# ---> Composer
-composer.phar
-/vendor/
-
-# ---> NPM modules (mainly for Gulp.js)
+# NPM modules (mainly for Gulp.js)
 node_modules/
 
+# Compiled CSS and JS assets
+public/css/
+public/js/
+
+# Local data storage
+data/
+
+# Local config
+config/local.json

.woodpecker.yml

@@ -0,0 +1,62 @@
+pipeline:
+  setup:
+    image: node:18
+    commands:
+      - npm install
+      - npm run grunt
+
+  lint:
+    image: node:18
+    commands:
+      - npm run lint
+
+  linux_package:
+    group: packaging
+    image: node:18
+    commands:
+      - npm run grunt package
+    when:
+      event: tag
+
+  gitea_release:
+    image: plugins/gitea-release
+    settings:
+      api_key:
+        from_secret: gitea_api_key
+      base_url: https://git.metaunix.net
+      title: "${CI_COMMIT_TAG}"
+      files:
+        - "dist/*.deb"
+    when:
+      event: tag
+
+  copy_deb_package:
+    image: appleboy/drone-scp
+    settings:
+      host: "repo.int.metaunix.net"
+      username:
+        from_secret: repo_admin
+      password:
+        from_secret: repo_password
+      port: 22
+      target: /srv/repo/apt/overseer/
+      source: dist/*.deb
+      strip_components: 1
+    when:
+      event: tag
+
+  update_repos:
+    image: appleboy/drone-ssh
+    settings:
+      host:
+        - repo.int.metaunix.net
+      username:
+        from_secret: repo_admin
+      password:
+        from_secret: repo_password
+      port: 22
+      command_timeout: 2m
+      script:
+        - "sudo ~/scripts/update_repo.sh"
+    when:
+      event: tag

Gruntfile.js

@@ -0,0 +1,133 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    sass: {
+      dist: {
+        options: {
+          style: 'compressed'
+        },
+        files: [{
+          expand: true,
+          cwd: 'assets/styles',
+          src: ['**/*.scss'],
+          dest: 'public/css',
+          ext: '.css'
+        }]
+      }
+    },
+
+    uglify: {
+      options: {
+        mangle: false
+      },
+      compile: {
+        files: {
+          'public/js/nechryael.min.js': ['assets/js/**/*.js']
+        }
+      }
+    },
+
+    watch: {
+      css: {
+        files: ['assets/styles/**/*.scss'],
+        tasks: ['sass'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
+      },
+      js: {
+        files: ['assets/js/**/*.js'],
+        tasks: ['uglify'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
+      }
+    },
+
+    deb_package: {
+      options: {
+        maintainer: 'Gregory Ballantine <gballantine@bitgoblin.tech>',
+        long_description: 'A simple web app to track inventory records.',
+        output: './dist/',
+      },
+      build: {
+        files: [
+          {
+            cwd: './',
+            src: 'index.js',
+            dest: '/opt/overseer'
+          },
+          {
+            cwd: './',
+            src: 'src/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './',
+            src: 'views/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './',
+            src: 'config/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './',
+            src: 'public/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './build/etc/',
+            src: 'default.json',
+            dest: '/etc/overseer/'
+          },
+          {
+            cwd: './build/etc/',
+            src: 'overseer.service',
+            dest: '/etc/systemd/system/'
+          },
+          {
+            cwd: './',
+            src: 'bin/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './',
+            src: 'node_modules/**/*',
+            dest: '/opt/overseer/'
+          },
+          {
+            cwd: './',
+            src: 'LICENSE',
+            dest: '/opt/overseer/',
+          },
+        ],
+        links: {
+          '/usr/bin/overseer': '/opt/overseer/bin/start.sh'
+        },
+        scripts: {
+          postinst: {
+            src: './build/scripts/postinst.sh'
+          },
+        },
+      },
+    }
+  });
+
+  // Load plugins.
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-deb');
+
+  // CLI tasks.
+  grunt.registerTask('default', ['sass', 'uglify']);
+  grunt.registerTask('package', ['deb_package']);
+
+};

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) <year> <owner> 
+Copyright (c) 2022 Bit Goblin
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

README.md

@@ -1,3 +1,36 @@
 # overseer
 
-Self-hosted inventory tracker
+Self-hosted inventory tracker
+
+## Installation/Deployment
+
+`git clone https://git.metaunix.net/BitGoblin/overseer`
+
+`npm install --no-dev`
+
+`npm run sequelize db:migrate`
+
+`npm run grunt`
+
+`npm run prod`
+
+## Development
+
+Feel free to clone this project and submit Merge Requests or just fork it and make it your own!
+
+You will need the following tools/libraries to develop Overseer:
+
+* node.js
+* NPM
+* Grunt.js
+* Git (not strictly required but ideal)
+
+Other than that, you should be good to go! You can start the development server with `nodemon` to auto-reload changes:
+
+`npm run nodemon`
+
+And to auto-compile asset changes (e.g. SASS and JS):
+
+`npm run grunt watch`
+
+If all went well, you should be able to visit http://localhost:3000/ in your browser and see the dashboard.

assets/js/nechryael.js

@@ -0,0 +1,14 @@
+$(document).ready(function() {
+  $('#filter-limit').on('change', () => {
+    $.cookie('filter_limit', $('#filter-limit').val());
+    $('#filter-form').submit();
+  });
+
+  // check state of limit filter
+  var cookie_limit = $.cookie('filter_limit');
+  // if limit is different than what's selected
+  var active_limit = $('#filter-limit').val();
+  if ((cookie_limit) && (cookie_limit != active_limit)) {
+    $('#filter-limit').val(cookie_limit).trigger('change');
+  }
+});

assets/styles/gargoyle.scss

@@ -1,10 +1,51 @@
-$nav-bar-height: 50px;
+$primary-color: orangered;
+$primary-color-highlight: darken($primary-color, 10%);
+$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+$nav-bar-height: 60px;
 
 body{
   padding: $nav-bar-height 0 0;
   background: lightgrey;
 }
 
+a{
+  color: $primary-color;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    color: $primary-color-highlight;
+  }
+}
+
+header{
+  h1{
+    text-align: center;
+  }
+}
+
+.button.button-primary,
+button.button-primary,
+input[type="button"].button-primary,
+input[type="reset"].button-primary,
+input[type="submit"].button-primary{
+  background-color: $primary-color;
+  color: white;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    background-color: $primary-color-highlight;
+  }
+}
+
+.container.fluid{
+  width: calc(100% - 60px);
+  max-width: 100%;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
 #nav-bar{
   position: fixed;
   top: 0;
@@ -12,11 +53,17 @@ body{
   width: 100%;
   height: $nav-bar-height;
   background: #212121;
-  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
+  box-shadow: $box-shadow-1;
+  color: white;
+  z-index: 100;
 
   .nav-bar-left{
     float: left;
   }
+  .nav-bar-right{
+    float: right;
+    margin-right: 35px;
+  }
 
   ul{
     list-style: none;
@@ -26,12 +73,82 @@ body{
     }
   }
 
+  .site-logo,
   .nav-link a{
-    color: teal;
-    transition: all 230ms ease-in-out;
+    padding: 10px 12px;
+    font-size: 2.5rem;
+    text-decoration: none;
+  }
+
+  .site-logo{
+    padding-left: 35px;
+    font-weight: bold;
+  }
+
+  #search-form{
+    display: inline-block;
+    padding: 10px 0;
+
+    li{
+      display: inline-block;
+    }
+
+    input{
+      display: inline-block;
+      width: 256px;
+    }
+  }
+
+  #search-button{
+    display: inline-block;
+    margin-left: 0;
+    margin-right: 35px;
+    padding: 0 10px;
+    background: $primary-color;
+    border: 1px solid white;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+    transition: all 200ms ease-in-out;
 
     &:hover{
-      color: green;
+      background: $primary-color-highlight;
+      color: #eee;
     }
   }
 }
+
+#main-content{
+  margin-top: 25px;
+  padding: 20px 32px;
+  background: white;
+  box-shadow: $box-shadow-2;
+}
+
+#record-actions{
+  p{
+    margin-bottom: 0;
+    font-size: 2rem;
+  }
+}
+
+#item-header,
+#license-header{
+  margin-bottom: 25px;
+
+  h1,
+  p{
+    display: inline-block;
+    margin-bottom: 7px;
+  }
+
+  .item-added-date,
+  .item-updated-date,
+  .license-added-date,
+  .license-updated-date{
+    margin-bottom: 5px;
+    color: #666;
+    font-size: 1.6rem;
+    font-style: italic;
+  }
+}

bin/run-php.sh

@@ -1,4 +0,0 @@
-#!/bin/sh
-
-# start a local instance of the app using PHP's built-in webserver
-php -S localhost:8080 -t public/ public/index.php

bin/start.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+cd /opt/overseer/
+
+/usr/bin/env node index.js

build/etc/default.json

@@ -0,0 +1,10 @@
+{
+  "server": {
+    "address": "0.0.0.0",
+    "port": 3000
+  },
+  "database": {
+    "driver": "sqlite",
+    "connection_string": "/opt/overseer/data/overseer.db"
+  }
+}

build/etc/overseer.service

@@ -0,0 +1,12 @@
+[Unit]
+Description=Overseer inventory tracking app
+
+[Service]
+User=overseer
+Group=overseer
+Environment="NODE_CONFIG_DIR=/etc/overseer"
+ExecStart=/usr/bin/overseer
+SuccessExitStatus=143
+
+[Install]
+WantedBy=multi-user.target

build/scripts/postinst.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+GETENT_USER=$(getent passwd overseer)
+GETENT_GROUP=$(getent group overseer)
+
+# Create the overseer user if it doesn't already exist
+if [ "$GETENT_USER" = "" ]; then
+	echo "Creating the 'overseer' user."
+	useradd -r overseer
+else
+	echo "The 'overseer' user already exists, skipping creation."
+fi
+
+# Create the overseer group if it doesn't already exist
+if [ "$GETENT_GROUP" = "" ]; then
+	echo "Creating the 'overseer' group."
+	groupadd overseer
+	usermod -aG overseer overseer
+else
+	echo "The 'overseer' group already exists, skipping creation."
+fi
+
+# Change the directory ownership of /etc
+chown -R overseer:overseer /etc/overseer
+
+# Create the log directory under /var/log
+if [ ! -d /var/log/overseer ]; then
+	echo "Creating /var/log/overseer to store log files."
+	mkdir /var/log/overseer
+	chown overseer:overseer /var/log/overseer
+else
+	echo "/var/log/overseer already exists, skipping creation."
+fi
+
+# Make sure the app's source and configuration files are owned the new user and group
+chown -R overseer:overseer /opt/overseer
+chown -R overseer:overseer /etc/overseer
+
+# Reload systemd unit files
+systemctl daemon-reload
+
+#DEBHELPER#
+
+exit 0

composer.json

@@ -1,24 +0,0 @@
-{
-    "name": "bitgoblin/overseer",
-    "description": "Self-hosted inventory tracking web app",
-    "type": "project",
-    "license": "BSD-2-Clause",
-    "autoload": {
-        "psr-4": {
-            "BitGoblin\\Overseer\\": "src/"
-        }
-    },
-    "authors": [
-        {
-            "name": "Gregory Ballantine",
-            "email": "gballantine@bitgoblin.tech"
-        }
-    ],
-    "minimum-stability": "stable",
-    "require": {
-        "slim/slim": "^4.10",
-        "slim/psr7": "^1.5",
-        "php-di/php-di": "^6.4",
-        "slim/twig-view": "^3.3"
-    }
-}

config/config.json

@@ -0,0 +1,20 @@
+{
+  "development": {
+    "storage": "./data/overseer.db",
+    "dialect": "sqlite"
+  },
+  "test": {
+    "username": "root",
+    "password": null,
+    "database": "database_test",
+    "host": "127.0.0.1",
+    "dialect": "mysql"
+  },
+  "production": {
+    "username": "root",
+    "password": null,
+    "database": "database_production",
+    "host": "127.0.0.1",
+    "dialect": "mysql"
+  }
+}

config/default.json

@@ -0,0 +1,16 @@
+{
+  "server": {
+    "address": "0.0.0.0",
+    "port": 3000
+  },
+  "database": {
+    "driver": "sqlite",
+    "connection_string": "data/overseer.db"
+  },
+  "use_redis": false,
+  "redis": {
+    "host": "192.168.1.10",
+    "port": 6379,
+    "number": "0"
+  }
+}

gulpfile.js

@@ -1,17 +0,0 @@
-const gulp = require('gulp');
-const { watch } = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
-
-// compile 
-function styles(cb) {
-  return gulp.src('./assets/styles/**/*.scss')
-    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
-    .pipe(gulp.dest('./public/css'));
-  cb();
-}
-
-// by default, watch files
-exports.default = function() {
-  // compile sass stylesheets
-  watch('assets/styles/**/*.scss', styles);
-};

index.js

@@ -0,0 +1,84 @@
+const express = require('express');
+const session = require('express-session');
+const RedisStore = require('connect-redis')(session);
+// const flash = require('@bitgoblin/express-flasher');
+
+// instantiate new express.js app
+const app = express();
+const config = require('config');
+
+// initialize database connection
+require('./src/models');
+
+if (config.get('use_redis')) {
+  // initialize Redis store for session data
+  const redisClient = require('./src/redis');
+
+  // initialize express.js session w/ Redis datastore
+  app.use(session({
+    store: new RedisStore({
+      client: redisClient,
+    }), // use Redis datastore
+    resave: false, // don't save session if unmodified
+    saveUninitialized: false, // don't create session until something stored
+    secret: 'lord of the rings',
+  }));
+} else {
+  // initialize express.js session w/ Redis datastore
+  app.use(session({
+    resave: false, // don't save session if unmodified
+    saveUninitialized: false, // don't create session until something stored
+    secret: 'lord of the rings',
+  }));
+}
+
+// setup flash messaging
+// app.use(flash.flash());
+// app.use(flash.flashRead());
+
+// set up body POST parameters
+app.use(express.json());
+app.use(express.urlencoded({
+  extended: true,
+}));
+
+// load middleware
+const userSessionMiddleware = require('./src/middleware/user-session');
+app.use(userSessionMiddleware.userSession);
+
+// load the template engine
+app.set('view engine', 'twig');
+
+// enable static file serving
+app.use(express.static('public'));
+
+// load route handlers
+const homeRoutes = require('./src/routes/home');
+const authRoutes = require('./src/routes/auth');
+const itemRoutes = require('./src/routes/item');
+const licenseRoutes = require('./src/routes/license');
+const searchRoutes = require('./src/routes/search');
+
+// register route handlers
+app.get('/', homeRoutes.getIndex);
+app.get('/auth/register', authRoutes.getRegister);
+app.post('/auth/register', authRoutes.postRegister);
+app.get('/auth/login', authRoutes.getLogin);
+app.post('/auth/login', authRoutes.postLogin);
+app.get('/auth/logout', authRoutes.getLogout);
+app.get('/item/add', itemRoutes.getAdd);
+app.post('/item/add', itemRoutes.postAdd);
+app.get('/item/:id', itemRoutes.getItem);
+app.get('/item/:id/edit', itemRoutes.getItemEdit);
+app.post('/item/:id/edit', itemRoutes.postItemEdit);
+app.get('/license/add', licenseRoutes.getAdd);
+app.post('/license/add', licenseRoutes.postAdd);
+app.get('/license/:id', licenseRoutes.getLicense);
+app.get('/license/:id/edit', licenseRoutes.getEdit);
+app.post('/license/:id/edit', licenseRoutes.postEdit);
+app.get('/search', searchRoutes.getSearch);
+
+// start app
+app.listen(config.get('server.port'), config.get('server.address'), () => {
+  console.log(`Overseer is listening on port ${config.get('server.port')}.`);
+});

migrations/0001_add_items_table.js

@@ -0,0 +1,28 @@
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.createTable('items', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+      },
+      manufacturer: Sequelize.DataTypes.STRING,
+      serialNumber: Sequelize.DataTypes.STRING,
+      skuNumber: Sequelize.DataTypes.STRING,
+      type: Sequelize.DataTypes.STRING,
+      purchasedFrom: Sequelize.DataTypes.STRING,
+      purchasedAt: Sequelize.DataTypes.DATE,
+      createdAt: Sequelize.DataTypes.DATE,
+      updatedAt: Sequelize.DataTypes.DATE,
+    });
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.dropTable('items');
+  }
+};

migrations/0002_add_licenses_table.js

@@ -0,0 +1,37 @@
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.createTable('licenses', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+      },
+      key: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+      },
+      manufacturer: Sequelize.DataTypes.STRING,
+      seatsUsed: {
+        type: Sequelize.DataTypes.NUMBER,
+        defaultValue: 0,
+      },
+      seatsTotal: {
+        type: Sequelize.DataTypes.NUMBER,
+        defaultValue: 1,
+      },
+      purchasedFrom: Sequelize.DataTypes.STRING,
+      purchasedAt: Sequelize.DataTypes.DATE,
+      createdAt: Sequelize.DataTypes.DATE,
+      updatedAt: Sequelize.DataTypes.DATE,
+    });
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.dropTable('licenses');
+  }
+};

migrations/0003_add_users_table.js

@@ -0,0 +1,44 @@
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.createTable('users', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      username: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+        unique: true,
+      },
+      email: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+        unique: true,
+      },
+      password: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+      },
+      salt: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: false,
+      },
+      firstName: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: true,
+      },
+      lastName: {
+        type: Sequelize.DataTypes.STRING,
+        allowNull: true,
+      },
+      createdAt: Sequelize.DataTypes.DATE,
+      updatedAt: Sequelize.DataTypes.DATE,
+    });
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.dropTable('users');
+  }
+};

nodemon.json

@@ -0,0 +1,9 @@
+{
+  "verbose": true,
+  "ext": "js,json,twig",
+  "ignore": [
+    "*.test.js",
+    "assets/",
+    "data/"
+  ]
+}

package.json

@@ -1,10 +1,14 @@
 {
   "name": "overseer",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Self-hosted inventory tracker",
   "main": "index.js",
   "scripts": {
-    "gulp": "gulp",
+    "start": "node index.js",
+    "grunt": "grunt",
+    "nodemon": "nodemon index.js",
+    "sequelize": "sequelize-cli",
+    "lint": "eslint index.js src/**/*.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -16,10 +20,38 @@
     "tracking"
   ],
   "author": "Gregory Ballanine <gballantine@bitgoblin.tech>",
+  "uploaders": [
+    {
+      "name": "Gregory Ballantine",
+      "email": "gballantine@bitgoblin.tech"
+    }
+  ],
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "gulp": "^4.0.2",
-    "gulp-sass": "^5.1.0",
+    "eslint": "^8.26.0",
+    "eslint-config-google": "^0.14.0",
+    "grunt": "^1.5.3",
+    "grunt-cli": "^1.4.3",
+    "grunt-contrib-sass": "^2.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-deb": "^0.2.5",
+    "nodemon": "^2.0.20",
     "sass": "^1.55.0"
+  },
+  "dependencies": {
+    "config": "^3.3.8",
+    "connect-redis": "^6.1.3",
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "mariadb": "^3.0.2",
+    "mysql2": "^2.3.3",
+    "pg": "^8.8.0",
+    "pg-hstore": "^2.3.4",
+    "redis": "^4.4.0",
+    "sequelize": "^6.25.3",
+    "sequelize-cli": "^6.5.2",
+    "sqlite3": "^5.1.2",
+    "twig": "^1.15.4"
   }
 }

public/.htaccess

@@ -1,5 +0,0 @@
-# rewrite rules
-RewriteEngine On
-RewriteCond %{REQUEST_FILENAME} !-f
-RewriteCond %{REQUEST_FILENAME} !-d
-RewriteRule ^ index.php [QSA,L]

public/css/gargoyle.css

@@ -1 +0,0 @@
-body{padding:50px 0 0;background:#d3d3d3}#nav-bar{position:fixed;top:0;left:0;width:100%;height:50px;background:#212121;box-shadow:0 2px 1px rgba(0,0,0,.25)}#nav-bar .nav-bar-left{float:left}#nav-bar ul{list-style:none}#nav-bar ul li{display:inline-block}#nav-bar .nav-link a{color:teal;transition:all 230ms ease-in-out}#nav-bar .nav-link a:hover{color:green}

public/index.php

@@ -1,24 +0,0 @@
-<?php
-
-// if we're looking for static files in dev, return false so they can be served.
-if (PHP_SAPI == 'cli-server') {
-  $url  = parse_url($_SERVER['REQUEST_URI']);
-  $file = __DIR__ . $url['path'];
-
-  // check the file types, only serve standard files
-  if (preg_match('/\.(?:png|js|jpg|jpeg|gif|css)$/', $file)) {
-    // does the file exist? If so, return it
-    if (is_file($file))
-        return false;
-
-    // file does not exist. return a 404
-    header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');
-    printf('"%s" does not exist', $_SERVER['REQUEST_URI']);
-    return false;
-  }
-}
-
-require_once __DIR__ .  '/../src/app.php';
-
-$app->run();
-

src/Controllers/Controller.php

@@ -1,19 +0,0 @@
-<?php
-
-namespace BitGoblin\Overseer\Controllers;
-
-use Psr\Container\ContainerInterface;
-
-class Controller {
-
-  protected $container;
-
-  public function __construct(ContainerInterface $container) {
-    $this->container = $container;
-  }
-
-  public function get(string $name) {
-    return $this->container->get($name);
-  }
-
-}

src/Controllers/HomeController.php

@@ -1,16 +0,0 @@
-<?php
-
-namespace BitGoblin\Overseer\Controllers;
-
-use Psr\Http\Message\ResponseInterface as Response;
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Slim\Views\Twig;
-
-class HomeController extends Controller {
-
-  public function getIndex(Request $request, Response $response): Response {
-    $view = Twig::fromRequest($request);
-    return $view->render($response, 'index.twig');
-  }
-
-}

src/app.php

@@ -1,25 +0,0 @@
-<?php
-
-use DI\Container;
-use Slim\Factory\AppFactory;
-use Slim\Views\Twig;
-use Slim\Views\TwigMiddleware;
-
-require __DIR__ . '/../vendor/autoload.php';
-
-// Create new container object and add our config object to it
-$container = new Container();
-
-// Set container to create App with on AppFactory
-AppFactory::setContainer($container);
-$app = AppFactory::create();
-
-// create Twig instance
-$twig = Twig::create('views', ['cache' => false]);
-// add Twig-View Middleware
-$app->add(TwigMiddleware::create($app, $twig));
-
-// load routes
-require_once __DIR__ . '/routes.php';
-
-// app starts in public/index.php

src/middleware/user-session.js

@@ -0,0 +1,18 @@
+const db = require('../models');
+const User = db.users;
+
+// checks if a session user ID is set, and if so grab the user's info
+exports.userSession = async function(req, res, next) {
+  if ('user' in req.session) {
+    const user = await User.findAll({
+      where: {
+        id: req.session.user,
+      },
+    });
+
+    // pass user info to views
+    res.locals.user = user[0];
+  }
+
+  next();
+};

src/models/index.js

@@ -0,0 +1,41 @@
+const dbConfig = require('config').get('database');
+const Sequelize = require('sequelize');
+
+const sequelize = initDatabase();
+
+const db = {};
+
+db.Sequelize = Sequelize;
+db.sequelize = sequelize;
+
+db.items = require('./item.js')(sequelize, Sequelize);
+db.licenses = require('./license.js')(sequelize, Sequelize);
+db.users = require('./user.js')(sequelize, Sequelize);
+
+module.exports = db;
+
+/**
+ * Initializes a sequelize database connection.
+ *
+ * @return {object} - sequelize connection
+ */
+function initDatabase() {
+  let sequelize = null;
+
+  if (dbConfig.get('driver') == 'sqlite') {
+    sequelize = new Sequelize({
+      dialect: dbConfig.get('driver'),
+      storage: dbConfig.get('connection_string'),
+    });
+  } else {
+    const dbName = dbConfig.get('name');
+    const dbUsername = dbConfig.get('username');
+    const dbPassword = dbConfig.get('password');
+    sequelize = new Sequelize(dbName, dbUsername, dbPassword, {
+      dialect: dbConfig.get('driver'),
+      host: dbConfig.get('address'),
+    });
+  }
+
+  return sequelize;
+}

src/models/item.js

@@ -0,0 +1,35 @@
+module.exports = (sequelize, Sequelize) => {
+  const Item = sequelize.define('item', {
+
+    name: {
+      type: Sequelize.STRING,
+    },
+
+    manufacturer: {
+      type: Sequelize.STRING,
+    },
+
+    serialNumber: {
+      type: Sequelize.STRING,
+    },
+
+    skuNumber: {
+      type: Sequelize.STRING,
+    },
+
+    type: {
+      type: Sequelize.STRING,
+    },
+
+    purchasedFrom: {
+      type: Sequelize.STRING,
+    },
+
+    purchasedAt: {
+      type: Sequelize.DATE,
+    },
+
+  });
+
+  return Item;
+};

src/models/license.js

@@ -0,0 +1,37 @@
+module.exports = (sequelize, Sequelize) => {
+  const License = sequelize.define('license', {
+
+    name: {
+      type: Sequelize.STRING,
+    },
+
+    key: {
+      type: Sequelize.STRING,
+    },
+
+    manufacturer: {
+      type: Sequelize.STRING,
+    },
+
+    seatsUsed: {
+      type: Sequelize.NUMBER,
+      default: 0,
+    },
+
+    seatsTotal: {
+      type: Sequelize.NUMBER,
+      default: 1,
+    },
+
+    purchasedFrom: {
+      type: Sequelize.STRING,
+    },
+
+    purchasedAt: {
+      type: Sequelize.DATE,
+    },
+
+  });
+
+  return License;
+};

src/models/user.js

@@ -0,0 +1,39 @@
+module.exports = (sequelize, Sequelize) => {
+  const User = sequelize.define('user', {
+
+    username: {
+      type: Sequelize.STRING,
+      allowNull: false,
+      unique: true,
+    },
+
+    email: {
+      type: Sequelize.STRING,
+      allowNull: false,
+      unique: true,
+    },
+
+    password: {
+      type: Sequelize.STRING,
+      allowNull: false,
+    },
+
+    salt: {
+      type: Sequelize.STRING,
+      allowNull: false,
+    },
+
+    firstName: {
+      type: Sequelize.STRING,
+      allowNull: true,
+    },
+
+    lastName: {
+      type: Sequelize.STRING,
+      allowNull: true,
+    },
+
+  });
+
+  return User;
+};

src/redis.js

@@ -0,0 +1,31 @@
+const redisConfig = require('config').get('redis');
+
+exports.default = function() {
+  let redisUrl = 'redis://';
+
+  // add the redis username if defined
+  if (redisConfig.has('username')) {
+    redisUrl += redisConfig.get('username');
+  }
+  // add the user password if defined
+  if (redisConfig.has('password')) {
+    redisUrl += ':' + redisConfig.get('password') + '@';
+  }
+  // add redis host URL
+  redisUrl += redisConfig.get('host');
+  // add redis host port
+  redisUrl += ':' + redisConfig.get('port');
+  // add redis database number if defined
+  if (redisConfig.has('number')) {
+    redisUrl += redisConfig.get('number');
+  }
+
+  const { createClient } = require("redis");
+  let redisClient = createClient({
+    url: redisUrl,
+    legacyMode: true,
+  });
+  redisClient.connect().catch(console.error);
+
+  return redisClient;
+};

src/routes.php

@@ -1,7 +0,0 @@
-<?php
-
-use Psr\Http\Message\ResponseInterface as Response;
-use Psr\Http\Message\ServerRequestInterface as Request;
-
-// index GET route - this page should welcome the user and direct them to the available actions
-$app->get('/', '\\BitGoblin\\Overseer\\Controllers\\HomeController:getIndex')->setName('index');

src/routes/auth.js

@@ -0,0 +1,58 @@
+const db = require('../models');
+const User = db.users;
+const crypto = require('crypto');
+
+// GET - /auth/login
+exports.getLogin = async function(req, res) {
+  res.render('auth/login.twig');
+};
+
+// POST - /auth/login
+exports.postLogin = async function(req, res) {
+  const user = await User.findAll({
+    where: {
+      username: req.body.login_username,
+    },
+  });
+
+  const attemptedKey = crypto.pbkdf2Sync(req.body.login_password, user[0].salt, 10000, 64, 'sha512');
+  const attemptedHash = attemptedKey.toString('hex');
+
+  if (attemptedHash == user[0].password) {
+    req.session.user = user[0].id;
+    res.redirect('/');
+  } else {
+    res.redirect('/auth/login');
+  }
+}
+
+// GET - /auth/register
+exports.getRegister = async function(req, res) {
+  res.render('auth/register.twig');
+};
+
+// POST - /auth/register
+exports.postRegister = async function(req, res) {
+  const passwordSalt = crypto.randomBytes(32).toString('base64');
+  const passwordKey = crypto.pbkdf2Sync(req.body.register_password, passwordSalt, 10000, 64, 'sha512');
+  const passwordHash = passwordKey.toString('hex');
+
+  const user = await User.create({
+    username: req.body.register_username,
+    password: passwordHash,
+    salt: passwordSalt,
+    email: req.body.register_email,
+    firstName: req.body.register_first_name,
+    lastName: req.body.register_last_name,
+  });
+
+  res.redirect('/');
+};
+
+// GET - /auth/logout
+exports.getLogout = async function(req, res) {
+  // destroy the user's session
+  req.session.destroy();
+
+  res.redirect('/');
+}

src/routes/home.js

@@ -0,0 +1,38 @@
+const db = require('../models');
+const Item = db.items;
+const License = db.licenses;
+
+// GET - /
+exports.getIndex = async function(req, res) {
+  // check if there's a limit set
+  let limit = 10; // default to 10 results
+  if ('limit' in req.query) {
+    limit = req.query.limit;
+  }
+
+  // fetch inventory items from database
+  const items = await Item.findAll({
+    limit: limit,
+    order: [
+      ['updatedAt', 'DESC'],
+    ],
+  });
+
+  // fetch licenses from database
+  const licenses = await License.findAll({
+    limit: limit,
+    order: [
+      ['updatedAt', 'DESC'],
+    ],
+  });
+
+  // req.flash('info', 'This is a test flash message.');
+
+  res.render('index.twig', {
+    inventory: items,
+    licenses: licenses,
+    filters: {
+      limit: limit,
+    },
+  });
+};

src/routes/item.js

@@ -0,0 +1,78 @@
+const db = require('../models');
+const Item = db.items;
+
+// GET - /item/add
+exports.getAdd = async function(req, res) {
+  res.render('item/add.twig');
+};
+
+// POST - /item/add
+exports.postAdd = async function(req, res) {
+  const item = await Item.create({
+    name: req.body.item_name,
+    serialNumber: req.body.item_serial,
+    skuNumber: req.body.item_sku,
+    purchasedFrom: req.body.item_purchase_from,
+    purchasedAt: req.body.item_purchase_date,
+    manufacturer: req.body.item_manufacturer,
+    type: req.body.item_type,
+  });
+
+  console.log(`Saved item ${item.name} to the database.`);
+
+  res.redirect('/');
+};
+
+// GET - /item/{id}
+exports.getItem = async function(req, res) {
+  const item = await Item.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  res.render('item/view.twig', {
+    item: item[0],
+  });
+};
+
+// GET - /item/{id}/edit
+exports.getItemEdit = async function(req, res) {
+  const item = await Item.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  res.render('item/edit.twig', {
+    item: item[0],
+  });
+};
+
+// POST - /item/{id}/edit
+exports.postItemEdit = async function(req, res) {
+  // fetch item from DB
+  const itemSearch = await Item.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  // retrieve the item record from the array for ease of use
+  const item = itemSearch[0];
+
+  // update item attributes
+  item.name = req.body.item_name;
+  item.serialNumber = req.body.item_serial;
+  item.skuNumber = req.body.item_sku;
+  item.purchasedFrom = req.body.item_purchase_from;
+  item.purchasedAt = req.body.item_purchase_date;
+  item.manufacturer = req.body.item_manufacturer;
+  item.type = req.body.item_type;
+
+  // save attribute changes
+  await item.save();
+
+  // redirect user to item page
+  res.redirect('/item/' + item.id);
+};

src/routes/license.js

@@ -0,0 +1,78 @@
+const db = require('../models');
+const License = db.licenses;
+
+// GET - /license/add
+exports.getAdd = async function(req, res) {
+  res.render('license/add.twig');
+};
+
+// POST - /license/add
+exports.postAdd = async function(req, res) {
+  const license = await License.create({
+    name: req.body.license_name,
+    key: req.body.license_key,
+    manufacturer: req.body.license_manufacturer,
+    seatsUsed: req.body.license_seats_used,
+    seatsTotal: req.body.license_seats_total,
+    purchasedFrom: req.body.license_purchase_from,
+    purchasedAt: req.body.license_purchase_date,
+  });
+
+  console.log(`Saved license ${license.name} to the database.`);
+
+  res.redirect('/');
+};
+
+// GET - /license/{id}
+exports.getLicense = async function(req, res) {
+  const license = await License.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  res.render('license/view.twig', {
+    license: license[0],
+  });
+};
+
+// GET - /license/{id}/edit
+exports.getEdit = async function(req, res) {
+  const license = await License.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  res.render('license/edit.twig', {
+    license: license[0],
+  });
+};
+
+// POST - /license/{id}/edit
+exports.postEdit = async function(req, res) {
+  // fetch license from DB
+  const licenseSearch = await License.findAll({
+    where: {
+      id: req.params.id,
+    },
+  });
+
+  // retrieve the license record from the array for ease of use
+  const license = licenseSearch[0];
+
+  // update license attributes
+  license.name = req.body.license_name;
+  license.key = req.body.license_key;
+  license.manufacturer = req.body.license_manufacturer;
+  license.seatsUsed = req.body.license_seats_used;
+  license.seatsTotal = req.body.license_seats_total;
+  license.purchasedFrom = req.body.license_purchase_from;
+  license.purchasedAt = req.body.license_purchase_date;
+
+  // save attribute changes
+  await license.save();
+
+  // redirect user to license page
+  res.redirect('/license/' + license.id);
+};

src/routes/search.js

@@ -0,0 +1,42 @@
+const db = require('../models');
+const Item = db.items;
+const License = db.licenses;
+const {Op} = require('sequelize');
+
+// GET - /search
+exports.getSearch = async function(req, res) {
+  // decode URL search query
+  const query = req.query.query;
+
+  // fetch inventory items from database based on search query
+  const itemResults = await Item.findAll({
+    where: {
+      name: {
+        [Op.like]: '%' + query + '%',
+      },
+    },
+    limit: 10,
+    order: [
+      ['updatedAt', 'DESC'],
+    ],
+  });
+
+  // fetch licenses from database based on search query
+  const licenseResults = await License.findAll({
+    where: {
+      name: {
+        [Op.like]: '%' + query + '%',
+      },
+    },
+    limit: 10,
+    order: [
+      ['updatedAt', 'DESC'],
+    ],
+  });
+
+  res.render('search.twig', {
+    query: query,
+    itemResults: itemResults,
+    licenseResults: licenseResults,
+  });
+};

views/auth/login.twig

@@ -0,0 +1,40 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Home{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Login to your account.</h1>
+  </div>
+</header>
+
+<section id="record-actions" class="row">
+  <div class="three columns">
+    <p>.</p>
+  </div>
+
+  <div class="six columns">
+    <form class="u-full-width" action="/auth/login" method="POST">
+      <div class="row">
+        <label for="login_username">
+          Username:
+          <input type="text" id="login_username" class="u-full-width" name="login_username" placeholder="myuser1">
+        </label>
+      </div>
+
+      <div class="twelve columns">
+        <label for="login_password">
+          Password:
+          <input type="password" id="login_password" class="u-full-width" name="login_password" placeholder="Enter your password...">
+        </label>
+      </div>
+
+      <input type="submit" class="button-primary u-full-width" value="Login">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/auth/register.twig

@@ -0,0 +1,67 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Home{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Register for a new account.</h1>
+  </div>
+</header>
+
+<section id="record-actions" class="row">
+  <div class="three columns">
+    <p>.</p>
+  </div>
+
+  <div class="six columns">
+    <form class="u-full-width" action="/auth/register" method="POST">
+      <div class="row">
+        <div class="six columns">
+          <label for="register_username">
+            Username:
+            <input type="text" id="register_username" class="u-full-width" name="register_username" placeholder="myuser1">
+          </label>
+        </div>
+
+        <div class="six columns">
+          <label for="register_password">
+            Password:
+            <input type="password" id="register_password" class="u-full-width" name="register_password" placeholder="Enter your password...">
+          </label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="twelve columns">
+          <label for="register_email">
+            Email address:
+            <input type="email" id="register_email" class="u-full-width" name="register_email" placeholder="myemail@example.com">
+          </label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="register_first_name">
+            First name:
+            <input type="text" id="register_first_name" class="u-full-width" name="register_first_name" placeholder="Firstname">
+          </label>
+        </div>
+
+        <div class="six columns">
+          <label for="register_last_name">
+            Last name:
+            <input type="password" id="register_last_name" class="u-full-width" name="register_last_name" placeholder="Lastname">
+          </label>
+        </div>
+      </div>
+
+      <input type="submit" class="button-primary u-full-width" value="Register account">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/index.twig

@@ -1,5 +1,7 @@
 {% extends 'layout.twig' %}
 
+{% block title %}Home{% endblock %}
+
 {% block content %}
 
 <!-- page header -->
@@ -9,4 +11,90 @@
   </div>
 </header>
 
+<section id="record-actions" class="row">
+  <div class="columns four">
+    <a href="/item/add">
+      <p><i class="fa-solid fa-plus"></i> Add Item</p>
+    </a>
+  </div>
+
+  <div class="columns four">
+    <a href="/license/add">
+      <p><i class="fa-solid fa-plus"></i> Add License</p>
+    </a>
+  </div>
+
+  <div class="columns four">
+    <a href="/item/search">
+      <p><i class="fa-solid fa-search"></i> Search</p>
+    </a>
+  </div>
+</section>
+
+<hr>
+
+<section class="row">
+  <div class="columns twelve">
+    <h3>Recently updated hardware:</h3>
+    <table class="u-full-width">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Manufacturer</th>
+          <th>Type</th>
+          <th>Updated at</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for item in inventory %}
+          <tr>
+            <td><a href="/item/{{ item.id }}">{{ item.name }}</a></td>
+            <td>{{ item.manufacturer }}</td>
+            <td>{{ item.type }}</td>
+            <td>{{ item.updatedAt | date("m/d/Y h:i:s A") }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <h3>Recently updated licenses:</h3>
+    <table class="u-full-width">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Manufacturer</th>
+          <th>Updated at</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for license in licenses %}
+          <tr>
+            <td><a href="/license/{{ license.id }}">{{ license.name }}</a></td>
+            <td>{{ license.manufacturer }}</td>
+            <td>{{ license.updatedAt | date("m/d/Y h:i:s A") }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <form id="filter-form" class="u-full-width" action="/" method="GET">
+      <select id="filter-limit" name="limit">
+        <option {% if filters['limit'] == 5 %}selected{% endif %} value="5">5</option>
+        <option {% if filters['limit'] == 10 %}selected{% endif %} value="10">10</option>
+        <option {% if filters['limit'] == 20 %}selected{% endif %} value="20">20</option>
+        <option {% if filters['limit'] == 35 %}selected{% endif %} value="35">35</option>
+        <option {% if filters['limit'] == 50 %}selected{% endif %} value="50">50</option>
+      </select>
+    </form>
+  </div>
+</section>
+
 {% endblock %}

views/item/add.twig

@@ -0,0 +1,73 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Add New Item{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Add new item</h1>
+  </div>
+</header>
+
+<section class="row">
+  <div class="columns twelve">
+    <form action="/item/add" method="POST">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="item_name">Item name:</label>
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_serial">Serial number:</label>
+          <input class="u-full-width" type="text" placeholder="0123456789" id="item_serial" name="item_serial">
+        </div>
+
+        <div class="six columns">
+          <label for="item_sku">SKU number:</label>
+          <input class="u-full-width" type="text" placeholder="ABC12345678" id="item_sku" name="item_sku">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_purchase_from">Purchased from:</label>
+          <input class="u-full-width" type="text" placeholder="Newegg" id="item_purchase_from" name="item_purchase_from">
+        </div>
+
+        <div class="six columns">
+          <label for="item_purchase_date">Purchased at:</label>
+          <input class="u-full-width" type="datetime-local" id="item_purchase_date" name="item_purchase_date">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer">
+        </div>
+
+        <div class="six columns">
+          <label for="item_type">Item type</label>
+          <select class="u-full-width" id="item_type" name="item_type">
+            <option value="cpu">Processor</option>
+            <option value="motherboard">Motherboard</option>
+            <option value="memory">Memory (RAM)</option>
+            <option value="psu">Power Supply</option>
+            <option value="case">Case</option>
+            <option value="storage">Storage Device</option>
+            <option value="gpu">Graphics Card</option>
+          </select>
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/item/edit.twig

@@ -0,0 +1,73 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Edit Item{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Editing "{{ item.name }}"</h1>
+  </div>
+</header>
+
+<section class="row">
+  <div class="columns twelve">
+    <form action="/item/{{ item.id }}/edit" method="POST">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="item_name">Item name:</label>
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" value="{{ item.name }}" required>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_serial">Serial number:</label>
+          <input class="u-full-width" type="text" placeholder="0123456789" id="item_serial" name="item_serial" value="{{ item.serialNumber }}">
+        </div>
+
+        <div class="six columns">
+          <label for="item_sku">SKU number:</label>
+          <input class="u-full-width" type="text" placeholder="ABC12345678" id="item_sku" name="item_sku" value="{{ item.skuNumber }}">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_purchase_from">Purchased from:</label>
+          <input class="u-full-width" type="text" placeholder="Newegg" id="item_purchase_from" name="item_purchase_from" value="{{ item.purchasedFrom }}">
+        </div>
+
+        <div class="six columns">
+          <label for="item_purchase_date">Purchased at:</label>
+          <input class="u-full-width" type="datetime-local" id="item_purchase_date" name="item_purchase_date" value="{{ item.purchasedAt }}">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer" value="{{ item.manufacturer }}">
+        </div>
+
+        <div class="six columns">
+          <label for="item_type">Item type</label>
+          <select class="u-full-width" id="item_type" name="item_type" value="{{ item.type }}">
+            <option value="cpu">Processor</option>
+            <option value="motherboard">Motherboard</option>
+            <option value="memory">Memory (RAM)</option>
+            <option value="psu">Power Supply</option>
+            <option value="case">Case</option>
+            <option value="storage">Storage Device</option>
+            <option value="gpu">Graphics Card</option>
+          </select>
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/item/view.twig

@@ -0,0 +1,47 @@
+{% extends 'layout.twig' %}
+
+{% block title %}{{ item.name }}{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header id="item-header" class="row">
+  <div class="columns twelve">
+    <span>
+      <h1>{{ item.name }}</h1>
+      <p><a href="/item/{{ item.id }}/edit"><i class="fa-solid fa-pen-to-square"></i> Edit</a></p>
+    </span>
+    <h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
+    <h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
+  </div>
+</header>
+
+<!-- item information -->
+<section class="row">
+  <table class="columns twelve">
+    <thead>
+      <tr>
+        <th>Product name</th>
+        <th>Serial number</th>
+        <th>SKU Number</th>
+        <th>Manufacturer</th>
+        <th>Type</th>
+        <th>Seller</th>
+        <th>Purchase date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ item.name }}</td>
+        <td>{{ item.serialNumber ? item.serialNumber : 'N/a' }}</td>
+        <td>{{ item.skuNumber ? item.skuNumber : 'N/a' }}</td>
+        <td>{{ item.manufacturer ? item.manufacturer : 'N/a' }}</td>
+        <td>{{ item.type }}</td>
+        <td>{{ item.purchasedFrom ? item.purchasedFrom : 'N/a' }}</td>
+        <td>{{ item.purchasedAt | date("m/d/Y h:i:s A") }}</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+{% endblock %}

views/layout.twig

@@ -8,8 +8,9 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
   <link rel="stylesheet" href="/css/gargoyle.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-  <script src="/js/drake.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" charset="utf-8"></script>
+  <script src="/js/nechryael.min.js"></script>
 </head>
 <body>
   <!-- global navigation -->
@@ -18,15 +19,41 @@
       <ul>
         <li class="site-logo">Overseer</li>
         <li class="nav-link"><a href="/">Home</a></li>
-        <li class="nav-link"><a href="/search">Search</a></li>
-        <li class="nav-link"><a href="/add">Add Item</a></li>
+        <li class="nav-link"><a href="/item/add">Add Item</a></li>
+        <li class="nav-link"><a href="/license/add">Add License</a></li>
+      </ul>
+    </div>
+
+    <div class="nav-bar-right">
+      <ul>
+        <li>
+          <form id="search-form" action="/search" method="GET">
+            <input type="text" name="query" placeholder="enter a search query...">
+          </form>
+
+          <button id="search-button" type="submit" for="search-form"><i class="fa-solid fa-magnifying-glass"></i></button>
+        </li>
+
+        {% if user %}
+          <li class="nav-link"><a href="/account">{{ user.username }}</a></li>
+          <li class="nav-link"><a href="/auth/logout">Logout</a></li>
+        {% else %}
+          <li class="nav-link"><a href="/auth/register">Register</a></li>
+          <li class="nav-link"><a href="/auth/login">Login</a></li>
+        {% endif %}
       </ul>
     </div>
   </nav>
 
+  {% if flash != null %}
+    <div class="flash-message {{ flash.type }}">
+      <p>{{ flash.msg }}</p>
+    </div>
+  {% endif %}
+
   <!-- main content -->
-  <div id="main-content" class="container">
+  <div id="main-content" class="container fluid">
     {% block content %}{% endblock %}
   </div>
 </body>
-</html>
+</html>

views/license/add.twig

@@ -0,0 +1,65 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Add New License{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Add new license</h1>
+  </div>
+</header>
+
+<section class="row">
+  <div class="columns twelve">
+    <form action="/license/add" method="POST">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="license_name">License name:</label>
+          <input class="u-full-width" type="text" placeholder="My new license" id="license_name" name="license_name" required>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_key">License key:</label>
+          <input class="u-full-width" type="text" placeholder="ABCD-EFGH-1234-5678" id="license_key" name="license_key" required>
+        </div>
+
+        <div class="six columns">
+          <label for="license_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="license_manufacturer" name="license_manufacturer">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_seats_used">Seats in use:</label>
+          <input class="u-full-width" type="number" placeholder="0" id="license_seats_used" name="license_seats_used" required value="0">
+        </div>
+
+        <div class="six columns">
+          <label for="license_seats_total">Seats total:</label>
+          <input class="u-full-width" type="number" placeholder="1" id="license_seats_total" name="license_seats_total" required value="1">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_purchase_from">Purchased from:</label>
+          <input class="u-full-width" type="text" placeholder="Newegg" id="license_purchase_from" name="license_purchase_from">
+        </div>
+
+        <div class="six columns">
+          <label for="license_purchase_date">Purchased at:</label>
+          <input class="u-full-width" type="datetime-local" id="license_purchase_date" name="license_purchase_date">
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/license/edit.twig

@@ -0,0 +1,65 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Edit License{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Editing "{{ license.name }}"</h1>
+  </div>
+</header>
+
+<section class="row">
+  <div class="columns twelve">
+    <form action="/license/{{ license.id }}/edit" method="POST">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="license_name">License name:</label>
+          <input class="u-full-width" type="text" placeholder="My new license" id="license_name" name="license_name" value="{{ license.name }}" required>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_key">License key:</label>
+          <input class="u-full-width" type="text" placeholder="ABCD-EFGH-1234-5678" id="license_key" name="license_key" value="{{ license.key }}" required>
+        </div>
+
+        <div class="six columns">
+          <label for="license_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="license_manufacturer" name="license_manufacturer" value="{{ license.manufacturer }}">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_seats_used">Seats in use:</label>
+          <input class="u-full-width" type="number" placeholder="0" id="license_seats_used" name="license_seats_used" required value="{{ license.seatsUsed }}">
+        </div>
+
+        <div class="six columns">
+          <label for="license_seats_total">Seats total:</label>
+          <input class="u-full-width" type="number" placeholder="1" id="license_seats_total" name="license_seats_total" required value="{{ license.seatsTotal }}">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="license_purchase_from">Purchased from:</label>
+          <input class="u-full-width" type="text" placeholder="Newegg" id="license_purchase_from" name="license_purchase_from" value="{{ license.purchasedFrom }}">
+        </div>
+
+        <div class="six columns">
+          <label for="license_purchase_date">Purchased at:</label>
+          <input class="u-full-width" type="datetime-local" id="license_purchase_date" name="license_purchase_date" value="{{ license.purchasedAt }}">
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/license/view.twig

@@ -0,0 +1,47 @@
+{% extends 'layout.twig' %}
+
+{% block title %}{{ license.name }}{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header id="license-header" class="row">
+  <div class="columns twelve">
+    <span>
+      <h1>{{ license.name }}</h1>
+      <p><a href="/license/{{ license.id }}/edit"><i class="fa-solid fa-pen-to-square"></i> Edit</a></p>
+    </span>
+    <h4 class="license-added-date">license added at: {{ license.createdAt }}</h4>
+    <h4 class="license-updated-date">Last updated at: {{ license.updatedAt }}</h4>
+  </div>
+</header>
+
+<!-- license information -->
+<section class="row">
+  <table class="columns twelve">
+    <thead>
+      <tr>
+        <th>Product name</th>
+        <th>License key</th>
+        <th>Manufacturer</th>
+        <th>Seats used</th>
+        <th>Total seats</th>
+        <th>Seller</th>
+        <th>Purchase date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ license.name }}</td>
+        <td>{{ license.key ? license.key : 'N/a' }}</td>
+        <td>{{ license.manufacturer ? license.manufacturer : 'N/a' }}</td>
+        <td>{{ license.seatsUsed }}</td>
+        <td>{{ license.seatsTotal }}</td>
+        <td>{{ license.purchasedFrom ? license.purchasedFrom : 'N/a' }}</td>
+        <td>{{ license.purchasedAt | date("m/d/Y h:i:s A") }}</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+{% endblock %}

views/search.twig

@@ -0,0 +1,66 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Search{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Searching for "{{ query }}"</h1>
+  </div>
+</header>
+
+{% if itemResults|length > 0 %}
+  <section id="search-results" class="row">
+    <div class="columns twelve">
+      <h3>Hardware components:</h3>
+      <table class="u-full-width">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Updated at</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for item in itemResults %}
+            <tr>
+              <td><a href="/item/{{ item.id }}">{{ item.name }}</a></td>
+              <td>{{ item.type }}</td>
+              <td>{{ item.updatedAt | date("m/d/Y h:i:s A") }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+{% endif %}
+
+{% if licenseResults|length > 0 %}
+  <section id="search-results" class="row">
+    <div class="columns twelve">
+      <h3>Software licenses:</h3>
+      <table class="u-full-width">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Vendor</th>
+            <th>Updated at</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for license in licenseResults %}
+            <tr>
+              <td><a href="/item/{{ license.id }}">{{ license.name }}</a></td>
+              <td>{{ license.manufacturer }}</td>
+              <td>{{ license.updatedAt | date("m/d/Y h:i:s A") }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+{% endif %}
+
+{% endblock %}