Version bump to v0.2.1

assets/styles/gargoyle.scss

@@ -86,7 +86,8 @@ input[type="submit"].button-primary{
   }
 }
 
-#item-header{
+#item-header,
+#license-header{
   margin-bottom: 25px;
 
   h1,
@@ -96,7 +97,9 @@ input[type="submit"].button-primary{
   }
 
   .item-added-date,
-  .item-updated-date{
+  .item-updated-date,
+  .license-added-date,
+  .license-updated-date{
     margin-bottom: 5px;
     color: #666;
     font-size: 1.6rem;

config/default.json

@@ -6,5 +6,10 @@
   "database": {
     "driver": "sqlite",
     "connection_string": "data/overseer.db"
+  },
+  "redis": {
+    "host": "192.168.1.10",
+    "port": 6379,
+    "number": "0"
   }
 }

index.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const session = require('express-session');
+const RedisStore = require('connect-redis')(session);
 // const flash = require('express-flasher');
 
 // instantiate new express.js app
@@ -14,8 +15,14 @@ const config = require('config');
   });
 })();
 
-// initialize express.js session
+// 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',
@@ -40,6 +47,7 @@ app.use(express.static('public'));
 // load route handlers
 const homeRoutes = require('./src/routes/home');
 const itemRoutes = require('./src/routes/item');
+const licenseRoutes = require('./src/routes/license');
 
 // register route handlers
 app.get('/', homeRoutes.getIndex);
@@ -48,6 +56,11 @@ 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);
 
 // start app
 app.listen(config.get('server.port'), config.get('server.address'), () => {

package-lock.json

@@ -1,21 +1,23 @@
 {
   "name": "overseer",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "overseer",
-      "version": "0.1.5",
+      "version": "0.2.1",
       "license": "BSD-2-Clause",
       "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",
         "sqlite3": "^5.1.2",
         "twig": "^1.15.4"
@@ -258,6 +260,59 @@
         "node": ">=10"
       }
     },
+    "node_modules/@redis/bloom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.1.0.tgz",
+      "integrity": "sha512-9QovlxmpRtvxVbN0UBcv8WfdSMudNZZTFqCsnBszcQXqaZb/TVe30ScgGEO7u1EAIacTPAo7/oCYjYAxiHLanQ==",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/client": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.3.1.tgz",
+      "integrity": "sha512-FKEHpOu7Q4+cuM6VWjA54988K5jkqOxvhvj2hEGSx086lvKwXyjzO7Lya7hcirZ0/Db8FLBJN7UXsJuyoNWPJg==",
+      "dependencies": {
+        "cluster-key-slot": "1.1.1",
+        "generic-pool": "3.9.0",
+        "yallist": "4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@redis/graph": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
+      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/json": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
+      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/search": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.0.tgz",
+      "integrity": "sha512-NyFZEVnxIJEybpy+YskjgOJRNsfTYqaPbK/Buv6W2kmFNaRk85JiqjJZA5QkRmWvGbyQYwoO5QfDi2wHskKrQQ==",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/time-series": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.3.tgz",
+      "integrity": "sha512-OFp0q4SGrTH0Mruf6oFsHGea58u8vS/iI5+NpYdicaM+7BgqBZH8FFvNZ8rYYLrUO/QRqMq72NpXmxLVNcdmjA==",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -738,6 +793,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/cluster-key-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.1.tgz",
+      "integrity": "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -797,6 +860,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/connect-redis": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/connect-redis/-/connect-redis-6.1.3.tgz",
+      "integrity": "sha512-aaNluLlAn/3JPxRwdzw7lhvEoU6Enb+d83xnokUNhC9dktqBoawKWL+WuxinxvBLTz6q9vReTnUDnUslaz74aw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -1982,6 +2053,14 @@
         "is-property": "^1.0.2"
       }
     },
+    "node_modules/generic-pool": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
+      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
@@ -4711,6 +4790,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/redis": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/redis/-/redis-4.4.0.tgz",
+      "integrity": "sha512-tQyFG6O9iewLxxHYRyirJNklhe2QI7M/0o8q0jk7D9Z/Cxh/7oZrQyHKyjWz0TkkCls8ool/xvhL9K8zRnkaYQ==",
+      "dependencies": {
+        "@redis/bloom": "1.1.0",
+        "@redis/client": "1.3.1",
+        "@redis/graph": "1.1.0",
+        "@redis/json": "1.0.4",
+        "@redis/search": "1.1.0",
+        "@redis/time-series": "1.0.3"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
@@ -6062,6 +6154,46 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@redis/bloom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.1.0.tgz",
+      "integrity": "sha512-9QovlxmpRtvxVbN0UBcv8WfdSMudNZZTFqCsnBszcQXqaZb/TVe30ScgGEO7u1EAIacTPAo7/oCYjYAxiHLanQ==",
+      "requires": {}
+    },
+    "@redis/client": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.3.1.tgz",
+      "integrity": "sha512-FKEHpOu7Q4+cuM6VWjA54988K5jkqOxvhvj2hEGSx086lvKwXyjzO7Lya7hcirZ0/Db8FLBJN7UXsJuyoNWPJg==",
+      "requires": {
+        "cluster-key-slot": "1.1.1",
+        "generic-pool": "3.9.0",
+        "yallist": "4.0.0"
+      }
+    },
+    "@redis/graph": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
+      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
+      "requires": {}
+    },
+    "@redis/json": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
+      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
+      "requires": {}
+    },
+    "@redis/search": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.0.tgz",
+      "integrity": "sha512-NyFZEVnxIJEybpy+YskjgOJRNsfTYqaPbK/Buv6W2kmFNaRk85JiqjJZA5QkRmWvGbyQYwoO5QfDi2wHskKrQQ==",
+      "requires": {}
+    },
+    "@redis/time-series": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.3.tgz",
+      "integrity": "sha512-OFp0q4SGrTH0Mruf6oFsHGea58u8vS/iI5+NpYdicaM+7BgqBZH8FFvNZ8rYYLrUO/QRqMq72NpXmxLVNcdmjA==",
+      "requires": {}
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -6442,6 +6574,11 @@
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "optional": true
     },
