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

README.md

@@ -1,3 +1,36 @@
 # overseer
 
 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

@@ -1,3 +1,14 @@
 $(document).ready(function() {
-  console.log('Document is ready!');
+  $('#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

@@ -19,6 +19,12 @@ a{
   }
 }
 
+header{
+  h1{
+    text-align: center;
+  }
+}
+
 .button.button-primary,
 button.button-primary,
 input[type="button"].button-primary,
@@ -49,10 +55,15 @@ input[type="submit"].button-primary{
   background: #212121;
   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;
@@ -73,6 +84,38 @@ input[type="submit"].button-primary{
     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{
+      background: $primary-color-highlight;
+      color: #eee;
+    }
+  }
 }
 
 #main-content{

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

@@ -7,6 +7,7 @@
     "driver": "sqlite",
     "connection_string": "data/overseer.db"
   },
+  "use_redis": false,
   "redis": {
     "host": "192.168.1.10",
     "port": 6379,

index.js

@@ -1,32 +1,36 @@
 const express = require('express');
 const session = require('express-session');
 const RedisStore = require('connect-redis')(session);
-// const flash = require('express-flasher');
+// const flash = require('@bitgoblin/express-flasher');
 
 // instantiate new express.js app
 const app = express();
 const config = require('config');
 
 // initialize database connection
-(async () => {
-  const db = require('./src/models');
-  await db.sequelize.sync({
-    alter: true,
-  });
-})();
+require('./src/models');
 
-// initialize Redis store for session data
-const redisClient = require('./src/redis');
+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({
+  // 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());
@@ -38,6 +42,10 @@ 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');
 
@@ -46,11 +54,18 @@ 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);
@@ -61,6 +76,7 @@ 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'), () => {

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');
+  }
+};

package.json

@@ -1,12 +1,13 @@
 {
   "name": "overseer",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Self-hosted inventory tracker",
   "main": "index.js",
   "scripts": {
     "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"
   },
@@ -49,6 +50,7 @@
     "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"
   }

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

@@ -10,6 +10,7 @@ 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;
 

src/models/license.js

@@ -13,6 +13,16 @@ module.exports = (sequelize, Sequelize) => {
       type: Sequelize.STRING,
     },
 
+    seatsUsed: {
+      type: Sequelize.NUMBER,
+      default: 0,
+    },
+
+    seatsTotal: {
+      type: Sequelize.NUMBER,
+      default: 1,
+    },
+
     purchasedFrom: {
       type: Sequelize.STRING,
     },

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

@@ -4,11 +4,11 @@ exports.default = function() {
   let redisUrl = 'redis://';
 
   // add the redis username if defined
-  if (typeof redisConfig.get('username') !== 'undefined') {
+  if (redisConfig.has('username')) {
     redisUrl += redisConfig.get('username');
   }
   // add the user password if defined
-  if (typeof redisConfig.get('password') !== 'undefined') {
+  if (redisConfig.has('password')) {
     redisUrl += ':' + redisConfig.get('password') + '@';
   }
   // add redis host URL
@@ -16,7 +16,7 @@ exports.default = function() {
   // add redis host port
   redisUrl += ':' + redisConfig.get('port');
   // add redis database number if defined
-  if (typeof redisConfig.get('number') !== 'undefined') {
+  if (redisConfig.has('number')) {
     redisUrl += redisConfig.get('number');
   }
 

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

@@ -4,9 +4,15 @@ 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: 10,
+    limit: limit,
     order: [
       ['updatedAt', 'DESC'],
     ],
@@ -14,7 +20,7 @@ exports.getIndex = async function(req, res) {
 
   // fetch licenses from database
   const licenses = await License.findAll({
-    limit: 10,
+    limit: limit,
     order: [
       ['updatedAt', 'DESC'],
     ],
@@ -25,5 +31,8 @@ exports.getIndex = async function(req, res) {
   res.render('index.twig', {
     inventory: items,
     licenses: licenses,
+    filters: {
+      limit: limit,
+    },
   });
 };

src/routes/license.js

@@ -12,6 +12,8 @@ exports.postAdd = async function(req, res) {
     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,
   });
@@ -63,6 +65,8 @@ exports.postEdit = async function(req, res) {
   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;
 

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

@@ -12,13 +12,19 @@
 </header>
 
 <section id="record-actions" class="row">
-  <div class="columns six">
+  <div class="columns four">
     <a href="/item/add">
       <p><i class="fa-solid fa-plus"></i> Add Item</p>
     </a>
   </div>
 
-  <div class="columns six">
+  <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>
@@ -77,4 +83,18 @@
   </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/layout.twig

@@ -8,7 +8,8 @@
   <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="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>
@@ -18,11 +19,30 @@
       <ul>
         <li class="site-logo">Overseer</li>
         <li class="nav-link"><a href="/">Home</a></li>
-        <li class="nav-link"><a href="/item/search">Search</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 %}

views/license/add.twig

@@ -23,7 +23,7 @@
 
       <div class="row">
         <div class="six columns">
-          <label for="license_key">License Key:</label>
+          <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>
 
@@ -33,6 +33,18 @@
         </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>

views/license/edit.twig

@@ -33,6 +33,18 @@
         </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>

views/license/view.twig

@@ -22,8 +22,10 @@
     <thead>
       <tr>
         <th>Product name</th>
-        <th>License Key</th>
+        <th>License key</th>
         <th>Manufacturer</th>
+        <th>Seats used</th>
+        <th>Total seats</th>
         <th>Seller</th>
         <th>Purchase date</th>
       </tr>
@@ -33,6 +35,8 @@
         <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>

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 %}