+    "cluster-key-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.1.tgz",
+      "integrity": "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -6486,6 +6623,11 @@
         "json5": "^2.2.1"
       }
     },
+    "connect-redis": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/connect-redis/-/connect-redis-6.1.3.tgz",
+      "integrity": "sha512-aaNluLlAn/3JPxRwdzw7lhvEoU6Enb+d83xnokUNhC9dktqBoawKWL+WuxinxvBLTz6q9vReTnUDnUslaz74aw=="
+    },
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -7393,6 +7535,11 @@
         "is-property": "^1.0.2"
       }
     },
+    "generic-pool": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
+      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g=="
+    },
     "get-intrinsic": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
@@ -9468,6 +9615,19 @@
         "unpipe": "1.0.0"
       }
     },
+    "redis": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/redis/-/redis-4.4.0.tgz",
+      "integrity": "sha512-tQyFG6O9iewLxxHYRyirJNklhe2QI7M/0o8q0jk7D9Z/Cxh/7oZrQyHKyjWz0TkkCls8ool/xvhL9K8zRnkaYQ==",
+      "requires": {
+        "@redis/bloom": "1.1.0",
+        "@redis/client": "1.3.1",
+        "@redis/graph": "1.1.0",
+        "@redis/json": "1.0.4",
+        "@redis/search": "1.1.0",
+        "@redis/time-series": "1.0.3"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overseer",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Self-hosted inventory tracker",
   "main": "index.js",
   "scripts": {
@@ -40,12 +40,14 @@
   },
   "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",
     "sqlite3": "^5.1.2",
     "twig": "^1.15.4"

src/models/index.js

@@ -9,6 +9,7 @@ db.Sequelize = Sequelize;
 db.sequelize = sequelize;
 
 db.items = require('./item.js')(sequelize, Sequelize);
+db.licenses = require('./license.js')(sequelize, Sequelize);
 
 module.exports = db;
 

src/models/license.js

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

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 (typeof redisConfig.get('username') !== 'undefined') {
+    redisUrl += redisConfig.get('username');
+  }
+  // add the user password if defined
+  if (typeof redisConfig.get('password') !== 'undefined') {
+    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 (typeof redisConfig.get('number') !== 'undefined') {
+    redisUrl += redisConfig.get('number');
+  }
+
+  const { createClient } = require("redis");
+  let redisClient = createClient({
+    url: redisUrl,
+    legacyMode: true,
+  });
+  redisClient.connect().catch(console.error);
+
+  return redisClient;
+};

src/routes/home.js

@@ -1,8 +1,10 @@
 const db = require('../models');
 const Item = db.items;
+const License = db.licenses;
 
 // GET - /
 exports.getIndex = async function(req, res) {
+  // fetch inventory items from database
   const items = await Item.findAll({
     limit: 10,
     order: [
@@ -10,9 +12,18 @@ exports.getIndex = async function(req, res) {
     ],
   });
 
+  // fetch licenses from database
+  const licenses = await License.findAll({
+    limit: 10,
+    order: [
+      ['updatedAt', 'DESC'],
+    ],
+  });
+
   // req.flash('info', 'This is a test flash message.');
 
   res.render('index.twig', {
     inventory: items,
+    licenses: licenses,
   });
 };

src/routes/license.js

@@ -0,0 +1,74 @@
+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,
+    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.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);
+};

views/index.twig

@@ -28,32 +28,51 @@
 <hr>
 
 <section class="row">
-  <div class="columns twelve">
+  <div class="columns six">
-    <h3>Recently updated records:</h3>
+    <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>
+
+  <div class="columns six">
+    <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">
-  <table class="columns twelve">
-    <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>
-</section>
-
 {% endblock %}

views/layout.twig

@@ -20,6 +20,7 @@
         <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>
   </nav>

views/license/add.twig

@@ -0,0 +1,53 @@
+{% 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_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,53 @@
+{% 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_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,43 @@
+{% 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>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.purchasedFrom ? license.purchasedFrom : 'N/a' }}</td>
+        <td>{{ license.purchasedAt | date("m/d/Y h:i:s A") }}</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+{% endblock %}